Haut de la page
Commander la LED de la carte Esp32 à partir d'une page Web
Commander la LED de la carte Esp32 à partir d'une page Web

A partir du programme précédent on va ajouter les lignes suivantes...

/*

  Commander la LED de la carte Esp32 à partir d'une page Web

 

  Arduino IDE, Esp32-WIFI-IPfixe-Page-Web-Led.ino

 

  http://nano-ordinateur-info.fr/

*/

 

// Inclue la bibliothèque WiFi

#include <WiFi.h> 

 

#define LED_PIN  2 // Attribu la valeur 2 à la constante LED_PIN (La LED présente sur la carte est connectée au port GPIO 2).

 

const char* ssid     = "Livebox-xxxx";         // Nom du réseau WiFi que vous utilisé

const char* password = "xxx...";     // Mot de passe de ce réseau

 

// Etat de la LED pour l'affichage sur la page Web.

String Etat_Led = "LED éteinte !";

 

// Attribue une adresse Ip fixe, la passerelle par défaut et le masque de sous-réseau.

IPAddress IP(192, 168, 1, 75);      //adresse fixe

IPAddress gateway(192, 168, 1, 1);      //passerelle par défaut.

IPAddress subnet(255, 255, 255, 0);     //masque de sous réseau.

 

WiFiServer MonServeur(80); // Créer le serveur web sur le port 80.

WiFiClient MonClient; // Créer le client.

 

void setup() {

 

  pinMode(LED_PIN, OUTPUT);  // Configure le port GPIO spécifiée (2) pour qu'il se comporte en sortie.

  digitalWrite(LED_PIN, LOW);  // Eteindre la LED au départ.

 

  //Permet de configurer l’adresse IP et les paramètres de connexion au réseau WiFi local.

  WiFi.config(IP,gateway,subnet);

 

  WiFi.begin(ssid, password);     // Connexion au réseau Wifi

 

  while (WiFi.status() != WL_CONNECTED) {     // Le programme boucle temps que la connexion n'est pas trouvée

    delay(500);     // Suspend le programme pendant la durée de 500 millisecondes

    Serial.print('.');      // Affiche un point

  }

 

  MonServeur.begin(); // Démarre le seveur Web.

 

}

 

void loop() {

    // Le programme continue que si un utilisateur se connecte à partir de son navigateur.

    MonClient = MonServeur.available();

    if (!MonClient) return;

 

    //Lorsque qu'un utilisateur se connecte avec l'adresse IP 192.168.1.75, On récupère la requête HTTP dans une variable de type String.

    String request = MonClient.readStringUntil('\r\n');

 

    // Le programme continue que si la longueur de la vaiable request est différente de 0.

    if (request.length() == 0)return;

 

    // Si le début le la chaîne request correspond à "/ ", on appelle la fonction qui affiche la page Web.

    if(request.indexOf("/ ") != -1){

         Affiche_PageWeb(Etat_Led);

    }

    //Si la requête envoyée par le navigateur correspond au bouton et que la LED est éteinte, on modifie l'affichage de la page Web et l'état de la LED.

    else if ((request.indexOf("/BOUTON") != -1) && (Etat_Led == "LED éteinte !")){

        Etat_Led = "LED Allumée !";  // Etat de la LED pour l'affichage sur la page Web.

        digitalWrite(LED_PIN, HIGH);  // On allume la LED présente sur la carte.

        Affiche_PageWeb(Etat_Led);  // On rafraichit la page Web.

    }

    //Si la requête envoyée par le navigateur correspond au bouton et que la LED est allumée, on modifie l'affichage de la page Web et l'état de la LED.

    else if ((request.indexOf("/BOUTON") != -1) && (Etat_Led == "LED Allumée !")){

        Etat_Led = "LED éteinte !";  // Etat de la LED pour l'affichage sur la page Web.

        digitalWrite(LED_PIN, LOW);  // On allume la LED présente sur la carte.

        Affiche_PageWeb(Etat_Led);  // On rafraichit la page Web.

    }

}

