Ce cours montre comment créer un serveur Web qui sert des fichiers HTML et CSS stockés sur le système de 
fichiers ESP8266 NodeMCU (SPIFFS) à l'aide de l'IDE Arduino. Au lieu d'avoir à écrire le texte HTML 
et CSS dans l'esquisse Arduino, nous allons créer des fichiers HTML et CSS séparés.
Le serveur Web que nous allons créer montre comment contrôler la led du node MCU (ESP8266) avec une page html. .
Avant de passer directement au projet, il est important de décrire ce que fera notre serveur Web, afin qu'il soit plus facile à comprendre.
- Le serveur Web contrôle une LED connectée à l'ESP8266 GPIO 2. Il s'agit de la LED intégrée à l'ESP8266. 
Vous pouvez contrôler n'importe quel autre GPIO ;
- La page du serveur Web affiche deux boutons : ON et OFF – pour activer et désactiver GPIO 2 ;
- La page du serveur Web affiche également l'état actuel du GPIO ;

Prérequis:
1.Installer la carte ESP8266 dans l'IDE Arduino

Nous allons programmer l'ESP8266 à l'aide de l'IDE Arduino, vous devez donc avoir installé le module complémentaire ESP8266.
2. Plugin de téléchargement de système de fichiers

Pour télécharger des fichiers sur le système de fichiers Flash ESP8266 SPI (SPIFFS), nous utiliserons le plugin Filesystem Uploader.
 Installez le plugin dans votre IDE Arduino :

Suivez les étapes suivantes pour installer l’outil de mise en ligne du système de fichiers :
I) Cliquez sur le lien https://github.com/esp8266/arduino-esp8266fs-plugin/releases pour télécharger le fichier.

II) Accédez au répertoire Arduino IDE et ouvrez le Outils dossier.

III) Décompressez le fichier téléchargé .Zip *: français dossier vers le Outils dossier. Vous devriez avoir une structure de dossiers similaire :

<home_dir>/Arduino-<version>/tools/ESP8266FS/tool/esp8266fs.jar

IV) Enfin, redémarrez votre IDE Arduino

3. Installation des bibliothèques

L'un des moyens les plus simples de créer un serveur Web à l'aide de fichiers du système de 

fichiers consiste à utiliser la bibliothèque ESPAsyncWebServer.

Installation de la librairie ESPAsyncWebServer

Installation de la librairie ESPAsyncWebServer

Cette bibliothèque n'est pas disponible au téléchargement via le gestionnaire de bibliothèques Arduino IDE. 

Vous devez donc suivre les étapes suivantes pour installer la bibliothèque :

- Cliquez sur le lien suivant https://github.com/me-no-dev/ESPAsyncWebServer/archive/master.zip pour 

télécharger la bibliothèque ESPAsyncWebServer.

Vous devriez avoir un dossier .zip dans votre dossier Téléchargements
    - Décompressez le dossier .zip et vous devriez obtenir le dossier ESPAsyncWebServer-master
    - Renommez votre dossier ESPAsyncWebServer-master en ESPAsyncWebServer
    - Déplacez le dossier ESPAsyncWebServer vers le dossier des bibliothèques d'installation de votre IDE Arduino

Vous pouvez également accéder à Croquis > Inclure une bibliothèque > Ajouter la bibliothèque .zip et sélectionner

la bibliothèque précédemment téléchargée.

Installation de l'ESPAsyncTCP

La bibliothèque ESPAsyncWebServer a également besoin de la bibliothèque ESPAsyncTCP pour fonctionner correctement.

Suivez les étapes suivantes pour installer la bibliothèque ESPAsyncTCP :

    - Cliquez sur le lien https://github.com/me-no-dev/ESPAsyncTCP/archive/master.zip pour télécharger la bibliothèque ESPAsyncTCP ".

 Vous devriez avoir un dossier .zip dans votre dossier Téléchargements
    - Décompressez le dossier .zip et vous devriez obtenir le dossier ESPAsyncTCP-master
    - Renommez votre dossier ESPAsyncTCP-master en ESPAsyncTCP
    - Déplacez le dossier ESPAsyncTCP dans le dossier des bibliothèques d'installation de votre IDE Arduino
    - Enfin, rouvrez votre IDE Arduino

Vous pouvez également accéder à Croquis > Inclure une bibliothèque > Ajouter la bibliothèque .zip et sélectionner la 

bibliothèque précédemment téléchargée.

Matériels à utiliser:

Pour poursuivre ce projet, vous avez besoin des matériels suivants :

  - ESP8266 

Schéma de câblage:

    Aucun! Nous utilisons la Led intégré au module ESP8266 nodeMcu sur la broche GPIO2 donc pas de schéma de câblage

Organisation de vos fichiers

