ESP8266. Comment utiliser la librairie WiFiManager pour gérer les connexions WiFi

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

La librairie WiFiManager permet de gérer très simplement la connexion Wi-Fi dans vos projets ESP8266. La connexion WiFi est très bien prise en charge par de nombreuses librairies, par exemple Blynk, Cayenne, Homie, ESP Easy. Pour des projets plus simples ou qui sortent du cadre de ces librairies, vous devez gérer vous même la connexion au réseau Wi-Fi.

 

La librairie WiFiManager démarre l’ESP8266 en mode point d’accès (mode AP) qui dispose alors d’une fenêtre de configuration à un réseau WiFi. Il est également possible de saisir d’autres paramètres (serveur MQTT, Token Blynk…) en même temps que les paramètres WiFi.

Une version de la librairie adaptée à l’ESP32 existe également

A LIRE AUSSI :
ESP32. Comment utiliser la librairie WiFiManager pour gérer les connexions WiFi

Installer la librairie WiFiManager sur l’IDE Arduino

La librairie WiFiManager est directement disponible depuis le gestionnaire de bibliothèque de l’IDE Arduino. La page officielle du projet se trouve sur GitHub à cette adresse. Le projet a été développé et il est maintenu par tzapu (page perso). C’est un projet très populaire (1500 étoiles) qui est maintenu très régulièrement.

1 Ouvrez le gestionnaire de librairie de l’IDE Arduino : Croquis -> Inclure une librairie -> Gérer les bibliothèques

wifimanager 0 add library ide arduino

2 Cherchez WiFiManager dans le champ de recherche puis installer.

wifimanager 00 librarie

C’est tout.

Ajouter la WiFiManager development à un projet PlatformIO

Pour ceux qui utilisent PlatformIO pour leurs projets, c’est encore plus facile pour installer la librairie, il suffit d’ajouter cette ligne aux dépendances

lib_deps =
    WiFiManager

La librairie sera automatiquement téléchargée au prochain build (compilation du code source).

Comment fonctionne la librairie WiFiManager

Il peut aussi être très intéressant de ne pas embarquer d’identifiant et de mot de passe du réseau Wi-Fi dans le code Arduino.

Par exemple, l’objet devra se connecter sur un réseau dont vous ne connaissez pas les identifiants au moment du développement. Les identifiants peuvent changer. Par exemple, dans un établissement scolaire ou une entreprise, les identifiants et mot de passe sont changés régulièrement par sécurité. Le point d’accès a été remplacé et le nouveau mot de passe est différent.

Bref, vous l’avez compris, en évitant de coder “en dur”, vous n’aurez pas besoin de repasser par l’IDE Arduino à chaque changement de mot de passe ou de matériel.

Voici comment fonctionne le mode AutoConnect() par défaut

1 Lorsque l’ESP démarre, il le met en mode Station et tente de se connecter à un point d’accès (au réseau WiFi local) précédemment enregistré
2 Si l’ESP8266 n’arrive pas à se connecter ou si aucun réseau n’a été enregistré précédemment, il place l’ESP8266 en mode Point d’Accès (Mode AP). Un serveur Web accessible à l’adresse IP 192.168.4.1 est démarré sur l’ESP8266
3 Utiliser n’importe quel appareil disposant d’une connexion WiFi avec un navigateur (ordinateur, smartphone, tablette) pour vous connecter sur la page de configuration

esp8266 wifimanager ap

 

4 Si l’interface de configuration est protégée par un mot de passe, vous devez commencer par saisir ce dernier​

esp8266 wifimanager autoconnect pwd

5 Une fenêtre intitulé “Rejoindre le réseau….” apparaît

esp8266 wifimanager configure wifi

6 Cliquer sur Configure WiFi. Si le réseau WiFi sur lequel vous désirez connecter l’ESP8266 n’est pas affiché, cliquer Refresh et attendez quelques secondes pour que la liste s’actualise.

esp32 wifimanager configure local wifi access point credential

7 Sélectionner le réseau WiFi et saisir le mot de passe. Cliquer sur Save pour enregistrer.

8 L’ESP8266 redémarrer et se connecte au réseau WiFi configuré. Si tout s’est bien passé, l’adresse IP attribuée est affichée dans le journal d’execution

esp8266 wifimanager log connected wifi

Le fonctionnement de la méthode autoConnect() est bloquant, c’est à dire que jusqu’à ce que les paramètres de connexion soient enregistrés, tous les autres traitements sont en attente.

Il existe plusieurs solutions pour éviter ce comportement, par exemple

  • AutoConnectWithFSParameters pré-configurer les paramètres de connexion dans un fichier
  • OnDemandConfigPortal Convoquer le panneau de configuration uniquement lorsqu’on appuie sur un bouton ou une touche tactile
  • AutoConnectWithTimeout on spécifie un temps au delà duquel on continue l’exécution du programme (timeout). En testant l’état de la connexion, on pourra mettre l’ESP8266 en veille si le réseau WiFi n’est pas accessible plutôt que de drainer la batterie

Exemples installés avec la librairie