void Affiche_PageWeb(const String Etat_Led){

   // Code html pour l'affichage de la page Web.

    MonClient.println("HTTP/1.1 200 OK");

    MonClient.println("Content-Type: text/html");

    MonClient.println("Connection: close");

    MonClient.println("");

    MonClient.println("<!DOCTYPE html>");

    MonClient.println("<html style=\"text-align:center;\">");

    MonClient.println("<head>");

    MonClient.println("<meta charset=\"utf-8\">");   

    MonClient.println("<br>");

    MonClient.println("<h2>Esp32 Web Serveur</h2>"); 

    MonClient.println("<br>");   

    MonClient.println("</head>");   

    MonClient.println("<body>");

    MonClient.println("<h1>Nano-Ordinateur.Info</h1>");

    MonClient.println("<br>");   

    MonClient.println("<p Style=\"color:rgb(200,0,0);\"> Allumer ou éteindre la LED présente sur la carte.</p><br>");

    MonClient.println("<p>" + Etat_Led + "</p>");

    MonClient.println("<br>");

    MonClient.println("<a href=\"BOUTON\"><button Style=\"padding: 10px 70px;\">Intérupteur</button></a>");

    MonClient.println("<br><br>");

    MonClient.println("<a href=\"https://nano-ordinateur-info.fr\" target=\"_blank\">Nano-Ordinateur-Info</a>");

    MonClient.println("</body>");

    MonClient.println("</html>");

}

Attribut la valeur 2 à la constante LED_PIN (La LED présente sur la carte est connectée au port GPIO 2).

#define LED_PIN  2

 

Etat de la LED pour l'affichage sur la page Web.

String Etat_Led = "LED éteinte !";

 

Créer le serveur web sur le port 80.

WiFiServer MonServeur(80);

 

Créer le client.

WiFiClient MonClient;

 

Configure le port GPIO spécifiée (2) pour qu'il se comporte en sortie.

pinMode(LED_PIN, OUTPUT);

 

Eteind la LED au départ du programme.

digitalWrite(LED_PIN, LOW);

 

Démarre le seveur Web.

MonServeur.begin();

 

Le programme continue que si un utilisateur se connecte à partir de son navigateur.

MonClient = MonServeur.available();

if (!MonClient) return;

 

Lorsque qu'un utilisateur se connecte à partir d'un navigateur internet avec l'adresse IP 192.168.1.75, On récupère la requête HTTP dans une variable de type String.

String request = MonClient.readStringUntil('\r\n');

 

Le programme continue que si la longueur de la vaiable request est différente de 0.

if (request.length() == 0)return;

 

Si le début le la chaîne request correspond à "/ ", on appelle la fonction qui affiche la page Web.

if(request.indexOf("/ ") != -1){

     Affiche_PageWeb(Etat_Led);

}

 

Si la requête envoyée par le navigateur correspond au bouton et que la LED est éteinte, on modifie l'affichage de la page Web et l'état de la LED.

else if ((request.indexOf("/BOUTON") != -1) && (Etat_Led == "LED éteinte !")){

    Etat_Led = "LED Allumée !";  // Etat de la LED pour l'affichage sur la page Web.

    digitalWrite(LED_PIN, HIGH);  // On allume la LED présente sur la carte.

     Affiche_PageWeb(Etat_Led);  // On rafraichit la page Web.

}

 

Si la requête envoyée par le navigateur correspond au bouton et que la LED est allumée, on modifie l'affichage de la page Web et l'état de la LED.

else if ((request.indexOf("/BOUTON") != -1) && (Etat_Led == "LED Allumée !")){

    Etat_Led = "LED éteinte !";  // Etat de la LED pour l'affichage sur la page Web.

    digitalWrite(LED_PIN, LOW);  // On allume la LED présente sur la carte.

    Affiche_PageWeb(Etat_Led);  // On rafraichit la page Web.

}

 

Code html pour l'affichage de la page Web

void Affiche_PageWeb(const String Etat_Led){

    MonClient.println("HTTP/1.1 200 OK");

    MonClient.println("Content-Type: text/html");

    MonClient.println("Connection: close");

    ...

    ...

    MonClient.println("</html>");

}

 

 

Téléchargé le programme à l'adresse suivante...

...ou coller le code suivant dans l'IDE Arduino.

Attribuer une adresse IP fixe à la carte Esp32

Cliquer sur le bouton Téléverser pour transférer le programme à l'Esp32.

 Lorsque le téléversement est términé...

... à partir d'un navigateur sur PC, Smartphone, Tablette, ect... entrer l'adresse IP de la carte, 192.168.1.75 , le navigateur doit afficher la page Web...

...vous pouvez maintenant cliquer sur le bouton pour allumée ou éteindre la LED présente sur la carte.