Piloter une LED avec un bouton d’une page internet sur serveur Web ESP32
Prérequis :
- 1 x Carte ESP32
- 1 x Led
- 1 x Résistance 220Ω
- 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 );
