Bin nun etwas weitergekommen und aktuell baut der Nano_ESP32 folgende Webseite auf, Basis war der sketch von Werner:
Nach Drücken des Speichern-Buttons kommt eine weitere Seite:
Ganz schön viel Aufwand, aber das Ergebnis kann sich sehen lassen!
2 Fragen hätte ich noch dazu:
Erstens, ich habe vor, diese Einstellungen in mein Wordclock-Projekt zu integrieren, um sie über einen Browser machen zu können. Auf Knopfdruck soll der WLAN-Zugriff ermöglicht werden (ich hole die NTP-Zeit nur alle paar Stunden, dazwischen schaltet ich das ESP-WLAN aus). Dann kann man die Einstellungen vornehmen und an die Uhr übertragen. Anschließend soll das WLAN wieder deaktiviert werden.
Macht man das eher im Access Point Modus oder im Stationsmodus? Wie teile ich dem User die IP-Adresse mit? Oder macht eine feste IP Sinn?
Wie erkenne ich im sketch, dass der User den Browser einfach geschlossen hat und keine Einstellungen ändern will? Zeitbegrenzung?
Momentan wird in der loop() lfd. server.handleClient () aufgerufen, um die Webseite auszuwerten. Wenn ein User die Einstellungen gespeichert hat, müsste ich einfach ein Flag setzen, damit die Webseite dann ggf. nicht mehr ausgewertet wird, da die Einstellungen erledigt sind, oder?
Zweitens, auf der Webseite verwende ich slider, um Werte einzustellen. Der jeweils aktuelle Wert wird rechts daneben durch ein paar Befehle dargestellt. Diese habe ich hier eingebaut:
//--------------------------------------------------------------------------------------------------------------------
void
handleJs ()
//--------------------------------------------------------------------------------------------------------------------
{
// Output: a fetch API / JavaScript
// a function in the JavaScript uses fetch API to request a JSON file from the webserver and updates the values on the page if the object names and ID are the same
String message;
// message += F ( "const url ='json';\n");
// clang-format off
message += R"rawliteral(var slider_T = document.getElementById("Range_T");
var output_T = document.getElementById("Vol_t");
output_T.innerHTML = slider_T.value;
slider_T.oninput = function() {output_T.innerHTML = this.value}
var slider_C = document.getElementById("Range_C");
var output_C = document.getElementById("Vol_c");
output_C.innerHTML = slider_C.value;
slider_C.oninput = function() {output_C.innerHTML = this.value}
var slider_B = document.getElementById("Range_B");
var output_B = document.getElementById("bri");
output_B.innerHTML = slider_B.value;
slider_B.oninput = function() {output_B.innerHTML = this.value})rawliteral";
// clang-format on
server.send ( 200, "text/javascript", message );
}
Die Routine wird über
server.on ( "/j.js", handleJs ); // javscript based on fetch API to update the page
aufgerufen, Was aber nicht funktioniert.
Erst wenn ich die Befehle direkt in die html-Seite mit einbaue, geht es. Was mache ich hier falsch?