Pour construire le serveur Web, vous avez besoin de trois fichiers différents. Le sketch Arduino, le fichier HTML et le fichier CSS. Les fichiers HTML et CSS doivent être enregistrés dans un dossier appelé  data  dans le dossier d'esquisse Arduino, comme indiqué ci-dessous :

Création du fichier HTML

Créez un  fichier index.html  avec le contenu suivant:

<!DOCTYPE html>
<!-- 
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com  
-->
<html>
<head>
  <title>ESP8266 Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>ESP8266 Web Server</h1>
  <p>GPIO state<strong> %STATE%</strong></p>
  <p>
    <a href="/on"><button class="button">ON</button></a>
    <a href="/off"><button class="button button2">OFF</button></a>
  </p>
</body>
<script>
</script>
</html>

Parce que nous utilisons CSS et HTML dans des fichiers différents, nous devons référencer le fichier CSS sur le texte HTML.

<link rel="stylesheet" type="text/css" href="style.css">

Le<lien>indique au fichier HTML que vous utilisez une feuille de style externe pour formater l'apparence de la page. L'attributrel spécifie la nature du fichier externe, en l'occurrence qu'il s'agit d'une feuille de style — le fichier CSS — qui sera utilisée pour modifier l'apparence de la page.

L'attributtype est défini sur"texte/css"pour indiquer que vous utilisez un fichier CSS pour les styles. L'attributhref indique l'emplacement du fichier ; puisque les fichiers CSS et HTML seront dans le même dossier, il vous suffit de référencer le nom du fichier : style.css .

Dans la ligne suivante, nous écrivons le premier titre de notre page Web. Dans ce cas, nous avons "ESP8266 Web Server". Vous pouvez remplacer le titre par n'importe quel texte :

<h1>ESP8266 Web Server</h1>

Ensuite, ajoutez un paragraphe avec le texte « État GPIO : » suivi de l'état GPIO. Étant donné que l'état du GPIO change en fonction de l'état du GPIO, nous pouvons ajouter un espace réservé qui sera ensuite remplacé par la valeur que nous avons définie sur l'esquisse Arduino.

Pour ajouter un espace réservé, utilisez les signes % . Pour créer un espace réservé pour l'état, vous pouvez utiliser%ETAT%, par exemple.

<p>GPIO state<strong> %STATE%</strong></p>

Vous attribuez une valeur à l'espace réservé STATE dans l'esquisse Arduino.

Créez ensuite un bouton ON et un bouton OFF. Lorsque vous cliquez sur le bouton on, nous redirigeons la page Web vers root suivi de/surURL. Lorsque vous cliquez sur le bouton off, vous êtes redirigé vers le/désactivéURL.

<a href="/on"><button class="button">ON</button></a>
<a href="/off"><button class="button button2">OFF</button></a>

Création du fichier CSS

Créez le fichier  style.css avec le contenu suivant:

html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1 {
  color: #0F3376;
  padding: 2vh;
}
.button {
  display: inline-block;
  background-color: #008CBA;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 16px 40px;
  text-decoration: none;
  font-size: 30px;
  margin: 2px;
  cursor: pointer;
}
.button2 {
  background-color: #f44336;
}




Croquis du serveur Web asynchrone ESP8266

Copiez le code suivant dans l'IDE Arduino:

#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

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

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

// Replaces placeholder with LED state value
String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
}
 
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);


  // Initialize SPIFFS
  if(!SPIFFS.begin()){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to load style.css file
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/style.css", "text/css");
  });

  // Route to set GPIO to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to set GPIO to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", getPressure().c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){
  
}

Comment fonctionne le code

Continuez à lire pour savoir comment fonctionne le code ou passez à la section suivante.

Tout d'abord, incluez les bibliothèques nécessaires :

#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

Vous devez saisir vos identifiants réseau dans les variables suivantes :

const char* ssid = "REPLACE_WITH_YOUR_SSID"; 
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

processeur()

Leprocesseur()La fonction attribue une valeur aux espaces réservés que nous avons créés dans le fichier HTML. Il accepte comme argument l'espace réservé et doit renvoyer une chaîne qui remplacera l'espace réservé. Leprocesseur()fonction doit avoir la structure suivante :

String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
}

Cette fonction vérifie d'abord si l'espace réservé est leETATnous avons créé sur le fichier HTML.

if(var == "STATE"){

Si c'est le cas, alors, en fonction de l'état de la LED, nous réglons la variable ledState variable sur ON ou OFF.

if(digitalRead(ledPin)){
  ledState = "ON";
}
else{
  ledState = "OFF";
}

Enfin, nous retournons la variable ledState.

return ledState;

Connexion Wifi

Connectez-vous au Wi-Fi et imprimez l'adresse ESP8266 :

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}
Serial.println(WiFi.localIP());

