ESP8266 NodeMCU : créer un gestionnaire Wi-Fi (bibliothèque AsyncWebServer)

Dans ce guide, vous allez créer et configurer un gestionnaire Wi-Fi avec la bibliothèque ESPAsyncWebServer que vous pouvez modifier pour l’utiliser avec vos projets de serveur Web ou avec tout projet nécessitant une connexion à un réseau Wi-Fi. Le Wi-Fi Manager vous permet de connecter la carte ESP8266 à différents points d’accès (réseaux) sans codage en dur des identifiants réseau (SSID et mot de passe) et de télécharger un nouveau code sur votre carte. Votre ESP rejoindra automatiquement le dernier réseau enregistré ou configurera un point d’accès que vous pourrez utiliser pour configurer les informations d’identification du réseau.

Pour mieux comprendre le fonctionnement de ce projet, nous vous conseillons de jeter un œil aux tutoriels suivants :

Comment ça fonctionne

Jetez un œil au schéma suivant pour comprendre comment fonctionne le gestionnaire Wi-Fi que nous allons créer.

• Lorsque l’ESP démarre pour la première fois, il essaie de lire le ssid.txt, pass.txt et ip.txt des dossiers* (1);
• Si les fichiers sont vides (2) (la première fois que vous exécutez la carte, les fichiers sont vides), votre carte est définie comme un point d’accès (3);
• À l’aide de n’importe quel appareil compatible Wi-Fi avec un navigateur, vous pouvez vous connecter au point d’accès nouvellement créé (nom par défaut ESP-WIFI-MANAGER);
• Après avoir établi une connexion avec l’ESP-WIFI-MANAGER, 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 (4);
• Le SSID, le mot de passe et l’adresse IP insérés dans le formulaire sont enregistrés dans les fichiers correspondants : ssid.txt, pass.txtet ip.txt (5);
• Après cela, la carte ESP redémarre (6);
• Cette fois, après le redémarrage, les fichiers ne sont pas vides, donc l’ESP va essayer de se connecter au réseau en mode station en utilisant les paramètres que vous avez insérés dans le formulaire (sept);
• S’il établit une connexion, le processus est terminé avec succès et vous pouvez accéder à la page principale du serveur Web qui peut faire ce que vous voulez (contrôler les lectures des capteurs, contrôler les sorties, afficher du texte, etc.) (9). Sinon, il définira le point d’accès (3), et vous pouvez accéder à l’adresse IP par défaut (192.168.4.1) pour ajouter une autre combinaison SSID/mot de passe.

* nous avons également créé un passerelle champ et un passerelle.txt fichier pour enregistrer la passerelle d’adresse IP (ceci n’est pas illustré dans le schéma).

Pour vous montrer comment configurer le Wi-Fi Manager, nous allons configurer un serveur Web qui contrôle une sortie (GPIO2—la LED intégrée). Vous pouvez appliquer le gestionnaire Wi-Fi à n’importe quel projet de serveur Web construit avec la bibliothèque ESPAsyncWebServer ou à tout projet nécessitant que l’ESP soit connecté à un réseau Wi-Fi.

Conditions préalables

Nous allons programmer la carte ESP8266 à l’aide de l’IDE Arduino. Assurez-vous donc que le module complémentaire de carte ESP8266 est installé.

Si vous souhaitez programmer l’ESP8266 en utilisant VS Code + PlatformIO, suivez le tutoriel suivant :

Installation de bibliothèques (Arduino IDE)

Vous devez installer les bibliothèques suivantes dans votre IDE Arduino pour créer le serveur Web pour ce projet.

Les bibliothèques ESPAsyncWebServer et ESPAsyncTCP ne peuvent pas être installées via le gestionnaire de bibliothèque Arduino, vous devez donc copier les fichiers de bibliothèque dans le dossier Bibliothèques d’installation Arduino. Alternativement, dans votre IDE Arduino, vous pouvez accéder à Esquisser > Inclure la bibliothèque > Ajouter une bibliothèque .zip et sélectionnez les bibliothèques que vous venez de télécharger.

Installation de bibliothèques (VS Code + PlatformIO)

