Go Down

Topic: ESP8266 Webserver Seite OHNE String-Orgie? (Read 628 times) previous topic - next topic

progger

Hallo zusammen, ich bastel gerade ganz frisch (ca. 4 Wochen von Null an) an einer Solarsteuerung auf einem Sonoff DIY 4CH SV
mit kleinem WebIf zum Werte ändern.

Ich weiß (?), dass man 3 Möglichkeiten hat, die benötigte HTML-Struktur für die Oberfläche zu speichern:
1) Im Sketch
2) Im SPIFFs
3) Im Web (Cloud)

Ich möchte meine 2 Seiten mit
1) 4 Checkboxen und 6 Input type=number Feldern und einer
2) Temp-Anzeige-Seite mit 4 Temps

im Sketch einbinden (erstmal!) ;)

Gelesen habe ich, dass man generell auf strings verzichten soll,
da diese sehr Speicherintensiv sind -
finde aber in den Beispielen immer regelrechte "string-Orgien", um die Seiten darzustellen (string webpage += ).

Ist das noch der aktuelle Stand oder geht es moderner/besser/hübscher ?
Alternativ const char mit PROGMEM ?

Danke für eure Meinungen :)

Tommy56

Du kannst Dir auch mal RAW-Stringliterale anschauen.

Gruß Tommy
"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)

agmue

2) Im SPIFFs
Danke für eure Meinungen :)
Meine Meinung, die ich auch so umgesetzt habe: Dateien im ESP32-SIFFS (bei ESP8266 besser LittleFS), kurze Texte auch als const char. PROGMEM eher nicht.

Ich kenne das von Apache-Servern, ist also eher Gewohnheit bei mir als klug durchdachte Strategie ::)

Die Vorstellungskraft ist wichtiger als Wissen, denn Wissen ist begrenzt. (Albert Einstein)

Rintin

#3
Sep 23, 2020, 04:18 pm Last Edit: Sep 23, 2020, 04:19 pm by Rintin
Du kannst versuchen HTML, CSS, Js, ... als statische Dateien ins SPIFFS zu legen und dann per Javascript mit einem AJAX-request (/Fetch-API) die variablen Daten vom ESP nachzuladen. Der ESP müsste dann eine REST-Schnittstelle die JSON zurückgibt zur Verfügung stellen.

Tommy56

Es gibt auch noch andere Varianten, als AJAX, z.B. die Fetch-API. Auch JSON/REST kann sein, muss es aber nicht.

Gruß Tommy
"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)

noiasca

#5
Sep 23, 2020, 04:27 pm Last Edit: Sep 23, 2020, 04:29 pm by noiasca
Quote
Gelesen habe ich, dass man generell auf strings verzichten soll,
da diese sehr Speicherintensiv sind -
finde aber in den Beispielen immer regelrechte "string-Orgien", um die Seiten darzustellen (string webpage += ).
am ESP ist das nicht so streng, und wenn die Größe des String entweder mit reserve vordefiniert ist oder eh nur eine Lokale Variable (besser Objekt) ist, dann ist das gar nicht mehr so böse.

Außerdem kannst du String mit dem F Makro leicht kombinieren.
Weiters braucht es auch nicht für jede Zeile ein eigenes webpage +=  sondern das kannst du auch über mehrere Zeile gehen lassen.

Beispiel:

Code: [Select]

{
 message += F("<h2>Homepage</h2>\n" // here you write your html code for your homepage. Let's give some examples...
              "<p>This is an example for a webserver on your ESP8266.<p>\n"
              "<p>Values are getting updated with AJAX/JSON. "
              "I'm still using old style XMLHttpRequest instead of fetch-API. It's up to "
              "the reader to update - but old style works fine for me ;-P</p>\n");

 message += F("<h2>Values (with update)</h2>\n");
 message += F("<p>Internal Voltage measured by ESP: <span id='internalVcc'>"); // example how to show values on the webserver
 message += ESP.getVcc();
 message += F("</span>mV</p>\n");

 message += F("<p>Button 1: <span id='button1'>"); // example how to show values on the webserver
 message += digitalRead(BUTTON1_PIN);
 message += F("</span></p>\n");
}


oder ein ganzes statisches CSS:

Code: [Select]

