Igor Neumann
- 9 de nov. de 2021
- 10 min para ler

ESP8266 e HTML: Tudo o que você precisa saber sobre

Atualizado: 6 de mar.

Já imaginou poder fazer acionamentos, como por exemplo de um relé para ligar a lâmpada da sua casa ou abrir o portão eletrônico, a partir do seu celular ou computador? Ou até melhor, fazer isso sem sequer estar em casa. O ESP8266 é um microcontrolador com capacidade de conexão Wi-Fi, que permite fazer esses acionamentos e muitas outras funções, não necessitando de um módulo externo para conectar a redes Wireless, e a programação pode ser feita toda a partir da IDE do Arduíno, nesse post vamos te ensinar a dar os primeiros passos.

Sumário:

1 - Instalando o ESP8266;

2 - Configurando Rede;

3 - Página Web;

4 - IP Fixo;

5 - Editando HTML;

6 - Controlando o ESP8266 pelo HTML no Browser:

6.1 - Acionando saída PWM;

6.2 - Lendo entrada analógica;

6.3 - Lendo entrada digital ;

7 - Material em vídeo no Youtube;

1 - INSTALANDO O ESP8266:

Primeiro você precisa adicionar o pacote de placas do ESP8266 para começar a programar, para isso clique em “arquivos”, depois vá até “preferências” e cole o link https://arduino.esp8266.com/stable/package_esp8266com_index.json em “URLs Adicionais para Gerenciadores de Placa".

Logo após, pressione “ok” para salvar essa configuração. Agora é preciso baixar o pacote compatível com o ESP8266, para isso vá em “Ferramentas”, desça até Placa: “Arduíno Uno” (caso a placa que está selecionada seja a Uno), e então abra “Gerenciador de Placas”. No campo que abrir, você deve digitar esp8266, e instalar o pacote que resultou da pesquisa.

Assim que a instalação estiver finalizada, você pode começar a dar seus primeiros passos com o ESP8266.

Para iniciar você precisa selecionar a placa compatível, vá em “ferramentas”, desça até “placa:” e vai perceber que surgiu um novo ícone “ESP8266 Boards”, ao entrar nele selecione “NodeMCU 1.0 (ESP-12E Module)”. Com a placa selecionada é hora de adicionar um exemplo, para então começar a programar. Clique em “arquivo”, “exemplos”, procure por “ESP8266 Wifi” e selecione “Wifi Manual Web Server”, vai abrir um exemplo e a partir dele vamos criar o nosso programa.

2 - CONFIGURANDO REDE:

Entre as aspas de STASSID coloque o nome da rede em que vai se conectar, e em STAPSK a senha dessa rede.

Com o ESP8266 conectado ao seu computador, abra o monitor serial e mude a velocidade de comunicação para 115200, feito isso, deixe o monitor serial aberto e carregue o código para o ESP8266, perceba que ele vai carregar e te retornar o endereço IP da sua rede no monitor serial, copie esse endereço e cole no seu navegador.

3 - PÁGINA WEB:

No seu navegador vai aparecer algo igual à imagem abaixo, com duas opções de nome “here”, nelas é possível ligar e desligar o LED do seu ESP.

Repare no seu monitor serial, nele você pode acompanhar tudo o que está acontecendo, quando clica em “here” para ligar o LED o client envia 1 para o ESP8266 e 0 para desligar.

Outro fator relevante sobre esse código de exemplo, é que ele substitui um antigo, que ocasionava um “congelamento” do programa caso o client demorasse a responder, com isso não era possível identificar onde estava o problema, sendo preciso resetar seu ESP8266. Com esse novo exemplo “Wifi Manual Web Server”, vem uma linha de código que soluciona esse problema, nesse time out se o client demorar mais de cinco segundos para responder, ele força a refazer a conexão, não permitindo que o programa congele, esse time out deixou o código mais robusto.

Até agora vimos sobre como instalar o software para usar seu ESP8266, vimos como conecta – lo a sua rede e conseguir ligar e desligar o LED que o compõe. A ideia agora é adicionar dois botões no seu site, para ligar e desligar o LED, dando uma cara mais profissional ao projeto, para fazer isso vamos ter que utilizar HTML, com essa linguagem é possível criarmos sites adicionando botões, caixas de texto, e até mesmo a leitura do valor de uma porta analógica do ESP8266 conforme veremos mais pra frente.

4 - IP FIXO:

