Neste tutorial ensinaremos a criar um menu de configuração com botoes que se comunica com o seu Nodemcu, utilizando a IDE Arduíno para construir o firmware, possibilitando ao programador/desenvolvedor configurar seu sistema embarcado através de um menu simples que pode ser acessado como se fosse uma pagina da web em html dentro do microcontrolador ESP8266.

SOBRE O ESP 8266 12F:

Primeiramente vamos falar sobre o microcontrolador ESP8266 12 F.

Microcontrolador com excelente tamanho de memoria RAM e Flash,  permite que ampliemos bastante a inserção de comandos e opções em 1 único  programa com 1 único microcontrolador, sem a necessidade de anexar uma memória externa pois o próprio modulo do microcontrolador já possui uma memoria flash integrada onde fica armazenado o Firmware com as instruções que nos colocamos nele.

Apesar de ele conter uma quantia de memória MONSTRUOSA comparado a outros microcontroladores do mercado, temos que ter o cuidado de manter o controle do fluxo do programa para não TRAVARMOS o wifi.

O grande segredo para que o nosso MENU WiFi funcione bem e de maneira estável, principalmente para os dispositivos Iphone, é sempre cuidar pra não prendermos o programa em algum looping que o faca parar de responder o atendimento do wifi ( função server.handleClient(); na IDE do Arduíno).

Outra preocupação que devemos ter é em sempre fazer com que o sistema do ESP8266 execute suas funções que rodam em background.

ESTABILIDADE DO SISTEMA ( função yield() )

Existe uma função  construída especificamente para fazer com que o firmware execute essas rotinas de background, essa função se chama yield().

A função yield  faz com que o programa pare naquele ponto em que a encontrou, execute as rotinas de background como resetar o WacthDog do sistema e funções internas do WiFi, e em seguida retorna a continuação do programa.

FINALMENTE AO PROJETO

Para realizar esse pequeno projeto, serão necessários os seguintes itens:

• 2 Módulos de rele 1 canal ou 1 modulo 2 canais high level trigger;
• 1 Módulo Nodemcu;
• 1 cabo USB V8 para alimentação e gravação do Nodemcu;

O layout de ligação do sistema segue abaixo:

 

EXPLICAÇÃO DO LAYOUT:

Como visto no layout acima, os reles são ligados diretamente as entradas D0 e D6 do Nodemcu, ao analisarmos o datasheet do microcontrolador ESP8266 vemos que o GPIO 16, referente a saída D0 deve ser usado com cuidado, propositalmente, utilizamos essa porta nesse projeto para chamar a atenção a certos detalhes no uso das GPIO’s do ESP8266 que equipa o Nodemcu. Esta saída é utilizada no sistema de gravação do firmware na memoria do ESP portanto, nunca devemos cola-la em PullDown, senão podemos impedir a gravação do firmware no ESP. Também essa GPIO sempre eleva-se a estado HIGH ao reiniciar ou ligar o Nodemcu, portanto, se o rele for ser utilizado em uma situação onde ele não deve ativar quando o sistema é reiniciado, troque a saída D0 por uma das demais saídas, com exceção da saída D8 que sofre de uma condição especial semelhante.

Observando os cuidados com a GPIO 16, podemos iniciar a programação do nosso projeto.

EXPLICANDO A PROGRAMAÇÃO:

Utilizamos a IDE de programação Arduíno para este projeto:

Vou explicar passo a passo o código e pra quem quiser o código completo para abrir no seu computador, disponibilizei nesse link em formato txt, basta fazer o download, copiar o texto e colar na tela do seu programador Arduíno:

exemplo_menu_com_botoes_acionando_rele  << DOWNLOAD DO ARQUIVO FONTE

 

 

/// para o funcionamento das funções WebServer do ESP8266 é necessário incluirmos as seguintes bibliotecas

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// Definições de pinos do sistema. Normalmente essas definições já estão nas bibliotecas de inclusão do ESP8266 na IDE Arduíno
// Costumo utilizar essas definições abaixo para facilitar casos em que se faca necessário redefinir algum pino.

#define D0 16 //Utilizado neste exemplo como RELE 1
#define D1 5 //
#define D2 4 //
#define D3 0 //
#define D4 2 //
#define D5 14 //
#define D6 12 //Utilizado neste exemplo como RELE 2
#define D7 13 //
#define D8 15 //

 

Após definirmos as bibliotecas utilizadas neste projeto, iremos declarar as variáveis:

 

//como este projeto é bem simples, utilizaremos apenas estas variáveis.

