Como usar o WifiManager com ESP32 e ESP8266

Neste post vamos abordar o uso do WifiManager com ESP32 e ESP8266. O WifiManager é uma biblioteca que permite a configuração da rede Wifi do seu módulo sem que seja necessário carregar o código novamente.

Toda a configuração da rede wireless do módulo é feita por meio de uma interface web: você acessa o módulo usando um browser, coloca as informações de SSID (nome da rede) e senha, e essas informações são gravadas na memória do ESP. Vamos ver como isso funciona.

Como o WifiManager funciona

Geralmente, quando criamos um código para os módulos ESP, temos as famosas linhas com “Coloque aqui o nome da sua rede wifi” e “coloque aqui a senha da sua rede wifi”. Mais ou menos assim:

....
//Definicoes da rede wifi e conexao
String ssid  = "NOME DA REDE WIFI"; //Nome da sua rede wifi
String pass  = "SENHA DA REDE WIFI"; //Senha da sua rede wifi
String token = "81231:AAFWpkSaADczuIwQWCo3gSWKDg"; //Token bot Telegram
...

Isso não é muito prático se você for usar o módulo em diferentes redes wireless, ou precisa enviar o seu projeto de Automação Residencial ou IoT (Internet das Coisas) para um cliente. Imagine que ele precise alterar o nome da rede ou a senha. Normalmente, ele teria que retirar o ESP do circuito, reprogramar e devolver o módulo para o seu lugar.

Com o WifiManager, você configura o ESP32 ou ESP8266 por meio de uma página Web, gravando o SSID (nome da rede wifi) e senha em memória não volátil, ou seja, ao desligar a alimentação do ESP, essa informação não é perdida.

Utilizando um smartphone, um computador ou um tablet, em poucos minutos você pode alterar a configuração da rede wireless do seu módulo sem precisar mexer em uma única linha de código.

Com o WifiManager, você também pode setar outros parâmetros para configuração do seu ESP, como por exemplo o endereço de um broker MQTT.

Circuito ESP8266 e ESP32

Vamos utilizar nos testes do WifiManager dois módulos bem comuns da linha ESP. O primeiro é o ESP8266 NodeMCU. Nele vamos colocar um push button conectado ao pino D2. Esse botão vai servir para “zerar” a configuração da rede wireless quando necessário.

No outro circuito, temos um ESP32 DevKit, este com um push button conectado no pino D4:

Os pinos são diferentes mas dentro do programa vamos nos referir a eles com o mesmo número: pino 4. Isso vai permitir que possamos utilizar o mesmo programa para as duas placas.

Configuração da IDE e instalação da biblioteca WifiManager

Existem várias bibliotecas para você utilizar o WifiManager, inclusive para placas como STM32 e Raspberry Pi Pico. A biblioteca que escolhemos para este post é bem simples de usar e vai servir perfeitamente para os testes.

Para instalar a biblioteca, utilize o Gerenciador de Bibliotecas dentro do menu Sketch -> Incluir Biblioteca -> Gerenciar Bibliotecas.

Dentro do Gerenciador de Bibliotecas, procure por wifimanager e selecione a biblioteca abaixo:

Clique em Instalar para finalizar esta etapa da instalação da biblioteca WifiManager.

Dúvidas na instalação da biblioteca? Confira o post Como instalar uma biblioteca na IDE Arduino.

Para instalar as placas da linha ESP8266 na IDE, utilize o link abaixo no menu Arquivo -> Preferências, dentro do campo URLs do Gerenciador de Placas Adicionais:

http://arduino.esp8266.com/stable/package_esp8266com_index.json

Clique em OK e agora selecione o menu Ferramentas -> Placa -> Gerenciador de placas. No campo de pesquisa procure por esp8266 e selecione o esp8266 by ESP8266 Community, conforme imagem abaixo:

Para usar o ESP8266 NodeMCU, selecione no menu Ferramentas -> Placas a NodeMCU 1.0 (ESP-12E Module).

O procedimento para as placas da linha ESP32 é o mesmo. Utilize a seguinte URL:

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

No Gerenciador de placas procure por ESP32 e instale a esp32 por Espressif Systems:

Finalmente, selecione a placa ESP32 Dev Module no menu Ferramentas -> Placa na hora de carregar o seu programa na placa ESP32. Note que o modelo da sua placa pode ser diferente dessa que estamos usando no post.

Programa WifiManager com ESP32 e ESP8266

Como já dissemos vamos usar um único programa para as duas placas, já que neste caso temos poucas alterações de uma placa para outra.

No início do programa (linhas 4 a 15), carregamos as bibliotecas específicas para cada tipo de placa. As bibliotecas comuns são a DNSServer e a WifiManager, que instalamos anteriormente.

Vamos utilizar como pino de reset no programa o pino 4, que é a conexão D2 na placa ESP8266 e D4 na placa ESP32. Se necessário, você pode utilizar outros pinos, sem problemas. Apenas consulte a documentação do módulo pois alguns pinos tem funções especiais que podem interferir no funcionamento do circuito e do programa.

O programa usa a WifiManager para criar um AP (Access Point) com o nome de ESP_ARDUINOECIA, com senha arduinoecia (linha 35). É nesse AP que vamos conectar para configurar o Wifi dos nossos módulos.

//Programa: WifiManager com ESP8266 e ESP32
//Autor: Arduino e Cia

//Carrega as biblioteca de acordo com a placa utilizada

#if defined(ESP8266)
//Bibliotecas ESP8266
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>
#else
//Bibliotecas ESP32
#include <WiFi.h>
#include <WebServer.h>
#endif

//Bibliotecas comuns
#include <DNSServer.h>
#include <WiFiManager.h>

//Define o pino para reset das definicoes de wifi
int pino_reset = 4;

void setup() {
  Serial.begin(115200);
  delay(10);

  pinMode(pino_reset, INPUT);

  WiFiManager wifiManager;

  wifiManager.setConfigPortalTimeout(240);

  //Cria um AP (Access Point) com: ("nome da rede", "senha da rede")
  if (!wifiManager.autoConnect("ESP_ARDUINOECIA", "arduinoecia")) {
    Serial.println(F("Falha na conexao. Resetar e tentar novamente..."));
    delay(3000);
    ESP.restart();
    delay(5000);
  }

  //Mensagem caso conexao Ok
  Serial.println(F("Conectado na rede Wifi."));
  Serial.print(F("Endereco IP: "));
  Serial.println(WiFi.localIP());
}

void loop() {
  //Verifica se o botao foi pressionado
  int valor = digitalRead(pino_reset);
  if (valor == 1) {
    //Apaga os dados da rede wifi gravados na memoria e reinicia o ESP
    WiFiManager wifiManager;
    wifiManager.resetSettings();
    Serial.println("Configuracoes zeradas!");
    ESP.restart();
  }
}

Você pode notar que o programa é bem enxuto. No loop, temos o tratamento do estado do pino de reset, que ao ser acionado zera as informações da rede wifi que estão gravadas na memória, e coloca o módulo novamente em modo AP, permitindo que você faça uma nova configuração da rede.

Usando a interface web para configurar o módulo ESP

Com o programa carregado, é hora de usar o browser de sua preferência para realizar as configurações.

Usando um smartphone, conecte a rede wifi no access point ESP_ARDUINOECIA, usando a senha arduinoecia (em minusculas). Em seguida, acesse o seguinte endereço IP no browser: 192.168.4.1. Esse é o endereço padrão gerado pelo WifiManager (clique na imagem para ampliar):

Agora vem a parte fácil. Selecione o botão CONFIGURE WIFI, selecione a rede wireless de sua preferência, coloque a senha e com isso o módulo ESP vai reiniciar e se conectar na rede que você escolheu. Você pode acompanhar todo esse processo por meio do Serial Monitor.

Lembrando que esse é um exemplo básico de conexão, e que a(s) biblioteca(s) WifiManager tem muitos recursos à explorar, como por exemplo adicionar campos customizados (o exemplo do MQTT), reiniciar o módulo sem perder os dados da rede wifi gravados na memória, setar endereço IP fixo, etc.

Gostou? Confira outros posts usando módulos ESP aqui mesmo no Arduino e Cia!