ESP32 : Créer un gestionnaire Wi-Fi (bibliothèque AsyncWebServer)

ESP32 : 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 gestionnaire Wi-Fi vous permet de connecter la carte ESP32 à différents points d’accès (réseaux) sans coder en dur les informations d’identification du 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.

ESP32 : Créer un gestionnaire Wi-Fi simple (bibliothèque AsyncWebServer)

Pour mieux comprendre le fonctionnement de ce projet, nous vous recommandons de consulter les tutoriels suivants :

Nous utilisons également cette approche Wi-Fi Manager sur le projet suivant :

Comment ça fonctionne

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

ESP32 ESP8266 Serveur Web Wi-Fi Manager Comment ça marche
  • 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 lancez la carte, les fichiers sont vides), votre carte est définie comme point d’accès (3);
  • En utilisant 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.txt, et ip.txt (5);
  • Après cela, la carte ESP redémarre (6);
  • Cette fois, après redémarrage, les fichiers ne sont pas vides, l’ESP va donc 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.

Pour vous montrer comment configurer le gestionnaire Wi-Fi, 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 la connexion de l’ESP à un réseau wi-fi.

Conditions préalables

Nous allons programmer la carte ESP32 en utilisant Arduino IDE. Assurez-vous donc que le module complémentaire de carte ESP32 est installé.

Si vous souhaitez programmer l’ESP32 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 de ce projet.

Les bibliothèques ESPAsyncWebServer, AsynTCP et ESPAsyncTCP ne peuvent pas être installées via Arduino Library Manager, vous devez donc copier les fichiers de bibliothèque dans le dossier Bibliothèques d’installation d’Arduino. Alternativement, dans votre IDE Arduino, vous pouvez aller à 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 (Code VS + PlatformIO)

Si vous programmez l’ESP32 à 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 AsynTCP ou ESPAsyncTCP) et modifier le débit en bauds à 115200 :

monitor_speed = 115200
lib_deps = ESP Async WebServer

Téléchargeur de système de fichiers

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

Si vous utilisez VS Code avec PlatformIO, suivez les tutoriels suivants 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 :

  • Croquis 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 construire) ;
  • style.css: pour styliser les pages web ;
  • gestionnaire wifi.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.
Fichiers de projet du gestionnaire de Wi-Fi ESP32 ESP8266

