Go Down

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

Tommy56

Darum ging es doch überhaupt nicht. Du wolltest issen, welche Möglichkeit es noch gibt und da habe ich Dir eine aufgezeigt.
Es hat keiner behauptet, dass man die verwenden sollte/müsste. Also ist die Diskussion um ein "neues Datenformat" eigentlich fruchtlos.

Ich habe nur andere mögliche Formate ins Spiel gebracht, da Dein Beitrag so klang, als gäbe es nur JSON, was ja nicht der Fall ist.

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

Derfips

#16
Sep 24, 2020, 07:11 am Last Edit: Sep 24, 2020, 07:12 am by Derfips
Ist das noch der aktuelle Stand oder geht es moderner/besser/hübscher ?

Du möchtest es hübscher?

siehe: #1


mit C Strings
Code: [Select]

void espLed() {
  if (server.hasArg("led")) {
    digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));        // LED umschalten
    Serial.println(digitalRead(LED_BUILTIN) ? "LED ist aus" : "LED ist an");
  }
  char temp[760];
  snprintf(temp, sizeof temp, R"(<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        background-color: #87cefa;
        display: flex;
        flex-flow: column;
        align-items: center;
      }
      input {
        height: 2.5em;
        width: 8em;
        font-size: 1em;
      }
      [value$=n] {
        background-color: #adff2f;
      }
      [value$=s] {
        background-color: red;
      }
    </style>
    <title>Onboard Led</title>
  </head>
  <body>
    <h2>Onboard Led schalten</h2>
    <h3>ESP8266</h3>
    <p>LED ist %s<p>
    <form action="/led">
      <input name="led" type="submit" value="LED %s">
    </form>
  </body>
</html>)", digitalRead(LED_BUILTIN) ? "aus" : "an", digitalRead(LED_BUILTIN) ? "Ein" : "Aus");
  server.send(200, "text/html", temp);
}



mit Arduino String
Code: [Select]

void espLed() {
  if (server.hasArg("led")) {
    digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));        // LED umschalten
    Serial.println(digitalRead(LED_BUILTIN) ? "LED ist aus" : "LED ist an");
    server.send(204);
  }
  String temp = R"(
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        background-color: #87cefa;
        display: flex;
        flex-flow: column;
        align-items: center;
      }
      input {
        height: 2.5em;
        width: 8em;
        font-size: 1em;
      }
    </style>
    <title>Onboard Led</title>
  </head>
  <body>
    <h2>Onboard Led schalten</h2>
    <h3>ESP8266</h3>
    <form action="/led" method="POST">
      <input name="led" type="submit" value="ON / OFF">
    </form>
  </body>
</html>)";
  server.send(200, "text/html", temp);
}



oder auch mit C++ string Objekten
Code: [Select]

#include <string>

void espLed() {
  if (server.args()) {
    digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));        // LED umschalten
    Serial.println(digitalRead(LED_BUILTIN) ? "LED ist aus" : "LED ist an");
    server.send(304, "message/http");
  }
  string temp = R"(
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        background-color: #87cefa;
        display: flex;
        flex-flow: column;
        align-items: center;
      }
      button {
        height: 2.5em;
        width: 8em;
        font-size: 1em;
      }
    </style>
    <title>Onboard Led</title>
  </head>
  <body>
    <h2>Onboard Led schalten</h2>
    <h3>ESP8266</h3>
    <button id="b">
      Press
    </button>
    <script>
      b.addEventListener('click', () => { fetch('/led?p');});
    </script>
  </body>
</html>)";
  server.send(200, "text/html", temp.c_str());
}



Schau dir den Quelltext im Browser an, er ist genau so formatiert wie hier zu sehen!



Gruß Fips
Meine Esp8266 & ESP32 Projekte => https://fipsok.de

progger

Wow Leute, das ist mal viel Input für einen Anfänger  :)
Aber ich habe es ja so gewollt...  :D

Danke an alle!
Ich werde mich da mal durchkämpfen...  :smiley-eek:

Aber so ganz "falsch" wäre es ja mit einer string-Orgie dann doch nicht (so wie ich das überblicke mit meinem Anfängerwissen)  8)

agmue

Ich werde mich da mal durchkämpfen...  :smiley-eek:
Mir haben die Seiten von Fips geholfen, die ersten Hürden zu überqueren. Anleitung: Einführung zu fipsok.de

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

progger

Ich nochmal  :smiley-confuse:

Nach weiteren Recherchen fand ich noch folgende Schreibeweisen, um die Seite im Sketch zu coden:

1) const char index_html[] PROGMEM = R"rawliteral(

2) const char index_html[500] PROGMEM = R"rawliteral(

3) client.print

Diese decken sich teilweise mit den schon von euch vorgeschlagenen, aber der Teufel sitzt (für mich noch) im Detail:

- Warum lieber keine PROGMEM?
- Warum wird beim 2. Beispiel die Größe 500 mit vorgegeben? Und wie wurde diese vorher ermittelt? Ist
  es nicht besser, die Größe offen zu lassen?
- Welchen Nachteil hat es, client.print zu verwenden? Das sah für mich recht anfängerfreundlich aus...

Danke für eure Einschätzungen aller Art  :)  Ich möchte aber auch nicht nerven...

noiasca

#20
Sep 25, 2020, 09:33 am Last Edit: Sep 25, 2020, 09:52 am by noiasca
2) const char index_html[500] PROGMEM = R"rawliteral(

