Imagens:
Nas imagens podemos ver o shield ethernet já conectado ao arduino e um cartão micro SD fora e depois ja no slot de encaixe do próprio SD.
HTML - Noçoes básicas
Para total entendimento o usuário deverá está familiarizado com a linguagem HTML, linguagem essa de muito fácil compreensão.
Logo Abaixo estruturei um pequeno e simples site, o usuário poderá criar a página em html em um simples bloco de notas.
<!DOCTYPE html>
<html>
<head>
<title> Pag. Arduino </title>
<head>
<body>
<h1>Hello World - from Arduino</h1>
<p> A web page from the ArduinoServer</p>
</body>
</html>
OK! Agora vamos a explicação da estrutura HMTL. A linguagem de criação de site HMTL tem como características o uso de tag's, como <head> ou <p>, essa tag's é que informa como aquele site irá aparecer na tela do usuário, desta forma devemos deste antes saber como estruturar essas tag's. E como vc percebeu os comandos ou tag's deverão está dentro do sinais: "<" e ">".
Principais TAG's em html:
Comandos HTML
|
Descrição
|
<HTML> </HTML>
|
Início e fim de um documento HTML
|
<HEAD> </HEAD>
|
Início e fim do cabeçalho
|
<TITLE> </TITLE>
|
Início e fim do título que aparece no browser
|
<BODY> </BODY>
|
Início e fim do corpo HTML
|
<H1> </H1>
|
Tamanho dos caracteres podendo varia de h1 até h6
|
<P> </P>
|
Início e fim de um parágrafo
|
<B> </B>
|
Texto em negrito
|
<I> </I>
|
Texto em itálico
|
<CENTER> </CENTER>
|
Centralização de um texto na página
|
<HR> </HR>
|
Linha horizontal
|
<IMG> </IMG>
|
Inserir imagem
|
Código:
/***************************************************************
Tutorial Ethernet Shield
Objetivo: Uso do cartão micro SD para hospedagem de site HTML
Autor: Felipe Souza Amaral
***************************************************************/
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,0,2); // IP address
EthernetServer server(80); // conexão pela porta 80
File webFile;
void setup()
{
Ethernet.begin(mac, ip);
server.begin();
Serial.begin(9600);
// inicialização SD card
Serial.println("Carregando SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card FAIL!");
return;
}
Serial.println("SUCCESS - SD card carregado.");
// arquivo index.htm
if (!SD.exists("index.htm")) {
Serial.println("ERROR - FAIL index.htm file!");
return; // sem localização do cartão SD
}
Serial.println("SUCCESS - arquivo index.htm .");
}
void loop()
{
EthernetClient client = server.available(); // tentativa de conexão com o client
if (client) {
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (c == '\n' && currentLineIsBlank) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
webFile = SD.open("index.htm");
if (webFile) {
while(webFile.available()) {
client.write(webFile.read());
}
webFile.close();
}
break;
}
if (c == '\n') {
currentLineIsBlank = true;
}
else if (c != '\r') {
currentLineIsBlank = false;
}
}
}
delay(1);
client.stop();
}
}
Para correto funcionamento desse tutorial repare que declaramos a biblioteca <SD.h> no sketch do programa do arduino. Repare também que na função setup testamos a condição de leitura e varredura do cartão SD e também do arquivo index.htm, se algo ocorrer de forma errada será impresso na tela do serial monitor o erro ocorrido.
amigo, ótimo tutorial, meus parabéns...
ResponderExcluirmas o meu aqui nao ta abrindo o index.html de dentro do cartao,
entendo um pouco de css e html5, fiz o arquivo corretamente, chamado index e salvei em formato .html, mesmo assim da erro "ERROR - FAIL index.htm file!"
pode me ajudar?
vc esta usando qual arduino? uno ou mega?
ExcluirVocê nomeou o arquivo provavelmente como HTML enquanto o certo é htm apenas sem o L
ExcluirELGNO, o caso desse erro nem era o renomeio do index. O caso que nesse tutorial e feito pra ser usado no arduino UNO e nosso amigo usou no MEGA, sendo assim o pino para acionar o cartao nao era o 4 e sim o 8 (se nao me engano). Por isso do erro toda hora.
Excluirahh blz, espero meu retorno na outra postagem
ExcluirParabéns pelo tutorial!! muito bom, me ajudou muito...
ResponderExcluirIndo um pouco mais além, estou desenvolvendo um datalogger e armazenando os valores de um sensor em um txt no mesmo cartão SD, vc sabe me dizer como faço para acessar os valores do cartão e apresentar no HTML ? Obrigado.
Gostaria de saber se ao copilar o codigo era para abrir o index.htm pois aqui ele nao abre. E é para alterar o mac byte do codigo tambem ne ?
ResponderExcluirestou urgentemente precisando de colocar dados em web para um projeto de PCC ,devera apresentar dia 10 desse mes ,falta 1 semana.
Grato , VIctor
Gostaria de saber se ao copilar o codigo era para abrir o index.htm pois aqui ele nao abre. E é para alterar o mac byte do codigo tambem ne ?
ResponderExcluirestou urgentemente precisando de colocar dados em web para um projeto de PCC ,devera apresentar dia 10 desse mes ,falta 1 semana.
Grato , VIctor
Ola Victor!!Sim, era pra quando vc abrir o arquivo index.htm(com icone do seu browser) , surgi a pagina com a marcação html.
ExcluirMuito bom tutorial... Queria saber se eu colocar a programação no cartão eu posso trabalhar com o shield offline?
ResponderExcluirObrigado
Muito Obrigado!! E sim, você pode trabalhar com o shield ethernet "offline", ou seja, em uma LAN simples entre computadores.
ExcluirEste comentário foi removido pelo autor.
ExcluirOK, vou colocar pra testar agora... Obrigado
ExcluirEste comentário foi removido pelo autor.
Excluirolá tenho uma duvida... é possivel apontar para um link externo ... exemplo fazer o index redirecionar para google ?
ResponderExcluir