Piloter une LED avec un bouton d’une page internet sur serveur Web ESP32
Description :
Projet permettant de piloter une LED via un serveur Web hébergé sur un ESP32, où un bouton sur la page internet permet d’allumer ou d’éteindre la LED en temps réel.
L’ESP32 gère la connexion Wi-Fi, reçoit les commandes envoyées depuis le navigateur et met à jour l’état de la LED instantanément. Cette configuration est idéale pour des applications IoT, des projets domotiques ou tout système nécessitant un contrôle à distance simple et interactif via une interface web.
Prérequis :
- 1 x Carte ESP32
- 1 x Led
- 1 x Résistance 220Ω
- 1 x Breadboard
- Fils de connexion
Version IDE :
- Arduino IDE 2.3.5
Bibliothèque :
- LittleFS.h (Tuto dispo)
- ESPAsyncWebServer.h (version: 3.7.10 par ESP32Async)
- AsyncTCP.h (version 3.4.7 par ESP32Async)
Vidéo de démonstration :
Schéma de câblage :
Code :
Code Arduino :
int LED_verte = 18;
int EtatLEDVerte;
#include "LittleFS.h"
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WiFi.h>
const char *ssid = "......"; // "Votre Nom_du_routeur"
const char *password = "......"; // "Votre Mot_de_passe_du_routeur"
AsyncWebServer server(80);
void setup() {
Serial.begin(115200);
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
if (!LittleFS.begin()) {
Serial.println("An Error has occurred while mounting LittleFS");
return;
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.on("/EtatLEDVerteOn", HTTP_GET, [](AsyncWebServerRequest *request) {
EtatLEDVerte = 1;
request->send(204);
});
server.on("/EtatLEDVerteOff", HTTP_GET, [](AsyncWebServerRequest *request) {
EtatLEDVerte = 0;
request->send(204);
});
server.on("/lire_EtatLEDVerte", HTTP_GET, [](AsyncWebServerRequest *request) {
String InfoEtatLEDVerte = String(EtatLEDVerte);
request->send(200, "text/plain", InfoEtatLEDVerte);
});
server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/script.js", "text/javascript");
});
delay(10);
pinMode(LED_verte, OUTPUT);
}
void loop() {
if (EtatLEDVerte == 1) {
digitalWrite(LED_verte, HIGH);
} else {
digitalWrite(LED_verte, LOW);
}
}
Code HTML :
( index.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title>ESP</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<center>
<div>
<br>
<h2>Bienvenue sur votre serveur Web ESP32</div></h2>
<h4>LED Verte</h4>
<button onclick="LED_Verte_On()">ON</button>
<button onclick="LED_Verte_Off()">OFF</button>
<p>Etat de la LED Verte : <span id="EtatLEDVerte"></span></p>
</a>
</div>
</center>
</body>
</html>
Code Javascript :
( script.js )
function LED_Verte_On() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "EtatLEDVerteOn", true);
xhttp.send();
EtatLEDVerte();
}
function LED_Verte_Off() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "EtatLEDVerteOff", true);
xhttp.send();
EtatLEDVerte();
}
function EtatLEDVerte() {
var xhttp = new XMLHttpRequest();
var ValeurEtatLEDVerte;
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
ValeurEtatLEDVerte = this.responseText;
if(ValeurEtatLEDVerte == 1){
document.getElementById("EtatLEDVerte").textContent = "ON";
document.getElementById("EtatLEDVerte").style.color = "green";
}else{
document.getElementById("EtatLEDVerte").textContent = "OFF";
document.getElementById("EtatLEDVerte").style.color = "red";
}
//console.log(ValeurEtatLEDVerte);
//return ValeurEtatLEDVerte;
}
};
xhttp.open("GET", "lire_EtatLEDVerte", true);
xhttp.send();
};
function functioninterval() {
EtatLEDVerte();
}
setInterval( functioninterval, 500 );
