Esp32 - Serveur Web Avancé

serverur-web


Création d'un serveur Web avancé sur l'Esp32 en utilisant les informations venant de

YouTube

https://tommydesrochers.com/

J'utilise le tuto de Tommy pour allumer une led via une page Web hébergée sur l'Esp32

Merci à Tommy ...


Serveur Web simple avec l'Esp32, voir la page  Esp32 - Serveur Web Simple


esp32 - serveur web avancé

eps32-serveur-web-avance-schema

Utilisation de VSCodium ou de Visual Studio Code pour réaliser le serveur

Création du projet "Serveur Web Avancé" dans PlatformIO  # Le nom de votre choix

Utilisation d'une  led rouge  et d'une résistance de 220 Ohms

pin G23 - GPIO23

J'utilise VSCodium et PlatformIO pour réaliser le projet
vscodium-esp32-interface

Ouvrir l'éditeur de code VSCodium et créer le projet

Nom du projet: Serveur Web Avancé
Board: AZ-Delivery ESP-32 Dev Kit C V4  # C'est la référence de mon Esp32
Framework: Arduino



Pour notre projet, il faut installer les bibliothèques

ESPAsyncWebServer.h   # Serveur Web Asynchrone
AsyncTCP  # TCP Asynchrone

ESPAsyncWebServer sur https://github.com/me-no-dev/ESPAsyncWebServer

AsyncTCP sur https://github.com/me-no-dev/AsyncTCP


Nous utiliserons la librairie SPIFFS.h

SPIFFS.h   # Gestionnaire de fichiers installé avec l'Esp32



Ajout des bibliothèques nécessaires

  • platformio-librairie
  • librairie-esp32_async_web_server
  • librairie-esp32_async_web_server-install
  • librairie-code
  • librairie-asynctcp
  • librairie-asynctcp-install
  • librairie-asynctcp-code
  • platformio-librairie


Ouvrir PlatformIO, puis Librairies


Rechercher ESPAsyncWebServer

Cliquer sur ESP Async WebServer  # Voir image ci-contre

Cliquer sur [Installation] 

Faire défiler les instructions jusqu'aux lignes:

lib_deps =
# Using a librairie name
ESP Async WebServer


Faire un copier/coller des ces lignes dans le fichier platformio.ini


Puis rechercher AsyncTCP

Cliquer sur Async TCP  # Voir image ci-contre

Cliquer sur [Installation]

Faire défiler le texte jusqu'aux lignes:

lib_deps =
# Using a librairie name
Async TCP

Faire un copier/coller de la ligne Async TCP dans le fichier platformio.ini
Et ajouter la ligne pour le moniteur série

monitor_serie = 115200

Le fichier platformio.ini doit ressembler à cela:

[env:az-delivery-devkit-v4]
platform = espressif32
board = az-delivery-devkit-v4
framework = arduino
monitor_serie = 115200  # Ajout du moniteur série

lib_deps =  # Ajout des librairies
  ESP Async WebServer
  AsyncTCP

Sauvegarder [Ctrl] + [S]


esp32-web-server-verify

Nous utilisons les librairies Serveur Web et Gestionnaire de fichiers

Ouvrir le fichier main.cpp et ajouter les lignes ci-dessous

#include <Arduino.h>  # Librairie Arduino
#include<ESPAsyncWebServer.h> # Librairie Serveur Web
#include <SPIFFS.h>  # Librairie Gestionnaire de fichiers


Sauvegarder [Ctrl] + [S]

Les librairies vont s'installer localement dans le projet lors de la compilation du code [Verify]

Aucune erreur ne doit s'afficher ...


Création de l'interface Web

  • data-index-script
  • w3-css-download
  • data-index-script-w3css


Créer un dossier data à la racine du projet

Dans le dossier data, créer les fichiers

index.html
script.js


Pour ajouter le fichier css, aller sur W3.CSS Download

https://www.w3schools.com/w3css/w3css_downloads.asp


Faire Clic droit/Enregistrer la cible du lien sous ...  sur le lien 

https://www.w3schools.com/w3css/4/w3.css


Dans la fenêtre qui s'ouvre, choisir le dossier de destination et faire [Enregistrer]

Le fichier w3.css est enregistré dans un dossier de votre choix sur votre ordinateur

Faire [Déplacer/Glisser] (Drag and Drop] du fichier w3.css dans le dossier data  # Voir image


Le dossier data doit contenir les 3 fichiers

index.html
script.js
w3.css



Création du fichier index.html

index-html


J'ai retiré le code concernant le niveau de luminosité du code original

Le code

<!DOCTYPE html>
<html lang="fr">
    
<head>
    <title>Serveur ESP32</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="w3.css">
    <script type="text/javascript" src="script.js"></script>
</head>

<body class="w3-animate-opacity">
    <div class="w3-card w3-blue w3-padding-small w3-center">
        <h1>ESP32</h1>
    </div>

