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