kam von niemanden hier, also eher nicht sinnvol hier danach zu fragen. Und nein, ich würde das nicht so machen.


ad
Quote
Welchen Nachteil hat es, client.print zu verwenden? Das sah für mich recht anfängerfreundlich aus...
sehr vereinfacht: jedes client.print wird als separates Packerl auf die Reise geschickt, damit zerstückelst du dir auf TCP/IP Ebene deine Nachricht.

In deinem Ausgangspost ging es aber um String Concatinierungen, nicht um einzelne client.prints.

Viele Client.prints deuten auf falsche Beispiele für den ESP8266.

Daher nimm den ES8266Webserver | HelloServer als Beispiel und bastle dir deine Message in einem Buffer zusammen und übergib das der jeweiligen callback Methode.

Wenn das klappt, und du mal rein statische Texte (CSS, JS,...) hast, dann schau dir noch mal das Post von Fips an. Und noch mal. Und noch mal.

Am Schluss dann das Filesysytem, wie man dorthin Daten hochladet und wie man aus dem FS dann direkt die statischen Dateien schickt.
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.

progger

OK Danke :)

Wegen PROGMEM kam ich deswegen nochmal drauf:
kurze Texte auch als const char. PROGMEM eher nicht.
Es wird halt in vielen Sketches verwendet und das warum "eher nicht" wollte ich noch verstehen...

Und warum mal die Größe mit übergeben wird und mal nicht?

agmue

Wegen PROGMEM kam ich deswegen nochmal drauf:
PROGMEM ist eine gute Möglichkeit, wenn bei AVRs der Speicher knapp wird, aber auch etwas umständlicher. Bei den ESPs fehlte bei mir bislang einfach die Notwendigkeit, PROGMEM einzusetzen. Allerdings verwende ich auch Dateien im Dateisystem, wo dann die langen Texte landen.

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

Derfips

Meine Esp8266 & ESP32 Projekte => https://fipsok.de

agmue

Für's Selbststudium.
Hast Du sowas auch für den ESP32 im Angebot, oder sind ESP8266 und ESP32 dahingehend gleich? Meine Suchmaschine hat mir leider keine zufriedenstellenden Ergebnisse präsentiert.

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

Derfips

Hast Du sowas auch für den ESP32 im Angebot, oder sind ESP8266 und ESP32 dahingehend gleich? Meine Suchmaschine hat mir leider keine zufriedenstellenden Ergebnisse präsentiert.
Tja, der Esp8266 ist gut Dokumentiert(für Arduino  C++) und der Esp32 wird immer den Einsteigern empfohlen!
(Von einschlägigen Medien aber auch hier im Forum.)


Un da liegt der Hase im Pfeffer.



Gruß Fips

Meine Esp8266 & ESP32 Projekte => https://fipsok.de

progger

Danke für eure Unterstützung  :)

Das sind viele hilfreiche Infos !

progger

mit C Strings
Code: [Select]

void espLed() {
  if (server.hasArg("led")) {
    digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));        // LED umschalten
    Serial.println(digitalRead(LED_BUILTIN) ? "LED ist aus" : "LED ist an");
  }
  char temp[760];
 

Diese Zeile
char temp[760];

ist mir noch etwas unklar... Du übergibst doch damit die Größe des chars?
Wie weißt Du vorher, dass es exakt 760 sind?
Wäre
char temp[];
nicht flexibler und der Compiler regelt die Größe?  :smiley-red:

agmue

#28
Sep 26, 2020, 07:43 pm Last Edit: Sep 28, 2020, 11:56 am by agmue
Diese Zeile
char temp[760];

ist mir noch etwas unklar... Du übergibst doch damit die Größe des chars?
Wie weißt Du vorher, dass es exakt 760 sind?
Wäre
char temp[];
nicht flexibler und der Compiler regelt die Größe?  :smiley-red:
Ich würde den Zusammenhang eher so wählen:

Code: [Select]
 char temp[760];
  snprintf(temp, sizeof temp, R"(<!DOCTYPE html>
<html lang="de">
...
</html>)", digitalRead(LED_BUILTIN) ? "an" : "aus", digitalRead(LED_BUILTIN) ? "Aus" : "Ein");
  server.send(200, "text/html", temp);

Leider ist char so starr, daß man schon vorher wissen muß, wie lang der längste Text werden wird. Da packe ich den Text in einen Editor, der die Zeichen zählt. Das ist wenig komfortabel. (Das war mal ein Grund, warum ich einen C-Kurs geschmissen habe, ich fühlte mich veräppelt!)

Beim String-Objekt kann der Inhalt immer wieder verlängert werden, was dann aber auch genau zu den schon erwähnten Problemen, vermutlich Fragmentierung des Speichers, führen kann.

Ich finde das nicht so prickelnd, darf ich Dich zu Dateien überreden?

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

progger

Danke nochmals :)

Das mit dem Editor die Zeichen zählen lassen für ein CHAR ist in der Tat sehr ungelenk  :o

Ich werde mich jetzt im Herbst mal daran halten: ES8266Webserver | HelloServer als Beispiel
und da was draus basteln - und im Winter, wenn es läuft, dann auf das LittleFS umschwenken...  :smiley-mr-green:

Die Werte werde ich erstmal im EEPROM ablegen und versuchen, dass ich da einen automatischen Versatz der Adresse hinbekomme, um das ganze etwas zu schonen, da gerade am Anfang ja viel getestet und geschrieben/gelesen wird...

Wenn es da noch Fragen gibt, melde ich mich gern  :D

Go Up