[DIGITE O NOME DA EMPRESA]

Apostila - Servidor Web com Arduino

Controle e monitoramento

Básico e Avançado
Sumário
Servidor Web Arduino com Ethernet Shield ........................................................................... 2
Servidor Web Arduino Básico ................................................................................................... 3
Estrutura da página Web (HTML) ............................................................................................ 9
Servidor Web Arduino SD Card ............................................................................................. 12

1
1. Servidor Web Arduino com Ethernet Shield
Este tutorial de várias partes mostra como configurar um Arduino com
Ethernet blindado como um servidor web. Os servidores web neste tutorial são
usados para exibir páginas da web que podem ser acessadas a partir de um
navegador da Web em execução em qualquer computador conectado à mesma
rede que o Arduino. Algumas das páginas do servidor web Arduino permitem o
acesso ao hardware do Arduino - isso permite que o hardware seja controlado
(por exemplo, ligar e desligar um LED da página da Web) e monitorado (por
exemplo, ler o estado de um switch e exibi-lo em uma página da Web ). O tutorial
ensina o que é necessário para construir um servidor web, incluindo toda a
tecnologia, como HTTP, HTML, CSS, JavaScript, AJAX, etc Ele começa com os
conceitos básicos de hospedagem de uma simples página web sobre o Arduino
e avança passo a passo, Passo a partir daí.

Hardware necessário

Componentes de Hardware
O hardware necessário para seguir esta série de tutoriais é:

 Uma placa Arduino, como a Arduino Uno

 Uma Ethernet shield Arduino
 Um cabo Ethernet, utilizado para conectar a um roteador de rede
 Um cabo USB para alimentar e programar o Arduino
 Um cartão micro SD, e. Um cartão de 2Gb compatível com SPI - apenas
necessário para alguns dos servidores
 Um computador com um slot para cartão micro SD ou um leitor de cartões
com slot para cartão micro SD - necessário apenas para servidores de
cartões SD

Haverá componentes adicionais necessários como listados em cada tutorial,

como LEDs, resistores, switches, etc e um breadboard e fio kit para a construção
dos circuitos.

Configuração do hardware

Antes de começar: Conecte a blindagem Ethernet no Arduino, conecte-o

à rede e teste-o. Teste o cartão SD na blindagem Ethernet.

2
2. Servidor Web Arduino Básico
Um servidor web muito básico que serve uma única página da web
usando o protetor Ethernet Arduino. Um cartão SD não é usado neste exemplo,
pois a página web faz parte do esboço do Arduino.

Servindo uma Página da Web do Arduino

O desenho do Arduino a seguir permitirá que o Arduino com shield
Ethernet sirva uma única página da Web que pode ser exibida em um
navegador da Web.
/*--------------------------------------------------------------
Program: eth_websrv_page

Description: Arduino web server that serves up a basic web

page. Does not use the SD card.

Hardware: Arduino Uno and official Arduino Ethernet

shield. Should work with other Arduinos and
compatible Ethernet shields.

Software: Developed using Arduino 1.0.3 software

Should be compatible with Arduino 1.0 +

References: - WebServer example by David A. Mellis and

modified by Tom Igoe
- Ethernet library documentation:
http://arduino.cc/en/Reference/Ethernet

Date: 7 January 2013

Author: W.A. Smith, http://startingelectronics.org

--------------------------------------------------------------*/

#include <SPI.h>
#include <Ethernet.h>

// MAC address from Ethernet shield sticker under board

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 20); // IP address, may need to change depending on
network

3
EthernetServer server(80); // create a server at port 80

void setup()
{
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
}

