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.