Servidor Web no ESP32: Como atualizar e exibir os valores dos sensores do servidor automaticamente?
Eu tenho um servidor web em um ESP32 e uma página inicial nesse servidor. Gostaria de atualizar os valores do sensor na página inicial a cada x segundos automaticamente (sem a entrada do usuário). Não consigo acessar o sistema de arquivos.
O sensor está diretamente conectado ao ESP32. Os valores do sensor estão no meu programa C, armazenados em variáveis e atualizados regularmente. Variáveis são globais para facilitar o uso.
Pensei em Ajax (não tenho experiência), mas todos os exemplos e métodos que posso encontrar usam um arquivo para carregar dados (na parte 'url' de XMLHttpRequest (). Open (... url ....) ) Não tenho arquivo, mas apenas cadeias nas quais meu código HTML e Javascript é gerado e enviado ao cliente.
Não tenho idéia de como atualizar meus valores e espero alguma ajuda.
Pensei em tentar algo como os exemplos do w3schools, mas não sei como obter os valores lá:
Exemplo de outra página (não uso esse código - não posso usar arquivos!)
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Aqui está um código do meu programa C no ESP:
String HTML:
String html_document() {
String sHTML;
sHTML = "<!doctype html>";
sHTML +="<html>";
sHTML +="<html lang=\"de\">";
/***************** head ****************/
sHTML +="<head>";
/****** avoid favicon requests ** ** <link rel=\"shortcut icon\" href=\"data:image/x-icon;,\" type=\"image/x-icon\"> **/
sHTML +="<link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\"> ";
sHTML +="<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";
//Anpassung an Viewport für unterschiedliche Devices
/***************** title ***************/
sHTML +="<title>LetsgoING IoT</title>";
sHTML +="<style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
sHTML +="<style>h1{ color: green;}</style>";
sHTML +="<style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
sHTML +="<style>h2{ color: blue;}</style>";
sHTML +="<style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
sHTML +="<style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style>";
sHTML +="<style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
sHTML +="<style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
sHTML +="</head>";
/***************** body ****************/
sHTML+= "<body>"; //onload=\"window.setInterval(updateDiv, 15000);\"
sHTML+= "<h1>LetsgoING</h1>";
sHTML+= "<h2>Internet der Dinge</h2>";
sHTML+= "<p1><a style=\"width:38%;\"></a><a style=\"width:20%;color: green\">LED ein</a> <a style=\"width:15%;\" href=\"LEDON\"><button> EIN </button></a> </a><a style=\"width:27%;\"> </a></p1>";
sHTML+= "<p><a style=\"width:38%;\"></a><a style=\"width:20%;color: red\" >LED aus</a> <a style=\"width:15%\"; href=\"LEDOFF\"><button>AUS</button></a><a style=\"width:27%;\"> </a></p>";
sHTML+= "<h5>RGB-LED PWM-Werte</h5>";
sHTML+= "<form><p2>";
sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: red\"> Rot</a> <a style=\"width:15%;\" ><input name=\"rot\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\" ></a><a style=\"width:27%;\"> </a>";
sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: green\">Grün</a><a style=\"width:15%;\" ><input name=\"gruen\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">Blau</a> <a style=\"width:15%;\" ><input name=\"blau\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
sHTML+= "</p2>";
sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\"> </a> <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
sHTML+= "</form>";
sHTML+= "<h5>analoger Schwellwert</h5>";
sHTML+= "<form><p2><a style=\"width:38%;\"></a> <a style=\"width:20%;\"> <input name=\"schwell\" type=\"number\" min=\"0\" max=\"1024\" step=\"10\" value=\"300\"> </a> <a style=\"width:15%;\"><input type=\"submit\" value=\"senden\"></a><a style=\"width:27%;\"> </a></p2>";
//sHTML+= "<p><a style=\"width:28%;\"></a> <a style=\"width:30%;\"> </a> <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
sHTML+= "</form>";
sHTML+= "<h5>PWM-Wert</h5>";
sHTML+= "<form><p2><a style=\"width:38%;\"></a> <a style=\"width:20%;\"> <input name=\"pwm\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"0\"> </a> <a style=\"width:15%;\"><input type=\"submit\" value=\"senden\"></a><a style=\"width:27%;\"> </a></p2>";
sHTML+= "</form>";
sHTML+= "<h5>Messwerte</h5>";
sHTML+="<p><a style=\"width:38%;\"></a> <p3 id=\"an1\"; style=\"width:20%;\" href=\"anlg1\">#-Wert-#</p3><a style=\"width:22%;\">Analoger Pin 36 </a><a style=\"width:20%;\"></a></p>";
sHTML+="<p><a style=\"width:38%;\"></a> <p3 id=\"an2\"; style=\"width:20%;\">#-Wert-#</p3><a style=\"width:22%;\">Analoger Pin 39 </a><a style=\"width:20%;\"></a></p>";
sHTML+="<p><a style=\"width:38%;\"></a> <p3 id=\"dig\"; style=\"width:20%;\">#-Wert-#</p3><a style=\"width:22%;\">Digitaler Pin 5 </a><a style=\"width:20%;\"></a></p>";
sHTML+= "</body>";
sHTML+= "</html>";
return sHTML;
}
Ciclo:
void loop() {
if (millis() - startTime >= 2000) {
startTime = millis();
/* Check if a client has connected */
client = server.available();
if (!client){
return;
}
/*Wait for the client to send data */
Serial.println("neuer Client verbunden------------------------------");
/*Count requests: */
request_counter ++;
unsigned long clTimeout = millis()+250;
while(!client.available() && (millis()<clTimeout) ) {
delay(1);
}
/*** publish Homepage ***/
client.print(html_document());
/* Read the first line of the clients request string "sHTML" until carriage return \r */
sHTMLRequest = client.readStringUntil('\r');
#ifdef DEBUGMODE
Serial.println("Antwort: ");
Serial.println(sHTMLRequest);
#endif
client.flush();
/* stop client, if request is empty */
if(sHTMLRequest=="") {
Serial.println("Leere Anfrage! - client gestoppt");
client.stop();
return;
}
#ifdef DEBUGMODE
Serial.println("Antwort2: ");
Serial.println(sHTMLRequest);
Serial.println ("---------");
Serial.print("DEBUG: Remote IP - Address : ");
for (int i = 0; i < 3; i++) {
Serial.print( client.remoteIP()[i]);
Serial.print(".");
}
Serial.println(client.remoteIP()[3]);
Serial.print("Seitenaufrufe: ");
Serial.println(request_counter);
Serial.println ("---------");
#endif
/**** call event handler **********/
eventHandler();
#ifdef DEBUGMODE
Serial.println("Zugewiesene PWM-Werte");
Serial.print("rot: ");
Serial.println(rot);
Serial.print("gruen: ");
Serial.println(gruen);
Serial.print("blau: ");
Serial.println(blau);
#endif
/* write PWM values for colors to channels*/
ledcWrite(1, rot);
ledcWrite(2, gruen);
ledcWrite(3, blau);
#ifdef DEBUGMODE
Serial.println(analog1);
#endif
}
UpdateValues();
}
/**** reads pin values **/
void UpdateValues() {
analog1 = analogRead(pinAnalog1);
analog2 = analogRead(pinAnalog2);
DigiOut = digitalRead(LEDpin);
}
Aqui está a função que atualiza os valores e cria a cadeia JSON:
void UpdateValues() {
analog1 = analogRead(pinAnalog1);
analog2 = analogRead(pinAnalog2);
DigiOut = digitalRead(LEDpin);
String strJson;
strJson = "(200,\"application/json\",\"{\"pin36\": ";
strJson+=analog1;
strJson+=", \"pin39\":";
strJson+= analog2;
strJson+=", \"pin5\": ";
strJson+=DigiOut;
strJson+="}\")";
server.print(strJson);
}