Récupérer la valeur d’un input « time » d’une page web sur l’esp32
Description :
Projet permettant de récupérer et utiliser la valeur d’un champ input de type “time” depuis une page Web hébergée sur un ESP32.
L’utilisateur saisit une heure dans le navigateur, et l’ESP32 reçoit cette information via son serveur Web intégré. Cette valeur peut ensuite être utilisée pour planifier des actions, déclencher des événements à des heures précises ou contrôler des dispositifs connectés automatiquement.
Cette configuration est idéale pour des projets IoT interactifs ou domotiques, comme l’allumage/arrêt d’appareils, la gestion d’alarme, ou tout système nécessitant une programmation horaire simple et flexible depuis une interface web intuitive.
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 Valeurheure;
int Valeurminute;
String Valeurtime = "12:00";
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_Valeurheure", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(Valeurheure);
request->send(200, "text/plain", message);
});
server.on("/read_Valeurminute", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(Valeurminute);
request->send(200, "text/plain", message);
});
server.on("/read_Valeurtime", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(Valeurtime);
request->send(200, "text/plain", message);
});
server.on("/read_Valeur", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(Valeurtime);
request->send(200, "text/plain", message);
});
server.on("/write_Valeurtime", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("Valeurtime", true)) {
String message;
message = request->getParam("Valeurtime", true)->value();
Valeurtime = message;
Valeurheure = Valeurtime.substring(0, 2).toInt();
Valeurminute = Valeurtime.substring(3, 5).toInt();
}
request->send(204);
});
Valeurheure = Valeurtime.substring(0, 2).toInt();
Valeurminute = Valeurtime.substring(3, 5).toInt();
// Démarrer le serveur
server.begin();
}
void loop() {
Serial.print("Valeurheure :");
Serial.println(Valeurheure);
Serial.print("Valeurminute :");
Serial.println(Valeurminute);
Serial.print("Valeurtime :");
Serial.println(Valeurtime);
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>Valeur des variables sur ESP32 :</h2>
<h4>int Valeurheure; : <span id="Valeurheure"></span><br>
int Valeurminute; : <span id="Valeurminute"></span><br>
String Valeurtime; <span id="Valeurtime"></span></h4>
<br>
Saisir une heure :
<input type="time" id="Valeur" name="appt" min="00:00" max="23:59" required />
<button id="AppValeur" class="">Appliquer</button>
</div>
</body>
</html>
Code Javascript :
( script.js )
$(document).ready(function(){
$("#AppValeur").click(function(){
var valeur = $("#Valeur").val();
$.post("write_Valeurtime",{
Valeurtime: valeur
});
});
});
function getDataValeur() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Valeur").value = this.responseText;
}
};
xhttp.open("GET", "read_Valeur", true);
xhttp.send();
};
getDataValeur();
function getDataValeurheure() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Valeurheure").innerHTML = this.responseText;
}
};
xhttp.open("GET", "read_Valeurheure", true);
xhttp.send();
};
function getDataValeurminute() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Valeurminute").innerHTML = this.responseText;
}
};
xhttp.open("GET", "read_Valeurminute", true);
xhttp.send();
};
function getDataValeurtime() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Valeurtime").innerHTML = this.responseText;
}
};
xhttp.open("GET", "read_Valeurtime", true);
xhttp.send();
};
getDataValeurtime();
getDataValeurheure();
getDataValeurminute();
function functioninterval() {
getDataValeurheure();
getDataValeurminute();
getDataValeurtime();
}
setInterval( functioninterval, 500 );
