Neste tutorial você verá como é possível configurar a rede WiFi do ESP32 pelo smartphone, sem alterar seu código. Para isso utilizaremos a biblioteca “WiFiManager”.
Atualmente no mundo maker diversos projetos são desenvolvidos envolvendo a conexão WiFi. Por meio deles podemos comunicar o hardware com algum servidor na web permitindo o envio e a recepção de dados, e isso é possível através do ESP32.
Agora, imagine que você tenha feito um projeto no ESP32 que utilize a comunicação WiFi e nele você definiu por meio do código o “SSID” e a “Senha” da rede. Esses dados ficarão salvos para que o ESP32 se conecte à rede WiFi definida por você, porém se posteriormente for necessário levar o seu projeto para outro lugar, como você faria para conectá-lo em outra rede? Provavelmente mudaria seu código trocando o “SSID” e a “Senha” e aplicaria o novo código no ESP32, não é mesmo?
Aqui você vai aprender a configurar a rede WiFi do seu ESP32 de maneira mais prática, usando ele e um smartphone. Ficou curioso? Então continue lendo!
Material necessário
Para fazer o projeto você precisará dos seguintes componentes:
- 1 x Módulo WiFi ESP32 Bluetooth
- 1 x Cabo Micro USB
- 1 x LED Vermelho
- 1 x LED Azul
- 2 x Resistores de 220 Ω 1/4W
- 1 x Resistor de 10k Ω 1/4W
- 1 x Chave Táctil Push-Button
- 1 x Protoboard
- Kit de Jumpers
Funcionamento do circuito
O circuito é composto basicamente por dois LEDs, um na cor azul e outro na cor vermelha. Quando o LED na cor vermelha estiver piscando significa que a placa não está conectada na rede. Caso o botão tenha sido pressionado, o LED vermelho ficará aceso indicando que o ESP32 entrou no modo de configuração do “SSID” e da “Senha” da rede. Após configurado os parâmetros válidos de conexão do ESP32, o LED azul acenderá indicando sucesso na conexão.
Obs.: Na programação existe uma função que faz com que o ESP32 se reconecte na rede automaticamente assim que estiver próximo da rede a qual foi configurada. Quanto a questão de configuração, os parâmetros do WiFi ficam salvos no ESP32 permanentemente, ou seja, caso o ESP seja desligado assim que ele for ligado novamente continuará com os mesmos parâmetros do wi-fi salvo anteriormente a menos que seja pressionado o botão novamente para alterá-los.
Montagem do circuito
Com todos os componentes em mãos vamos à montagem do circuito. Abaixo temos o esquemático eletrônico montado em uma protoboard.
Biblioteca WiFiManager
Esta biblioteca permite gerenciar a conexão wi-fi. A partir dela é possível configurar ponto de acesso e/ou modo estação.
O modo Estação será configurado através de um portal no navegador, onde nós enviaremos para o ESP os dados da rede wi-fi no qual o ESP se conectará.
O que é o Modo Estação (Station Mode) e o Modo AP (Access Point Mode)? Basicamente serão utilizados os dois parâmetros na conexão do ESP. No modo AP o dispositivo se comporta como um roteador wi-fi gerando uma rede com “SSID” e “Senha”, já no modo Estação o dispositivo se comporta como um “cliente sem fio” se conectando a um roteador wireless.
Neste tutorial utilizaremos o modo Estação para receber os dados de conexão wi-fi e depois o ESP entrará no modo AP para se conectar no roteador como cliente.
Bibliotecas e gerenciador de placas
Após a montagem do circuito vamos as configurações e adição de bibliotecas necessárias para o funcionamento do código. Serão necessárias utilizar as bibliotecas WiFiManager, WebServer e DNSServer. Todas as bibliotecas estão disponíveis neste link.
Após o download descompacte os arquivos e cole na pasta de Bibliotecas do Arduino no endereço C:/Arquivos de Programas (x86)/Arduino/libraries
Obs.: Caso você já tenha instalado o ESP 32 na IDE do Arduino, pule esta etapa.
Na Arduino IDE vá em Arquivos > Preferências e adicione o link abaixo em “URLs Adicionais para Gerenciadores de Placas” e clique em OK.
https://dl.espressif.com/dl/package_esp32_index.json
Depois vá em Ferramentas > Placas > Gerenciador de Placas… e pesquise ESP32 e clique em instalar.
Após instalado a placa vá em Ferramentas > Placa e selecione a placa ESP32 Dev Module.
Código
Com o circuito montado vamos a parte do código que será carregado no ESP32.
//Bibliotecas
#include <HTTPClient.h>
#include <DNSServer.h>
#include <WebServer.h>
#include <WiFiManager.h>
WiFiManager wifiManager;//Objeto de manipulação do wi-fi
void setup(){
Serial.begin(115200);
Serial.println();
//Definição dos pinos
pinMode(13,INPUT);
pinMode(26,OUTPUT);
pinMode(32,OUTPUT);
//LEDs apagados
digitalWrite(26,LOW);
digitalWrite(32,LOW);
//callback para quando entra em modo de configuração AP
wifiManager.setAPCallback(configModeCallback);
//callback para quando se conecta em uma rede, ou seja, quando passa a trabalhar em modo estação
wifiManager.setSaveConfigCallback(saveConfigCallback);
}
void loop() {
//Se o botão for pressionado
if (digitalRead(13) == LOW) {
Serial.println("Abertura Portal"); //Abre o portal
digitalWrite(26,HIGH); //Acende LED Vermelho
digitalWrite(32,LOW);
wifiManager.resetSettings(); //Apaga rede salva anteriormente
if(!wifiManager.startConfigPortal("ESP32-CONFIG", "12345678") ){ //Nome da Rede e Senha gerada pela ESP
Serial.println("Falha ao conectar"); //Se caso não conectar na rede mostra mensagem de falha
delay(2000);
ESP.restart(); //Reinicia ESP após não conseguir conexão na rede
}
else{ //Se caso conectar
Serial.println("Conectado na Rede!!!");
ESP.restart(); //Reinicia ESP após conseguir conexão na rede
}
}
if(WiFi.status()== WL_CONNECTED){ //Se conectado na rede
digitalWrite(32,HIGH); //Acende LED AZUL
}
else{ //se não conectado na rede
digitalWrite(32,LOW); //Apaga LED AZUL
//Pisca LED Vermelho
digitalWrite(26,HIGH);
delay(500);
digitalWrite(26,LOW);
delay(500);
wifiManager.autoConnect();//Função para se autoconectar na rede
}
}
//callback que indica que o ESP entrou no modo AP
void configModeCallback (WiFiManager *myWiFiManager) {
Serial.println("Entrou no modo de configuração");
Serial.println(WiFi.softAPIP()); //imprime o IP do AP
Serial.println(myWiFiManager->getConfigPortalSSID()); //imprime o SSID criado da rede
}
//Callback que indica que salvamos uma nova rede para se conectar (modo estação)
void saveConfigCallback () {
Serial.println("Configuração salva");
}
Configuração da rede WiFi pelo smartphone
Após carregado o código no seu ESP32 verifique se o LED vermelho está piscando. Se estiver, significa que não está conectado na rede como descrito no tópico funcionamento do circuito.
Para iniciar a configuração pressione e segure o botão, após pressionado será habilitado o modo de configuração e o LED vermelho ficará acesso.
Em seu smartphone procure a rede “ESP32-CONFIG” e entre com a senha 12345678.
Ao conectar o smartphone na rede gerada pelo ESP32 você deverá clicar na notificação “Conecte-se à rede Wi-fi” como mostra a imagem abaixo.
Ao clicar na notificação você será redirecionado para uma página e deverá clicar em “Configure WiFi”.
Após clicar em “Configure WiFi” selecione a rede na qual deseja se conectar clicando na rede sublinhada em azul, logo abaixo ela aparecerá num campo onde você só precisará informar a senha da rede escolhida e clicar em “Save”.
Pronto agora aguarde o LED azul acender, se caso acender significa que está conectado a rede.
Conclusão
É possível também fazer esse processo no ESP8266, porém com algumas particularidades. Para realizar este procedimento no ESP8266 é necessário utilizar as bibliotecas WiFiManager, WebServer e DNSServer próprias para ele, já que a que utilizamos neste tutorial é própria para o ESP32.
No código seriam estas bibliotecas.
#include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <DNSServer.h> #include <WiFiManager.h>
Obs.: Se caso utilizar o ESP8266 não esqueça de alterar os pinos dos LEDs e do botão, uma vez que, o que utilizamos neste tutorial é baseado na pinagem do ESP32.
Bom agora só implementar o código a seus futuros projetos para melhorá-lo dando mais facilidade para você conectar seu projeto em outras redes wi-fi.
Gostou de aprender a configurar a rede WiFI do ESP32 pelo celular? Deixe seu comentário logo abaixo. Para saber mais sobre o mundo maker, arduino entre outros dispositivos acesse o blog.
Parabéns pelo tutorial. Tenho uma duvida? No caso o que muda no codigo para inserir a rede e a senha WIFI, por uma tela Oled?Conhece algum tutorial assim?
Alguém por favor sabe me dizer como elimino ruído na imagem da câmera?
Aparecem vários traços em barras verticais na imagem.
Olá Felipe,
De qual tipo de câmera estamos falando?
Abraços!
Vinícius – Equipe MakerHero
Olá Felipe, uma pergunta. E se eu reiniciar meu ESP32 ou faltar luz e ligar denovo. Como posso salvar os dados SSID e Senha para não precisar ter que fazer as configuraçõers dnv? Existe como salvar na memoria? algum exemplo?
Olá, João! Obrigado pela leitura.
Depois que você fizer a configuração para se conectar na rede, os dados ficaram salvos na memória do ESP através do WiFiManager. Se caso faltar a luz ou reiniciar o ESP, ele irá se conectar automaticamente na última rede configurada, assim que ele for energizado.
Abraços!
Olá Felipe,
Parabéns pelo post.
Eu preciso alterar algumas variáveis que estão na EEPROM do ESP32. Teria como usar o WiFiManager para isso? Você tem algum tutorial sobre isso?
Olá!
Pelo que observei com a biblioteca WiFiManager diretamente não seria possível, seria necessário alterar ou utilizar outra biblioteca que faça esse papel.
Abraços!
Vinícius – Equipe MakerHero
Tive os mesmo problemas com as bibliotecas, solucionei da seguinte forma:
– extrai os arquivos e em seguida compactei cada um deles separadamente
– renomeei os nomes de forma a existirem apenas letras e nada de “-”
– fui na ide do arduino>sketch>incluir biblioteca>adicionar .zip
– fiz o upload das mesmas
– por fim alterei o o começo do código para:
//Bibliotecas
#include
#include
#include
#include
#include
Nossa muito bom o post , parabéns.
Funcionou aqui perfeito.
Uma dúvida, quando eu aperto o botão o esp32 gera uma rede Wi-Fi para poder configurar nele, queria poder colocar senha para conectar nesse rede que ele gera.
Achei que essa linha gerava a senha:
if(!wifiManager.startConfigPortal(“ESP32-CONFIG”, “12345678”) ){
Mas quando eu aperto o botão o esp32 gera o Wi-Fi: ESP23-CONFIG
Eu clico nesse nome é já abre o portal da dele para escolher o Wi-Fi.
Obrigado….
Olá, Marcio!
Sim essa linha gera o Wi-Fi ESP32-CONFIG com a senha 12345678, uma vez que você se conectou nessa rede com a senha o smartphone salva a senha.
Então quando você clica nessa rede vai se conectar automaticamente pois ele pede a senha uma vez, da mesma forma que o Roteador.
Para pedir a senha novamente você deve esquecer a senha gravada no seu smartphone ou mudar a senha dentro do código.
Porém recomendo através do seu smartphone ir nessa rede do ESP32-CONFIG e colocar esquecer senha, ao invés de alterá-la no código.
Abraço!
Olá, muito obrigado pela sua resposta. Eu tentei aqui alterar a senha no código.
Porem quando a rede aparece lá nas Redes wifi do computador ou do smartphone aparece o nome da rede: ESP32-CONFIG porem não aparece aquele cadeadinho informando que é uma conexão protegida.
Pode me ajudar com isso?
Obrigado…
Felipe , eu tinha alterado a senha padrão de: 12345678 para uma palavra, ai não sei por que a rede aparece como aberta. Coloquei um senha com números e apareceu rede protegida.
Isso está correto?
Obrigado
Olá,
A senha deve conter no mínimo 8 caracteres, abaixo deste número a rede fica aberta.
Abraço!
Olá Felipe, tudo bem?
Poderia me ajudar com esta mensagem de erro:
=================================================================
error: ‘class WiFiClass’ has no member named ‘softAPIP’
Serial.println(WiFi.softAPIP()); //imprime o IP do AP
=================================================================
Já verifiquei a placa usada na compilação (no caso, estou usando “ESP32 Dev Module”)
Já reinstalei as bibliotecas
Já tentei usar as bibliotecas declaradas com ” ” colocá-las na mesma pasta do arquivo .ino
Nada funcionou!! Voc^^e saberia me dizer o que pode estar errado?? E como posso corrigir??
Fico no aguardo.
Abraço
Olá Gabriel, faça esse teste deixe esta linha comentada
Serial.println(WiFi.softAPIP()); //imprime o IP do AP
e tente rodar o código, para acessar a ESP geralmente é o IP 192.168.4.1
Abraços!
Olá Felipe, tudo bem?
Antes de mais nada, obrigado pela atenção.
Tentei fazer o que você falou (colocar como comentário) e agora aparece outro erro:
===================================================
Erro compilando para a placa ESP32 Dev Module
C:\Program Files (x86)\Arduino\libraries\WebServer-esp32-master\src/WebServer.h:206:15: error: cannot declare field ‘WebServer::_server’ to be of abstract type ‘WiFiServer’
WiFiServer _server;
===================================================
Saberia me dizer o que pode ser isso??
Enfim, vou continuar tentando aqui.. uma hora tem que dar certo.
Abraço
Olá, bom faça esse teste…
Retire as bibliotecas da pasta C:/Arquivos de Programas (x86)/Arduino/libraries e coloque na pasta Documentos/Arduino/libraries do seu pc.
depois tente rodar o código…creio que isso deva resolver!
Abraço.
Olá Felipe, tudo bem?
Eu estou com um problema nas bibliotecas. Esse é o erro que está ocorrendo: Ele não está reconhecendo o arquivo WiFiManager.h
Eu coloquei os arquivos no mesmo diretório do arquivo .ino e mesmo assim ão funcionou. Você sabe o que pode ser?
==================================== MENSAGEM DE ERRO ==========================================
C:\Users\Usuario\ArquivosGabriel\Estagio_DaviTec\BibliotecasArduino_ESP32\Teste\Teste.ino:5:25: fatal error: WiFiManager.h: No such file or directory
compilation terminated.
exit status 1
Erro compilando para a placa ESP32 Dev Module
Boa tarde!
no lugar de:
//Bibliotecas
#include
#include
#include
#include
utilize:
//Bibliotecas
#include “HTTPClient.h”
#include “DNSServer.h”
#include “WebServer.h”
#include “WiFiManager.h”
#include “WiFi.h”
para referenciar as bibliotecas dentro da pasta
//Bibliotecas
#include
#include
#include
#include
#include
WiFiManager wifiManager;//Objeto de manipulação do wi-fi
//callback que indica que o ESP entrou no modo AP
void configModeCallback (WiFiManager *myWiFiManager) {
Serial.println(“Entrou no modo de configuração”);
Serial.println(WiFi.softAPIP()); //imprime o IP do AP
Serial.println(myWiFiManager->getConfigPortalSSID()); //imprime o SSID criado da rede
}
//Callback que indica que salvamos uma nova rede para se conectar (modo estação)
void saveConfigCallback () {
Serial.println(“Configuração salva”);
}
void setup(){
Serial.begin(115200);
Serial.println();
//Definição dos pinos
pinMode(13,INPUT);
pinMode(26,OUTPUT);
pinMode(32,OUTPUT);
//LEDs apagados
digitalWrite(26,LOW);
digitalWrite(32,LOW);
//callback para quando entra em modo de configuração AP
wifiManager.setAPCallback(configModeCallback);
//callback para quando se conecta em uma rede, ou seja, quando passa a trabalhar em modo estação
wifiManager.setSaveConfigCallback(saveConfigCallback);
}
void loop() {
//Se o botão for pressionado
if (digitalRead(13) == LOW) {
Serial.println(“Abertura Portal”); //Abre o portal
digitalWrite(26,HIGH); //Acende LED Vermelho
digitalWrite(32,LOW);
wifiManager.resetSettings(); //Apaga rede salva anteriormente
if(!wifiManager.startConfigPortal(“ESP32-CONFIG”, “12345678”) ){ //Nome da Rede e Senha gerada pela ESP
Serial.println(“Falha ao conectar”); //Se caso não conectar na rede mostra mensagem de falha
delay(2000);
ESP.restart(); //Reinicia ESP após não conseguir conexão na rede
}
else{ //Se caso conectar
Serial.println(“Conectado na Rede!!!”);
ESP.restart(); //Reinicia ESP após conseguir conexão na rede
}
}
if(WiFi.status()== WL_CONNECTED){ //Se conectado na rede
digitalWrite(32,HIGH); //Acende LED AZUL
}
else{ //se não conectado na rede
digitalWrite(32,LOW); //Apaga LED AZUL
//Pisca LED Vermelho
digitalWrite(26,HIGH);
delay(500);
digitalWrite(26,LOW);
delay(500);
wifiManager.autoConnect();//Função para se autoconectar na rede
}
}
No platform IO usando visual code, funcionou o código dessa forma.
//Bibliotecas
#include “HTTPClient.h”
#include “DNSServer.h”
#include “WebServer.h”
#include “WiFiManager.h”
#include “WiFi.h”
No lugar de “”, use
Estimado, al apagarse o reiniciar el router al que está conectado la ESP32, no vuelve a reconectarse al WiFi la ESP32, debo reiniciar la placa ESP32 para que vuelva a conectarse a la red WiFi. Habra alguna manera de que la ESP32 se Reconecte en caso de que se apague o reinicie el router???? Muchas gracias
Olá, Waldo! pelos testes realizados assim que o roteador for ligado novamente o ESP32 se conectará automaticamente, devido a função wifiManager.autoConnect()
Olá Felipe.. eu tive o mesmo erro do Artur, tentei desinstalar bibliotecas mas não obtive resultado.
Achei a ideia muito boa, mas parece não funcionar bem, até que tenha um bom entendimento sobre as bibliotecas que entram em conflito.
Não entendi bem esse conflito de bibliotecas.
Olá Paulo! Obrigado pela leitura, bom eu tenho outra alternativa. Minha sugestão é que você pegue essas 3 pastas das bibliotecas que eu disponibilizei e coloque elas na pasta do seu arquivo .ino e altere no seu código
de:
//Bibliotecas
#include
#include
#include
#include
Para:
//Bibliotecas
#include “HTTPClient.h”
#include “DNSServer.h”
#include “WebServer.h”
#include “WiFiManager.h”
Creio que isso deve resolver, pois vai referenciar as bibliotecas diretamente dentro da sua pasta onde está seu projeto .ino
Olá, Waldo! pelos testes realizados assim que o roteador for ligado novamente o ESP32 se conectará automaticamente, devido a função wifiManager.autoConnect();
Felipe tudo bem?
Eu segui o tutorial do inicio se pular um passo até refiz, mas sem sucesso veja o erro que me é exibido.
Se puder me ajudar serei grato.
In file included from C:\Users\celso\Documents\Arduino\wireless\wireless.ino:4:0:
C:\Users\celso\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\libraries\WebServer\src/WebServer.h:206:15: error: cannot declare field ‘WebServer::_server’ to be of abstract type ‘WiFiServer’
WiFiServer _server;
^
In file included from C:\Users\celso\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\libraries\WiFi\src/WiFi.h:32:0,
from C:\Users\celso\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\libraries\WiFiClientSecure\src/WiFiClientSecure.h:25,
from C:\Users\celso\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\libraries\HTTPClient\src/HTTPClient.h:35,
from C:\Users\celso\Documents\Arduino\wireless\wireless.ino:2:
C:\Users\celso\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\libraries\WiFi\src/WiFiServer.h:31:7: note: because the following virtual functions are pure within ‘WiFiServer’:
class WiFiServer : public Server {
^
In file included from C:\Users\celso\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\cores\esp32/Arduino.h:152:0,
from sketch\wireless.ino.cpp:1:
C:\Users\celso\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\cores\esp32/Server.h:28:18: note: virtual void Server::begin(uint16_t)
virtual void begin(uint16_t port=0) =0;
^
C:\Users\celso\Documents\Arduino\wireless\wireless.ino: In function ‘void configModeCallback(WiFiManager*)’:
wireless:66:23: error: ‘class WiFiClass’ has no member named ‘softAPIP’
Serial.println(WiFi.softAPIP()); //imprime o IP do AP
^
exit status 1
‘class WiFiClass’ has no member named ‘softAPIP’
Felipe excelente tutorial obrigado.
Eu tive um problema usando PlatformIO importei as bibliotecas que você deixou no tutorial e sem mudar nada codigo apresentou o seguinte erro.
src\main.cpp: In function ‘void setup()’:
src\main.cpp:24:29: error: ‘configModeCallback’ was not declared in this scope
wifiManager.setAPCallback(configModeCallback);
^
src\main.cpp:26:37: error: ‘saveConfigCallback’ was not declared in this scope
wifiManager.setSaveConfigCallback(saveConfigCallback);
^
*** [.pio\build\esp32doit-devkit-v1\src\main.cpp.o] Error 1
Já estou a mais de um dia tentando resolver mas sem sucesso, se você souber o que pode estar ocorrendo e como resolver agradeço.
Boa tarde Celso! Peço desculpas pela demora sua notificação estava na caixa de spam do meu e-mail. Bom eu tive problema similar utilizando a IDE do arduino, você tem mais outras bibliotecas Wi-fi instaladas no plataformio?…Pois eu tive que retirar uma que já utilizava na IDE do arduino pois elas entravam em conflito.
Coloca o Void configModeCallback e saveConfigCallback encima do void setup
Olá Felipe, muito legal essa biblioteca WiFiManager!
Eu desenvolvi um WiFiManager em Vuejs e BootstrapVue. Apesar de ainda não ser como uma biblioteca, ele tem algumas funcionalidades a mais bem interessantes como status de conexão com o device, visualização do endereço MAC e opção de utilizar endereço IP fixo.
Tente utilizar e me diga o que achou!
https://github.com/giobauermeister/esp32-wifi-manager-vuejs
Olá Giovanni, opa vou testar!
Opa, esse seu wifi manager gera ip fixo mesmo desconectado da internet?