Web server no ESP8266 com WiFiManager

Em meados de Fevereiro de 2016, fiz um post de um web server no ESP8266 com a IDE Arduino. Naquele post, utilizei a forma mais simples de se fazer um web server para o controle das GPIOs, de tal forma que pelo browser, porém com a configuração da rede feita de forma “hardcoded”, sendo necessária uma nova gravação do firmware para a alteração do SSID e senha da rede.

Neste post, fiz uma considerável atualização, com a utilização da biblioteca WiFiManager, já abordada aqui no blog e a mudança da interface web com uso de CSS.

Uma outra característica desta versão, é que o botão na interface gráfica (pagina web) é alterado de acordo com o status da GPIO, ou seja, quando muda o status da GPIO o nome no botão muda também.

Compartilhar do Pixlr

Demonstração

Abaixo um vídeo de como fica a configuração e a utilização da interface.

Código fonte

Para a utilização deste projeto, é necessária a instalação da biblioteca WiFiManager, conforme post já publicado aqui.

A grande vantagem em utilizar a biblioteca WiFiManager, é a praticidade em configurar e reconfigurar a rede WiFi, já que se a rede não estiver disponível, uma nova poderá ser configurada pela interface de configuração.

 

Conclusão

Este projeto está evoluindo, e sempre que possível será atualizado aqui.

 

Happy Hacking!