char *ssid = “MEU_MENU”;     /// Esta variável é responsável pelo nome da ACESS POINT gerado pelo Nodemcu
char *password = “padrao1234”;  /// Esta variável é responsável pela senha para acessar o ACESS POINT
bool rele1 = false;
bool rele2 = false;

 

Ao declararmos as variáveis ssid e password , estamos dizendo ao sistema qual será o nome da rede wifi que o nosso Nodemcu vai gerar e a senha que ele vai exigir para  que alguém conecte-se a essa rede.

Se não quisermos que a rede peça alguma senha, basta não criarmos essa variável e mais adiante na função que inicializa o wifi darei as duas opções de inicialização, com e sem senha.

 

//  Declaracao das instancias das bibliotecas 
ESP8266WebServer server(80);       //ativa servidor web

 

Este setor do programa inicializa a biblioteca do Webserver do Nodemcu.

 

void setup() {
//PARTE DE CONFIGURAÇÃO DO SISTEMA 

Serial.begin(57600); // Iniciamos a seria para podermos debugar o programa no terminal serial do Arduíno.

WiFi.softAP(ssid, password, 11); // Esta função inicializa o ACESS POINT com o nome e senha que determinamos na criação das variáveis ssid e
// password e o valor 11 refere-se ao canal utilizado pelo wifi

IPAddress myIP; // Declaração da variável myIP do tipo que recebe um numero de IP já no formato correto ***Dica: Se precisarmos
// usar o numero do IP em outros lugares do programa, declarem essa variável antes do setup pra que ela se torne
// global.

myIP = WiFi.softAPIP(); // Aqui adquirimos o ip do acess point ( por padrao se nao o pre-definirmos, ele assume 192.168.4.1
Serial.print(“Acess point criado. Ip: “); // Exibe no terminal serial o numero do ip confirmando a criacao do acess point
Serial.println(myIP);

pinMode(D0, OUTPUT); // rele 1
pinMode(D6, OUTPUT); // rele 2

digitalWrite(D0,rele1); //desliga o rele 1 pois a variavel rele1 foi criada com valor “false”
digitalWrite(D6,rele2); //desliga o rele 2 pois a variavel rele2 foi criada com valor “false”

 

Conforme havia prometido, para deixar o ACESS POINT livre, sem exigir senha, basta declara a funcao que inicializa o mesmo da seguinte forma: WiFi.softAP(ssid);

 

server.on(“/”, MENU); //Esta função responde nossa requisição no ip do servidor, enviando de volta os códigos HTML que carregam nosso menu
server.on(“/ATIVA_R1”,ATIVA_R1); //quando clicarmos no botão ATIVA RELE 1 essa função será chamada, ligando o rele 1 e escrevendo uma pagina resposta pra nos no browser
server.on(“/DESATIVA_R1”,DESATIVA_R1); //quando clicarmos no botão DESATIVA RELE 1 essa função será chamada, desligando o rele 1 e escrevendo uma pagina resposta pra nos no browser
server.on(“/ATIVA_R2”,ATIVA_R2); //quando clicarmos no botão ATIVA RELE 2 essa função será chamada, ligando o rele 2 e escrevendo uma pagina resposta pra nos no browser
server.on(“/DESATIVA_R2”,DESATIVA_R2); //quando clicarmos no botão DESATIVA RELE 2 essa função será chamada, desligando o rele 2 e escrevendo uma pagina resposta pra nos no browser

server.begin(); //Apos declarar todos os caminhos de nosso menu WIFI, essa função ativa nosso servidor local no Nodemcu

Esta parte do código é especialmente importante, é o ponto do programa onde o ACESS POINT busca as funções que respondem ao aperto dos botoes na tela do navegador no celular conectado ao Nodemcu. Também são essas funções que formam o texto que é enviado ao Browser para formar a pagina HTML e nesse texto podemos formatar o forma, cor, tamanho, fonte, alinhamento e todas as outras características que o HTML nos permite moldar.

LOOPING PRINCIPAL DO PROGRAMA.

void loop() {
yield(); // Funcao extremamente importante no ESP8266, ela garante que o sistema atenda todas as funcoes que
// correm por traz do nosso programa, garantindo estabilidade do sistema.

server.handleClient(); // FUNCAO DA BIBLIOTECA webServer que “ATENDE” a nossa requisicao quando acessamos o ip do webserver criado
// pelo nosso Nodemcu.

digitalWrite(D0,rele1); // Dentro das funcoes “ATIVA_R1” e “DESATIVA_R1” o valor da variavel rele1 pode ser mudado de falso para verdadeiro e vice versa,
// ligando ou desligando o rele 1.

digitalWrite(D6,rele2); // Dentro das funcoes “ATIVA_R2” e “DESATIVA_R2” o valor da variavel rele1 pode ser mudado de falso para verdadeiro e vice versa,
// ligando ou desligando o rele 2

}

 

Dentro do looping, o sistema passa pela função server.handleClient(); que faz exatamente o ATENDIMENTO das requisições vindas pela rede wifi. Essas requisições são exatamente as operações de clicar que fazemos na tela do celular ao pressionar os botoes.

Devemos SEMPRE manter essa função próxima da execução instantânea, sempre sendo acessada pelo looping do sistema com o menor tempo possível. Quando menor o tempo par o looping passar por essa função, mais rápido e estável será a navegação pelo meni wifi gerado pelo ESP8266.

Continuado,

void MENU(){
// HTML da pagina principal >> Este primeiro trecho em html forma as informacoes que carregarao o tipo de letra cores e ect de nossa pagina web
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #FF0000; “; //Somente como exemplo, aqui mudamos a cor de fundo de nosso menu
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #FFFFFF; }</style>”;
html += “</head><body>”;

html += “<h1><center>NOSSO PRIMEIRO MENU</center></h1>”;

//============================================================== BOTAO DO RELE 1 =====================================================================//

// Neste if-else definimos se vamos carregar na pagina o botao “LIGAR RELE” ou o botao “DESLIGAR RELE” baseado no estado atual do rele. Uma simples logica de inversao.
if(rele1 == false){
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/ATIVA_R1”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao ATIVA_R1 que criamos aqui, ligando o rele.
html += “<p><a href=/ATIVA_R1><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>ATIVAR RELE 1</h1></b></button></center></a></p>”;
}
else
{
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/ATIVA_R1”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao DESATIVA_R1 que criamos aqui, desligando o rele.
html += “<p><a href=/DESATIVA_R1><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>DESATIVAR RELE 1</h1></b></button></center></a></p>”;
}

//============================================================== BOTAO DO RELE 2 =====================================================================//

// Neste if-else definimos se vamos carregar na pagina o botao “LIGAR RELE” ou o botao “DESLIGAR RELE” baseado no estado atual do rele. Uma simples logica de inversao.
if(rele2 == false){
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/ATIVA_R2”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao ATIVA_R2 que criamos aqui, ligando o rele.
html += “<p><a href=/ATIVA_R2><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>ATIVAR RELE 2</h1></b></button></center></a></p>”;
}
else
{
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/DESATIVA_R2”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao DESATIVA_R2 que criamos aqui, desligando o rele.
html += “<p><a href=/DESATIVA_R2><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>DESATIVAR RELE 2</h1></b></button></center></a></p>”;
}
html += “<p><center><b>”;

html += “</body></html>”;
// Enviando HTML para o cliente
server.send(200, “text/html”, html); // Esta funcao server.send eh a responsavel em enviar para o browser do celular o arquivo de texto gerado acima
// com as informacoes para criar a pagina no navegador do nosso celular.

}

void ATIVA_R1(){
// HTML para formar a pagina de confirmacao do rele ativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 1 FOI ATIVADO COM SUCESSO!</center></h1>”;
rele1 = true; // Finalmente ativando o RELE 1

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);

}

