quinta-feira, 29 de agosto de 2013

Tutorial Shield Ethernet Arduino - Parte 2: HTML pelo cartão micro SD

    Continuando nosso estudo sobre shield ethernet iremos hoje explorar uma vantagem dessa ferramenta, o uso do cartão micro SD pra armazenar sites em formato HTML, você pode programar qualquer tipo de linguagem e armazenar no cartão.

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

    Como o objetivo do estudo não é a estrutura HTML não irei aprofundar muito no assunto. Agora iremos utilizar o cartão micro SD para hospedar a pagina HMTL 
    Pegue o código da página, que está logo acima, e salve em um bloco de notas com o nome index.htm e coloque no cartão micro SD.
    Logo após coloque o cartão no slot do shield ethernet.

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.





15 comentários:

  1. amigo, ótimo tutorial, meus parabéns...
    mas 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?

    ResponderExcluir
    Respostas
    1. vc esta usando qual arduino? uno ou mega?

      Excluir
    2. Você nomeou o arquivo provavelmente como HTML enquanto o certo é htm apenas sem o L

      Excluir
    3. ELGNO, 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.

      Excluir
    4. ahh blz, espero meu retorno na outra postagem

      Excluir
  2. Parabéns pelo tutorial!! muito bom, me ajudou muito...
    Indo 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.

    ResponderExcluir
  3. 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 ?

    estou urgentemente precisando de colocar dados em web para um projeto de PCC ,devera apresentar dia 10 desse mes ,falta 1 semana.

    Grato , VIctor

    ResponderExcluir
  4. 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 ?

    estou urgentemente precisando de colocar dados em web para um projeto de PCC ,devera apresentar dia 10 desse mes ,falta 1 semana.

    Grato , VIctor

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
  5. Muito bom tutorial... Queria saber se eu colocar a programação no cartão eu posso trabalhar com o shield offline?
    Obrigado

    ResponderExcluir
    Respostas
    1. Muito Obrigado!! E sim, você pode trabalhar com o shield ethernet "offline", ou seja, em uma LAN simples entre computadores.

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
    3. OK, vou colocar pra testar agora... Obrigado

      Excluir
    4. Este comentário foi removido pelo autor.

      Excluir
  6. olá tenho uma duvida... é possivel apontar para um link externo ... exemplo fazer o index redirecionar para google ?

    ResponderExcluir