void handleCss()
{
// output of stylesheet
// this is a straight forward example how to generat a static page from program memory
String message;
message = F("*{font-family:sans-serif}\n"
             "body{margin:10px}\n"
             "h1, h2{color:white;background:" CSS_MAINCOLOR ";text-align:center}\n"
             "h1{font-size:1.2em;margin:1px;padding:5px}\n"
             "h2{font-size:1.0em}\n"
             "h3{font-size:0.9em}\n"
             "a{text-decoration:none;color:dimgray;text-align:center}\n"
             ".small{font-size:0.6em}\n"
             ".value{font-size:1.8em;text-align:center;line-height:50%}\n"
             "footer p, .infodaten p{font-size:0.7em;color:dimgray;background:silver;text-align:center;margin-bottom:5px}\n"
             "nav{background-color:silver;margin:1px;padding:5px;font-size:0.8em}\n"
             "nav a{color:white;padding:10px;text-decoration:none}\n"
             "nav a:hover{text-decoration:underline}\n"
             "nav p{margin:0px;padding:0px}\n"
             ".btn{background-color:#C0C0C0;color:dimgray;text-decoration:none;border-style:solid;border-color:dimgray}\n" //fake style for button
             ".on, .off{margin-top:0;margin-bottom:0.2em;margin-left:3em;font-size:1.4em;background-color:#C0C0C0;border-style:solid;width:5em;height:1.5em;text-decoration:none;text-align:center}\n"
             ".on{border-color:green}\n"
server.send(200, "text/css", message);
}

von hier: https://werner.rothschopf.net/201809_arduino_esp8266_server_client_1.htm

Wenn ich Eine Seite so manuell mit fixen Inhalten und variablen Inhalten zusammestelle, dann verwende ich das F-Makro und unterbreche eben für die variablen Inhalte.



how to react on postings:
- post helped: provide your final sketch, say thank you & give karma.
- post not understood: Ask as long as you understand the post
- post is off topic (or you think it is): Stay to your topic. Ask again.
- else: Ask again.

Rintin

Es gibt auch noch andere Varianten, als AJAX, z.B. die Fetch-API. Auch JSON/REST kann sein, muss es aber nicht.

Gruß Tommy
Was könnte man noch nehmen? Bei SOAP und XML hätte ich Bedenken wegen des Overheads.

Tommy56

Einfache durch ein Trennzeichen getrennte Werte wäre noch eine Möglichkeit. Bei 4 Temperaturen auch einfach realisierbar und auf JS-Seite auch einfach mit split zu verarbeiten.

Gruß Tommy


"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)

noiasca

bei 4 Temperaturen wäre mir der "Overhead" von ein paar JSON Bezeichnern aber wirklich egal, ... da möchte ich nicht auf die leichte Adaptierbarkeit verzichten wollen.
how to react on postings:
- post helped: provide your final sketch, say thank you & give karma.
- post not understood: Ask as long as you understand the post
- post is off topic (or you think it is): Stay to your topic. Ask again.
- else: Ask again.

Tommy56

Er hatte gefragt, was man noch nehmen könnte. Man muss es nicht.
Ich würde auch ein JSON nehmen, bei dem die Keys so heißen, wie die ID der Zielfelder.

Gruß Tommy
"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)

noiasca

#10
Sep 23, 2020, 05:29 pm Last Edit: Sep 23, 2020, 06:07 pm by noiasca
Quote
Ich würde auch ein JSON nehmen, bei dem die Keys so heißen, wie die ID der Zielfelder.
#metoo
how to react on postings:
- post helped: provide your final sketch, say thank you & give karma.
- post not understood: Ask as long as you understand the post
- post is off topic (or you think it is): Stay to your topic. Ask again.
- else: Ask again.

Rintin

#11
Sep 23, 2020, 05:34 pm Last Edit: Sep 23, 2020, 05:37 pm by Rintin
Einfache durch ein Trennzeichen getrennte Werte wäre noch eine Möglichkeit. Bei 4 Temperaturen auch einfach realisierbar und auf JS-Seite auch einfach mit split zu verarbeiten.

Gruß Tommy



Da müsstest du vermutlich auf beiden Seiten (ESP und Browser) die (De-)Serialisierung schreiben und die Erweiterbarkeit halte ich für begrenzt. Wie vermeidest du dabei eine String-orgie auf ESP-Seite?

Tommy56

Wie vermeidest du dabei eine String-orgie auf ESP-Seite?
Mit snprintf.

Gruß Tommy
"Wer den schnellen Erfolg sucht, sollte nicht programmieren, sondern Holz hacken." (Quelle unbekannt)

noiasca

#13
Sep 23, 2020, 05:45 pm Last Edit: Sep 23, 2020, 05:51 pm by noiasca
Quote
Da müsstest du vermutlich
Sorry, worum gehts dir jetzt? Du wolltest eine Alternative. Die wurde dir genannt.

Ein CSV deserialsierst im Browser quasi mit einer Zeile:

var value = this.responseText.split(\",\")")

wo ist das Problem?
Und ein 4 Werte CSV geb ich dir mit zwei print aus... wo ist das Problem an zwei String concats? Andere brauchen noch weniger. Aber wer hat Angst davor?

how to react on postings:
- post helped: provide your final sketch, say thank you & give karma.
- post not understood: Ask as long as you understand the post
- post is off topic (or you think it is): Stay to your topic. Ask again.
- else: Ask again.

Rintin

Sorry, worum gehts dir jetzt?
Ich möchte vermeiden, das man ein Datenformat erfindet, das einem bei der ersten Erweiterung direkt auf die Füße fällt.

Go Up