22 de fev. de 2015

Projeto 39 - Interface Web com arduino

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! :)



Comentários
0 Comentários

0 comentários:

Postar um comentário