Récupérer la valeur d’un input « range » d’une page web sur l’esp32
Description :
Projet permettant de récupérer la valeur d’un champ input de type “range” depuis une page Web hébergée sur un ESP32, pour contrôler des paramètres ou dispositifs à distance.
L’utilisateur déplace le curseur de l’input “range” sur le navigateur, et l’ESP32 reçoit cette valeur via son serveur Web intégré. Elle peut ensuite être utilisée pour ajuster la luminosité d’une LED, la vitesse d’un moteur, ou tout autre paramètre variable dans des projets IoT ou domotiques interactifs.
Cette configuration permet un contrôle intuitif et en temps réel depuis une interface Web simple, sans connexion filaire directe.
Prérequis :
- 1 x Carte ESP32
- 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 :
#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);
int ValeurRange = 0;
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: ");
// Imprimer l'adresse IP locale ESP
Serial.println(WiFi.localIP());
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("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/script.js", "text/javascript");
});
server.on("/read_ValueRange", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(ValeurRange);
request->send(200, "text/plain", message);
});
server.on("/write_ValueRange", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("ValueRange", true)) {
String message;
message = request->getParam("ValueRange", true)->value();
ValeurRange = message.toInt();
}
request->send(204);
});
// Démarrer le serveur
server.begin();
}
void loop() {
Serial.print("Valeur INPUT Range :");
Serial.println(ValeurRange);
delay(500);
}
Code HTML :
( index.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<script type="text/javascript" src="https://webapps1.chicago.gov/cdn/jQuery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<h2>Serveur Web ESP32 :</h2>
<div>
<input type="range" id="ValueRange" min="0" max="255" />
<label for="range">Range</label>
<p>Value: <span id="value"></span></p>
</div>
</div>
</body>
</html>
Code Javascript :
( script.js )
function getDataValeurRange() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("value").innerHTML = this.responseText;
document.getElementById("ValueRange").value = this.responseText;
}
};
xhttp.open("GET", "read_ValueRange", true);
xhttp.send();
};
getDataValeurRange();
document.addEventListener('DOMContentLoaded', (event) => {
const selectElement = document.querySelector('#ValueRange');
if (selectElement) {
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('#value');
if (result) {
result.innerHTML = selectElement.value
}
});
selectElement.addEventListener('input', (event) => {
const result = document.querySelector('#value');
if (result) {
result.innerHTML = selectElement.value
}
});
}
});
$(document).ready(function () {
$("#ValueRange").change(function () {
var valeur = $("#ValueRange").val();
$.post("write_ValueRange", {
ValueRange: valeur
});
});
});
