4.WIFI

Pilotage de LED avec un ESP32 en mode WIFI

Total sur 10

2 points par questions

Matériels nécessaires :

1 ESP32

2 breadboards

3 leds grove

des fils males-mâles

But du projet

Voici ce qu’il est en mesure de faire avec un serveur web héberger sur un ESP32 :

Le serveur Web permet de contrôler deux LEDs connectées à un ESP32 GPIO 26 et GPIO 27;
Le serveur web hébergé par l’ESP32 est accessible en tapant une adresse dans un navigateur sur votre propre réseau connecté à un WIFI par exemple;
En cliquant sur un bouton de votre navigateur Internet, vous changerez instantanément l’état de chaque LED.

Cette exemple fonctionne avec autre chose que des LEDS qui peuvent être remplacer par des relais ou d’autres composants électronique de votre choix.

Pré-requis : installer les support ESP32 dans l’IDE Arduino

Matériels requis :

Schematic

Commencez par construire le circuit. Connectez deux LED à l'ESP32 comme indiqué dans le schéma suivant - une LED connectée àGPIO 26, et l'autre à GPIO 27.

Note : Nous utilisons la carte ESP32 DEVKIT DOIT avec 36 broches.

ou bien utiliser

Câbler deux leds sur l'ESP32 à l'aide des fils et des breadboards. Utiliser le bout du fil pour récupérer le signal et alimenter la LED.

ATTENTION, selon la présence ou non d'un routeur dans la salle (demander au professeur), il faudra :

Utilisez le fichier "WebServer.ino" si vous utilisez le routeur WIFI de la salle SIN à l'aide du SSID : sti2dsin et du mot de passe : sti2dsin

sinon utiliser le fichier "WIFI Access Point" qui générera son propre WIFI,

ESP32 Web Server Code

Nous fournissons ici "ressources/WebServer.ino" le code qui crée le serveur Web ESP32. Copiez le code suivant dans votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter quelques modifications pour que cela fonctionne pour vous.

Explication du code à lire impérativement dans sa globalité :

Définition de vos informations d'identification réseau

Vous devez modifier les lignes suivantes avec vos identifiants réseau : SSID et mot de passe. Le code est bien commenté sur l'endroit où vous devez apporter les modifications.

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Téléchargement du code

Maintenant, vous pouvez télécharger le code et le serveur Web fonctionnera immédiatement. Suivez les étapes suivantes pour télécharger le code sur l'ESP32 :

1) Branchez votre carte ESP32 sur votre ordinateur ;

2) Dans l'IDE Arduino, sélectionnez votre carte dans Outils > Carte (dans notre cas, nous utilisons la carte ESP32 DEV MODULE);

3) Sélectionnez le port COM dans Outils > Port .

4) Appuyez sur le bouton Télécharger dans l'IDE Arduino et attendez quelques secondes pendant que le code se compile et se télécharge sur votre carte. Au besoin appuyer sur le bouton BOOT pour activer le mode upload.

5) Appuyer sur le bouton prog et attendez le message « Téléchargement terminé ».

Trouver l'adresse IP ESP32

Après avoir téléchargé le code, ouvrez le moniteur série à un débit en bauds de 115200.

Appuyez sur le bouton ESP32 EN (réinitialiser). L'ESP32 se connecte au Wi-Fi et affiche l'adresse IP de l'ESP sur le moniteur série. Copiez cette adresse IP, car vous en avez besoin pour accéder au serveur Web ESP32.

Accéder au serveur Web

Pour accéder au serveur Web, ouvrez votre navigateur, collez l'adresse IP ESP32 et vous verrez la page suivante. Dans notre cas, il s'agit de 192.168.1.135 .

Utiliser votre smartphone pour vous y connecter :

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.

Tester le serveur Web

Vous pouvez maintenant tester si votre serveur Web fonctionne correctement. Cliquez sur les boutons pour contrôler les LED.

En même temps, vous pouvez jeter un œil au moniteur série pour voir ce qui se passe en arrière-plan. Par exemple, lorsque vous cliquez sur le bouton pour activerGPIO 26ON, ESP32 reçoit une requête sur l' URL /26/on .

Lorsque l'ESP32 reçoit cette demande, il allume la LED attachée àGPIO 26ON et met à jour son état sur la page Web.

Le bouton pourGPIO 27fonctionne de manière similaire. Testez qu'il fonctionne correctement.

Comment fonctionne le code

Dans cette section, nous allons examiner de plus près le code pour voir comment cela fonctionne.

La première chose que vous devez faire est d'inclure la bibliothèque WiFi.

#include <WiFi.h>

Comme mentionné précédemment, vous devez insérer votre ssid et votre mot de passe dans les lignes suivantes à l'intérieur des guillemets doubles.

const char* ssid = "";

const char* password = "";

Ensuite, vous configurez votre serveur Web sur le port 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.

String output26State = "off";

String output27State = "off";

Vous devez également affecter un GPIO à chacune de vos sorties. Ici nous utilisonsGPIO 26autreGPIO 27. Vous pouvez utiliser tout autre GPIO approprié.

const int output26 = 26;

const int output27 = 27;

setup()

Maintenant, entrons dans le setup(). Tout d'abord, nous commençons une communication série à un débit en bauds de 115200 à des fins de débogage.

Serial.begin(115200);

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

// Initialize the output variables as outputs

pinMode(output26, OUTPUT);

pinMode(output27, OUTPUT);

// Set outputs to LOW

digitalWrite(output26, LOW);

digitalWrite(output27, LOW);