Antes de iniciarmos, vamos deixar nosso IP fixo, ele serve para que o seu programa fique fixo em um endereço, você até pode usar o IP da sua rede, o problema é que esse endereço pode mudar com o tempo, então teria que ficar atualizando sempre no programa, para resolver isso, cria-se um IP fixo.

Copie e cole o código abaixo onde são declaradas as variáveis.

IPAddress ip(192, 168, 1, xxx);//mudar o último digito, será seu IP fixo
IPAddress ip2(255, 255, 255, 0);// mascara de sub-rede
IPAddress ip1(192, 168, 1, 1); //gateway padrão

Depois de colar, é necessário mudar os endereços de acordo com a sua rede, para você saber qual o seu endereço, basta ir em pesquisar no seu computador e digitar “cmd”, então abra o prompt de comando e digite “ipconfig”.

Dê enter, então vai aparecer o IP da sua rede, copie o endereço da sua rede, o gateway padrão e a máscara de sub-rede.

No seu endereço IP, mude o último digito para um valor que quiser, então esse será o seu IP fixo. Agora copie o código e cole na função setup, logo após while.

//colar no setup, após a conexão
WiFi.config(ip, ip1, ip2);

Nesse momento você já está com seu IP fixo criado, agora vamos criar botões na nossa página para interagir com o LED do ESP8266, para isso é preciso mudar o código na tomada de decisão if que está na função loop, onde está escrito “/gpio/0” e “/gpio/1” modifique dentro das aspas para “?Desliga=” e na outra “?Liga=”. Mude também os valores de val, no Desliga deixe val = 1; e no Liga deixe val = 0;.

5 - EDITANDO HTML:

Feito isso, é hora de adicionarmos o código HTML ao programa, copie o código a baixo e adicione por cima do código já existente no exemplo, conforme a imagem.

client.print(F("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\n "));

client.print(F("<h1><html style=\"font-size:14px\"> Menu ESP8266 (Automa&ccedil;&atilde;o para   Leigos)\n</h1>"));
client.print(F("<body>\n"));
client.print(F("<form action=\"http://"));

client.print(WiFi.localIP());

client.print(F("\" method=\"get\">\n"));
client.print(F("<b><br></br><html style=\"font-size:14px\"> Ligar LED da placa do ESP8266\n</b>"));
client.print(F("<p></p><button input name=\"Desliga\" style=\"height:20px;width:150px;font-size:13px\" >Desligar</button>")); //<br></br>
client.print(F("<button input name=\"Liga\" style=\"height:20px;width:150px;font-size:13px\" >Ligar</button>"));
client.print(F("<p></p>"));
client.print(F("</form>\n"));
client.print(F("</body>\n"));

client.print(F("</html>"));

É só deletar a parte marcada na imagem, e colar o código que disponibilizamos por cima, no mesmo local, então carregue o código para seu ESP8266 e acesse a página web com seu IP fixo, após carregar na página deverá aparecer dois botões.

6 - CONTROLANDO O ESP8266 PELO HTML NO BROWSER:

Você pode usar essa mesma lógica para acionar um relé ou ligar lâmpada da sua casa ou até um portão eletrônico, tudo isso a distância, basta ligar a porta D4 (que nesse caso esta declarada como saída) do seu ESP8266 no pino IN do módulo relé.

6.1 - ACIONANDO SAÍDA PWM:

Vamos adicionar outra função ao nosso programa, por exemplo, controlar a luminosidade de um LED a partir da saída PWM do ESP8266, e de acordo com o valor que é digitado na página web, a saída PWM do ESP8266 é de 10 bits, ou seja, pode variar entre 0 e 1023. Para isso é preciso adicionar uma nova variável, copie e cole antes de setup, onde foram declaradas outras variáveis.

int acumula0 = 0;

Agora, crie uma nova aba, basta ir no canto superior direito, logo abaixo onde abre a porta serial, clique ali e selecione nova aba e de um nome ao arquivo. As abas são boas para organizar seu código, você pode colocar em cada aba comandos que serão executados. Nessa nova aba, adicione o código abaixo.

void tiraNum(String comando)
{
int valor = 0;
String numero = "";
int inicio = 17;
int i = inicio;
int acumula = 0;
while (!isWhitespace(comando[i]))
{
if (isAlpha(comando[i])) return;
numero += comando[i];
i++;
}
int tamanho = i - inicio - 1;
for (int j = 0; j <= tamanho; j++)
{
valor = numero[tamanho - j] - '0';
acumula = acumula + valor * pow(10, j);
}
Serial.print("valor analogic: ");
Serial.println(acumula);
acumula0 = acumula;
analogWrite(D7, acumula0);// para o esp 04 tem que ser 2
}

