Forum: Mikrocontroller und Digitale Elektronik Hilfe bei HTML-Code


von Alexander S. (knut740)


Lesenswert?

Hallo
kann mir vielleicht jemand helfen, den nachfolgenden HTML-Code so zu 
korrigieren, daß er vom Compiler/Interpreter akzeptiert und im Programm 
anschließend ausgefüht wird? Ich verstehe nichts von HTML und es ist für 
mich ein Randproblem, für das sich keine Einarbeitung lohnt. Ich denke, 
für einen Experten ist es eine Kleinigkeit.
Also:
Es soll ein ESP32 so programmiert werden, daß er per WLAN mit einem 
anderen Gerät (z.B. Händie) kommunizieren kann. Er dient als Server, der 
dem Client einen HTML-Code für eine Webseite schickt und darüber 
ferngesteuert werden kann.
Das Programm (das ich natürlich von anderen übernommen habe) wird über 
eine Arduino-IDE (1.8.13) editiert und hochgeladen. Das funktioniert 
generell recht gut, aber im vorliegenden Programm bleibt der Compiler an 
der Stelle hängen, wo es um den HTML-Code geht:
1
String html ="<!DOCTYPE html> ";
2
<html> \
3
<body> \
4
<center><h1>ESP32-DevKitC LED ON/OFF</h1></center> \
5
<center><h2>Web Server Example with 2 LEDs</h2></center> \
6
<form> \
7
<button name="LED0" button style="color:green" value="ON"
8
type="submit">LED0 ON<button> ;
9
<button name="LED0" button style="color:red" value="OFF"
10
type="submit">LED0 OFF<button><br><br> ;
11
<button name="LED1" button style="color:green" value="ON"
12
type="submit">LED1 ON<button>  ;
13
<button name=">LED1" button style="color:red" value="OFF"
14
type= "submit">LED1 OFF<button> ;
15
</form> ;
16
</body> ;
17
</html> ;
18
;                                     // wozu???