Vous devez enregistrer les fichiers HTML et CSS dans un dossier appelé Les données dans le dossier d’esquisse Arduino, comme indiqué dans le schéma précédent. Nous allons télécharger ces fichiers sur le système de fichiers ESP32 (SPIFFS).

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 (gestionnaire wifi.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://randomnerdtutorials.com/esp32-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 comment fonctionne 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.

gestionnaire wifi.html

La page Web de Wi-Fi Manager ressemble à ceci :

Exemple de page Web ESP32 ESP8266 Wi-Fi Manager

Copiez ce qui suit dans le gestionnaire wifi.html déposer. Cela crée une page Web avec un formulaire avec trois 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://randomnerdtutorials.com/esp32-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://randomnerdtutorials.com/esp32-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">
            <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 trois champs de saisie et les étiquettes correspondantes : SSID, mot de passe et adresse IP.

Voici le champ de saisie du 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>

Et enfin, il y a un champ de saisie pour l’adresse IP que l’on souhaite attribuer à l’ESP en mode station. Par défaut, nous le définissons 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">
<input type ="submit" value ="Submit">

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 fonctionnent des styles similaires dans d’autres projets de serveur Web ESP.

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 l’ignorer.

platformio.ini ESP32 :

[env:esp32doit-devkit-v1]
platform = espressif32
board = esp32doit-devkit-v1
framework = arduino
monitor_speed=115200
lib_deps = ESP Async WebServer

Code

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

/*********
  Rui Santos
  Complete instructions at https://RandomNerdTutorials.com/esp32-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 <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include "SPIFFS.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";

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

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

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

// Set your Gateway IP address
IPAddress gateway(192, 168, 1, 1);
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;

// Initialize SPIFFS
void initSPIFFS() {
  if (!SPIFFS.begin(true)) {
    Serial.println("An error has occurred while mounting SPIFFS");
  }
  Serial.println("SPIFFS mounted successfully");
}

// Read File from SPIFFS
String readFile(fs::FS &fs, const char * path){
  Serial.printf("Reading file: %srn", path);

  File file = fs.open(path);
  if(!file || file.isDirectory()){
    Serial.println("- failed to open file for reading");
    return String();
  }
  
  String fileContent;
  while(file.available()){
    fileContent = file.readStringUntil('n');
    break;     
  }
  return fileContent;
}

// Write file to SPIFFS
void writeFile(fs::FS &fs, const char * path, const char * message){
  Serial.printf("Writing file: %srn", path);

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

// 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());

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

  unsigned long currentMillis = millis();
  previousMillis = currentMillis;

  while(WiFi.status() != WL_CONNECTED) {
    currentMillis = millis();
    if (currentMillis - previousMillis >= interval) {
      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);

  initSPIFFS();

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

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

    // Route to set GPIO state to LOW
    server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request) {
      digitalWrite(ledPin, LOW);
      request->send(SPIFFS, "/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(SPIFFS, "/wifimanager.html", "text/html");
    });
    
    server.serveStatic("/", SPIFFS, "/");
    
    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(SPIFFS, 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(SPIFFS, 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(SPIFFS, ipPath, ip.c_str());
          }
          //Serial.printf("POST[%s]: %sn", p->name().c_str(), p->value().c_str());
        }
      }
      request->send(200, "text/plain", "Done. ESP will restart, connect to your router and go to IP address: " + ip);
      delay(3000);
      ESP.restart();
    });
    server.begin();
  }
}

void loop() {

}

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 et l’adresse IP 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";

le ssid, passe, et ip Les variables enregistrent les valeurs du SSID, du mot de passe et de l’adresse IP soumis dans le formulaire.

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

Le SSID, le mot de passe et l’adresse IP, 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";

L’adresse IP de la station est soumise dans le formulaire Wi-Fi Manager. Cependant, vous devez définir la passerelle et le sous-réseau dans votre code (ou vous pouvez modifier ce projet pour pouvoir insérer la passerelle et le sous-réseau sur le formulaire) :

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

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

initWiFi()

le initWiFi() fonction 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());

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

  unsigned long currentMillis = millis();
  previousMillis = currentMillis;

  while(WiFi.status() != WL_CONNECTED) {
    currentMillis = millis();
    if (currentMillis - previousMillis >= interval) {
      Serial.println("Failed to connect.");
      return false;
    }
  }

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

Tout d’abord, il vérifie si le ssid et ip les variables sont vides. Si tel est le cas, il ne pourra pas se connecter à un réseau, il renvoie 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());

if (!WiFi.config(localIP, gateway, 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 10 secondes (intervalle variable), il renverra faux.

unsigned long currentMillis = millis();
previousMillis = currentMillis;

while(WiFi.status() != WL_CONNECTED) {
  currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    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 et l’adresse IP précédemment enregistrés.

ssid = readFile(SPIFFS, ssidPath);
pass = readFile(SPIFFS, passPath);
ip = readFile(SPIFFS, ipPath);

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(SPIFFS, "/index.html", "text/html", false, processor);
  });
  server.serveStatic("/", SPIFFS, "/");
    
  // Route to set GPIO state to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request) {
    digitalWrite(ledPin, HIGH);
    request->send(SPIFFS, "/index.html", "text/html", false, processor);
  });

  // Route to set GPIO state to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request) {
    digitalWrite(ledPin, LOW);
    request->send(SPIFFS, "/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() méthode 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 gestionnaire wifi.html fichier lorsqu’il reçoit une requête à la root / URL.

// Web Server Root URL
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/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, et ip 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(SPIFFS, 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(SPIFFS, 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(SPIFFS, ipPath, ip.c_str());
      }
      //Serial.printf("POST[%s]: %sn", 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);

Après trois secondes, redémarrez la carte ESP avec ESP.restart():

delay(3000);
ESP.restart();

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

Vous pouvez appliquer cette idée à l’un des autres projets de serveur Web créés avec la bibliothèque ESPAsyncWebServer.

Téléchargez les fichiers dans le Les données dossier sur votre ESP32. Aller à Outils > Téléchargement de données d’esquisse ESP32 si vous utilisez un ESP32.

ESP32 Sketch Data Upload SPIFFS Arduino IDE

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

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

Bouton de téléchargement Arduino 2.0

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.txt, et ip.txt fichiers, et cela ne réussira pas car ces fichiers n’ont pas encore été créés. Ainsi, il démarrera un point d’accès.

ESP-Wi-Fi Manager définit le moniteur série du point d'accès

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

Connectez-vous au gestionnaire Wi-Fi du point d'accès ESP32 ESP8266

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

Exemple de page Web ESP32 ESP8266 Wi-Fi Manager

Entrez vos informations d’identification réseau : SSID et mot de passe et une adresse IP disponible sur votre réseau local.

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

ESP32 ESP8266 connecté au succès de la station Wi-Fi Manager

Dans le 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émarre. Et si vous avez inséré le SSID et le mot de passe corrects, il démarrera en mode station :

ESP32 ESP8266 connecté avec succès à la station Wi-Fi

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 :

Serveur Web de sorties de contrôle ESP32 ESP8266

Dans ce didacticiel, vous avez appris à configurer un gestionnaire Wi-Fi pour vos projets de serveur Web ou pour tout autre projet nécessitant la connexion de l’ESP à Internet. Avec le gestionnaire Wi-Fi, 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 gestionnaire Wi-Fi à 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, consultez notre eBook :

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

Merci d’avoir lu.