Les lignes suivantes commencent la connexion Wi-Fi avec WiFi.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();

loop()

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

L'ESP32 est toujours à l'écoute des clients entrants avec la ligne suivante :

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) { // si un nouveau client se connecte,

Serial.println("New Client."); // affiche un message dans le port série

String currentLine = ""; // créer une chaîne de caractère de type String pour stocker les données entrantes du client

while (client.connected()) { // on boucle tant que le client est connecté

if (client.available()) { // si il y a des caractère à lire du client

char c = client.read(); // lecture octet par octet 1 char = 8 bit

Serial.write(c); // écrit sur le moniteur série

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 pressé.

// turns the GPIOs on and off

if (header.indexOf("GET /26/on") >= 0) {

Serial.println("GPIO 26 on");

output26State = "on";

digitalWrite(output26, HIGH);

} else if (header.indexOf("GET /26/off") >= 0) {

Serial.println("GPIO 26 off");

output26State = "off";

digitalWrite(output26, LOW);

} else if (header.indexOf("GET /27/on") >= 0) {

Serial.println("GPIO 27 on");

output27State = "on";

digitalWrite(output27, HIGH);

} else if (header.indexOf("GET /27/off") >= 0) {

Serial.println("GPIO 27 off");

output27State = "off";

digitalWrite(output27, LOW);

}

Par exemple, si vous avez appuyé sur le bouton GPIO 26 ON, l'ESP32 reçoit une requête sur l' URL /26/ON (nous pouvons voir cette information sur l'en-tête HTTP sur le Serial Monitor). Ainsi, nous pouvons vérifier si l'en-tête contient l'expression GET /26/on . S'il contient, on change lesortie26étatvariable sur ON, et l'ESP32 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 créer la page Web. L'ESP32 enverra une réponse à votre navigateur avec du code HTML pour créer la page Web.

La page Web est envoyée au client en utilisant cette expressionclient.println(). Vous devez entrer ce que vous voulez envoyer au client comme argument.

La première chose que nous devons envoyer est toujours 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\">");

Et ce qui suit est utilisé pour empêcher les requêtes sur le favicon. – Vous n'avez pas à vous soucier de cette ligne.

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

Styliser la page Web

Ensuite, nous avons du texte 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 la couleur #4CAF50, sans bordure, texte en couleur blanche, et avec ce padding : 16px 40px. Nous définissons également la décoration de texte sur aucun, définissons la taille de la police, la marge et le curseur sur un pointeur.

client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");

client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");

Nous définissons également 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: #555555;}</style></head>");

Définition du premier titre de la page Web

Dans la ligne suivante, vous pouvez définir le premier titre de votre page Web. Ici, nous avons " ESP32 Web Server ", mais vous pouvez changer ce texte en ce que vous voulez.

// Web Page Heading

client.println("<h1>ESP32 Web Server</h1>");

Affichage des boutons et de l'état correspondant

On écrit une ligne pour afficher l'état actuel du GPIO 26. La variable output26Statevariable se met à jour instantanément lorsque cette variable change.

client.println("<p>GPIO 26 - State " + output26State + "</p>");

Ensuite, on affiche le bouton marche ou arrêt, selon l'état actuel du GPIO. Si l'état actuel du GPIO est éteint, nous affichons le bouton ON, sinon, nous affichons le bouton OFF.

if (output26State=="off") {

client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");

} else {

client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");

}

Le fonctionnement est idem pour GPIO 27.

Fermeture de la connexion

Enfin, lorsque la réponse se termine, nous effaçons les en-têtes variable, et arrêter la connexion avec le client avec client.stop().

// Clear the header variable

header = "";

// Close the connection

client.stop();

Questions

En utilisant le fichier "WebServer.ino" si vous utilisez le routeur WIFI de la salle SIN à l'aide du SSID : sti2dsin et du mot de passe : sti2dsin

sinon utiliser le fichier "WIFI Access Point" qui générera son propre WIFI,

mettez en œuvre la connexion WIFI et le serveur WEB ESP32.

Vous utiliserez votre smarphone pour vous connecter à l'adresse IP de l'ESP32 en vous connectant au réseau WIFI de la salle SIN.

Question 1 : Comment est stocké l'état de la LED ? A quoi sert l'instruction : if (header.indexOf("GET /26/on") >= 0) Expliquez sommairement les différentes étapes du programme dans votre compte rendu.

Question 2 : On ajoute une nouvelle LED que l'on souhaite piloter par le WIFI. Expliquer ce que vous devez modifier/ajouter et faites la modification dans votre code. Tester et faites valider en expliquant ce que vous avez fait au professeur.

En utilisant le fichier "AdvancedWebServer.ino" :

Question 3 : Analyser le nouveau code, quelles sont les différences majeures ? Quelle version vous paraît la plus simple ?

Question 4 : Modifier le nouveau code pour allumer une troisième LED. Expliquer ce que vous devez modifier et faites la modification dans votre code. Tester et faites valider en expliquant ce que vous avez fait au professeur.

Question 5 : Modifier le nouveau code pour qu'il soit identique au premier ou bien changer et personnaliser la page en insérant une image de fond (la plus légère en taille possible). Changer les boutons par des images d'ampoule ou de LED éteinte et/ou allumée en fonction de l'état. En gros, refaite une version personnalisée de la page. Aidez-vous de ce que l'on a vu dans l'activité HTML.

Créé avec HelpNDoc Personal Edition: Rationalisez votre processus de documentation avec l'analyseur de projet de HelpNDoc