WiFiManager avec ESP8266 – Connexion automatique, paramètre personnalisé et gestion de votre SSID et mot de passe

WiFiManager avec ESP8266 - Connexion automatique, paramètre personnalisé et gestion de votre SSID et mot de passe

Dans ce guide, vous apprendrez à utiliser WiFiManager avec la carte ESP8266. WiFiManager vous permet de connecter votre ESP8266 à différents points d’accès (AP) sans avoir à coder en dur et à télécharger un nouveau code sur votre carte. De plus, vous pouvez également ajouter des paramètres personnalisés (variables) et gérer plusieurs connexions SSID avec la bibliothèque WiFiManager.

WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Comment WiFiManager fonctionne avec ESP8266

Le WiFiManager est une excellente bibliothèque à ajouter à vos projets ESP8266, car en utilisant cette bibliothèque, vous n’avez plus besoin de coder en dur vos informations d’identification réseau (SSID et mot de passe). Votre ESP rejoindra automatiquement un réseau connu ou configurera un point d’accès que vous pourrez utiliser pour configurer les informations d’identification du réseau. Voici comment ce processus fonctionne :

  • Lorsque votre ESP8266 démarre, il est configuré en mode Station et tente de se connecter à un point d’accès précédemment enregistré (une combinaison connue de SSID et de mot de passe) ;
  • Si ce processus échoue, il met l’ESP en mode point d’accès ;
  • À l’aide de n’importe quel appareil compatible Wi-Fi avec un navigateur, connectez-vous au point d’accès nouvellement créé (nom par défaut AutoConnectAP) ;
  • Après avoir établi une connexion avec l’AutoConnectAP, vous pouvez accéder à l’adresse IP par défaut 192.168.4.1 pour ouvrir une page Web qui vous permet de configurer votre SSID et votre mot de passe ;
  • Une fois qu’un nouveau SSID et un nouveau mot de passe sont définis, l’ESP redémarre et tente de se connecter ;
  • S’il établit une connexion, le processus est terminé avec succès. Sinon, il sera configuré comme point d’accès.

1644644888 932 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Ce billet de blog illustre deux cas d’utilisation différents pour la bibliothèque WiFiManager :

  • Exemple #1 – Connexion automatique : Exemple de serveur Web
  • Exemple #2 – Ajout de paramètres personnalisés

Conditions préalables

Avant de poursuivre ce didacticiel, nous vous recommandons de lire les ressources suivantes :

Installation de WiFiManager et ArduinoJSON

Vous devez également installer le WiFiManager Bibliothèque et ArduinoJSON Bibliothèque. Suivez ces instructions suivantes.

Installation de la bibliothèque WiFiManager

  1. Cliquez ici pour télécharger la bibliothèque WiFiManager. Vous devriez avoir un dossier .zip dans vos téléchargements
  2. Décompressez le .Zip *: français dossier et vous devriez obtenir WiFiManager-maître dossier
  3. Renommez votre dossier de WiFiManager-maître à WiFiManager
  4. Déplacez le dossier WiFiManager vers votre installation Arduino IDE bibliothèques dossier
  5. Enfin, rouvrez votre IDE Arduino

Installation de la bibliothèque ArduinoJSON

  1. Cliquez ici pour télécharger la bibliothèque ArduinoJSON. Vous devriez avoir un dossier .zip dans vos téléchargements
  2. Décompressez le .Zip *: français dossier et vous devriez obtenir Maître ArduinoJSON dossier
  3. Renommez votre dossier de Maître ArduinoJSON à ArduinoJSON
  4. Déplacez le dossier ArduinoJSON vers votre installation Arduino IDE bibliothèques dossier
  5. Enfin, rouvrez votre IDE Arduino

Découvrez comment décoder et encoder JSON avec Arduino ou ESP8266 à l’aide de la bibliothèque Arduino JSON.


Exemple #1 – WiFiManager avec ESP8266 : exemple de connexion automatique

Ce premier exemple est basé sur le post du serveur Web ESP8266, où vous créez un serveur Web avec un ESP8266 pour contrôler deux sorties (regardez le didacticiel vidéo ci-dessous).

Pour l’exemple #1, nous utiliserons le projet précédent, mais au lieu de coder en dur le SSID et le mot de passe, vous pourrez le configurer avec la bibliothèque WiFiManager.

Code

Après avoir installé le module complémentaire ESP8266 pour l’IDE Arduino (Comment installer la carte ESP8266 dans l’IDE Arduino), accédez à Outils et sélectionnez « ESP-12E » (ou choisissez la carte de développement que vous utilisez). Voici le code que vous devez télécharger sur votre ESP8266 :