void loop()
{
EthernetClient client = server.available(); // try to get client

if (client) { // got client?

boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from
client
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
// send web page
client.println("<!DOCTYPE html>");
client.println("<html>");
client.println("<head>");
client.println("<title>Arduino Web Page</title>");
client.println("</head>");
client.println("<body>");
client.println("<h1>Hello from Arduino!</h1>");
client.println("<p>A web page from the Arduino
server</p>");
client.println("</body>");
client.println("</html>");
break;
}

4
 // every line of text received from the client ends with
\r\n
if (c == '\n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}

Nota importante!

Se um cartão SD não inicializado é deixado no soquete do cartão SD

do escudo, ele pode causar problemas com o código no esboço que está
acessando o chip Ethernet. Isso pode causar sintomas como o esboço
executando uma ou duas vezes e, em seguida, desligar. Isso ocorre porque
o chip Ethernet e o cartão SD são acessados pelo Arduino usando o mesmo
barramento SPI. Se o cartão SD não estiver sendo usado com um aplicativo
Ethernet, remova-o do soquete ou adicione o seguinte código para
desabilitar o cartão SD:
void setup()
{
// disable the SD card by switching pin 4 high
// not using the SD card in this program, but if an SD card is left in
the socket,
// it may cause a problem with accessing the Ethernet chip, unless
disabled
pinMode(4, OUTPUT);
digitalWrite(4, HIGH);

// other initialization code goes here...

}

5
Usando o Sketch

Copie o Sketch acima e cole-o no IDE do Arduino. Altere o endereço

MAC no esboço para coincidir com os números na etiqueta na parte inferior da
blindagem Ethernet. Altere o endereço IP no Sketch para corresponder ao
intervalo de endereços IP da sua rede. Seu hardware deve ser configurado como
descrito na parte 1 deste tutorial. Carregue o Sketch no Arduino e, em seguida,
abra um navegador da Web em um computador conectado à mesma rede que o
Arduino. Navegue para o Arduino digitando o endereço IP do Arduino no campo
URL do navegador, p. 10.0.0.20 no esboço acima.

O navegador deve exibir uma página da Web como mostrado abaixo.

Solução de Problemas
Redefinição
Se você não conseguiu se conectar ao Arduino, tente redefini-lo
pressionando o botão de reinicialização na blindagem Ethernet e, em seguida,
navegue para o servidor web novamente.
Endereço IP e intervalo de endereços
Certifique-se de que definiu o endereço IP correto do Arduino para o
intervalo de endereços da sua rede. Os três primeiros números do endereço IP
devem corresponder à sua rede. O último número deve ser exclusivo - ou seja,
deve ser o único dispositivo na rede com esse número.
Gateway e Máscara de Sub-rede
Experimente especificar o gateway de rede e a máscara de sub-rede no
esboço se ainda houver problemas de conexão de rede. Você precisará alterar
os endereços no código abaixo para corresponder à sua rede. Adicione o
gateway e a sub-rede sob o endereço MAC no sketch:
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
// the router's gateway address:
byte gateway[] = { 10, 0, 0, 1 };

6
// the subnet:
byte subnet[] = { 255, 255, 0, 0 };

E, em seguida, inicializar o dispositivo Ethernet com essas configurações na

parte setup () do sketch:
Ethernet.begin(mac, ip, gateway, subnet);

Cabo Ethernet

Ao conectar-se à rede por meio de um roteador Ethernet / hub / switch,

um cabo Ethernet com fio um-para-um deve ser usado para conectar o Arduino.
Não use um cabo cruzado.

Servidor Web Básico Explicado

Leia os comentários no sketch acima para ver que linhas específicas de
código fazem. Essa explicação mostra qual solicitação o servidor deve responder
e quais dados ele deve enviar de volta.

Solicitação de cliente
Quando você navega para o endereço IP do servidor Arduino, o
navegador da Web (cliente) enviará uma solicitação para o servidor, como a
mostrada abaixo.
GET / HTTP/1.1\r\n
Host: 10.0.0.20\r\n
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:17.0) Gecko/20100101
Firefox/17.0\r\n
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8\r\n
Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3\r\n
Accept-Encoding: gzip, deflate\r\n
Connection: keep-alive\r\n
\r\n

As informações na solicitação serão diferentes, dependendo do navegador e do

sistema operacional do qual a solicitação é enviada. Os caracteres \ r \ n que
você vê no final de cada linha de texto na solicitação são caracteres não visíveis
(caracteres não imprimíveis). \ R é o caractere de retorno de carro e \ n é o
caractere de avanço de linha (ou caractere de nova linha). A última linha do
pedido é simplesmente \ r \ n sem e texto precedente. Esta é a linha em branco
que o sketch do Arduino verifica antes de enviar uma resposta para o navegador
da Web do cliente. Em outras palavras, o esboço lê cada caractere da solicitação
acima e sabe quando o fim da solicitação foi alcançado porque ele encontra a
linha em branco.

7
Resposta do servidor

Depois de receber a solicitação de uma página da Web do cliente, o

servidor primeiro envia uma resposta HTTP padrão e, em seguida, a própria
página da Web. A resposta enviada pelo Arduino é a seguinte:
HTTP/1.1 200 OK\r\n
Content-Type: text/html\r\n
Connection: close\r\n
\r\n

Mais uma vez, os caracteres não visíveis \ r \ n são mostrados na resposta acima.
A função println () no esboço adiciona automaticamente os caracteres \ r \ n ao
final de cada linha. A função println () vazia no final da resposta HTTP
simplesmente envia \ r \ n sem texto à frente.

A solicitação e resposta acima são parte do HTTP (Hypertext Transfer Protocol).

Página da web
Depois que o servidor enviou a resposta HTTP, ele envia a página da web
real que é exibida no navegador. A página da web consiste em texto com tags
HTML. Você não vê as tags no navegador, pois essas tags são interpretadas
pelo navegador. Para ver o código fonte HTML real, no navegador, clique com o
botão direito do mouse na página do servidor Arduino e clique em Exibir fonte da
página. As tags de marcação HTML reais são mostradas abaixo.

HTML e outros códigos da página web são explicados na próxima parte

deste tutorial.

8
3. Estrutura da página Web (HTML)
Os servidores web do Arduino neste tutorial são usados para servir
páginas HTML, por isso faz sentido nesta fase descobrir mais sobre o HTML,
que é o que esta parte do tutorial cobre.

Estrutura HTML e Páginas

A estrutura básica de uma página HTML é mostrada abaixo (este

código é do tutorial anterior).

<!DOCTYPE html>
<html>
<head>
<title>Arduino Web Page</title>
</head>
<body>
<h1>Hello from Arduino!</h1>
<p>A web page from the Arduino server</p>
</body>
</html>

Tags HTML

O código de marcação HTML consiste em tags entre colchetes angulares: <>

O nome da tag html é colocado entre os colchetes de abertura e fechamento.

A maioria das tags terá uma tag de abertura e fechamento. O texto ou recurso
colocado entre o conjunto de etiquetas de abertura e de fechamento será
formatado pelo navegador de acordo com o tipo de tag. A tag de fechamento é
exatamente a mesma que a tag de abertura, exceto que a tag de fechamento
tem uma barra diagonal após o ângulo de abertura.

Por exemplo.: <P> Texto de parágrafo ... </ p>

- aqui a tag de parágrafo (<p>) é usada para dizer ao navegador que o texto
entre a abertura <p> e o fechamento </ p> é um parágrafo de texto. O navegador
irá formatá-lo adequadamente.

Um exemplo de uma tag que não tem uma tag de fechamento é a quebra de
linha que se move para a próxima linha na página da Web. Isso é escrito como
<br> (seguindo o padrão HTML) ou <br /> (seguindo o padrão XHTML).

9
Aprender HTML é sobre como aprender tags HTML - quais tags estão
disponíveis, o que elas fazem e quais tags podem ser inseridas entre quais
outras tags.

Estrutura da página Web

Páginas da web consistem em duas seções principais - uma seção de

cabeça e uma seção de corpo. Essas duas seções são colocadas entre as tags
html de abertura e fechamento, como mostrado aqui.
<html>
<head>
</head>
<body>
</body>
</html>

As coisas que devem ser visíveis na página da Web ou se aplicam ao conteúdo

da página da Web são colocadas entre as tags de corpo.

Coisas que não aparecem na página são colocadas entre as marcas principais,
p. O texto para o título da página que aparece na barra superior da janela do
navegador da Web. Também arquivos como folhas de estilo podem ser incluídos
aqui.

Tags HTML Básicas

Já vimos a tag HTML do parágrafo - <p>, e as tags invisíveis que compõem

seções de uma página HTML - <html>, <head> e <body>. Abaixo estão duas
outras tags HTML que foram usadas no primeiro exemplo de servidor Arduino.

Tags adicionais serão introduzidas neste tutorial à medida que forem usadas.

Tag de Cabeçalho

As etiquetas de título criam um texto de título normalmente feito em negrito e

maior do que o texto do parágrafo pelo navegador. Em nosso primeiro servidor
Arduino, o rótulo 1 tag foi usado - <h1>. Este é um título de nível superior e tem
uma tag de fechamento correspondente. Todo o texto colocado entre <h1> e </
h1> é marcado como o nível de cabeçalho 1.

O texto do subtítulo é normalmente menor do que o texto h1 e é designado por

h2, h3, h4, etc. (<h2>, <h3>, <h4>, etc.)

O cabeçalho principal h1 é usado para marcar um título de capítulo, por exemplo

- p. Capítulo 1, o h2 marca um sub-título, p. Rubrica 1.1, 1.2, 2.1, etc., h3 marca
um subtítulo de um cabeçalho h2, p. 1.1.1 e 1.1.2, etc.

10
Cada nível de título adicional será renderizado em texto menor pelo navegador.

Tag do título

A tag de título, <title>, é colocada na seção <head> da página HTML e exibirá

texto na barra superior do navegador da Web. Essa tag destina-se a exibir o
título da página da web.

Exemplo de servidor Web

O sketch de exemplo do WebServer encontrado no software Arduino

(encontrado em Arquivo → Exemplos → Ethernet → WebServer - já abordado
no artigo Conectando e Testando o Arduino Ethernet Shield) na verdade não
está de acordo com a estrutura da página HTML inteira, mas coloca o texto
diretamente Entre as tags <html> de abertura e fechamento.

No exemplo do WebServer, cada linha é terminada com uma quebra de linha

para que a próxima linha seja mostrada abaixo da linha anterior no navegador.
A imagem a seguir mostra a saída do esboço do WebServer no navegador eo
código HTML usado para produzir o texto de saída.

Aprendendo HTML

As tags HTML serão introduzidas conforme necessário neste tutorial, mas se

você quiser saber mais sobre HTML, pesquise na Internet ou pegue um livro
em HTML.

11
4. Servidor Web Arduino SD Card
O Arduino, o Arduino Ethernet shield eo cartão micro SD são usados para fazer
um servidor web que aloja uma página web no cartão SD. Quando um navegador
solicita uma página da Web a partir do servidor da Web Arduino, o Arduino
buscará a página da web a partir do cartão SD.
Criando a página da Web

Como a página da Web deve ser armazenada no cartão SD, ela deve primeiro
ser criada usando um editor de texto e, em seguida, copiada para o cartão SD.

Editor de páginas da Web

Um editor de texto como Geany pode ser usado - ele está disponível para
download para o Windows e estará nos repositórios para a maioria das
distribuições Linux baseadas no Ubuntu. O Geany tem destaque de sintaxe e
fechará automaticamente tags HTML para você, o que torna a edição de páginas
da Web mais fácil. É possível usar qualquer outro editor de texto, mesmo
Notepad do Windows.

Página da web Crie a seguinte página da Web em um editor de texto. Quando

você salva o arquivo de texto, dê-lhe o nome: index.htm
<!DOCTYPE html>
<html>
<head>
<title>Arduino SD Card Web Page</title>
</head>
<body>
<h1>Hello from the Arduino SD Card!</h1>
<p>A web page from the Arduino SD card server.</p>
</body>
</html>

Nada de novo aqui, é o mesmo que a página web do primeiro servidor web neste
tutorial com apenas o texto alterado. Teste esta página web abrindo-a em um
navegador da Web.

Copiando a Página da Web

Você precisará de um slot de cartão micro SD em seu computador ou um leitor

de cartão que é capaz de ler e escrever um cartão micro SD. Insira o cartão micro
SD no slot do computador ou leitor de cartão que está conectado ao computador

12
e copie o arquivo index.htm para o cartão micro SD. Agora conecte o cartão SD
no slot para cartão micro SD na blindagem Ethernet.

Servidor Web de cartão SD

Hardware

Agora você deve ter o cartão micro SD com a página da Web copiada para ele
inserido no slot do cartão na blindagem Ethernet Arduino. A blindagem Ethernet
deve ser conectada a um Arduino compatível e a um cabo Ethernet conectado à
rede. O protetor Arduino / Ethernet deve ser alimentado por um cabo USB.

Arduino Sketch

O esboço do Arduino que obtém a página da Web a partir do cartão SD e envia

para o navegador é mostrado abaixo:
/*--------------------------------------------------------------
Program: eth_websrv_SD

Description: Arduino web server that serves up a basic web

page. The web page is stored on the SD card.

Hardware: Arduino Uno and official Arduino Ethernet

shield. Should work with other Arduinos and
compatible Ethernet shields.
2Gb micro SD card formatted FAT16

Software: Developed using Arduino 1.0.3 software

Should be compatible with Arduino 1.0 +
SD card contains web page called index.htm

References: - WebServer example by David A. Mellis and

modified by Tom Igoe
- SD card examples by David A. Mellis and
Tom Igoe
- Ethernet library documentation:
http://arduino.cc/en/Reference/Ethernet
- SD Card library documentation:
http://arduino.cc/en/Reference/SD

Date: 10 January 2013

13
 Author: W.A. Smith, http://startingelectronics.org
--------------------------------------------------------------*/

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>

// MAC address from Ethernet shield sticker under board

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 20); // IP address, may need to change depending on
network
EthernetServer server(80); // create a server at port 80

File webFile;

void setup()
{
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.begin(9600); // for debugging

// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{

14
 EthernetClient client = server.available(); // try to get client

if (client) { // got client?

boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from
client
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
// send web page
webFile = SD.open("index.htm"); // open web
page file
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page
to client
}
webFile.close();
}
break;
}
// every line of text received from the client ends with
\r\n
if (c == '\n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())

15
 delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}