<!-- Les boutons ON / OFF -->

   <div class="w3-margin w3-center w3-card w3-padding-24">

        <h3 class="w3-padding">Allumer/Éteindre la LED</h3>
        <button onclick="onButton()" class="w3-button w3-green w3-xlarge w3-ripple w3-wide" style="width:40%;">ON</button>  
 <!-- Bouton ON -->
        <button onclick="offButton()" class="w3-button w3-red w3-xlarge w3-ripple w3-wide" style="width:40%;">OFF</button>  <!-- Bouton OFF -->
        <br><br>
    </div>
    

<div class="w3-padding w3-center">
        <i><a href="https://TommyDesrochers.com" style="text-decoration: none;">Tommy Desrochers 2020</a></i>
    </div>
</body>
</html>



Création du fichier script.js

script-js


J'ai retiré le code concernant le niveau de luminosité du code original

Le code

function onButton() {  /* Fonction pour le bouton ON */
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "on", true);
    xhttp.send();
}
function offButton() {  
/* Fonction pour le bouton OFF */
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "off", true);
    xhttp.send();
}



création du fichier main.cpp

main-cpp

J'ai retiré le code concernant le niveau de luminosité du code original

Le code

#include <Arduino.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>

/* Mettre le nom de votre réseau et mot de passe Wifi */
const char *ssid = "Nom du réseau";
const char *password = "Mot de passe";
const int led = 23;  /* Pin 23 de la led */
AsyncWebServer server(80);

void setup()
{

  //----------------------------------------------------SERIAL
  Serial.begin(115200);

 /* Attente ouverture moniteur série

Uniquement pour les tests

Supprimer cette ligne une fois les tests terminés */

  while(!serial){} 

  Serial.println("\n");   

  //----------------------------------------------------GPIO
  pinMode(led, OUTPUT);
  digitalWrite(led, LOW);
  
//----------------------------------------------------SPIFFS

  if(!SPIFFS.begin())  /* Démarrage du gestionnaire de fichiers SPIFFS */
  {
    Serial.println("Erreur SPIFFS...");
    return;
  }

/* Détection des fichiers présents sur l'Esp32 */
  File root = SPIFFS.open("/");  /* Ouverture de la racine */
  File file = root.openNextFile();  /* Ouverture du 1er fichier */
  while(file)  /* Boucle de test de présence des fichiers - Si plus de fichiers la boucle s'arrête*/

  {
    Serial.print("File: "); 

    Serial.println(file.name());  
    file.close();
    file = root.openNextFile();
 /* Lecture du fichier suivant */
  }

//----------------------------------------------------WIFI
  WiFi.begin(ssid, password);  /* Connexion au réseau Wifi */
Serial.print("Tentative de connexion...");
while(WiFi.status() != WL_CONNECTED)
{
Serial.print(".");
delay(100);
}
Serial.println("\n");
Serial.println("Connexion etablie!");
Serial.print("Adresse IP: ");
Serial.println(WiFi.localIP());

//----------------------------------------------------SERVER
/* Lorsque le serveur est actif , la page index.html est chargée */  

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

/* Lorsque le serveur est actif , le fichier w3.css est utilsé */  
  server.on("/w3.css", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(SPIFFS, "/w3.css", "text/css");
  });

/* Lorsque le serveur est actif , le fichier script.js est utilisé */  
  server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(SPIFFS, "/script.js", "text/javascript");
  });

/* Lorsque l'on clique sur ON, on allume la led */ 
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    digitalWrite(led, HIGH);
    request->send(200);
  });

/* Lorsque l'on clique sur OFF, on éteint la led */ 
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    digitalWrite(led, LOW);
    request->send(200);
  });

/* On affiche que le serveur est actif */
  server.begin();
  Serial.println("Serveur actif!");
}


void loop() /* La loop est vide */
{
}



Upload des fichiers dans l'Esp32

  • upload-file-system-image
  • upload-file-system-image-success
  • verify-upload-code


Il faut uploader les fichiers web et le code C++ dans l'Esp32


Pour uploader les fichiers Web dans l'Esp32

index.html
script.js
w3.css


Cliquer sur l'icône PlatformIO

Cliquer sur Upload File System Image  # Upload des fichiers Web


Attendre de message "Success"


Pour uploader le fichier code C++ dans l'Esp32

main.cpp


Cliquer sur PlatformIO : Build  # Vérifier le code C++

Cliquer sur PlatformIO : Upload  # Uploader le code C++



  • connexion-OK
  • navigateur

Ouvrir le moniteur série pour visualiser les informations et l'adresse IP de l'Esp32

Ouvir un navigateur et saisir l'adresse IP de l'Esp32


Cliquer sur  [ON]  , la led s'allume

Cliquer sur  [OFF]  , la led s'éteint