void ATIVA_R2(){
// HTML para formar a pagina de confirmacao do rele ativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 2 FOI ATIVADO COM SUCESSO!</center></h1>”;
rele2 = true; // Finalmente ativando o RELE 2

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);
}

void DESATIVA_R1(){
// HTML para formar a pagina de confirmacao do rele desativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 1 FOI DESATIVADO COM SUCESSO!</center></h1>”;
rele1 = false; // Finalmente desativando o RELE 1

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);
}

void DESATIVA_R2(){
// HTML para formar a pagina de confirmacao do rele desativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 2 FOI DESATIVADO COM SUCESSO!</center></h1>”;
rele2 = false; // Finalmente desativando o RELE 2

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);
}

Agora seguem imagens de cada tela formada pelo programa acima:

 

Existem muitas  formas de configurar o html da pagina gerada nesse método de programação utilizado. Podemos fazer com que os botoes troque de cor ao serem pressionados, podemos exibir mensagens de alerta, carregar diferentes modelos depois de cliques, gerar um texto em uma caixa de texto na tela informando as acoes, enfim, praticamente tudo que se pode fazer em HTML pode ser criado nesse menu WiFi.

 

Espero que este tutorial venha a lhes ajudar, duvidas, elogios e criticas??? Deixe um comentario!

 

Autor: Nelson Bordin Junior – CEO Ntronics