/*********
  Rui Santos
  Complete project details at https://raspberryme.com  
*********/

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>         // https://github.com/tzapu/WiFiManager

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

void setup() {
  Serial.begin(115200);
  
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);

  // WiFiManager
  // Local intialization. Once its business is done, there is no need to keep it around
  WiFiManager wifiManager;
  
  // Uncomment and run it once, if you want to erase all the stored information
  //wifiManager.resetSettings();
  
  // set custom ip for portal
  //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));

  // fetches ssid and pass from eeprom and tries to connect
  // if it does not connect it starts an access point with the specified name
  // here  "AutoConnectAP"
  // and goes into a blocking loop awaiting configuration
  wifiManager.autoConnect("AutoConnectAP");
  // or use this for auto generated name ESP + ChipID
  //wifiManager.autoConnect();
  
  // if you get here you have connected to the WiFi
  Serial.println("Connected.");
  
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 5  
            client.println("<p>GPIO 5 - State " + output5State + "</p>");
            // If the output5State is off, it displays the ON button       
            if (output5State=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // If the output4State is off, it displays the ON button       
            if (output4State=="off") {
              client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Afficher le code brut

Ce code doit inclure les bibliothèques suivantes pour le WiFiManager :

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

Vous devez également créer un WiFiManager objet:

WiFiManager wifiManager;

Et exécutez le autoConnect() méthode:

wifiManager.autoConnect("AutoConnectAP");

C’est ça! En ajoutant ces nouvelles lignes de code à vos projets ESP8266, vous pouvez configurer les informations d’identification Wi-Fi à l’aide de WiFiManager.

Accéder au point d’accès WiFiManager

Si c’est la première fois que vous exécutez le code WiFiManager avec votre carte ESP8266, vous verrez les prochains messages imprimés dans votre moniteur série Arduino IDE.

WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Vous pouvez soit utiliser votre ordinateur/ordinateur portable pour vous connecter au point d’accès AutoConnectAP :

1644644888 479 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Ensuite, ouvrez votre navigateur et tapez l’adresse IP suivante : 192.168.4.1. Cela charge la page Web suivante, où vous pouvez définir vos identifiants Wi-Fi :

1644644888 509 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Vous pouvez également utiliser votre smartphone, activer le Wi-Fi et vous connecter à AutoConnectAP comme suit :

1644644888 276 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Vous devriez voir une fenêtre similaire à celle illustrée dans la figure ci-dessous. Ensuite, appuyez sur le « S’IDENTIFIER » bouton:

1644644888 472 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Configuration de la page Wi-Fi

Vous serez redirigé vers une page Web à 192.168.4.1 qui vous permet de configurer les identifiants WiFi de votre ESP. Appuyez sur la « Configurer le Wi-Fi » bouton:

1644644888 811 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Choisissez votre réseau souhaité en appuyant sur son nom et le SSID devrait être rempli instantanément (dans mon cas « MEO-620B4B ») :

1644644888 77 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Après cela, tapez votre mot de passe et appuyez sur « sauver“ :

1644644888 104 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Vous verrez un message similaire indiquant « Identifiants enregistrés“ :

1644644888 884 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

En attendant, le Moniteur série affiche les résultats de l’analyse des points d’accès disponibles et un message indiquant que les informations d’identification Wi-Fi ont été enregistrées.

1644644888 909 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Accéder à votre serveur Web

Maintenant, si vous RÉINITIALISER votre carte ESP, il imprimera l’adresse IP dans le Serial Monitor (dans mon cas c’est 192.168.1.132):

1644644888 192 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Ouvrez votre navigateur et tapez l’adresse IP. Vous devriez voir le serveur Web illustré ci-dessous, qui vous permet d’activer et de désactiver deux GPIO :

1644644888 577 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Pièces requises et schéma

Si vous voulez que ce projet fonctionne, voici les pièces dont vous avez besoin :

Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !

1644644888 518 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Suivez ce schéma :

1644644888 210 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion


Comment effacer les informations d’identification de votre ESP8266

Cette ligne suivante est commentée par défaut, sinon vous devrez configurer votre ESP8266 à chaque démarrage.

// Uncomment and run it once, if you want to erase all the stored information
//wifiManager.resetSettings();

Si pour une raison quelconque vous souhaitez effacer toutes les informations d’identification enregistrées :

  1. Décommentez la ligne précédente ;
  2. Téléchargez le code sur l’ESP8266 ;
  3. Laissez-le fonctionner une fois (réinitialisez votre carte);
  4. Commentez à nouveau cette ligne ;
  5. Téléchargez le code sur l’ESP8266 avec la ligne commentée.

Exemple #2 – WiFiManager avec ESP8266 et paramètres personnalisés

Le WiFiManager a une fonctionnalité utile qui vous permet d’ajouter des paramètres personnalisés à la page Web « Configurer le WiFi ». Ceci est extrêmement utile, car dans certaines applications, vous souhaiterez peut-être ajouter une clé API différente, une adresse IP de courtier MQTT, attribuer un GPIO différent, activer un capteur, etc.

Dans l’exemple 2, vous allez créer un serveur Web pour contrôler une broche GPIO ESP8266 définie avec un paramètre personnalisé défini via WiFiManager.

Code

Après avoir installé le module complémentaire ESP8266 pour l’IDE Arduino (Comment installer la carte ESP8266 dans l’IDE Arduino), accédez à Outils et sélectionnez « ESP-12E » (ou choisissez la carte de développement que vous utilisez). Voici le code que vous devez télécharger sur votre ESP8266 :

/*********
  Rui Santos
  Complete project details at https://raspberryme.com  
*********/

#include <FS.h> //this needs to be first, or it all crashes and burns...
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>          // https://github.com/tzapu/WiFiManager
#include <ArduinoJson.h>          // https://github.com/bblanchon/ArduinoJson

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String outputState = "off";

// Assign output variables to GPIO pins
char output[2] = "5";

//flag for saving data
bool shouldSaveConfig = false;

//callback notifying us of the need to save config
void saveConfigCallback () {
  Serial.println("Should save config");
  shouldSaveConfig = true;
}

void setup() {
  Serial.begin(115200);
  
  //clean FS, for testing
  //SPIFFS.format();

  //read configuration from FS json
  Serial.println("mounting FS...");

  if (SPIFFS.begin()) {
    Serial.println("mounted file system");
    if (SPIFFS.exists("/config.json")) {
      //file exists, reading and loading
      Serial.println("reading config file");
      File configFile = SPIFFS.open("/config.json", "r");
      if (configFile) {
        Serial.println("opened config file");
        size_t size = configFile.size();
        // Allocate a buffer to store contents of the file.
        std::unique_ptr<char[]> buf(new char[size]);

        configFile.readBytes(buf.get(), size);
        DynamicJsonBuffer jsonBuffer;
        JsonObject& json = jsonBuffer.parseObject(buf.get());
        json.printTo(Serial);
        if (json.success()) {
          Serial.println("\nparsed json");
          strcpy(output, json["output"]);
        } else {
          Serial.println("failed to load json config");
        }
      }
    }
  } else {
    Serial.println("failed to mount FS");
  }
  //end read
  
  WiFiManagerParameter custom_output("output", "output", output, 2);

  // WiFiManager
  // Local intialization. Once its business is done, there is no need to keep it around
  WiFiManager wifiManager;

  //set config save notify callback
  wifiManager.setSaveConfigCallback(saveConfigCallback);
  
  // set custom ip for portal
  //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));

  //add all your parameters here
  wifiManager.addParameter(&custom_output);
  
  // Uncomment and run it once, if you want to erase all the stored information
  //wifiManager.resetSettings();

  //set minimu quality of signal so it ignores AP's under that quality
  //defaults to 8%
  //wifiManager.setMinimumSignalQuality();
  
  //sets timeout until configuration portal gets turned off
  //useful to make it all retry or go to sleep
  //in seconds
  //wifiManager.setTimeout(120);

  // fetches ssid and pass from eeprom and tries to connect
  // if it does not connect it starts an access point with the specified name
  // here  "AutoConnectAP"
  // and goes into a blocking loop awaiting configuration
  wifiManager.autoConnect("AutoConnectAP");
  // or use this for auto generated name ESP + ChipID
  //wifiManager.autoConnect();
  
  // if you get here you have connected to the WiFi
  Serial.println("Connected.");
  
  strcpy(output, custom_output.getValue());

  //save the custom parameters to FS
  if (shouldSaveConfig) {
    Serial.println("saving config");
    DynamicJsonBuffer jsonBuffer;
    JsonObject& json = jsonBuffer.createObject();
    json["output"] = output;

    File configFile = SPIFFS.open("/config.json", "w");
    if (!configFile) {
      Serial.println("failed to open config file for writing");
    }

    json.printTo(Serial);
    json.printTo(configFile);
    configFile.close();
    //end save
  }

  // Initialize the output variables as outputs
  pinMode(atoi(output), OUTPUT);
  // Set outputs to LOW
  digitalWrite(atoi(output), LOW);;
  
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /output/on") >= 0) {
              Serial.println("Output on");
              outputState = "on";
              digitalWrite(atoi(output), HIGH);
            } else if (header.indexOf("GET /output/off") >= 0) {
              Serial.println("Output off");
              outputState = "off";
              digitalWrite(atoi(output), LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for the defined GPIO  
            client.println("<p>Output - State " + outputState + "</p>");
            // If the outputState is off, it displays the ON button       
            if (outputState=="off") {
              client.println("<p><a href=\"/output/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/output/off\"><button class=\"button button2\">OFF</button></a></p>");
            }                  
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Afficher le code brut

Ajout de paramètres personnalisés

Pour ajouter un paramètre personnalisé, vous devez ajouter un tas de code (voir le croquis précédent) qui vous permet de manipuler le /config.json fichier stocké dans l’ESP. Pour ce didacticiel, nous n’expliquerons pas le fonctionnement de la fonctionnalité des paramètres personnalisés, mais si vous souhaitez créer un autre paramètre personnalisé, suivez ces étapes.

Dans cet exemple, nous allons créer une variable pour stocker une adresse IP de serveur de courtier MQTT. Tout d’abord, créez un carboniser variable:

char output[2];
char mqtt_server[40];

Ensuite, s’il est déjà enregistré dans le /config.jsonvous pouvez le copier :

strcpy(output, json["output"]);
strcpy(mqtt_server, json["mqtt_server"]);

Créez un WiFiManagerParameter (ainsi, le paramètre s’affiche dans la page Web « Configure WiFi » :

WiFiManagerParameter custom_output("output", "output", output, 2);
WiFiManagerParameter custom_mqtt_server("server", "mqtt server", mqtt_server, 40);

Ajoutez la variable en tant que paramètre :

wifiManager.addParameter(&custom_output);
wifiManager.addParameter(&custom_mqtt_server);

Vérifiez et mettez à jour les variables char avec la dernière valeur :

strcpy(output, custom_output.getValue());
strcpy(mqtt_server, custom_mqtt_server.getValue());

Enfin, si l’utilisateur soumet une nouvelle valeur à l’un des paramètres, cette ligne met à jour le /config.json déposer:

json["output"] = output;
json["mqtt_server"] = mqtt_server;

Vous pouvez répéter ce processus pour ajouter d’autres paramètres personnalisés.

Accéder au point d’accès WiFiManager

Utilisez votre smartphone, ordinateur ou tablette et connectez-vous au point d’accès AutoConnectAP :

1644644888 276 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Vous devriez voir une fenêtre similaire à celle illustrée dans la figure ci-dessous. Ensuite, appuyez sur le « S’IDENTIFIER » bouton:

1644644888 472 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Configuration de la page Wi-Fi

Vous serez redirigé vers une page Web à 192.168.4.1 qui vous permet de configurer les identifiants WiFi de votre ESP. Appuyez sur la « Configurer le Wi-Fi » bouton:

1644644888 811 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Choisissez votre réseau souhaité en appuyant sur son nom et le SSID devrait être rempli instantanément (dans mon cas « MEO-620B4B ») :

1644644888 364 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Après cela, tapez votre mot de passe, votre numéro GPIO souhaité (dans mon cas, c’est GPIO 5, donc j’ai entré 5) et appuyez sur « sauver“ :

1644644888 46 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

En attendant, le Moniteur série affiche :

  • Analysez les résultats des points d’accès disponibles ;
  • Message indiquant que les informations d’identification Wi-Fi ont été enregistrées ;
  • Confirmation que le paramètre de sortie (qui fait référence au GPIO) a été défini sur 5 : {“output”:”5″}.

1644644888 70 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Accéder à votre serveur Web

Maintenant, si vous RÉINITIALISER votre carte ESP, il imprimera l’adresse IP dans le Serial Monitor (dans mon cas c’est 192.168.1.132):

1644644888 463 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Ouvrez votre navigateur et tapez l’adresse IP. Vous devriez voir le serveur Web illustré ci-dessous, qui vous permet de contrôler le GPIO que vous avez défini :

1644644889 539 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Pièces requises et schéma

Si vous voulez que ce projet fonctionne, voici les pièces dont vous avez besoin :

Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !

1644644888 518 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Noter: si vous avez défini un numéro GPIO différent de GPIO 5 (qui est D1 avec la carte NodeMCU), vous devez créer un circuit différent.

1644644889 874 WiFiManager avec ESP8266 Connexion automatique parametre personnalise et gestion

Emballer

C’est tout pour l’instant, j’espère que vous avez trouvé ce projet utile et que vous pourrez utiliser la bibliothèque WiFiManager dans vos projets !

Si vous aimez l’ESP8266, vous aimerez aussi :

Avez-vous des questions? Laissez un commentaire ci-dessous!

Merci d’avoir lu. Si vous aimez cet article, vous aimerez probablement mes prochains, alors s’il vous plaît, soutenez-moi en vous abonnant à mon blog.