Si vous programmez l’ESP8266 à l’aide de PlatformIO, copiez ce qui suit dans le platformio.ini pour inclure la bibliothèque ESPAsyncWebServer (elle inclura automatiquement toutes les dépendances telles que les bibliothèques ESPAsyncTCP), modifiez le débit en bauds à 115200 et définissez le système de fichiers sur LittleFS :

monitor_speed = 115200
lib_deps = ESP Async WebServer
board_build.filesystem = littlefs

Téléchargeur de système de fichiers

Avant de continuer, vous devez avoir installé le plugin ESP8266 Uploader dans votre IDE Arduino.

Si vous utilisez VS Code avec PlatformIO, suivez le didacticiel suivant pour apprendre à télécharger des fichiers sur le système de fichiers :

Organiser vos fichiers

Pour garder le projet organisé et le rendre plus facile à comprendre, nous allons créer quatre fichiers différents pour construire le serveur Web :

• Esquisse Arduino qui gère le serveur Web ;
• index.html: pour définir le contenu de la page Web en mode station pour contrôler la sortie (ou toute autre page Web que vous souhaitez créer) ;
• style.css: pour styliser les pages Web ;
• wifimanager.html: pour définir le contenu de la page web pour afficher le Wi-Fi Manager lorsque l’ESP est en mode point d’accès.

Vous devez enregistrer les fichiers HTML et CSS dans un dossier appelé Les données à l’intérieur du dossier d’esquisse Arduino, comme indiqué dans le diagramme précédent. Nous allons télécharger ces fichiers sur le système de fichiers ESP8266 (LittleFS).

Vous pouvez télécharger tous les fichiers du projet :

Création des fichiers HTML

Pour ce projet, vous avez besoin de deux fichiers HTML. Un pour construire la page principale qui contrôle la sortie (index.html) et un autre pour créer la page Wi-Fi Manager (wifimanager.html).

index.html

Voici le texte que vous devez copier sur votre index.html déposer.

<!DOCTYPE html>
<html>
  <head>
    <title>ESP WEB SERVER</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.raspberryme.com/esp8266-nodemcu-wi-fi-manager-asyncwebserver/style.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </head>
  <body>
    <div class="topnav">
      <h1>ESP WEB SERVER</h1>
    </div>
    <div class="content">
      <div class="card-grid">
        <div class="card">
          <p class="card-title"><i class="fas fa-lightbulb"></i> GPIO 2</p>
          <p>
            <a href="on"><button class="button-on">ON</button></a>
            <a href="off"><button class="button-off">OFF</button></a>
          </p>
          <p class="state">State: %STATE%</p>
        </div>
      </div>
    </div>
  </body>
</html>

Afficher le code brut

Nous n’expliquerons pas le fonctionnement de ce fichier HTML car ce n’est pas le but de ce tutoriel. Le but de ce tutoriel est d’expliquer les parties liées au Wi-Fi Manager.

wifimanager.html

La page Web Wi-Fi Manager ressemble à ceci :

Copiez ce qui suit dans le wifimanager.html déposer. Cela crée une page Web avec un formulaire avec quatre champs de saisie et un Soumettre bouton.

<!DOCTYPE html>
<html>
<head>
  <title>ESP Wi-Fi Manager</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="https://www.raspberryme.com/esp8266-nodemcu-wi-fi-manager-asyncwebserver/data:,">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://www.raspberryme.com/esp8266-nodemcu-wi-fi-manager-asyncwebserver/style.css">
</head>
<body>
  <div class="topnav">
    <h1>ESP Wi-Fi Manager</h1>
  </div>
  <div class="content">
    <div class="card-grid">
      <div class="card">
        <form action="/" method="POST">
          <p>
            <label for="ssid">SSID</label>
            <input type="text" id ="ssid" name="ssid"><br>
            <label for="pass">Password</label>
            <input type="text" id ="pass" name="pass"><br>
            <label for="ip">IP Address</label>
            <input type="text" id ="ip" name="ip" value="192.168.1.200"><br>
            <label for="gateway">Gateway Address</label>
            <input type="text" id ="gateway" name="gateway" value="192.168.1.1"><br>
            <input type ="submit" value ="Submit">
          </p>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Afficher le code brut

Dans ce fichier HTML, nous créons un formulaire HTML qui fera une requête HTTP POST avec les données soumises au serveur.