Plusieurs exemples de connexion sont disponibles

exemples librairie wifimanager esp32

Méthode de connexion Utilisation Exemple
AutoConnect La méthode par défaut Consulter
AutoConnectWithStaticIP Configuration avec attribution d’une IP statique à l’ESP8266 Consulter
A LIRE AUSSI :
Comment attribuer une IP fixe à un projet ESP32 ESP8266 ou ESP01
AutoConnectWithFSParameters Les paramètres sont rechargés au démarrage depuis un fichier stocké sur le système de fichier SPIFFS de l’ESP8266. Consulter
A LIRE AUSSI :
ESP32. Débuter avec la librairie SPIFFS.h pour lire, écrire, modifier des fichiers
AutoConnectWithFSParametersAndCustomIP Idem mais avec un IP fixe et les paramètres de connexion à un serveur MQTT. Les paramètres sont stockés au format JSON à l’aide de la librairie ArduinoJson Consulter
A LIRE AUSSI :
Débuter avec ArduinoJSON v6, librairie Arduino pour manipuler des objets JSON
AutoConnectWithFeedback Consulter
AutoConnectWithFeedbackLED Consulter
AutoConnectWithReset Consulter
AutoConnectWithTimeout La méthode autoConnect() est bloquante. Pour éviter cela, il est possible de spécifier un temps au delà duquel on continue l’exécution du programme (timeout). En testant l’état de la connexion, on pourra mettre l’ESP8266 en veille si le réseau WiFi n’est pas accessible plutôt que de drainer la batterie.

if ( WiFi.status() != WL_CONNECTED ) {
   // Mise en veille...
}
Consulter
A LIRE AUSSI :
ESP8266, activer le mode Deep Sleep, réveil (wake up) avec un détecteur de mouvement PIR
OnDemandConfigPortal Permet de convoquer le mode AP pour configurer une nouvelle connexion à l’aide d’un bouton de commande physique relié sur une broche de l’ESP8266 Consulter

Téléverser le projet WiFiManager pour ESP8266

Voici un exemple pour tester la librairie Créer un nouveau croquis sur l’IDE Arduino ou un nouveau projet PlatformIO et coller le code suivant. Le programme appel la méthode autoConnect() par défaut pour permettre à l’utilisateur de choisir le réseau WiFi sur lequel il souhaite se connecter. Un bouton connecté sur le GPIO de l’ESP8266 permet de réinitialiser les paramètres WiFi.

#include <Arduino.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>         

WebServer server(80);
WiFiManager wm;

#define PIN_RESET_BUTTON D4        
int RESET = 0; 

void handle_root();

void setup() {
    // put your setup code here, to run once:
    Serial.begin(115200);

    pinMode(PIN_RESET_BUTTON, INPUT);
    //WiFiManager
    //Local intialization. Once its business is done, there is no need to keep it around
    
    //reset saved settings
    //wm.resetSettings();
    
    //Permet d attribuer une IP fixe a l ESP8266
    //wifiManager.setAPStaticIPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));

    //Tente de se connecter sinon passe en mode AP.
    wm.autoConnect("ESP8266_AP", "esp8266_pwd");
    //Idem avec nom automatique de la forme ESP + ChipID et sans mot de passe
    //wifiManager.autoConnect();

    //La librairie est bloquante. Une fois connecte, le programme continue
    Serial.println("ESP8266 is connected to Wi-Fi network");
    
    // Affiche une interface HTML au projet depuis un navigateur sur adresse_ip_esp8266/
    server.on("/", handle_root);

    server.begin();
    Serial.println("HTTP server started");
    delay(100); 
}


void loop() {
    server.handleClient();
    
    RESET = digitalRead(PIN_RESET_BUTTON);
    if( RESET == HIGH) {                                 
      Serial.println("Erase settings and restart ...");
      delay(1000);
      wm.resetSettings();  
      ESP.restart();  
    }
}

// HTML & CSS contents which display on web server
String HTML = "<!DOCTYPE html>\
<html>\
  <body>\
    <h1>Welcome</h1>\
    <p>Your first Iot Project made with ESP8266</p>\
    <p>&#128522;</p>\
  </body>\
</html>";

// Handle root url (/)
void handle_root() {
  server.send(200, "text/html", HTML);
}

Comment fonctionne le code

Afin de pouvoir piloter la librairie WiFiManager à n’importe moment, on initialise un objet nommé vm a début du code

WiFiManager wm;

On créé également un serveur HTTP qui servira à afficher une page de paramètres ou toute autre information. Ce n’est pas nécessaire dans la plupart des projets

WebServer server(80);

On va ajouter un bouton sur la broche D4 qui va permettre de réinitialiser les paramètres de connexion

#define PIN_RESET_BUTTON D4        
int RESET = 0; 

esp8266 reset button wifimanager settings

On lance la connexion au réseau WiFi dans le setup(). Si le réseau WiFi est disponible et que les paramètres sont connus, la connexion est directement établie, sinon l’ESP8266 passe en mode AP et attend que l’utilisateur se connecte et renseigne les paramètres. Ici, l’accès à la page de configuration est protégée par un mot de passe

