Récupérer la valeur d’un input « number » d’une page web sur l’esp32
Description :
Projet permettant de récupérer la valeur d’un champ input de type “number” depuis une page Web hébergée sur un ESP32.
L’utilisateur saisit un nombre dans le navigateur, l’ESP32 reçoit cette valeur via le serveur Web intégré et peut l’utiliser pour contrôler des dispositifs connectés, ajuster des paramètres ou déclencher des actions spécifiques.
Cette configuration est idéale pour des projets IoT interactifs, permettant une saisie de données simple et un contrôle en temps réel via une interface web.
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);
float Valeurfloat = 2.2;
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");
});
////////Read/Write Valeurfloat
server.on("/read_Valeurfloat", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(Valeurfloat);
request->send(200, "text/plain", message);
});
server.on("/write_Valeurfloat", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("Valeurfloat", true)) {
String message;
message = request->getParam("Valeurfloat", true)->value();
Valeurfloat = message.toFloat();
}
request->send(204);
});
server.on("/read_Valeurfloatinfo", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(Valeurfloat);
request->send(200, "text/plain", message);
});
// Démarrer le serveur
server.begin();
}
void loop() {
Serial.print("Valeur float :");
Serial.println(Valeurfloat);
Serial.println("------------------");
delay(1000);
}
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>
<h4>Valeur de la variable "Valeurfloat" sur ESP32 :</h4>
<table border="1"><tr><td width="100px"><center><h2><span id="Valeurfloatinfo"></span></h2></center></td></tr></table>
<br>
</div>
<div class="">
<h3 class="">Saisir une valeur Float :</h3>
<input type="number" id="Valeurfloat" step="0.10" />
<button id="AppValeurfloat" class="">Appliquer</button>
</div>
</body>
</html>
Code Javascript :
( script.js )
////////Read/Write Valeurfloat
function getDataValeurfloat() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Valeurfloat").value = this.responseText;
}
};
xhttp.open("GET", "read_Valeurfloat", true);
xhttp.send();
};
getDataValeurfloat();
function getDataValeurfloatinfo() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Valeurfloatinfo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "read_Valeurfloatinfo", true);
xhttp.send();
};
getDataValeurfloatinfo();
$(document).ready(function(){
$("#AppValeurfloat").click(function(){
var valeur = $("#Valeurfloat").val();
$.post("write_Valeurfloat",{
Valeurfloat: valeur
});
document.getElementById("Valeurfloatinfo").textContent = "----";
getDataValeurfloatinfo();
});
});
function functioninterval() {
getDataValeurfloatinfo();
}
setInterval( functioninterval, 500 );
