Bonjour.
Pour mon thermostat, j'essaie de créer une page web (ça, ça va) dans laquelle j'entre des heures et des températures. Je sais faire, en tous cas la page correspond à mon besoin.
La difficulté c'est de récupérer ces infos sous forme de variables. Ensuite, je stockerai tout ça dans l'EEPROM... mais ça c'est plus tard.
Il faut être honnête, je planche sur ce truc depuis des jours et je n'y arrive pas.
Il y a quelque chose dans le fonctionnement du JS qui m'échappe complètement, quelqu'un saurait-il me sortir de ce bourbier?
//d'après un code de mishmash
// Bibliothèques
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Codes wifi
const char* ssid = "Livebox-06B0";
const char* password = "snip";
String he1 = "0"; //slider par defaut
const char* PARAM_INPUT = "value";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ACCENTRA</title>
<style>
html {}
h1 {
font-size: 2.3rem;
}
h2 {
font.size: 1.8rem;
}
body {
font-family: Arial;
}
.main {
max-width: 360px;
margin: 0 auto;
padding-bottom: 25px;
text-align: left;
}
.boxstyle {
margin: 5px;
width: 70px;
height: 20px;
background: #CEECF5
}
.degres {
width: 35px;
}
</style>
</head>
<body>
<div class="main">
<h1>Accentra, bonjour.</h1>
<table>
<thead>
<h2>Description des profils</h2>
</thead>
<tbody>
<tr>
<td>
<b>ECONOMIQUE</b>
<div>
<small>Plage horaire | Degrés</small>
<input type="time" id="he1" name="he1" value="%HE1%" class="boxstyle" />
<input type="number" id="D1" name="D1 " value="%TE1%" class="boxstyle degres" min="8" max="25" />
</div>
<div>
<input type="time" id="he2" name="he2" value="%HE2%" class="boxstyle" />
<input type="number" id="D1" name="D1 " value="%DEGRE1%" class="boxstyle degres" min="8" max="25" />
</div>
</td>
<td>
<b>CONFORT</b>
<div>
<small>Plage horaire | Degrés</small>
<input type="time" id="hc1" name="hc1" value="%HC1%" class="boxstyle" />
<input type="number" id="D1" name="D1 " value="%TC1%" class="boxstyle degres" min="8" max="25" />
</div>
<div>
<input type="time" id="hc2" name="hc2" value="%HC2%" class="boxstyle" />
<input type="number" id="D1" name="D1 " value="%TC2%" class="boxstyle degres" min="8" max="25" />
</div>
</td>
</tr>
</tbody>
</table>
<script>
function temperature(element) {
var he1 = document.getElementById("he1").value;
document.getElementById("he1").innerHTML = he1;
console.log(he1);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value=" + he1, true);
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
Serial.println(var);
if (var == "he1"){
return he1;
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
//ledcWrite(ledChannel, he1.toInt()); on garde ça, ça peut serivr, non?
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
he1 = inputMessage;
Serial.println(he1);
}
else {
inputMessage = "No message sent";
}
Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
