Depois de um longo e tenebroso inverno, chegamos ao ponto de acionar LEDs (ou qualquer coisa) remotamente via WiFi. Para quem entrou direto nesse post, vale a pena dar uma sapeada em meus 2 posts anteriores:
A diferença básica aqui, é que ao invés do Arduino criar uma pagina web para enviar as informações capturadas, agora será uma página criada anteriormente em HTML e hospedada em algum sitio web (no nosso caso aqui estará em emu desktop) que enviará os dados. Esta pagina estará recebendo comandos de um usuário enviando-os via WiFi ao Arduino.
O Circuito:
O circuito é bem simples. As conexões do ESP8266 com o UNO são as mesmas dos posts anteriores, apenas acrescentamos os 3 LEDs a 3 GPIOs do UNO:
GPIO 11: LED azul
GPIO 12: LED vermelho
GPIO 11: LED verde
O código HTML:
A Página deve ser gerada em HTML em um editor qualquer e salva no desktop.
<!-- buttons for GPIO 11 --> <h4>GPIO 11 <button style="color:blue"; id="111" class="led">ON</button> <button style="color:red"; id="110" class="led">OFF</button> <!-- buttons for GPIO 12 --> <h4>GPIO 12 <button style="color:blue"; id="121" class="led">ON</button> <button style="color:red"; id="120" class="led">OFF</button> <!-- buttons for GPIO 13 --> <h4>GPIO 13 <button style="color:blue"; id="131" class="led">ON</button> <button style="color:red"; id="130" class="led">OFF</button>
A parte principal do codigo HTML acima, é a geração dos “botões”, no caso “ON” e “OFF”. Observe que para cada botão (são 6 no total, 2 para cada GPIO), é gerado um “id” específico. Por exemplo, se o botão “ON” para o GPIO 11 for pressionado, o id será “111”, ou seja os dois primeiros dígitos para a identificação do GPIO (no caso “11”) e o 3o. dígito para o estado, no caso “1” ou “ON”. Se fosse “OFF”, o Id sería 110. No caso, na saída digital do pino 11, está o LED azul.
Uma vez gerado o “id” uma função na página se encarrega de enviar-la para para o IP address do ESP8266. Observe que o endereço que aparece no set-up do ESP 8266 tem que ser incluído na linha ==> $.get(“http://10.0.1.14:80/”, {pin:p});
// when a button is clicked
$(".led").click(function() {
// read value of GPIO11, GPIO12, GPIO13 id's
var p = $(this).attr('id');
// send via GET to IP address with the parameter "pin" and value "p"
$.get("http://10.0.1.14:80/", {pin:p});
});
No monitor serial se pode observar o valor do pin que é gerado pela página.
As primeiras vezes que testei o programa, tive vários problemas e o mais importante foi que observei que só era possível enviar 5 comandos aos LEDs. Isso porque a cada envío de informação o ESP8255 considerava uma conexão aberta (CONNECT 0, 1, 2, 3, 4) e o limite é 5.
Observei também que quando fazia um “refresh” na página, o connect, voltava a zero. A solução foi incluir um novo codigo HTML, que forçava o refresh automático da página (código tipo “META”). No caso optei por fazer um refresh a cada 15s para não ficar muito ruim para o usuário. Funcionou sem problemas:
HTTP-EQUIV=”refresh” CONTENT=”15″>
O código do Arduino:
O código é muito parecido com o código anterior:
Inicializa, faz o setup das portas, “reseta” e inicializa o ESP8266, etc., usando as mesmas funções definidas no post anterior.
A diferença básica está na porção em verde do código contido no “Loop”:
void loop() { if(esp8266.available()) { if(esp8266.find("+IPD,")) { delay(1000); int connectionId = esp8266.read()-48; esp8266.find("pin="); int pinNumber = (esp8266.read()-48)*10; pinNumber += (esp8266.read()-48); int statusLed =(esp8266.read()-48); digitalWrite(pinNumber, statusLed) String closeCommand = "AT+CIPCLOSE="; closeCommand+=connectionId; closeCommand+="\r\n"; sendData(closeCommand,1000,DEBUG); } } }
Ao ler o “id”, por exemplo “111”, o código separa os primeiros dois dígitos e constrói a variável “pinNumber”. Com o 3o. dígito, se obtém o “statusLed”. A função digitalWrite enviará o status do LED, no caso do exemplo “1” para o GPIO correspondente (ou “pinNumber”), no exemplo 11.
No vídeo abaixo, pode-se ver um exemplo do acionamento remoto dos LEDs:
Para finalizar, no link abaixo deixo o codigo completo para o Arduino e para a pagina em codigo HTML.
Link para os codigos fonte no GItHub
Conclusão
Como sempre, espero que este projeto ajude outras pessoas a encontrar seu caminho no apaixonante mundo da eletrônica, robótica e do IoT!
Não deixe de visitar e seguir minha página: MJRoBot.org no Facebook
“Saludos desde el sur del mundo!” 
Um abraço e até o próximo post!
Obrigado
Marcelo
mjrobot.org 
Excelente post! Realmente me ajudou muito! Mas gostaria de tirar uma dúvida.. Na parte 2 você fez o ESP enviar para o navegador através da geração de uma página HTML os dados analógicos do Arduíno, e nessa parte você fez uma página por fora, que envia dados. Eu estou fazendo um projeto para a escola e eu consegui fazer toda a parte desse post, mas precisava que na mesma página exibisse alguns dados analógicos do Arduíno. Poderia me ajudar nessa? Obrigado.
CurtirCurtir
Marcelo, boa noite.
Venho acompanhando seus 3 posts sobre o ESP8266, nos dois primeiros eu consegui tranquilamente fazer funcionar o módulo junto do Arduíno, gerando a página html corretamente, mas neste terceiro post, não consigo fazer o meu ip gerar a página html que eu criei… Verifiquei no monitor Serial e ele reconhece a entrada do sistema no ip, mas não retorna nenhuma página para meu navegador. Notei também que monitor ele não gera aquele “PIN=111” igual ao seu exemplo, vou colar aqui o que aparece no meu monitor:
+IPD,2,429:GET / HTTP/1.1
Host: 192.168.31.77
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
Sabe me dizer o pq disso?
Peço também que se possível, explicar como o ESP8266 consegue gerar essa página html criada fora, sem ter acesso a esse arquivo. Isso foi a minha principal dúvida.
Muito obrigado!
CurtirCurtir
Antes de qualquer coisa gostaria de parabenizar o Marcelo pelo excelente trabalho e por divulgá-lo de forma magistral. Muito Obrigado Marcelo.
No arquivos disponibilizados existe um pequeno erro de sintaxe, que impede que o “ID” seja passado corretamente.
ON => Correto seria
ON
Após esta correção, em todos os botões, funcionou 100%.
CurtirCurtido por 1 pessoa
button style=”color:blue; ==> button style=”color:blue”
CurtirCurtido por 1 pessoa
Olá Mauro. Muito obrigado pelas palavras e pela ajuda! Eu corrigi o codigo do HTML aqui no post e no GitHub. Valeu! Um abração! 😉
Marcelo
CurtirCurtir
Oi Victor. O Mauro detectou um erro no HTML, que me passou despercebido quando escrevi o post. Já corrigi aqui no tutorial e no codigo que está no GitHub. Voce poderia verificar se poderia ser este o caso de seu erro? Obrigado e um abraço.
Marcelo
CurtirCurtir
boa noite. tenho o Esp8266-01 com a versao
AT version:1.2.0.0(Jul 1 2016 20:04:45)
SDK version:1.5.4.1(39cb9a32)
o ESP nao recebe os comandos da Webpage alterei o endereco ip do codigo pelo exibido com o comando at+CIFSR
fiz as ligacoes, fiz os testes com os comandos AT o ESP responde, e conecto a minha rede local, usando um router TP-link e ou Smartphone. ele conecta-se a rede. ele responde ao comando ping. do pc.
Peço ajuda ja estou a duas semanas procurando a solucao ja tenei varios codigos. o que estaria fazendo de errado?
CurtirCurtir
Olá Marcelo primeiramente parabéns pelo trabalho.. Marcelo gostaria de saber se tem como eu enviar comandos de um aplicativo criado no app inventor direto para o esp8266, sem ter que criar página HTML.?
Desde já agradeço pela atenção..
CurtirCurtido por 1 pessoa
Oi Laercio, Dá uma olhada em meu projeto:
Lá o App Inventor envía comandos para o NodeMCU. Podería ser um ESP8266 também. O princípio é o mesmo.
Um abraço
Marcelo
CurtirCurtir
Oi Marcelo, ótimo o seu trabalho, como sempre.
Estou tentando realizar um projeto com ESP8266-01 ou E12, sou principiante na programação IOT.
Sabemos que temos muito ainda para aprender, mas gosto do desafio, e sei quando pedir ajuda.
São muitas plataformas que se interagem…
Vamos lá:
Eu fiz um um dispositivo com Arduino+bluetooth+App inventor, para abrir o meu portão de garagem e social, usando dois pinos do arduino, para acionar dois relay, que por sua vez aciona o portão da garagem/social via contato da botoeira no cartão eletronico de controle do portão, com delay de 1200 millis, dando um pulso.funciona bem.
Gostaria de replicar este projeto usando esp8266+App inventor, estou com dificuldades no código, tanto com IDE Arduino, como codigo IDE lua esplorer.
Eu gostaria de enviar os códigos que tenho em teste, como faço pra te enviar?
Desde já muito obrigado…
———————————————————————————-
//——- abre_portão_esp8266_app_teste_3
/*usando app inventor controller_arduino ( Due_buttons_arduino
* projeto abre portão garagem e social usando app inventor e esp8266 com delay no pino ( usar relay )
* para acionar via contato botoeira no cartão eletronico automatico do portão garagem
*/
#include
//—————-DEFINIÇÕES DA DA REDE —————————-
const char* ssid = “seu ssid”;//————NOME DA REDE SSID———–
const char* password = “sua senha”;//—————–SENHA DA REDE WIFI———
//—————————————————————–
// Create an instance of the server
//——————–DEFINIÇÃO DA PORTA———————————————-
WiFiServer server(8095);//———–DEFINIR NO MODEM A PORTA————————-
//——————DEFINIÇÕES PARA IP FIXO—————————————
IPAddress ip(192, 168, xx, xx); // IP Address
IPAddress gateway(192, 168, xx, xxx); // set gateway network
//—————————————————————————–
int ch1 = 14;//gpio14—D5
int ch2 = 12;//gpio12—D6
void setup()
{
Serial.begin(115200);
delay(10);
pinMode(ch1, OUTPUT);//Pino digital —–D5—GPIO14
pinMode(ch2, OUTPUT);//Pino digital —–D6—-GPIO12
//—————— Connect to WiFi network—————————————
Serial.println();
Serial.println();
Serial.print(“Connecting to “);
Serial.println(ssid);
//————DEFINIÇÕES PARA IP FIXO—————————————————-
IPAddress subnet(255, 255, 255, 0); // set subnet mask to network
WiFi.config(ip, gateway, subnet);
WiFi.begin(ssid, password);
//————————————————————————————————–
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);
}
Serial.println(“”);
Serial.println(“WiFi connected”);
// Start the server
server.begin();
Serial.println(“Server started”);
// Print the IP address
Serial.println(WiFi.localIP());
}
void loop()
{
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println(“new client”);
while(!client.available()){
delay(1);
}
// Read the first line of the request
String req = client.readStringUntil(‘\r’);
Serial.println(req);
client.flush();
// Match the request
int val;
int val1;
//—————CH1—————————
if ( req.indexOf(“/gpio/0”) != -1)
val = 1;
//————————-CH2———————————-
if (req.indexOf(“/gpio/2”) != -1)
val1 = 1;
else {
Serial.println(“invalid request”);
client.stop();
return;
}
digitalWrite(14, val);
delay(1200); // ———————
digitalWrite(14, LOW); // —————————–
//—————————————————————–
digitalWrite(12, val1);
delay(1200); // ———————
digitalWrite(12, LOW); // —————————–
//———————————————————–
client.flush();
// Prepare the response
String s = “HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n\r\n\r\nGPIO is now “;
String c = “HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n\r\n\r\nGPIO is now “;
s += (val)?”high”:”low”;
c += (val1)?”high”:”low”;
s += “\n”;
c += “\n”;
// Send the response to the client
client.print(s);
client.print(c);
delay(1);
Serial.println(“Client disonnected”);
}
—————————————————————————————-
//——- abre_portão_esp8266_app_teste_3
/*
* projeto abre portão garagem e social usando app inventor e esp8266 com delay no pino
*/
#include
//—————-DEFINIÇÕES DA DA REDE —————————-
const char* ssid = “seu ssid”;//————NOME DA REDE SSID———–
const char* password = “sua senha”;//—————–SENHA DA REDE WIFI———
//—————————————————————–
// Create an instance of the server
//——————–DEFINIÇÃO DA PORTA———————————————-
WiFiServer server(8095);//———–DEFINIR NO MODEM A PORTA————————-
//——————DEFINIÇÕES PARA IP FIXO—————————————
IPAddress ip(192, 168, 1, xxxxxx); // IP Address
IPAddress gateway(192, 168, 1,xxxxxxxxx); // set gateway network
//—————————————————————————–
int ch1 = 14;//gpio14—d5
void setup()
{
Serial.begin(115200);
delay(10);
pinMode(ch1, OUTPUT);//Pino digital saÃda do Arduino(4-ch1);
//—————— Connect to WiFi network
Serial.println();
Serial.println();
Serial.print(“Connecting to “);
Serial.println(ssid);
//————DEFINIÇÕES PARA IP FIXO—————————————————-
IPAddress subnet(255, 255, 255, 0); // set subnet mask to network
WiFi.config(ip, gateway, subnet);
WiFi.begin(ssid, password);
//————————————————————————————————–
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);
}
Serial.println(“”);
Serial.println(“WiFi connected”);
// Start the server
server.begin();
Serial.println(“Server started”);
// Print the IP address
Serial.println(WiFi.localIP());
}
void loop()
{
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println(“new client”);
while(!client.available()){
delay(1);
}
// Read the first line of the request
String req = client.readStringUntil(‘\r’);
Serial.println(req);
client.flush();
// Match the request
int val;
//——————————————
if (req.indexOf(“/gpio/1”) != -1)
val = 1;
//————————————————
// if (req.indexOf(“/gpio/0”) != -1)
// val = 0;/////0
// else if (req.indexOf(“/gpio/1”) != -1)
// val = 1;///////1
else {
Serial.println(“invalid request”);
client.stop();
return;
}
// Set GPIO2 according to the request
digitalWrite(14, val);
delay(1200); // ———————
digitalWrite(14, LOW); // —————————–
client.flush();
// Prepare the response
String s = “HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n\r\n\r\nGPIO is now “;
s += (val)?”high”:”low”;
s += “\n”;
// Send the response to the client
client.print(s);
delay(1);
Serial.println(“Client disonnected”);
// The client will actually be disconnected
// when the function returns and ‘client’ object is detroyed
}
CurtirCurtir
Oi Roberto Carlos, desculpe-me a demora em responder. Não sei se voce já solucionou o problema. Eu na verdade nunca trabalhei com o LUA. Fiz projetos com o ESP01 somente utilizando comandos AT (veja o ArduFarmBot) e com o ESP12 fui direto ao IDE do Arduino (veja o “Do Blink ao Blynk….”). Encontrei que trabalhar com o ESP12-E é muito mais fácil e com o IDE nem se fale. É estável e muito tranquilo de programar.
Um abraço
CurtirCurtir
Estou tentando compilar o programa, mas está demorando muito para rodar na IDE. É normal?
CurtirCurtir
Oi Adeildo. Não é comum. Deveria ser bem rápido. Algo está errado. Por favor, envía-me mais detalhes que tento te ajudar.
CurtirCurtir
Excelente meu mestre
CurtirCurtido por 1 pessoa
Valeu! 😉
CurtirCurtir