Agora volte na aba em que estava, e adicione na função loop, junto com o else if o comando que vai receber toda vez que for digitado um valor na página web, ou seja, o client envia um número para o server, então esse valor é atribuído a variável “tiraNum(req)” que foi declarada na outra aba.

else if (req.indexOf("?envia=") != -1)
tiraNum(req), Serial.println("deu PWM");

Pronto, nossos comandos estão prontos, agora precisamos criar a parte que vai enviar o valor para controlar a luminosidade do LED, essa parte envolve o HTML, pois precisamos que na página apareça uma caixa de texto para digitar um valor numérico, e um botão envia, que manda esse mesmo valor para o server, e dessa forma ele é tratado na parte do código que acrescentamos recentemente. Copie o código abaixo e adicione no seu programa antes do “</form>\n”, pois esse form sinaliza o fim do seu código HTML.

client.print(F("<b><br></br><html style=\"font-size:14px\"> Enviar comandos para a sa&iacute;da PWM\n</b>"));
client.print(F("<p></p>"));
client.print(F("<button input name=\"envia\" style=\"height:20px;width:150px;font-size:13px\" >Enviar</button>"));
client.print(F("   Estado do Led: <input name=\"PWM\" Value=\""));
client.print(acumula0);
client.print(F("\"maxlength=15 style=\"height:25px;width:75px;font-size:13px\" \">"));
client.print(F("<p></p>")); //parte do vídeo 3.

Pode carregar a página web de acordo com seu IP fixo, e vai perceber que agora apareceu mais um botão envia, junto a uma caixa de texto para enviar um valor, esse valor pode ser de 0 a 1023 que é a saída PWM do ESP8266. O pino no qual está mandando os pulsos é o D7, você pode ligar ele em um LED e ver na prática a luminosidade mudando conforme o valor que você digita e envia no site.

6.2 - LENDO ENTRADA ANALÓGICA:

Até o momento, nós interagimos com o ESP8266 através da página web, acionando relé e controlando a luminosidade de um LED, mas agora vamos enviar informações para a página por uma entrada analógica do ESP8266. Antes é necessário fazer o download da biblioteca da crescer automação, acesse o link https://github.com/casaautomacao/timerwithoutdelay e faça o download.

Essa biblioteca permite que seu programa tenha um timer, ou seja, uma contagem sem precisar parar o código, diferente do que acontece quando se usa apenas o delay, onde o programa fica parado de a acordo com o tempo determinado pelo programador. Em nosso código vamos usar esse timer para que nosso programa fique fazendo a leitura da entrada analógica a cada 500 mili segundos, isso ajuda com que o programa rode melhor, pois se a leitura for constante sem nenhum intervalo, o client vai funcionar de maneira ruim.

Antes é preciso ter terminado de baixar a biblioteca e adiciona – la, para adicionar a biblioteca a sua IDE, vá em sketch > incluir biblioteca > adicionar biblioteca .ZIP, procure onde você salvou seu arquivo zipado, selecione e clique em abrir. Vá novamente em incluir biblioteca e procure por “timer whitout delay-master”, no seu código vai aparecer #include <Crescer.h>.

Depois de incluir a biblioteca, você precisa adicionar as variáveis, então no campo antes de setup onde já foram adicionadas outras variáveis, coloque essas.

Tempora temp1;       
int analogica;
int refr = 0;

Na função setup cole o trecho a baixo logo após o Serial.begin(115200).

temp1.defiSP(500);

Logo no início da função loop adicione o código.

if (temp1.Saida(1))
{
analogica = analogRead(A0);
Serial.println(analogica);
temp1.Saida(0);
}

O código acima é quem vai fazer a função de leitura a cada 500 mili segundos, permitindo que nosso programa rode com melhor desempenho, por isso precisa ser adicionado no início da função loop.

E na parte de decisão, no comando else if, lá onde já adicionamos outros comandos, adicione essa parte, ela vai identificar quando a página é recarregada.

else  if (req.indexOf("?DesligaR=") != -1)
refr = 0;
else if (req.indexOf("?LigaR=") != -1)
refr = 1;

