Hallo, ich nutze dieses Tutorial um einen Webserver auf meinem ESP32 via Arduino IDE zu betreiben. Nun möchte ich, dass unter bestimmten Bedingungen neuer Inhalt bzw. neue Buttons erscheinen/geupdatet werden.
Beispiel: Sobald der Boot Button des ESP32 gedrückt wird, soll eine Funktion als loop/while true Schleife ausgeführt werden, welcher jede Sekunde unter der Überschrift "ESP32 - Web Server" einen neuen drückbaren Button erscheinen lässt.
Gibt es hier einen eleganteren Weg als jedesmal ein refresh in zu packen?
Die Initiative muss immer vom Client, also vom Browser ausgehen.
Refresh Header, oder Meta Tags magst du ja nicht....
Also, um mal ein paar Worte zu nennen:
JavaScript
Jquery
Ajax
Websockets
Das wird wohl der Pool sein, aus dem du dich bedienen werden darfst.
Ich dachte tatsächlcih schon an JavaScript oder Ajax. Nur habe ich keine kompkates Tutorials gefunden wie ich beispielsweise bestimmte Variablen aus meinem .ino Code in ein JavaScript / Ajax bekomme um dies anschließend zu visualisieren.
Json
fetch.api
Javascript
Hierzu mal ein Beispiel aus meiner Sammlung
Esp =>
void setup() {
server.on("/admin/renew", handlerenew);
}
void handlerenew() {
String temp = "[\"" + runtime() + "\",\"" + analogRead(A0) + "\",\"" + WiFi.RSSI() + "\"]";
server.send(200, "application/json", temp); // Json als Array
}
Client =>
<script>
(function () {
function renew() {
fetch('admin/renew').then(function (response) {
return response.json();
}).then(function (array) {
document.querySelector('#runtime').innerHTML = array[0];
document.querySelector('#LDR').innerHTML = array[1];
document.querySelector('#WIFI').innerHTML = array[2];
});
}
document.addEventListener('DOMContentLoaded', renew);
setInterval(renew, 1000);
}());
</script>
<html>
Runtime ESP = <span id='runtime'></span>
WiFi RSSI: = <span id='WIFI'></span> dBm
LDR: = <span id='LDR'></span>
</html>
Gruß Fips
Tschuldigung Tommy
Habs nachgeholt.
@Fips: Du bist schon so lange dabei. Du solltest Codetags schon kennengelernt haben.
Gruß Tommy
Ich habe versucht den Code von Derfips mal zu implementieren, da dieser kurz und knackig erschien. Hier kurz mein gesamtes Script:
#include <WiFiClient.h>
#include "ESP32WebServer.h"
#include <WiFi.h>
#include <ESPmDNS.h>
/*fill your ssid and password here */
const char* ssid = "WLAN";
const char* password = "PASSWD";
ESP32WebServer server(80);
/* this callback will be invoked when user request "/" */
void handlerenew() {
String temp = String("[\"") + analogRead(A0) + String("\",\"") + WiFi.RSSI() + String("\"]");
server.send(200, "application/json", temp); // Json als Array
}
void handleNotFound(){
String message = "File Not Found\n\n";
server.send(404, "text/plain", message);
}
void setup(void){
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("");
/* Wait for connection */
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
/* we use mDNS here http://esp32.local */
if (MDNS.begin("esp32")) {
Serial.println("MDNS responder started");
}
/* register callback function when user request root "/" */
server.on("/", handlerenew);
server.onNotFound(handleNotFound);
/* start web server */
server.begin();
Serial.println("HTTP server started");
}
void loop(void){
server.handleClient();
}
wenn ich nun den Webserver meines ESP32 aufrufe bekomme ich folgendes
Soweit auch klar, ich habe keinen Sensor an A0, daher der Wert 0 (hatte da eher ein rauschen erwartet) und WiFi.RSSI ist selbsterklärend.
Nun habe ich noch eine index.html:
<script>
(function () {
function renew() {
fetch('admin/renew').then(function (response) {
return response.json();
}).then(function (array) {
document.querySelector('#runtime').innerHTML = array[0];
document.querySelector('#LDR').innerHTML = array[1];
document.querySelector('#WIFI').innerHTML = array[2];
});
}
document.addEventListener('DOMContentLoaded', renew);
setInterval(renew, 1000);
}());
</script>
<html>
WiFi RSSI: = <span id='WIFI'></span> dBm
LDR: = <span id='LDR'></span>
</html>
Die Frage ist, wie kann der ESP32 auf diese zugreifen, sodass diese als Startseite bzw. index.html angezeigt wird?
Ein Zugriff auf http://esp32.local/index.html gibt mir logischerweise 'File Not Found' zurück. Ich meine beim ESP8266 mal was von einem Sketch Data Upload Plugin gelesen zu haben um SPIFFS zu nutzen, aber sowas scheint es wohl nicht für den ESP32 zu geben? Gibt es sonst noch eine andere Möglichkeit z.B. index.html direkt in den .ino Code "einzuarbeiten"?
SPIFFS gibt es beim ESP32 auch.
Eine SPIFFS-Verwaltung für einen Webserver zum Einbinden habe ich hier für den ESP8266 veröffentlicht. Die sollte auch mit dem ESP32 laufen (ungetestet).
Gruß Tommy
Du hast drei Möglichkeiten.
- Seite in den Sketch programmieren
Einfacher-Webserver-Nodemcu-Esp8266-Onboard-Led-Pin-schalten
- In den Spiffs laden
SPIFFS-DOWNLOAD-UPLOAD-DELETE-Esp8266-NodeMCU
- Seite auf Webspace laden
Gibt es auch Kostenlos
Gruß Fips
Ich suche eine Variante, bei welcher ich die index.html direkt nutzen kann (bspw. durch SPIFFS). Also keinen riesigen String im Sketch erzeugen, welcher anschließend aufgerufen wird, sondern html/css/javascript "normal" schreiben und anschließend über den Sketch darauf zugreifen und aufrufen.
Hast Du Dir die Variante von #7 mal angeschaut? Die macht genau das. Das Einzige was als HTML-Quelle im Code steht, ist die SPIFFS-Verwaltung - weil die den SPIFFS-Inhalt ja erst hoch lädt.
Gruß Tommy