Projeto
39 - Interface Web com arduino
Olá pessoal, neste projeto iremos aprender a criar uma
interface web simples utilizando o arduino. Para isso você irá precisar de um
potenciômetro e um Shield Ethernet para que seja possível realizar a conexão
com a rede de internet. O projeto é de fácil compreensão deixando de forma
clara e objeta com vários comentários nas linhas do código. Então vamos ao trabalho !!
Os códigos serão todos comentados para melhor entendimento,
podendo ser retirados após a compreensão de cada linha. Bom trabalho !!!
Componentes
necessários
1 Protobord
1 Potenciômetro de 10KΩ (Ou outro equivalente)
1 Shield Ethernet
Fios jumper
Download da página web
Faça
o download do arquivo da página web neste link https://onedrive.live.com/?cid=F877FDED1DE63FAA&id=F877FDED1DE63FAA%21122 (OneDrive).
Sigas os
passos a seguir:
1) Faça o download do
arquivo “index.htm”.
2) Após feito o download,
copie e cole o arquivo em um micro SD – formate o SD antes de copiar o arquivo.
3) Insira o cartão no slot
acoplado ao Shield Ethernet.
4) Com o arduino já conectado
à porta USB de seu computador e o Shield ao cabo de rede, copie e cole o código abaixo para a IDE e mude o
IP conforme sua rede, após isso transfira - o para seu arduino.
5) Abra seu browser e
digite o IP que você definiu no código e dê um enter.
6) Uma página web será
exibida com uma interface recendo os valores do potenciômetro.
7) Gire o potenciômetro e
você irá ver o ponteiro se movimentar de acordo o valor do potenciômetro.
Conectando os componentes
Código do
projeto
// Projeto
39 - Interface Web com arduino
#include
<SPI.h>
#include
<Ethernet.h>
#include <SD.h>
// Tamanho do buffer utilizado para
capturar os pedidos HTTP
#define REQ_BUF_SZ 50
// Setando Endereço MAC e IP para a
placa Ethernet
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF,
0xFE, 0xED };
IPAddress ip(192, 168, 2, 120); //
Configurando o endereço IP (mudar conforme sua rede)
EthernetServer server(80); // Criar um servidor na porta 80
File webFile; // Arquivo da página web no
cartão SD
char HTTP_req[REQ_BUF_SZ] = {0}; //
Armazena o buffer requerido a página web
char
req_index = 0; // Índice no
HTTP_req buffer
void
setup()
{
// Desativar o chip de Ethernet
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600); //
Adicionado para depuração
// Inicializa o SD card
Serial.println("Initializing SD
card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card
initialization failed!");
return; // Inicialização falhou
}
Serial.println("SUCCESS - SD card
initialized.");
// Verifica se exite o arquivo index.htm
if (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find
index.htm file!");
return;
// Não pode encontrar o arquivo especificado
}
Serial.println("SUCCESS - Found
index.htm file.");
// Arquivo index.htm encontrado com sucesso
Ethernet.begin(mac, ip); //
Inicializa o dispositivo Ethernet
server.begin(); //
Inicializa o servidor web
}
void loop()
{
EthernetClient client = server.available(); // tentar obter cliente
if (client) {
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // Dados do cliente disponível para leitura
char c = client.read(); // Lê 1
byte (atributo) do cliente
// Primeira parte do pedido
HTTP em ordem HTTP_req
// Deixa o último elemento na
matriz como 0 para terminar a string (REQ_BUF_SZ - 1)
if
(req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] =
c; // Salva o atributo HTTP
requerido
req_index++;
}
// A última linha da requisão
do cliente fica em branco e ternina com \n
// Responde para o cliente
somente depois da última linha recebida
if
(c == '\n' && currentLineIsBlank) {
// Enviar um cabeçalho
de resposta HTTP padrão
client.println("HTTP/1.1 200 OK");
// Restante do cabeçalho
segue abaixo, dependendo se...
// Página web ou página XML
é solicitada
// Pedido Ajax - Enviar
arquivo XML
if (StrContains(HTTP_req,
"ajax_inputs")) {
// Enviar restante do
cabeçalho HTTP
client.println("Content-Type: text/xml");
client.println("Connection: keep-alive");
client.println();
// Enviar arquivo XML
contendo estados de entrada
XML_response(client);
}
else { // Solicitação de página web
// Enviar restante do
cabeçalho HTTP
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
// Envia página web
webFile =
SD.open("index.htm"); //
Abre o arquivo da página web
if (webFile) {
while(webFile.available()) {
client.write(webFile.read());
// Cliente recebe a página web
}
webFile.close();
}
}
// Exibição na porta de
serial o pedido recebido de HTTP
Serial.print(HTTP_req);
// Reseta o buffer para 0
req_index
= 0;
StrClear(HTTP_req,
REQ_BUF_SZ);
break;
}
// Cada linha de texto
recebidas do cliente termina com \ r \ n
if (c == '\n') {
// Iniciar nova linha com
a próxima leitura de caracteres
currentLineIsBlank
= true;
}
else if (c != '\r') {
// Caracter recebido pelo
cliente
currentLineIsBlank = false;
}
}
}
delay(1); // Dá um tempo para
o browser receber os dados
client.stop(); // Fecha a conexão
} // end if (client)
}
// Envia ao arquivo XML os valores do
pino analogico
void
XML_response(EthernetClient cl)
{
int analog_val;
cl.print("<?xml version =
\"1.0\" ?>");
cl.print("<inputs>");
// Lê o pino A3
analog_val = analogRead(3);
cl.print("<analog>");
cl.print(analog_val);
cl.print("</analog>");
cl.print("</inputs>");
}
// Seta todos os elementos de str para 0
(limpa o vetor)
void
StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
char
StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
Vídeo do projeto pronto
- Se você gostou do post, por favor comente! Nos dê um feedback, isto nos incentiva a continuar! :)
- Se você gostou do post, por favor comente! Nos dê um feedback, isto nos incentiva a continuar! :)