Serveur Web asynchrone

La bibliothèque ESPAsyncWebServer nous permet de configurer les routes où le serveur écoutera les requêtes HTTP entrantes et d'exécuter des fonctions lorsqu'une requête est reçue sur cette route. Pour cela, utilisez la méthode on sur l'objetserver comme suit :

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/index.html", String(), false, processor);
});

Lorsque le serveur reçoit une requête sur l'URL racine « / », il enverra le  fichier index.html au client. Le dernier argument de la fonction send()  est le processeur, de sorte que nous pouvons remplacer l'espace réservé par la valeur que nous voulons - dans ce cas, le ledState.

Parce que nous avons référencé le fichier CSS sur le fichier HTML, le client fera une demande pour le fichier CSS. Lorsque cela se produit, le fichier CSS est envoyé au client :

server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/style.css","text/css");
});

Lorsqu'une demande est faite sur ces routes, la LED est allumée ou éteinte, et l'ESP8266 utilise le fichier HTML.

Au final, on utilise la méthode begin() sur l'objet server, afin que le serveur commence à écouter les clients entrants.

server.begin();

Enregistrez l'esquisse Arduino sous ESP8266_SPIFFS_Web_Server :

• Accédez à Croquis > Afficher le dossier croquis et créez un dossier appelé data . Enregistrez les fichiers HTML et CSS dans ce dossier ;
• Dans Outils > Carte , sélectionnez la carte ESP8266 que vous utilisez ;
• Ensuite, allez dans Outils > Taille du flash et sélectionnez 4M (1M SPIFFS) .

Ensuite, appuyez sur le bouton de téléchargement de l'IDE Arduino pour télécharger le code sur l'ESP8266.

Lorsque tout est téléchargé avec succès, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton RST embarqué ESP8266, et il devrait imprimer l'adresse IP ESP8266.

Manifestation

Ouvrez un navigateur et tapez votre adresse IP ESP8266. La page Web suivante devrait se charger.

Appuyez sur les boutons ON et OFF pour contrôler la LED embarquée ESP8266.

Cette partie vous montre comment créer un serveur Web pour contrôler deux sorties à l'aide de l'IDE Arduino. Vous pouvez utiliser cette méthode pour créer un serveur Web différent pour répondre à vos besoins.

Connectez deux LED à votre ESP8266 comme indiqué dans le schéma suivant - avec une LED connectée àGPIO 4(D2), et un autre àGPIO 5(D1).

Copiez le code suivant dans votre IDE Arduino:

#include <ESP8266WiFi.h>

// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

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

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

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

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  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
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      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("");
  }
}    

La première chose à faire est d'inclure leESP8266Wi-Fibibliothèque.

// Load Wi-Fi library
#include <ESP8266WiFi.h>

Vous devez modifier les deux variables suivantes avec vos informations d'identification réseau, afin que votre ESP8266 puisse établir une connexion avec votre routeur.

const char* ssid = "";
const char* password = "";

Ensuite, vous configurez votre serveur Web sur le port 80.

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

La ligne suivante crée une variable pour stocker l'en-tête de la requête HTTP :

String header;

Ensuite, vous créez des variables auxiliaires pour stocker l'état actuel de vos sorties. Si vous souhaitez ajouter plus de sorties et enregistrer son état, vous devez créer plus de variables.

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

Vous devez également affecter un GPIO à chacune de vos sorties. Ici nous utilisonsGPIO 4etGPIO 5. Vous pouvez utiliser tout autre GPIO approprié.

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

Vous définissez également vos GPIO comme OUTPUT et les réglez sur LOW.

// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);

Les lignes suivantes commencent la connexion Wi-Fi avecWiFi.begin(ssid, mot de passe), attendez une connexion réussie et imprimez l'adresse IP ESP dans le moniteur série.

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
 delay(500);
 Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();

Dans leloop()nous programmons ce qui se passe lorsqu'un nouveau client établit une connexion avec le serveur Web.

L'ESP écoute toujours les clients entrants avec cette ligne :

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

Lorsqu'une demande est reçue d'un client, nous enregistrons les données entrantes. La boucle while qui suit sera exécutée tant que le client restera connecté. Nous vous déconseillons de modifier la partie suivante du code à moins que vous ne sachiez exactement ce que vous faites.

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

La section suivante des instructions if et else vérifie quel bouton a été enfoncé dans votre page Web et contrôle les sorties en conséquence. Comme nous l'avons vu précédemment, nous faisons une requête sur différentes URL en fonction du bouton sur lequel nous appuyons.

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