<form action="/" method="POST">

Le formulaire contient quatre champs de saisie et les étiquettes correspondantes : SSID, mot de passe, adresse IP et passerelle.

C’est le champ d’entrée pour le SSID :

<label for="ssid">SSID</label>
<input type="text" id ="ssid" name="ssid"><br>

Il s’agit du champ de saisie du mot de passe.

<label for="pass">Password</label>
<input type="text" id ="pass" name="pass"><br>

Il existe un champ de saisie pour l’adresse IP que vous souhaitez attribuer à l’ESP en mode station. Par défaut, nous l’avons défini sur 192.168.1.200 (vous pouvez définir une autre adresse IP par défaut, ou vous pouvez supprimer le valeur paramètre—il n’aura pas de valeur par défaut).

<input type="text" id ="ip" name="ip" value="192.168.1.200">

Enfin, il y a un champ de saisie pour l’adresse de la passerelle. Si l’adresse IP par défaut est 192.168.1.200, la passerelle peut être 192.168.1.1 par défaut.

<input type="text" id ="gateway" name="gateway" value="192.168.1.1"><br>

Fichier CSS

Copiez les styles suivants dans votre style.css déposer. Nous n’expliquerons pas comment ces styles fonctionnent. Nous avons déjà expliqué comment des styles similaires fonctionnent dans d’autres projets ESP Web Server.

html {
  font-family: Arial, Helvetica, sans-serif; 
  display: inline-block; 
  text-align: center;
}

h1 {
  font-size: 1.8rem; 
  color: white;
}

p { 
  font-size: 1.4rem;
}

.topnav { 
  overflow: hidden; 
  background-color: #0A1128;
}

body {  
  margin: 0;
}

.content { 
  padding: 5%;
}