Usando o sketch

Copie o sketch acima e cole-o no IDE do Arduino. Carregue o esboço para o

Arduino e, em seguida, navegue até o endereço IP definido no esboço com seu
navegador da Web. A página da Web que você criou deve ser exibida no
navegador conforme é servida pelo servidor da Web do cartão SD Arduino.

Detectando index.htm

Se o sketch anterior neste tutorial funcionou, então a única coisa que pode dar
errado é com a inicialização do cartão SD e encontrar o arquivo index.htm no
cartão. Se o arquivo não estiver no cartão ou não tiver o nome exato index.htm,
o servidor não será capaz de exibir a página da Web.

Abra a janela do monitor serial do Arduino para ver as informações de

diagnóstico do cartão SD.

Sketch Explicação

Este sketch é uma versão modificada do sketch eth_websrv_page da parte

Basic Arduino Web Server desta apostila.

Código Adicional

O sketch agora inicializa o cartão SD na função setup () e envia informações de

diagnóstico para fora da porta serial que pode ser visualizada na janela do
monitor serial do Arduino.

Em vez de enviar a página da Web linha a linha a partir do código como no sketch
eth_websrv_page, este novo esboço agora abre o arquivo index.htm do cartão
SD e envia o conteúdo para o cliente da web (o navegador da Web).

16