Récupérer la valeur d’un input « time » d’une page web sur l’esp32
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 );