Par exemple, si vous avez appuyé sur la toucheGPIO 5ON, l'URL devient l'adresse IP ESP suivie de /5/ON, et nous recevons ces informations sur l'en-tête HTTP. Ainsi, nous pouvons vérifier si l'en-tête contient l'expression GET /5/on.

S'il contient, le code imprime un message sur le moniteur série, change leoutput5Statevariable sur on et allume la LED.

Cela fonctionne de la même manière pour les autres boutons. Donc, si vous souhaitez ajouter plus de sorties, vous devez modifier cette partie du code pour les inclure.

Affichage de la page Web HTML

La prochaine chose que vous devez faire est de générer la page Web. L'ESP8266 enverra une réponse à votre navigateur avec du texte HTML pour afficher la page Web.

La page Web est envoyée au client à l'aide duclient.println()une fonction. Vous devez entrer ce que vous voulez envoyer au client comme argument.

Le premier texte que vous devez toujours envoyer est la ligne suivante, qui indique que nous envoyons du HTML.

<!DOCTYPE html><html>

Ensuite, la ligne suivante rend la page Web réactive dans n'importe quel navigateur Web.

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

Le suivant est utilisé pour empêcher les requêtes liées au favicon - Vous n'avez pas à vous soucier de cette ligne.

client.println("<link rel=\"icon\" href=\"data:,\">");

Styliser la page Web

Ensuite, nous avons quelques CSS pour styliser les boutons et l'apparence de la page Web. Nous choisissons la police Helvetica, définissons le contenu à afficher en bloc et aligné au centre.

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");

Nous stylisons nos boutons avec certaines propriétés pour définir la couleur, la taille, la bordure, etc…

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;}");

Ensuite, nous définissons le style d'un deuxième bouton, avec toutes les propriétés du bouton que nous avons définies précédemment, mais avec une couleur différente. Ce sera le style du bouton d'arrêt.

client.println(".button2 {background-color: #77878A;}</style></head>");

Définition du premier titre de la page Web

Dans la ligne suivante, vous définissez le premier titre de votre page Web, vous pouvez modifier ce texte en ce que vous voulez.

// Web Page Title
client.println("<h1>ESP8266 Web Server</h1>");

Affichage des boutons et de l'état correspondant

Ensuite, vous écrivez un paragraphe pour afficher leGPIO 5état actuel. Comme vous pouvez le voir, nous utilisons leoutput5Statevariable, de sorte que l'état se met à jour instantanément lorsque cette variable change.

client.println("<p>GPIO 5 - State " + output5State + "</p>");

Ensuite, on affiche le bouton marche ou arrêt, selon l'état actuel du GPIO.

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>");
}

Nous utilisons la même procédure pourGPIO 4.

Fermeture de la connexion

Enfin, lorsque la réponse se termine, nous effaçons la variable d'en-tête et arrêtons la connexion avec le client avecclient.stop().

// Clear the header variable
header = "";
// Close the connection
client.stop();

Aller plus loin

Maintenant que vous savez comment fonctionne le code, vous pouvez modifier le code pour ajouter plus de sorties ou modifier votre page Web. Pour modifier votre page Web, vous devrez peut-être connaître le HTML et le CSS.

Au lieu de contrôler deux LED, vous pouvez contrôler un drône et pratiquement tous les appareils électroniques.

Maintenant, vous pouvez téléverser le code et cela fonctionnera immédiatement. N'oubliez pas de vérifier si vous avez sélectionné la bonne carte et le bon port COM, sinon vous obtiendrez une erreur lors de la tentative de téléchargement. Ouvrez le moniteur série à un débit en bauds de 115 200.

Trouver l'adresse IP ESP

Appuyez sur le bouton ESP8266 RESET, et il affichera l'adresse IP ESP sur le moniteur série

Copiez cette adresse IP, car vous en avez besoin pour accéder au serveur Web.

Accéder au serveur Web

Ouvrez votre navigateur, tapez l'adresse IP ESP et vous verrez la page suivante. Cette page est envoyée par l'ESP8266 lorsque vous faites une requête sur l'adresse IP de l'ESP.

Si vous regardez le moniteur série, vous pouvez voir ce qui se passe en arrière-plan. L'ESP reçoit une requête HTTP d'un nouveau client - dans ce cas, votre navigateur.

Vous pouvez également voir d'autres informations sur la requête HTTP - ces champs sont appelés champs d'en-tête HTTP et définissent les paramètres de fonctionnement d'une transaction HTTP.

Test du serveur Web

Testons le serveur Web. Cliquez sur le bouton pour tournerGPIO 5SUR. L'ESP reçoit une requête sur l'URL /5/on et allume la LED 5.

L'état du voyant est également mis à jour sur la page Web.

TestGPIO 4bouton et vérifiez qu'il fonctionne de la même manière.

Ces manipulations peuvent aussi être fait sur un smartphone.