34 Comments

  1. Samyr Almeida

    Muito prático e fácil
    Bem legal Pedro.

    Reply
  2. tiago alexandre batista

    Testei aqui, o webserver funciona certinho, mas não aparece a opção de gerenciar conexões de rede, por que será? não fiz nenhuma alteração do ´codigo

    Reply
    1. Pedro Minatel (Post author)

      Tiago, você já deve ter uma rede salva no ESP. Tente zerar a memória toda pelo comando do esptool.py erase-flash

      Reply
      1. tiago alexandre batista

        Pedro ,obrigado pela resposta, tenho python 2,7 instalado em meu computador, mas não consegui configurar o esptool, estou utilizando windows10, Infelizmente não achei uma forma clara de instala-lo no windows.
        Será que consigo limpar o ROM com o NodeMCU-Flascher?

        Reply
    2. Pedro Minatel (Post author)

      Tiago, lembrei que deixei uma função de zerar a configuração no meu código de exemplo. Se tiver alguma dúvida na execução do esptool.py, use essa função uma vez e depois volte para o código original.

      Reply
  3. Rafael

    Ola Pedro excelente post. Em que ponto dessa códido fonte você montou a página onde são listadas as redes e digito a senha? Só vi o identifiquei o HTML da página de acesso a GPIO. Essa página que lista as redes é montada automaticamente pela biblioteca Wi-Fi e por isso não está presente no exemplo? Se sim, qual é o método da biblioteca que exibe a página?

    Reply
    1. Pedro Minatel (Post author)

      Rafael, a página de configuração aparece quando não há rede configurada. Tem como fazer um reset utilizando uma função que deixei no código ou zerar toda a memória do ESP pelo esptool.py.

      O ESP guarda as informações de SSID e senha da rede em uma região de memória que não é apagada durante a programação do módulo.

      Reply
  4. RAFHAEL AUGUSTO

    Boa noite Pedro, Ótimo post , como utilizo a função q vc deixou para resetar a memória?

    Reply
  5. Rafael

    Rafhael, é fácil. Fça o seguinte:

    Adicione após a linha 85:
    buf += “ResetReset“;

    Entre as linhas 67 e 68:
    } else if (req.indexOf(“reset”) != -1) {
    Serial.println(“Realiza reset”);
    reset_config();
    }

    Eu fiz o teste aqui e funcionou. Toda vez que for fazer os testes de conexão, deixa o serial monitor da IDE do Arduino aberta que fica rolando um bocado de mensagens, acho que são automáticas da biblioteca, que ficam dando dicas do que tá rolando no ESP8266 naquele momento.

    Quando você clicar neste botão reset ele vai “perder” as informações de acesso ao seu roteador que configurou e ai o Soft AP volta a ficar disponível, consequentemente ele vai abrir aquela página para você selecionar uma nova rede para configurar!

    Espero ter ajudado.

    Reply
    1. Rafael

      Deu erro de formatação no HTML para o código que sugeri após a linha 85. O que você vai digitar na linha 86 é a mesma coisa da linha 85 mas troca “Lampada” por “Esquecer Senha”, depois trocar “rele_on” por “Reset” e finalmente troca “Ligar” por “Reset”.

      Reply
    2. tiago alexandre batista

      fiz parecido, mas diferenteinseri uma linha depois da linha 63 e colei a função reset_config();
      ficando assim

      //Trata a string do cliente em busca de comandos
      if (req.indexOf(“rele_on”) != -1){
      digitalWrite(D3, HIGH);
      status_gpio = HIGH;
      reset_config();

      Assim quando apertar o botão ligar ele reseta a placa, ai é só comentar reset_config(); e reprogramar de novo.

      Reply
  6. Anderson Marinhoa

    Pedro esse tipo de adaptador serve para o esp?
    -https://m.pt.aliexpress.com/item/32297979698.html#autostay

    Reply
    1. Pedro Minatel (Post author)

      Anderson, bom dia!

      Pelo fato de ser 3.3v, funciona sim. Eu uso o CH340 já com o ESP e nunca tive problemas.

      Reply
  7. Thiago Carvalho

    Oi Pedro!

    Primeiramente, agradeço por compartilhar essa ótima dica de biblioteca.
    Tenho duas dúvidas
    A primeira é em relação a biblioteca, pois mesmo com a rede configurada eventualmente quando o esp8266 reinicia, cai na página de configuração da rede, mesmo eu acessando pela rede do roteador (não pela AP). Pode informar algo sobre isso, se já aconteceu com você, se é normal ou sé pode ser um problema?
    A segunda é sobre o GPIO que está ligado ao led e quando o esp8266 é reiniciado o led fica acesso e aparentemente o esp fica travado e não conecta.
    Tem ideia do que seja?

    Obrigado!

    Reply
  8. eduardo gonçalves

    olá Pedro.

    Estou desenvolvendo um projeto de monitoramento e detecção de gás, e pretendo utilizar o esp8266. No momento em que o sensor detectar o gas ele enviara uma mensagem de alerta via wi-fi para um celular androide. É possivel ?

    Se pude entrar em contato por e-mail me ajudaria muito
    eduardo.asfaz@outlook.com

    desde já, grato e no aguardo !!

    Reply
    1. Pedro Minatel (Post author)

      É possível sim fazer isso!

      Reply
  9. Marcos Montini

    Tenho instalado a Idle 1.6.5 rev5 e tento compilar o código acima e sempre apresenta erro. Estou usando a versão 0.12 do wifimanager.

    Reply
    1. Pedro Minatel (Post author)

      Marcos, qual o erro apresentado?

      Reply
  10. Julian

    Pedro, está dando um erro ao compilar ‘D3′ was not declared in this scope’, por favor como resolver?

    Reply
    1. Pedro Minatel (Post author)

      Qual a placa que está utilizando? Essa nomenclatura é para a WeMos.

      Reply
  11. Iderley

    Olá Pedro, muito boa noite!
    Excelente o post; Parabéns!
    Fiz uma modificação do GPIO para utilizar o ESP -01 e está funcionando bem porém, gostaria de utiliza-lo
    sem o roteador, só pelo WiFi do celular; isso é possível?
    Obrigado.

    Iderley

    Reply
    1. Pedro Minatel (Post author)

      É possível sim. Utilizando o ESP como modo AP, você consegue conectar diretamente pelo celular, PC…

      Reply
  12. Gabriel Mavroudes

    Olá Pedro,

    estou desenvolvendo um projeto que coletar dados analógicos e traça um gráfico em um app de android ou em uma página web. É possível utilizando somente o Nodemcu?

    Reply
  13. Allen

    Olá Pedro!

    Esse modelo precisa de um roteador pra funcionar (conectando na rede atual) ou o ESP fica independente? Abraço!

    Reply
  14. Rui Viana

    Oi Pedro, bom dia.
    O código deste link: http://pedrominatel.com.br/pt/arduino/web-server-com-esp8266-e-ide-arduino/
    compila e funciona corretamente.

    Mas ao usar o código deste link: http://pedrominatel.com.br/pt/esp8266/web-server-no-esp8266-com-wifimanager/
    estou tendo alguns erros:
    Primeiramente em todas linhas que apontam para o port D3, tenho erro de compliação,
    Ex: de linha com erro: pinMode(D3, OUTPUT); D3′ was not declared in this scope
    acredito que deveria ser: pinMode(3, OUTPUT); ‘
    Corrigi estas linhas,
    mas ao compilar novamente tenho o erro:

    Error compiling for board Generic ESP8266 Module.

    IDE arduino 1.6.9
    ESP8266 modulo na IDE ESP8266 –> Generic ESP8266 Module

    Boards manager esp8266 by ESP8266 community version 1.6.5-947-g39819f0

    Estou fazendo algo errado?

    Desde já obrigado. Rui

    Reply
    1. Pedro Minatel (Post author)

      Rui, boa tarde!

      A nomeclatura das portas depende da sua placa. A porta D3 é na minha placa, sendo necessario voce mudar para ma outra porta.
      Se estiver usando a GPIO12, será 12 e não 3, por exemplo.

      O codigo não está errado, apenas aponta para uma GPIO da minha placa.

      Obrigado!

      Reply
  15. Joás costa martins

    parabéns mano seu trabalho é excepcional, brilhante e muito necessário e útil para nós que estamos iniciando.
    Continue sempre assim.

    Reply
    1. Pedro Minatel (Post author)

      Muito obrigado! Espero contribuir muito mais!! Valeu pelo apoio!

      Reply
  16. Jefersson Baffini

    Pedro, tudo bem? Montei um dispositivo nos detalhes que você menciona, tudo funcionando a mil maravillhas até que ao deixar o módulo ligado , depois um determinado tempo fui conectar e não consegui, fiz um ping para a placa e não respondeu, somente após um reset que voltou a funcionar e isto ocorre com frequência. Diga uma coisa, você já observou este tipo de problema? ah, esqueci de mencionar que baixei o código em três placas e o sintoma é idêntico, após um determinado tempo você perde conexão com a placa. No aguardo, e parabéns pelo artigo.

    Reply
  17. Wall

    Parabéns Pedro, muito bom seus artigos!!
    Estou com um problema com as bibliotecas desse exemplo. Após inseri-las na IDE do Arduino, quando vou compilar aparece o erro “C:\Users\wall\Documents\Arduino\libraries\ESP8266WiFi\src/functional:53:20: fatal error: typeinfo: No such file or directory

    #include ”

    Já tentei verificar várias dependências das bibliotecas, porém, sempre que incluo uma, aparece mais uma biblioteca para incluir. Você teve esse problema? Onde você pegou as bibliotecas que você utilizou.

    Grato!

    Reply
  18. Emerson

    Boa tarde ..
    Quero muito utilizar essa parte de configuração automática , mas percebi que esse projeto ESP estandAlone ..
    Tem alguma coisa desse pra ESP + UNO ? , pois estou usando um UNO pra controlar um Display 16×2 , pushbottons, relés , e sensores de temperatura ! Não consigo colocar tudo isso em apenas o ESP ..
    O meu ESP , está apenas como wifi do meu UNO , mas gostaria de ter essa interface pra configurar o meu projeto e associar a uma rede , via Browser !
    Grato
    Emerson

    Reply
  19. ruber

    quando subo esse codigo pro nodemcu ele nao funciona e tbm para de ser reconhecido na rede. dai tenho q reinstalar um firmware q achei aqui na intenet pra voltar a funcionar de novo.
    sera q preciso de um firmware especifico pra funcionar perfeitamente?

    valew pelas dicas estou sempre acompanhando o blog!!!

    Reply
  20. Luan Costa

    tô com um pequeno problema, quando eu upo o código ele já conecta automaticamente em minha rede sem mesmo me perguntar em qual rede eu quero conectar, e já pula pra o webserver de acionamento do relé. Como se o ssid e a senha já estivesse salva no esp, ele nem chega a iniciar o acess point

    Reply
    1. Pedro Minatel (Post author)

      Luan, isso ocorre pois o ESP grava as informações de rede em uma posição de memoria em que não é apagada após um novo firmware ser carregado. Na biblioteca WiFiManager tem uma função de reset destas informações.

      Veja em:

      void reset_config(void) {
      //Reset das definicoes de rede
      wifiManager.resetSettings();
      delay(1500);
      ESP.reset();
      }

      Reply

Deixe seu comentário