Esp32 - Serveur Web Simple

serveur-web


Création d'un serveur Web simple 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 ...


Comment connecter l'Esp32 à votre réseau Wifi, voir la page  Esp32 - Wifi



Serveur Web simple

  • serveur-web-code
  • serveur-web-moniteur-serie


Ecrire le code ci-dessous dans l'éditeur IDE Arduino


Le code

#include <WiFi.h>   // Utilisation de la librairie WiFi.h
#include <WebServer.h>   // Utilisation de la librairie WebServer.h

const char* ssid = "VOTRE_SSID";  // Mettre le ssid de votre réseau Wifi
const char* password = "VOTRE_MOT_DE_PASSE";   // Mettre le mot de passe de votre réseau Wifi
WebServer server(80);  // Permet l'affichage de la page d'accueil 

void handleRoot(){  // Page d'accueil La page HTML est mise dans le String page

//  Syntaxe d'écriture pour être compatible avec le C++ / Arduino

// String page = " xxxxxxxx ";

// page += " xxxxx ";

// etc ...
  String page = "<!DOCTYPE html>";  // Début page HTML
    page += "<head>";
    page += "    <title>Serveur ESP32</title>";
    page += "    <meta http-equiv='refresh' content='60' name='viewport' content='width=device-width, initial-scale=1' charset='UTF-8'/>";
    page += "</head>";
    page += "<body lang='fr'>";
    page += "    <h1>Serveur</h1>";
    page += "    <p>Ce serveur est hébergé sur un ESP32</p>";
    page += "    <i>Créé par Tommy Desrochers</i>";
    page += "</body>";
    page += "</html>";
 // Fin page HTML

    server.send(200, "text/html", page);  // Envoie de la page HTML
}

void handleNotFound(){  // Page Not found
  server.send(404, "text/plain","404: Not found");
}

void setup() {
  Serial.begin(115200);
  delay(1000);
  Serial.println("\n");
  WiFi.begin(ssid, password);  
// Initialisation du Wifi
  Serial.print("Attente de connexion ...");

  while (WiFi.status() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(100);
  }

  Serial.println("\n");  // Affichage "Connexion établie" et de l'adresse IP
  Serial.println("Connexion etablie !");
  Serial.print("Adresse IP: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);  // Chargement de la page d'accueil
  server.onNotFound(handleNotFound);  // Chargement de la page "Not found"
  server.begin();  // Initialisation du serveur web
  Serial.println("Serveur web actif");
}

void loop() {
  server.handleClient();  
// Attente de demande du client
}


Vérifier et téleverser le code dans l'Esp32

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


Page d'Accueil et page not found

  • serveur-web-accueil
  • 404-not-found


Dans un navigateur, saisir l'adresse IP de l'Esp32 pour afficher la page d'accueil

192.168.x.x

Saisir l'URL d'une page qui n'existe pas, le serveur web affiche la page "404: Not Found"

192.168.x.x/test



Serveur Web avec bouton / led

server-web-led-code


Allumer la led de l'Esp32 avec des boutons avec la page web d'accueil

J'utilise un Esp32-wroom de chez AZ-Delivery, j'ai utilisé une led connectée sur le GPIO5 (avec une resistance de 220 Ohms)

J'utilise le code précedent modifié pour les boutons et pour la led

const int led = 5;  // Led sur GPIO5

Ecrire le code ci-dessous dans l'éditeur IDE Arduino


Le code

#include <WiFi.h>  // Librairie Wifi.h
#include <WebServer.h>  // Librairie WebServer.h

const char* ssid = "VOTRE_SSID";
const char* password = "VOTRE_MOT_DE_PASSE";
WebServer server(80);

const int led = 5;  // Led sur GPIO5
bool etatLed = 0;
char texteEtatLed[2][10] = {"ÉTEINTE","ALLUMÉE"};  // Affichage ETEINTE ou ALLUMEE

void handleRoot(){   // Début de la page HTML
  String page = "<!DOCTYPE html>";
    page += "<html lang='fr'>";
    
    page += "<head>";
    page += "    <title>Serveur ESP32</title>";
    page += "    <meta http-equiv='refresh' content='60' name='viewport' content='width=device-width, initial-scale=1' charset='UTF-8'/>";
    page += "    <link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>";  # Utilisation du css 
    page += "</head>";

    page += "<body>";
    page += "    <div class='w3-card w3-blue w3-padding-small w3-jumbo w3-center'>";
    page += "        <p>ÉTAT LED: "; page += texteEtatLed[etatLed]; page += "</p>";
    page += "    </div>";

    page += "    <div class='w3-bar'>";
    page += "        <a href='/on' class='w3-bar-item w3-button w3-border w3-jumbo' style='width:50%; height:50%;'>ON</a>";
    page += "        <a href='/off' class='w3-bar-item w3-button w3-border w3-jumbo' style='width:50%; height:50%;'>OFF</a>";
    page += "    </div>";

    page += "    <div class='w3-center w3-padding-16'>";
    page += "        <p>Ce serveur est hébergé sur un ESP32</p>";
    page += "        <i>Créé par Tommy Desrochers</i>";
    page += "    </div>";

    page += "</body>";
    page += "</html>";  // Fin de la page HTML

    server.setContentLength(page.length());  // Permet l'affichage plus rapide après chaque clic sur les boutons
    server.send(200, "text/html", page);
}

void handleOn(){  // Code pour allumer la led
    etatLed = 1;
    digitalWrite(led, HIGH);
    server.sendHeader("Location","/");
    server.send(303);
}

void handleOff(){   // Code pour éteindre la led
    etatLed = 0;
    digitalWrite(led, LOW);
    server.sendHeader("Location","/");
    server.send(303);
}

void handleNotFound(){  // Page Not found
  server.send(404, "text/plain","404: Not found");
}

void setup() {
  Serial.begin(115200);
  delay(1000);
  Serial.println("\n");

  pinMode(led, OUTPUT); // Définition de la led en OUTPUT
  digitalWrite(led, 0);  // Initialisation de la led à 0 (éteinte)

  WiFi.persistent(false);
  WiFi.begin(ssid, password);
  Serial.print("Attente 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.on("/", handleRoot);  // Chargement de la page accueil
  server.on("/on", handleOn);  // Chargement du handleOn - Allumée la led
  server.on("/off", handleOff);  // Chargement du handleOff - Eteindre la led
  server.onNotFound(handleNotFound);  // Chargement de la page Not found
  server.begin();

  Serial.println("Serveur web actif");
}

void loop() {
  server.handleClient();
}


Vérifier et téléverser le code dans l'Esp32

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

led-off
led-on