Der Compiler maulte, daß erratische / und \ vorhanden seien, außerdem 
nahm er an zahlreichen " Anstoß. Ich habe die / und \ entfernt und " 
durch ; ersetzt, das wird jetzt akzeptiert. Aber über die erste Zeile 
kommt man nicht hinweg:
Setze ich hinter die erste Zeile mit String... ein ", dann bekomme ich 
folgende Fehlermeldung
1
exit status 1
2
no match for 'operator<' (operand types are 'const char [17]' and 'String')
Lasse ich alles ( ", ; / ) weg, dann kommt
1
exit status 1
2
missing terminating " character
Kann man den Code so ändern, daß er vom Compiler akzeptiert wird und 
funktioniert?

Vielen Dank schon mal

von Irgend W. (Firma: egal) (irgendwer)


Lesenswert?

Alexander S. schrieb:
> Compiler/Interpreter akzeptiert und im Programm anschließend ausgefüht wird?

Das Programm dass das alles macht macht nennt sich im allgemeine 
Web-Browser.
Und für ide den meisten von denen kann man das html-gesülze auch einfach 
in eine Datei kopieren, diese mit der Endung .htm versehen und lokal 
aufrufen.
viele von diesen ominösen Web-Browsern haben sogar zusatzfunktioen wo 
sie dir anzeigen was ihnen an deiner Datei eventuell nicht gefällt.

Und wenn du glaubst das alles stimmt, einfach mal hier Validieren ob es 
auch wirklich so ist.
- https://validator.w3.org/#validate_by_upload

von 123 (Gast)


Lesenswert?

Ich hätte es so gemacht...
String html ="<!DOCTYPE html> ";
html +="<html>";
html +="<body>";
.
.
.
html +="<button name='LED0' button style='color:green' value='ON'";

von DPA (Gast)


Lesenswert?

Ich würde hier ein raw string literal nehmen. Dann kann man sich das 
ganze newline gehample und escaping praktisch sparen.

von Alexander S. (knut740)


Lesenswert?

123 schrieb:
> Ich hätte es so gemacht...
> String html ="<!DOCTYPE html> ";
> html +="<html>";
> html +="<body>";
> .
> .
> .
> html +="<button name='LED0' button style='color:green' value='ON'";

Müßte man noch irgendwelche Definitionen voranstellen?
Der erste Versuch liefert eine Fehlermeldung:
1
exit status 1
2
'html' does not name a type
VG
Alexander

von Ben B. (Firma: Funkenflug Industries) (stromkraft)


Lesenswert?

Setz die '' außen für den Interpreter und die "" innen für das HTML.
Die '' im HTML sind schlechter Stil.

Aber Achtung, die '' führen bei PHP z.B. dazu, daß der String nicht mehr 
nach Variablen geparsed wird, da werden dann die Variablen ausgegeben 
und nicht durch ihren Inhalt ersetzt.

von Εrnst B. (ernst)


Lesenswert?

Alexander S. schrieb:
> Es soll ein ESP32 so programmiert werden

Lad die HTML+CSS+JS+Bilder einfach in das Dateisystem des ESP. Geht auch 
automatisiert im Build-Prozess.
1
server.serveStatic("/", SPIFFS, "/htdocs/").setDefaultFile("index.html");
und fertig.

Und nein, es muss keine zusätzliche SD-Karte o.Ä. angeschlossen werden.

https://github.com/me-no-dev/ESPAsyncWebServer#serving-static-files

Und ja, damit kannst du auch dynamisch Variablen im HTML-Code einsetzen, 
z.B. deine Buttons je nach aktuellem Status als "ON" und "OFF" benennen.

von quotendepp (Gast)


Lesenswert?

Alexander S. schrieb:
> Kann man den Code so ändern, daß er vom Compiler akzeptiert wird und
> funktioniert?

ja

Alexander S. schrieb:
> Das Programm (das ich natürlich von anderen übernommen habe) wird über
> eine Arduino-IDE (1.8.13) editiert

code einfach zu übernehmen ohne zu lesen und nachzuvollziehen ist keine 
gute idee

Alexander S. schrieb:
> nachfolgenden HTML-Code so zu korrigieren, daß er vom
> Compiler/Interpreter

dein problem hat in ersternlinie genau gar nix mit html zu tun sondern 
mit c++

du versuchst, einen ungültigen code in einen string zu pressen. da 
solltest du anfangen - pack den ganzen block in einen kommentar und bau 
den ganzen string in einzelnen teilen zusammen.

und besorg dir lesestoff zum thema  "arduino c++ strings"

von Stefan F. (Gast)


Lesenswert?

Alexander S. schrieb:
> kann mir vielleicht jemand helfen, den nachfolgenden HTML-Code so zu
> korrigieren, daß er vom Compiler/Interpreter akzeptiert und im Programm
> anschließend ausgefüht wird?

HTML ist kein ausführbarer Programmcode, sondern eine 
Beschreibungssprache zur Darstellung von Text und damit verwandten 
Medien. Du brauchst einen Web Browser, um ihn darzustellen.

Ich gehe davon aus, dass du den HTML Quelltext als .html Datei vorliegen 
hast und in einem Web Browser darstellen kannst. Um diesen HTML Text nun 
in einen C++ Quelltext einzufügen, empfehle ich folgende Vorgehensweise:

Öffne die C++ Quelltext Datei in einer "richtigen" Entwicklungsumgebung 
(Netbeans, Eclipe, IntelliJ, Qt Creator, Visual Studio, VS Code, ... 
bloß nicht Arduino).

Dann schreibst du:
1
String html ="";

Dann öffnest du die HTML Datei in einem Texteditor (gerne auch in der 
Entwicklungsumgebung), kopierst alles mit Strg-C in die Zwischenablage 
und fügst es dann zwischen die beiden Anführungszeichen deiner C++ Datei 
ein. Die Entwicklungsumgebung wird den ganzen HTML Quelltext so 
umformatieren, dass der C++ Quelltext gültig bleibt.

Insbesondere wird er " durch \" ersetzen und Zeilenumbrüche durch \n. 
Das nennt man Escape-Sequenzen, unter diesem Stichwort kannst du dich 
weiter informieren.

von Noch ein Kommentar (Gast)


Lesenswert?

Vielleicht ist der entscheidende Hinweis:

Für den Server ist der HTML-Code gar kein Code. Für den Server ist der 
HTML-Code einfach nur ein ganz normales String Literal.

Genau so, wie das erste C-Programm
1
printf("Hello World")

schreibst du
1
send_wlan("<html><body><h1>ESP32-DevKitC LED ON/OFF</h1></body></html>")

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.