.card-grid { 
  max-width: 800px; 
  margin: 0 auto; 
  display: grid; 
  grid-gap: 2rem; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card { 
  background-color: white; 
  box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}

.card-title { 
  font-size: 1.2rem;
  font-weight: bold;
  color: #034078
}

input[type=submit] {
  border: none;
  color: #FEFCFB;
  background-color: #034078;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 100px;
  margin-right: 10px;
  border-radius: 4px;
  transition-duration: 0.4s;
  }

input[type=submit]:hover {
  background-color: #1282A2;
}

input[type=text], input[type=number], select {
  width: 50%;
  padding: 12px 20px;
  margin: 18px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

label {
  font-size: 1.2rem; 
}
.value{
  font-size: 1.2rem;
  color: #1282A2;  
}
.state {
  font-size: 1.2rem;
  color: #1282A2;
}
button {
  border: none;
  color: #FEFCFB;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  width: 100px;
  border-radius: 4px;
  transition-duration: 0.4s;
}
.button-on {
  background-color: #034078;
}
.button-on:hover {
  background-color: #1282A2;
}
.button-off {
  background-color: #858585;
}
.button-off:hover {
  background-color: #252524;
} 

Afficher le code brut

Si vous utilisez VS Code avec l’extension platformIO, vous devez modifier le platformio.ini fichier à regarder comme indiqué ci-dessous. Si vous utilisez Arduino IDE, vous pouvez ignorer cela.

platformio.ini ESP8266 :

[env:esp12e]
platform = espressif8266
board = esp12e
framework = arduino
monitor_speed = 115200
lib_deps = ESP Async WebServer
board_build.filesystem = littlefs

Code

Copiez le code suivant dans votre IDE Arduino ou dans le main.cpp fichier si vous utilisez VS Code.

/*********
  Rui Santos
  Complete instructions at https://Raspberryme.com/esp8266-nodemcu-wi-fi-manager-asyncwebserver/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <ESPAsyncTCP.h>
#include "LittleFS.h"

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Search for parameter in HTTP POST request
const char* PARAM_INPUT_1 = "ssid";
const char* PARAM_INPUT_2 = "pass";
const char* PARAM_INPUT_3 = "ip";
const char* PARAM_INPUT_4 = "gateway";

//Variables to save values from HTML form
String ssid;
String pass;
String ip;
String gateway;

// File paths to save input values permanently
const char* ssidPath = "/ssid.txt";
const char* passPath = "/pass.txt";
const char* ipPath = "/ip.txt";
const char* gatewayPath = "/gateway.txt";

IPAddress localIP;
//IPAddress localIP(192, 168, 1, 200); // hardcoded

// Set your Gateway IP address
IPAddress localGateway;
//IPAddress localGateway(192, 168, 1, 1); //hardcoded
IPAddress subnet(255, 255, 0, 0);

// Timer variables
unsigned long previousMillis = 0;
const long interval = 10000;  // interval to wait for Wi-Fi connection (milliseconds)

// Set LED GPIO
const int ledPin = 2;
// Stores LED state

String ledState;

boolean restart = false;

// Initialize LittleFS
void initFS() {
  if (!LittleFS.begin()) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  else{
    Serial.println("LittleFS mounted successfully");
  }
}


// Read File from LittleFS
String readFile(fs::FS &fs, const char * path){
  Serial.printf("Reading file: %s\r\n", path);

  File file = fs.open(path, "r");
  if(!file || file.isDirectory()){
    Serial.println("- failed to open file for reading");
    return String();
  }

  String fileContent;
  while(file.available()){
    fileContent = file.readStringUntil('\n');
    break;
  }
  file.close();
  return fileContent;
}

// Write file to LittleFS
void writeFile(fs::FS &fs, const char * path, const char * message){
  Serial.printf("Writing file: %s\r\n", path);

  File file = fs.open(path, "w");
  if(!file){
    Serial.println("- failed to open file for writing");
    return;
  }
  if(file.print(message)){
    Serial.println("- file written");
  } else {
    Serial.println("- frite failed");
  }
  file.close();
}

// Initialize WiFi
bool initWiFi() {
  if(ssid=="" || ip==""){
    Serial.println("Undefined SSID or IP address.");
    return false;
  }

  WiFi.mode(WIFI_STA);
  localIP.fromString(ip.c_str());
  localGateway.fromString(gateway.c_str());

  if (!WiFi.config(localIP, localGateway, subnet)){
    Serial.println("STA Failed to configure");
    return false;
  }
  WiFi.begin(ssid.c_str(), pass.c_str());

  Serial.println("Connecting to WiFi...");
  delay(20000);
  if(WiFi.status() != WL_CONNECTED) {
    Serial.println("Failed to connect.");
    return false;
  }

  Serial.println(WiFi.localIP());
  return true;
}

// Replaces placeholder with LED state value
String processor(const String& var) {
  if(var == "STATE") {
    if(!digitalRead(ledPin)) {
      ledState = "ON";
    }
    else {
      ledState = "OFF";
    }
    return ledState;
  }
  return String();
}

void setup() {
  // Serial port for debugging purposes
  Serial.begin(115200);

  initFS();

  // Set GPIO 2 as an OUTPUT
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  
  // Load values saved in LittleFS
  ssid = readFile(LittleFS, ssidPath);
  pass = readFile(LittleFS, passPath);
  ip = readFile(LittleFS, ipPath);
  gateway = readFile (LittleFS, gatewayPath);
  Serial.println(ssid);
  Serial.println(pass);
  Serial.println(ip);
  Serial.println(gateway);

  if(initWiFi()) {
    // Route for root / web page
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
      request->send(LittleFS, "/index.html", "text/html", false, processor);
    });
    
    server.serveStatic("/", LittleFS, "/");
    
    // Route to set GPIO state to HIGH
    server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request) {
      digitalWrite(ledPin, LOW);
      request->send(LittleFS, "/index.html", "text/html", false, processor);
    });

    // Route to set GPIO state to LOW
    server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request) {
      digitalWrite(ledPin, HIGH);
      request->send(LittleFS, "/index.html", "text/html", false, processor);
    });
    server.begin();
  }
  else {
    // Connect to Wi-Fi network with SSID and password
    Serial.println("Setting AP (Access Point)");
    // NULL sets an open Access Point
    WiFi.softAP("ESP-WIFI-MANAGER", NULL);

    IPAddress IP = WiFi.softAPIP();
    Serial.print("AP IP address: ");
    Serial.println(IP); 

    // Web Server Root URL
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send(LittleFS, "/wifimanager.html", "text/html");
    });
    
    server.serveStatic("/", LittleFS, "/");
    
    server.on("/", HTTP_POST, [](AsyncWebServerRequest *request) {
      int params = request->params();
      for(int i=0;i<params;i++){
        AsyncWebParameter* p = request->getParam(i);
        if(p->isPost()){
          // HTTP POST ssid value
          if (p->name() == PARAM_INPUT_1) {
            ssid = p->value().c_str();
            Serial.print("SSID set to: ");
            Serial.println(ssid);
            // Write file to save value
            writeFile(LittleFS, ssidPath, ssid.c_str());
          }
          // HTTP POST pass value
          if (p->name() == PARAM_INPUT_2) {
            pass = p->value().c_str();
            Serial.print("Password set to: ");
            Serial.println(pass);
            // Write file to save value
            writeFile(LittleFS, passPath, pass.c_str());
          }
          // HTTP POST ip value
          if (p->name() == PARAM_INPUT_3) {
            ip = p->value().c_str();
            Serial.print("IP Address set to: ");
            Serial.println(ip);
            // Write file to save value
            writeFile(LittleFS, ipPath, ip.c_str());
          }
          // HTTP POST gateway value
          if (p->name() == PARAM_INPUT_4) {
            gateway = p->value().c_str();
            Serial.print("Gateway set to: ");
            Serial.println(gateway);
            // Write file to save value
            writeFile(LittleFS, gatewayPath, gateway.c_str());
          }
          //Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
        }
      }
      restart = true;
      request->send(200, "text/plain", "Done. ESP will restart, connect to your router and go to IP address: " + ip);
    });
    server.begin();
  }
}

void loop() {
  if (restart){
    delay(5000);
    ESP.restart();
  }
}

Afficher le code brut

Comment fonctionne le code

Jetons un coup d’œil au code et voyons comment fonctionne le gestionnaire Wi-Fi.

Les variables suivantes sont utilisées pour rechercher le SSID, le mot de passe, l’adresse IP et la passerelle sur la requête HTTP POST effectuée lors de la soumission du formulaire.

// Search for parameter in HTTP POST request
const char* PARAM_INPUT_1 = "ssid";
const char* PARAM_INPUT_2 = "pass";
const char* PARAM_INPUT_3 = "ip";
const char* PARAM_INPUT_4 = "gateway";

le ssid, passe, IPet passerelle Les variables enregistrent les valeurs du SSID, du mot de passe, de l’adresse IP et de la passerelle soumises dans le formulaire.

//Variables to save values from HTML form
String ssid;
String pass;
String ip;
String gateway;

Le SSID, le mot de passe, l’adresse IP et la passerelle lorsqu’ils sont soumis sont enregistrés dans des fichiers du système de fichiers ESP. Les variables suivantes font référence au chemin de ces fichiers.

// File paths to save input values permanently
const char* ssidPath = "/ssid.txt";
const char* passPath = "/pass.txt";
const char* ipPath = "/ip.txt";
const char* gatewayPath = "/gateway.txt";

L’adresse IP et la passerelle de la station sont soumises dans le formulaire Wi-Fi Manager. Le sous-réseau est codé en dur, mais vous pouvez facilement modifier ce projet avec un autre champ pour inclure le sous-réseau, si nécessaire.

IPAddress localIP;
//IPAddress localIP(192, 168, 1, 200); // hardcoded

// Set your Gateway IP address
IPAddress localGateway;
//IPAddress localGateway(192, 168, 1, 1); //hardcoded
IPAddress subnet(255, 255, 0, 0);

initWiFi()

le initWiFi() renvoie une valeur booléenne (soit vrai ou faux) indiquant si la carte ESP s’est connectée avec succès à un réseau.

bool initWiFi() {
  if(ssid=="" || ip==""){
    Serial.println("Undefined SSID or IP address.");
    return false;
  }

  WiFi.mode(WIFI_STA);
  localIP.fromString(ip.c_str());
  localGateway.fromString(gateway.c_str());

  if (!WiFi.config(localIP, localGateway, subnet)){
    Serial.println("STA Failed to configure");
    return false;
  }
  WiFi.begin(ssid.c_str(), pass.c_str());

  Serial.println("Connecting to WiFi...");
  delay(20000);
  if(WiFi.status() != WL_CONNECTED) {
    Serial.println("Failed to connect.");
    return false;
  }

  Serial.println(WiFi.localIP());
  return true;
}

Premièrement, il vérifie si le ssid et IP les variables sont vides. Si c’est le cas, il ne pourra pas se connecter à un réseau, il retourne donc faux.

if(ssid=="" || ip==""){

Si ce n’est pas le cas, nous essaierons de nous connecter au réseau en utilisant le SSID et le mot de passe enregistrés dans le ssid et passe variables et définissez l’adresse IP.

WiFi.mode(WIFI_STA);
localIP.fromString(ip.c_str());
localGateway.fromString(gateway.c_str());

if (!WiFi.config(localIP, localGateway, subnet)){
  Serial.println("STA Failed to configure");
  return false;
}
WiFi.begin(ssid.c_str(), pass.c_str());

Serial.println("Connecting to WiFi...");

S’il ne peut pas se connecter au Wi-Fi après 20 secondes, il reviendra faux.

delay(20000);
if(WiFi.status() != WL_CONNECTED) {
  Serial.println("Failed to connect.");
  return false;
}

Si aucune des conditions précédentes n’est remplie, cela signifie que l’ESP s’est connecté avec succès au réseau en mode station (renvoie vrai).

return true;

mettre en place()

Dans le mettre en place()commencez à lire les fichiers pour obtenir le SSID, le mot de passe, l’adresse IP et la passerelle précédemment enregistrés.

ssid = readFile(LittleFS, ssidPath);
pass = readFile(LittleFS, passPath);
ip = readFile(LittleFS, ipPath);
gateway = readFile (LittleFS, gatewayPath);

Si l’ESP se connecte avec succès en mode station (initWiFi() la fonction renvoie vrai), nous pouvons définir les commandes pour gérer les requêtes du serveur Web (ou tout autre code nécessitant que l’ESP soit connecté à Internet) :

if(initWiFi()) {
  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(LittleFS, "/index.html", "text/html", false, processor);
  });
    
  server.serveStatic("/", LittleFS, "/");
    
  // Route to set GPIO state to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request) {
    digitalWrite(ledPin, LOW);
    request->send(LittleFS, "/index.html", "text/html", false, processor);
  });

  // Route to set GPIO state to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request) {
    digitalWrite(ledPin, HIGH);
    request->send(LittleFS, "/index.html", "text/html", false, processor);
  });
  server.begin();
}

Si ce n’est pas le cas, le initWiFi() la fonction renvoie faux. L’ESP définira un point d’accès :

else {
  // Connect to Wi-Fi network with SSID and password
  Serial.println("Setting AP (Access Point)");
  // NULL sets an open Access Point
  WiFi.softAP("ESP-WIFI-MANAGER", NULL);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP); 

Pour définir un point d’accès, nous utilisons le softAP() et passez en arguments le nom du point d’accès et le mot de passe. Nous voulons que le point d’accès soit ouvert, nous définissons donc le mot de passe sur NUL. Vous pouvez ajouter un mot de passe si vous le souhaitez. Pour en savoir plus sur la configuration d’un point d’accès, lisez l’un des didacticiels suivants :

Lorsque vous accédez au point d’accès, il affiche la page Web pour saisir les informations d’identification du réseau dans le formulaire. Ainsi, l’ESP doit envoyer le wifimanager.html fichier lorsqu’il reçoit une requête à la root / URL.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(LittleFS, "/wifimanager.html", "text/html");
});    

Nous devons également gérer ce qui se passe lorsque le formulaire est soumis via une requête HTTP POST. Les lignes suivantes enregistrent les valeurs soumises dans le ssid, passe, IPet passerelle variables et enregistrez ces variables dans les fichiers correspondants.

server.on("/", HTTP_POST, [](AsyncWebServerRequest *request) {
  int params = request->params();
  for(int i=0;i<params;i++){
    AsyncWebParameter* p = request->getParam(i);
    if(p->isPost()){
      // HTTP POST ssid value
      if (p->name() == PARAM_INPUT_1) {
        ssid = p->value().c_str();
        Serial.print("SSID set to: ");
        Serial.println(ssid);
        // Write file to save value
        writeFile(LittleFS, ssidPath, ssid.c_str());
      }
      // HTTP POST pass value
      if (p->name() == PARAM_INPUT_2) {
        pass = p->value().c_str();
        Serial.print("Password set to: ");
        Serial.println(pass);
        // Write file to save value
        writeFile(LittleFS, passPath, pass.c_str());
      }
      // HTTP POST ip value
      if (p->name() == PARAM_INPUT_3) {
        ip = p->value().c_str();
        Serial.print("IP Address set to: ");
        Serial.println(ip);
        // Write file to save value
        writeFile(LittleFS, ipPath, ip.c_str());
      }
      // HTTP POST gateway value
      if (p->name() == PARAM_INPUT_4) {
        gateway = p->value().c_str();
        Serial.print("Gateway set to: ");
        Serial.println(gateway);
        // Write file to save value
        writeFile(LittleFS, gatewayPath, gateway.c_str());
      }
      //Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
    }
  }

Après avoir soumis le formulaire, envoyez une réponse avec du texte afin que nous sachions que l’ESP a reçu les détails du formulaire :

request->send(200, "text/plain", "Done. ESP will restart, connect to your router and go to IP address: " + ip);

Met le redémarrage variable à vrai.

restart = true;

Dans la boucle (), nous vérifierons la valeur de la variable de redémarrage et procéderons en conséquence.

void loop() {
  if (restart){
    delay(5000);
    ESP.restart();
  }
}

C’est un bref résumé du fonctionnement du code.

Vous pouvez appliquer cette idée à n’importe quel autre projet de serveur Web construit avec la bibliothèque ESPAsyncWebServer.

Téléchargez les fichiers dans le Les données dossier sur votre ESP8266. Aller à Outils > ESP8266 Téléchargement de données LittleFS.

Si vous utilisez VS Code avec l’extension PlatformIO, suivez l’un des tutoriels suivants pour apprendre à télécharger des fichiers sur vos tableaux :

Après avoir téléchargé les fichiers avec succès, téléchargez le code sur votre tableau.

Après avoir téléchargé avec succès tous les fichiers et croquis, vous pouvez ouvrir le moniteur série. S’il exécute le code pour la première fois, il essaiera de lire le ssid.txt, pass.txtet ip.txt fichiers, et il ne réussira pas car ces fichiers n’ont pas encore été créés. Ainsi, il démarrera un point d’accès.

Sur votre ordinateur ou votre smartphone, rendez-vous dans vos paramètres réseau et connectez-vous au ESP-WIFI-MANAGER point d’accès.

Ensuite, ouvrez votre navigateur et accédez à 192.168.4.1. La page Web du gestionnaire Wi-Fi devrait s’ouvrir.

Entrez vos informations d’identification réseau : SSID et mot de passe, ainsi qu’une adresse IP et une passerelle disponibles sur votre réseau local.

Après cela, vous serez redirigé vers la page suivante :

En même temps, l’ESP devrait imprimer quelque chose dans le moniteur série indiquant que les paramètres que vous avez insérés ont été enregistrés avec succès dans les fichiers correspondants.

Après quelques secondes, l’ESP redémarrera. Et si vous avez inséré le SSID et le mot de passe corrects, il démarrera en mode station :

Cette fois, ouvrez un navigateur sur votre réseau local et insérez l’adresse IP ESP. Vous devriez avoir accès à la page Web pour contrôler les sorties :

Dans ce didacticiel, vous avez appris à configurer un gestionnaire Wi-Fi pour vos projets de serveur Web ou pour tout autre projet nécessitant que l’ESP soit connecté à Internet. Avec le Wi-Fi Manager, vous pouvez facilement connecter vos cartes ESP à différents réseaux sans avoir besoin de coder en dur les informations d’identification du réseau. Vous pouvez appliquer le Wi-Fi Manager à n’importe quel projet de serveur Web construit avec la bibliothèque ESPAsyncWebServer.

Si vous souhaitez en savoir plus sur la création de serveurs Web avec les cartes ESP32 et ESP8266, assurez-vous de consulter notre eBook :

En savoir plus sur l’ESP8266 avec nos ressources :

Nous espérons que vous avez trouvé ce tutoriel utile.

Merci d’avoir lu.