wm.autoConnect("ESP8266_AP", "esp8266_pwd");
Le mot de passe doit au moins comporter 8 caractères

Dès que l’ESP8266 est connecté au réseau WiFi, on démarre le serveur HTPP et on attend les clients sur la page /

server.on("/", handle_root);
server.begin();
Serial.println("HTTP server started");

Dès qu’un utilisateur arrive sur la page, la méthode handleroot() lui renvoi la page de l’interface

void handle_root() {
  server.send(200, "text/html", HTML);
}

La page est pré-construite dans la variable HTML

String HTML = "<!DOCTYPE html>\
<html>\
  <body>\
    <h1>Welcome</h1>\
    <p>Your first Iot Project made with ESP8266</p>\
    <p>&#128522;</p>\
  </body>\
</html>";

Pour que le serveur fonctionne, il faut l’appeler régulièrement dans la loop() principale. Attention à ne pas mettre de delay !

server.handleClient();

Ouvrez n’importe quel navigateur internet pour accéder à l’interface HTML de votre objet connecté. Pour cela, il suffit de saisir l’adresse IP de l’ESP8266 dans la barre d’adresse (URL)

esp8266 wifimanager html interface

Enfin dès qu’on appuie sur le bouton connecté sur la broche D4, on ré-initialise les paramètres de connexion et on redémarre l’ESP8266.

RESET = digitalRead(PIN_RESET_BUTTON);
if( RESET == HIGH) {                                 
      Serial.println("Erase settings and restart ...");
      delay(1000);
      wm.resetSettings();  
      ESP.restart();  
}

Peut-on combiner avec d’autres librairies : pubsubclient, ArduinoOTA… ?

Oui, la librairie WiFiManager est compatible avec les autres librairies. En effet, c’est une couche d’abstraction à la librairie ESP8266WiFi. Elle n’intervient qu’au démarrage de l’ESP8266.

Pour gérer la connexion à un serveur (broker) MQTT vous pouvez vous inspirer de cet exemple disponible sur GitHub. WiFiManager est capable d’intégrer la saisie de paramètres de connexion supplémentaires. Par contre, il faut gérer soit même l’enregistrement et la chargement des paramètres au lancement de l’ESP8266 à l’aide de la méthode setSaveConfigCallback.

Concernant la mise à jour sans fil en Wi-Fi à l’aide de la librairie ArduinoOTA, c’est également possible. Par contre il faut sauvegarder et recharger les paramètres de connexion. Après une mise à jour, la librairie WiFiManager a tendance à oublier les paramètres de connexion précédents.

Projets Client WEB, communiquer avec un projet ESP8266

Maintenant que nous savons comment nous connecter à un réseau WiFi à l’aide d’un ESP8266, voici une série de projets

Projets Web Server, ajouter une interface à vos projets ESP8266

Voici également plusieurs projets et tutoriels pour ajouter une interface web à vos projets ESP8266

Mises à jour

29/07/2020 Actualisation du code et du texte

Avez-vous aimé cet article ?
[Total: 1 Moyenne: 5]
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Vous avez aimé ce projet ? Ne manquez plus aucun projet en vous abonnant à notre lettre d’information hebdomadaire!

quel modèle esp8266 choisir
Quel modèle d'ESP8266EX choisir en 2020 ?
guide choix esp32 development board
Quel ESP32 choisir en 2020 ?

Vous rencontrez un problème avec ce sujet ?

Peut-être que quelqu’un a déjà trouvé la solution, visitez le forum avant de poser votre question

6 Commentaires
  1. J’ai un projet quelqu’un peu m’aider svp:
    Développer une liaison sans fil WIFI entre un ESP32 & un PC, la plus rapide possible avec une vérification du débit en temps réel !
    – évaluation des méthodes possibles (cf. WIFI & méthodes)
    – ESP32 programmation Arduino ou Python (acquisition, formatage et envoi des données – utilisation des DAC internes)
    – PC (programme de gestion en python) enregistrement et affichage des données.
    L’ensemble doit fonctionner quasiment en temps réel !
    À la suite, programmation semblable de l’acquisition des données sous Android !

  2. Merci pour l’article. je cherche la façon de sortir du portail( s’il n’y a pas de routeur ) et de se connecter en local.
    si quelqu’un connaît la solution je suis preneur !
    comme :https://github.com/tzapu/WiFiManager/issues/103
    mais cela marche pas…
    d’avance merci

  3. Hello à tous,
    Savez-vous s’il est possible d’utiliser la connexion wifi sur un arduino (genre mega) par le biais d’une connexion serie vers un module esp utilisant cette librarie ? (Mon but est d’envoyer des requêtes mqtt a partir de l’arduino mega).
    Merci pour votre aide !

    • Bonjour JJ. Oui c’est possible, il est possible d’utiliser l’ESP8266 comme une carte WiFi, c’était d’ailleurs l’objectif initial du projet avant de devenir une plateforme totalement indépendante par la suite.

  4. Exactement ce que je cherchait, encore un grand merci, ce sont des heures de recherches gagnées

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.