Dans ce tutoriel, vous allez apprendre à mettre en place un serveur web sur le microcontrôleur ESP32 afin de le contrôler sans fil via le Wi-Fi. Cela vous permettra d’utiliser le serveur web pour allumer ou éteindre la LED intégrée depuis une page web.
L’ESP32 est un microcontrôleur puissant qui offre des fonctionnalités Wi-Fi intégrées, ce qui en fait un excellent choix pour les projets nécessitant une communication sans fil. En configurant un serveur web sur l’ESP32, nous pouvons créer une interface utilisateur accessible depuis n’importe quel ordinateur ou téléphone connecté au même réseau Wi-Fi.
Contrôler des appareils à distance via un serveur web ouvre de nombreuses possibilités pour la domotique, les projets IoT et même la robotique. Imaginez pouvoir allumer ou éteindre des lumières, des appareils ou un robot depuis votre smartphone ou votre ordinateur.
C’est parti !
Matériel nécessaire
Vous trouverez ci-dessous la liste des composants nécessaires pour réaliser ce projet. Pour ce tutoriel, j’utilise une ancienne carte ESP32, qui n’est plus produite mais que l’on peut encore trouver à un prix très bas. C’est celle listée ci-dessous. Il existe un modèle successeur avec de meilleures spécifications, que vous pouvez trouver here.
ESP32 lite
Câble USB de données
Arduino IDE
Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.
J’aime l’ESP32 lite pour son prix bas et son connecteur batterie avec recharge intégrée. Mais pratiquement n’importe quelle autre carte ESP32 fonctionnera pour ce projet. Puisque nous allons utiliser la LED intégrée de l’ESP32, vous n’aurez pas besoin d’autres composants matériels.
Dans la prochaine section, nous allons jeter un coup d’œil rapide aux bases de la communication Wi-Fi.
Comment fonctionne le Wi-Fi
Le Wi-Fi, abréviation de Wireless Fidelity, est une technologie qui permet aux appareils de se connecter à Internet ou de communiquer entre eux sans fil.
Comprendre les bases
Le Wi-Fi utilise des signaux radio pour transmettre et recevoir des données entre les appareils. Ces ondes radio voyagent dans l’air et peuvent traverser les murs et autres obstacles, permettant ainsi une communication sans fil.
Pour établir une connexion Wi-Fi, vous avez besoin de deux éléments principaux : un appareil compatible Wi-Fi (comme un ESP32) et un Wi-Fi router (voir image ci-dessus). Le routeur agit comme un centre qui permet à vos appareils de communiquer entre eux sur le réseau.
Notez que le routeur peut aussi connecter votre appareil à Internet, mais ce n’est pas ce que nous allons faire dans ce projet.
Le rôle des SSID et des mots de passe
Lorsque vous vous connectez à un réseau Wi-Fi, il vous est demandé de saisir le SSID (Service Set Identifier) du réseau et le mot de passe. Le SSID est le nom unique qui identifie le réseau Wi-Fi (par exemple « ma_wifi_maison »), tandis que le mot de passe garantit un accès sécurisé au réseau. Ainsi, personne sans le mot de passe ne pourra accéder au serveur web ESP32 que nous allons mettre en place.
Une fois que vous avez saisi le bon SSID et mot de passe, votre appareil envoie une demande de connexion au routeur Wi-Fi. Le routeur authentifie alors votre appareil et lui attribue une IP address, qui sert d’identifiant unique sur le réseau.
Adresses IP et communication
Les adresses IP jouent un rôle essentiel dans la communication Wi-Fi. Une adresse IP est une étiquette numérique unique, par exemple 192.0.1.1 ou 192.0.1.2, attribuée à chaque appareil sur un réseau. Elle permet aux appareils d’envoyer et de recevoir des données vers des appareils spécifiques.
Lorsque vous connectez votre ESP32 à un réseau Wi-Fi, le routeur lui attribue une adresse IP. Cette adresse IP permet aux autres appareils du réseau de communiquer avec l’ESP32. Par exemple, lorsque vous accédez à une page web hébergée sur l’ESP32, votre appareil envoie une requête à l’adresse IP de l’ESP32, qui répond en envoyant la page web demandée.
Normes et fréquences Wi-Fi
La technologie Wi-Fi dispose de différentes normes et fréquences. Les normes Wi-Fi les plus courantes sont 802.11b, 802.11g, 802.11n et 802.11ac, chacune offrant des vitesses et des capacités différentes.
Le Wi-Fi fonctionne sur deux bandes de fréquences principales : 2,4 GHz et 5 GHz. La bande 2,4 GHz offre une portée plus longue mais peut être plus sujette aux interférences d’autres appareils, comme les micro-ondes ou les téléphones sans fil. La bande 5 GHz offre des vitesses plus rapides mais une portée plus courte.
Les modules Wi-Fi ESP32 actuels utilisent généralement la norme 802.11 b/g/n (802.11n jusqu’à 150 Mbps), en 2,4 GHz.
Dans la prochaine section, vous allez découvrir ce qu’est un serveur web et comment il peut être utilisé pour contrôler un ESP32 sans fil.
Qu’est-ce qu’un serveur web ?
Un Web Server est une application logicielle qui s’exécute sur un ordinateur et qui est chargée de fournir des pages web aux clients/appareils. Il agit comme un intermédiaire entre le navigateur web du client et la page web demandée. Lorsqu’un client/appareil envoie une requête pour une page web, le serveur web traite la demande et renvoie la page web demandée au client.
Dans le contexte du contrôle d’un ESP32 sans fil via le Wi-Fi, un serveur web nous permet de créer une interface utilisateur accessible depuis un navigateur web sur un ordinateur. Cette interface peut être utilisée pour envoyer des commandes à l’ESP32 via le routeur, comme allumer ou éteindre des LEDs.
Le serveur web sur l’ESP32 écoute les requêtes entrantes des clients, comme un navigateur web, et répond à ces requêtes en envoyant la page web appropriée ou en exécutant l’action demandée. Dans notre cas, nous allons implémenter un serveur web sur l’ESP32 qui pourra recevoir des commandes depuis une page web et contrôler les LEDs en conséquence.
Le serveur web envoie généralement une page web au format HTML, et la section suivante vous donnera une très brève introduction au HTML.
Qu’est-ce que le HTML ?
HTML signifie HyperText Markup Language. C’est le langage informatique standard utilisé pour créer des pages web et des applications. Il utilise un ensemble de balises pour définir les éléments et leurs propriétés dans une page web.
Les balises HTML sont entourées de chevrons (< >) et se composent d’une balise d’ouverture et d’une balise de fermeture. La balise d’ouverture marque le début d’un élément, tandis que la balise de fermeture indique la fin de l’élément. Le contenu entre les balises d’ouverture et de fermeture représente l’information associée à cet élément.
Les balises HTML peuvent servir à définir des titres, des paragraphes, des listes, des images, des liens, des tableaux, des formulaires, et bien plus encore. Ces balises permettent de structurer et d’organiser votre contenu, ce qui facilite l’interprétation et l’affichage correct de la page web par les navigateurs.
Exemple de page HTML
Voici un exemple de la page web HTML simple que nous allons utiliser pour contrôler notre ESP32 :
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
Dans cet exemple, nous avons un document HTML encadré par les balises » html « . La section » head » contient des méta-informations sur la page web, comme le titre affiché dans la barre de titre du navigateur.
<head> <title>ESP32 Controller</title> </head>
La » body » section contient le contenu visible de la page web. À l’intérieur de la balise » body » , on trouve différentes autres balises HTML. La balise » h1 » représente un titre, et la balise » p » un paragraphe. Dans ce paragraphe, nous avons deux balises » a » qui créent des liens hypertextes. Dans ce cas, les liens sont associés à deux boutons qui allument ou éteignent une LED.
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
Affichage de la page web
Si vous enregistrez ce code HTML dans un fichier (par exemple test.html) et que vous l’ouvrez dans votre navigateur web, vous verrez la page suivante :
Vous remarquerez qu’en cliquant sur les boutons, rien ne se passe. C’est parce que notre serveur web n’est pas encore en fonctionnement pour réagir à ces boutons. Mais c’est ce que nous allons mettre en place dans la prochaine section.
Implémentation du serveur web
Le code suivant montre l’implémentation d’un serveur web fonctionnant sur un ESP32 qui vous permet d’allumer ou d’éteindre la LED intégrée de l’ESP32 via un bouton sur la page web. Jetez d’abord un coup d’œil au code complet. J’expliquerai les différentes parties du code dans les sections suivantes.
// Switch built-in LED of ESP32 via web server. Based on
// https://github.com/espressif/arduino-esp32/blob/master/libraries/WiFi/examples/SimpleWiFiServer/SimpleWiFiServer.ino
#include "WiFi.h"
const char* ssid = "*****";
const char* password = "*****";
const int ledPin = LED_BUILTIN;
const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
button:hover { background-color: darkslateblue; }
button:active { background-color: mediumslateblue; }
</style>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
)"""";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
WiFiClient client = server.accept();
if (client) {
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
if (c == '\n') {
if (currentLine.length() == 0) {
client.println(html);
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
// Execute commands
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
}
}
client.stop();
}
}
Notez que vous devez avoir le core ESP32 installé pour utiliser ce code dans l’Arduino IDE. Nous avons un tutoriel à ce sujet si besoin : How to Program ESP32 with Arduino IDE.
Bibliothèques et constantes
Pour commencer, nous incluons la bibliothèque nécessaire à la communication Wi-Fi. Elle fait partie du core ESP32 et ne nécessite aucune installation particulière.
#include "WiFi.h"
Ensuite, nous définissons le SSID et le mot de passe de notre réseau Wi-Fi. Vous devez remplacer ces valeurs par les identifiants de votre propre réseau Wi-Fi. Le SSID est le nom de votre Wi-Fi domestique, par exemple « ma_wifi_maison », et le mot de passe est celui que vous utilisez habituellement pour vous connecter à ce réseau (avec votre téléphone ou ordinateur).
const char* ssid = "*****"; const char* password = "*****";
Nous définissons également le numéro de la broche pour la LED intégrée de l’ESP32. Vous pouvez facilement connecter une LED externe ou d’autres dispositifs comme des relais. Il suffit d’ajouter ici les définitions de broches correspondantes et de connecter le matériel.
const int ledPin = LED_BUILTIN;
HTML pour la page web
Ensuite, nous écrivons le code HTML qui sera envoyé au navigateur web. Ce code HTML inclut un titre, un peu de CSS style, et des boutons pour contrôler la LED.
const char* html = R""""(
HTTP/1.1 200 OK
Content-type:text/html
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controller</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
button { background-color: slateblue; color: white; border: none; width: 50px; height: 30px; }
button:hover { background-color: darkslateblue; }
button:active { background-color: mediumslateblue; }
</style>
</head>
<body>
<h1>ESP32 Controller</h1>
<p>LED:
<a href="/led/on"><button>ON</button></a>
<a href="/led/off"><button>OFF</button></a>
</p>
</body>
</html>
)"""";
C’est essentiellement le même code HTML que je vous ai montré dans la section « Qu’est-ce que le HTML ? ». Juste avec un peu de CSS style supplémentaire pour rendre la page plus jolie. Ci-dessous, une image de ce que vous verrez dans un navigateur (ici le navigateur Edge) :
Après cela, nous créons un objet serveur Wi-Fi sur le port 80, dans la ligne suivante. Le port 80 est le port couramment utilisé pour servir des pages web. Vous pouvez en lire plus sur ports here.
WiFiServer server(80);
Fonction setup
Dans la fonction setup, nous initialisons la communication série pour le débogage, configurons la broche de la LED en sortie, et allumons la LED.
Serial.begin(115200); pinMode(ledPin, OUTPUT); digitalWrite(ledPin, HIGH);
Nous nous connectons ensuite au réseau Wi-Fi en utilisant le SSID et le mot de passe fournis, et attendons la connexion. Vérifiez le Moniteur Série : si vous ne voyez que des « points » s’afficher, c’est qu’il y a un problème. Assurez-vous d’avoir le bon SSID et mot de passe.
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
Si la connexion au réseau Wi-Fi réussit, nous affichons l’adresse IP. Notez-la, car vous en aurez besoin plus tard dans le navigateur web.
Une fois la connexion Wi-Fi établie, nous démarrons le serveur Wi-Fi via
server.begin();
Fonction loop
Dans la fonction loop, nous vérifions si un client est connecté au serveur. Le client sera le navigateur web. Si c’est le cas, nous lisons les données entrantes du client et les traitons.
Le code suivant est en grande partie basé sur l’exemple SimpleWiFiServer fourni par WiFi library. Si vous souhaitez plus d’informations ou d’exemples, consultez cette ressource.
void loop() {
WiFiClient client = server.accept();
if (client) {
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
if (c == '\n') {
if (currentLine.length() == 0) {
client.println(html);
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
// Execute commands
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
}
}
client.stop();
}
}
Dans la boucle, nous lisons chaque caractère du client et l’ajoutons à la ligne courante. Lorsqu’on rencontre un caractère de nouvelle ligne, on vérifie si la ligne courante est vide. Si oui, on envoie le code HTML au client. Sinon, on efface la ligne courante.
La partie la plus importante est celle où l’on vérifie le contenu de la ligne courante. Si on trouve que la ligne se termine par « /led/on » ou « /led/off », on allume ou éteint la LED en appelant digitalWrite pour la ledPin.
Notez que la logique de la LED intégrée de l’ESP32 lite (et de certaines autres cartes) est inversée. On règle la ledPin à LOW pour allumer la LED, et inversement. Pour les LEDs externes, il faut régler la ledPin à HIGH pour allumer la LED.
if (currentLine.endsWith("GET /led/on")) {
digitalWrite(ledPin, LOW);
}
if (currentLine.endsWith("GET /led/off")) {
digitalWrite(ledPin, HIGH);
}
Si vous souhaitez ajouter d’autres commandes, c’est ici qu’il faut le faire ! Par exemple, on pourrait allumer ou éteindre un relais, en supposant qu’un relais est connecté à relayPin, en ajoutant les lignes suivantes :
if (currentLine.endsWith("GET /relay/on")) {
digitalWrite(relayPin, LOW);
}
if (currentLine.endsWith("GET /relay/off")) {
digitalWrite(relayPin, HIGH);
}
N’oubliez pas d’ajouter une constante relayPin et des boutons supplémentaires sur la page web également :
<p>Relay:
<a href="/relay/on"><button>ON</button></a>
<a href="/relay/off"><button>OFF</button></a>
</p>
Notez que les commandes « led/on », « led/off », … utilisées dans la page web et dans le code qui exécute les commandes doivent correspondre !
Si vous appuyez sur un bouton, vous verrez la commande apparaître comme un lien après l’adresse IP dans la barre d’adresse de votre navigateur :
Vous pouvez aussi utiliser ces liens pour exécuter les commandes sans passer par les boutons. Et vous pouvez également utiliser ces liens dans d’autres pages web, par exemple sur un serveur domotique IoT qui tourne sur votre réseau Wi-Fi.
Lancer le serveur web
Si vous réinitialisez votre ESP32 et ouvrez le Moniteur Série, vous devriez voir un texte affichant l’adresse IP de votre ESP32. Dans mon cas, pour mon ESP32, c’est par exemple 192.168.1.165.
Vous verrez une adresse IP différente, celle attribuée à votre carte ESP32. Copiez cette adresse dans la barre de recherche de votre navigateur. Vous devriez voir la page web générée par le serveur web de votre ESP32 :
Vous pouvez maintenant appuyer sur les boutons pour allumer ou éteindre la LED intégrée de votre ESP32.
La page web est assez sécurisée, car elle n’est accessible que depuis votre réseau Wi-Fi local. Elle n’est pas accessible publiquement depuis Internet ! Si vous souhaitez cela, il faudra mettre en place d’autres mesures de sécurité, car il est risqué d’ouvrir votre réseau Wi-Fi à Internet !
Sinon, c’est tout !
Le code ci-dessus vous donne une base que vous pouvez facilement étendre avec d’autres boutons, curseurs ou éléments d’interface pour contrôler lights, servos, stepper motors, relays ou tout autre appareil que vous pouvez connecter à un ESP32.
Conclusion
Dans ce tutoriel, nous avons appris à mettre en place un serveur web sur l’ESP32 pour le contrôler sans fil via le Wi-Fi. En suivant les étapes décrites dans ce guide, vous pouvez maintenant allumer ou éteindre des LEDs depuis une page web.
Nous avons commencé par comprendre les bases du Wi-Fi et son fonctionnement. Ensuite, nous avons vu le concept de serveur web et son rôle dans la communication entre l’ESP32 et la page web. Nous avons aussi parlé de l’importance du HTML, qui permet de créer l’interface utilisateur pour contrôler les LEDs. Après avoir acquis ces bases, nous avons implémenté le serveur web sur l’ESP32.
Si vous avez suivi ce tutoriel, vous devriez avoir un serveur web entièrement fonctionnel sur votre ESP32. Vous pouvez maintenant accéder à la page web depuis n’importe quel appareil avec un navigateur connecté au même réseau Wi-Fi.
N’hésitez pas à étendre les fonctionnalités en ajoutant d’autres éléments à la page web, comme le contrôle d’autres composants ou capteurs connectés à l’ESP32. Si vous avez d’autres questions ou besoin d’aide, consultez la section Foire Aux Questions ci-dessous.
Foire Aux Questions
Voici quelques questions fréquemment posées sur la mise en place d’un serveur web pour contrôler votre ESP32 sans fil via le Wi-Fi :
Q : Quel est l’intérêt de contrôler l’ESP32 sans fil ?
R : Contrôler l’ESP32 sans fil vous permet d’utiliser votre appareil à distance, sans avoir besoin d’interagir physiquement avec lui. Cela apporte confort et flexibilité, surtout si l’ESP32 est placé dans un endroit difficile d’accès.
Q : Quels sont les composants nécessaires pour ce projet ?
R : Pour ce projet, il vous suffit d’un ESP32 (avec Wi-Fi) et de l’Arduino IDE avec le core ESP32 installé.
Q : Comment fonctionne le Wi-Fi avec l’ESP32 ?
R : L’ESP32 possède des fonctionnalités Wi-Fi intégrées, ce qui lui permet de se connecter à un réseau sans fil. Il peut agir comme client pour se connecter à un réseau Wi-Fi existant ou comme point d’accès pour créer son propre réseau. En se connectant à un réseau Wi-Fi, l’ESP32 peut communiquer avec d’autres appareils sur le réseau.
Q : Puis-je utiliser ce code pour un ESP8266 ?
R : Oui, c’est possible. Il suffit de remplacer la bibliothèque WiFi en changeant #include "WiFi.h" par #include "ESP8266WiFi.h".
Q : Qu’est-ce qu’un serveur web ?
R : Un serveur web est une application logicielle qui fournit des pages web aux clients via Internet ou un réseau local. Dans le cadre de ce projet, l’ESP32 agit comme serveur web, en servant une page web qui permet aux utilisateurs de contrôler les LEDs qui y sont connectées.
Q : Qu’est-ce que le HTML ?
R : HTML (Hypertext Markup Language) est le langage de balisage standard utilisé pour créer des pages web. Il fournit la structure et la mise en forme du contenu d’une page web. Dans ce projet, nous utiliserons le HTML pour créer la page web qui contrôle les LEDs.
Q : Comment puis-je me connecter au serveur web via Internet ?
R : Pour vous connecter au serveur web via Internet, il faut que votre ESP32 soit connecté à un réseau Wi-Fi avec accès Internet. Une fois l’ESP32 connecté, vous pouvez accéder au serveur web en saisissant son adresse IP dans un navigateur sur n’importe quel appareil connecté à Internet. Il faudra configurer votre routeur pour autoriser les connexions entrantes vers l’adresse IP de l’ESP32, ce qui pose des questions de sécurité ! Soyez prudent !
Q : Comment créer un écran de connexion pour le serveur web ?
R : Pour créer un écran de connexion pour le serveur web, vous pouvez utiliser HTML et CSS pour concevoir le formulaire de connexion. Ajoutez des champs pour le nom d’utilisateur et le mot de passe, ainsi qu’un bouton pour envoyer les identifiants au serveur. Côté serveur, vous pouvez mettre en place un mécanisme d’authentification. Le serveur pourra alors vérifier les identifiants et accorder l’accès au serveur web si les informations sont valides.
Si vous avez d’autres questions ou rencontrez des problèmes lors de la mise en place du serveur web sur votre ESP32, n’hésitez pas à demander dans les commentaires ci-dessous.
Liens
Voici une sélection de liens vers des projets similaires impliquant le contrôle de microcontrôleurs ESP32 ou ESP8266 via Wi-Fi à l’aide d’un serveur web.
- ESP32_HTTPS_Server – Arduino Reference
- ESP32 Web Server – Arduino IDE
- ESP32 – Web Server
- ESP32 Relay Module – Control AC Appliances
- In-depth: Create A Simple ESP32 Web Server In Arduino IDE
- WebServer.h – espressif/arduino-esp32