Agora basta adicionar o código HTML, e está pronto mais uma etapa do nosso programa, que vai imprimir o valor analógico na página web, e nos dar a opção se queremos que a página atualize sozinha a cada 5 segundos. O código a seguir deve ser colado em duas partes diferentes, então precisa ter um pouco de atenção.

Você precisa adicionar antes do form:

if (refr)  client.print(F("<meta http-equiv=\"refresh\" content=\"3\";>"));

Após o form:

client.print(F("<b><br></br><html style=\"font-size:14px\"> Deseja que a p&aacute;gina atualize automaticamente?\n</b>"));
client.print(F("<p></p><button input name=\"DesligaR\" style=\"height:20px;width:50px;font-size:13px\" >No</button>"));
client.print(F("<button input name=\"LigaR\" style=\"height:20px;width:50px;font-size:13px\" >Yes</button>"));

E pré fim do form:

client.print(F("<b><br></br><html style=\"font-size:14px\"> Leitura da variavel anal&oacute;gica\n</b>"));
client.print(F("<p></p>"));
client.print(F("Entrada A0: "));
client.print(analogica);
client.print(F("<p></p>"));

O código deve ficar conforme as imagens.

Com o código HTML adicionado, é só seguir os passos que viemos fazendo até aqui, carregue para o seu ESP8266, e atualize a página web do seu IP fixo. Na montagem, leve o pino central do seu trimpot até o pino A0 do ESP8266, nos outros dois pinos do trimpot, alimente com os 3v e GND do próprio ESP8266. Note que agora tem duas opções, para atualizar a página sozinha ou não, você pode selecionar para atualizar sozinha, e então começar a variar a resistência do seu trimpot, o valor vai alterando conforme a página é atualizada.

6.3 - LENDO ENTRADA DIGITAL:

Até aqui já aprendemos diversas formas de se trabalhar com o ESP8266, desde acionamentos, até leituras analógicas que podemos receber da web ou enviar para ela, e como último desafio, vamos imprimir na tela, as informações ligado e desligado, que serão enviadas por um botão. Comparado com os outros, esse é bem mais simples, primeiro devemos definir o modo de operação do pino D6, nesse caso é INPUT_PULLUP, o input_pullup define que é uma entrada que estará sempre em nível lógico alto, então sempre aparecerá ligado na nossa página web, ao pressionarmos o botão por três segundos, que é o tempo de a página recarregar, vai aparecer desligado no site. Vamos ligar esse pino diretamente com o GND, que passa ela para nível lógico baixo, e sucessivamente aparecerá desligado.

Primeiro adicione a linha de código a baixo na função setup, ela vai declarar o pino D6 como uma entrada de nível lógico sempre alto.

pinMode(D6, INPUT_PULLUP);

E na parte onde fazemos o código HTML cole esse trecho pré fim do form, ele vai comparar em qual nível lógico o pino D6 está, e de acordo com a leitura da entrada digital vai nos mostrar ligado ou desligado na tela.

client.print(F("<b><br></br><html style=\"font-size:14px\"> Estado da entrada digital\n</b>"));
client.print(F("<p></p>"));
client.print(F("Entrada digital: "));
  if (digitalRead(D6))   client.print(F("LIGADO"));
  else   client.print(F("DESLIGADO"));

Carregue novamente sua página com o IP fixo que determinou, agora ao final da tela vai aparecer uma informação dizendo como está o estado da entrada digital, é preciso utilizar um botão, em um dos lados desse botão plugue no pino D6 e a outra no GND. Para que a informação na tela mude de ligado para desligado, a página deve estar com a opção de atualizar automaticamente marcada com “yes”, e o botão deve ser pressionado durante 3 segundos, que é o tempo que leva até a página recarregar.

Se tudo correu bem durante a sua programação, no final do programa a página web deve ficar igual a imagem.

Assim finalizamos o nosso programa utilizando o ESP8266 com HTML, perceba a quantidade de comandos que atribuímos ao nosso código, e todas as possibilidades de projetos que podem ser feitas a partir desse modelo que apresentamos aqui. Você pode conferir mais informações sobre esse código e diversos outros projetos através do canal no youtube da casa da automação https://www.youtube.com/user/cznazario, e em outros posts aqui no blog da crescer engenharia. Segue o link com o código completo e funcionando do programa: https://drive.google.com/drive/u/0/folders/1waHS0WtL2PpPzizkqA4M0Iv9SGiyD5sh