ESP8266 HTML Problem

Hallo Community

Ich möchte gerne die aktuelle Gefahrenkarte für meine Land (Schweiz) auf meinem Webserver (http://wlannesslau.internet-box.ch:8000) darstellen

Die Website stellt folgenden Code zur Verfügung:

<div style="width:180px;height:180px; border: 1px solid black;">
<a href="http://alarm.meteocentrale.ch/index.html" alt="Aktuelle Unwetterwarnungen für die Schweiz" title="Aktuelle Unwetterwarnungen für die Schweiz">
<img src="http://alarm.meteocentrale.ch/images/map/schweiz_preview.png" style="border: 0;" alt="Aktuelle Unwetterwarnungen für die Schweiz" />
</a>
</div>

Ich habe dann diesen Code in meinen Webserver Code hinzugefügt:

  1. Vorher:
void handleRoot() {
  char temp[400];

 snprintf ( temp, 400, 

"<html>\
  <head>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>SSID: %s</<p>\
    <p>Passwort: %s</<p>\
    <p>Temperatur: %s Grad</<p>\
    <p>Feuchtigkeit: %s %</<p>\
    <p>Zeit: %s </<p>\
  </body>\
</html>",

      ssid, password, packetBuffer, packetBuffer2, stringOne 
   );
   server.send ( 200, "text/html", temp );
}
  1. Nachher:
void handleRoot() {
  char temp[400];

 snprintf ( temp, 400, 

"<html>\
  <head>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>SSID: %s</<p>\
    <p>Passwort: %s</<p>\
    <p>Temperatur: %s Grad</<p>\
    <p>Feuchtigkeit: %s %</<p>\
    <p>Zeit: %s </<p>\
    <div style=\"/width:180px;height:180px; border: 1px solid black;\" />\
         <a href=\"/http://alarm.meteocentrale.ch/index.html\" />\ alt=\"/Aktuelle Unwetterwarnungen für die Schweiz\" />\ title=\"/Aktuelle Unwetterwarnungen für die Schweiz\" />\
         <img src=\"/http://alarm.meteocentrale.ch/images/map/schweiz_preview.png\" />\ style=\"/border: 0;\" />\ alt=\"/Aktuelle Unwetterwarnungen für die Schweiz\" />\
         </a>\
    </div>\
  </body>\
</html>",

      ssid, password, packetBuffer, packetBuffer2, stringOne 
   );
   server.send ( 200, "text/html", temp );
}

Aber irgendwie taucht die Grafik nicht auf, sondern es bleibt genau gleich wie vorher. Könnt ihr mir helfen?

Du solltest die HTML-Seite erst einmal als “test.html” (oder so) erstellen und im Browser testen.

Mit diesen Änderungen wird der Link mit dem Bild dargestellt. Ich bin mir aber nicht sicher, ob es das ist, was du wolltest:

<html>
  <head>
    <title>ESP8266 Demo</title>
    <style>
      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }
    </style>
  </head>
  <body>
    <h1>Hello from ESP8266!</h1>
    <p>SSID: %s</p>
    <p>Passwort: %s</p>
    <p>Temperatur: %s Grad</p>
    <p>Feuchtigkeit: %s %</p>
    <p>Zeit: %s </p>
    <div style="/width:180px;height:180px; border: 1px solid black;">
         <a href="http://alarm.meteocentrale.ch/index.html" alt="Aktuelle Unwetterwarnungen für die Schweiz" title="Aktuelle Unwetterwarnungen für die Schweiz">
           <img src="http://alarm.meteocentrale.ch/images/map/schweiz_preview.png"> 
         </a>
    </div>
  </body>
</html>

Für alle [b]"[/b] musst du danach wieder Backslashes einfügen.

/Joe

Bekomme folgende Error Meldung:

"<html>

^

UDP_Wifi_Server6.ino:40: error: missing terminating " character

UDP_Wifi_Server6.ino:44: error: stray '#' in program

      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }

                               ^

UDP_Wifi_Server6.ino:44: error: stray '#' in program

      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }

                                                                                          ^

UDP_Wifi_Server6.ino:44: error: invalid digit "8" in octal constant

      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }

                                                                                           ^

UDP_Wifi_Server6.ino:54: error: stray '\' in program

    <div style=\/width:180px;height:180px; border: 1px solid black;\>

    ^

UDP_Wifi_Server6.ino:54: error: stray '\' in program

UDP_Wifi_Server6.ino:55: error: stray '\' in program

         <a href=\http://alarm.meteocentrale.ch/index.html\ alt=\Aktuelle Unwetterwarnungen für die Schweiz\ title=\Aktuelle Unwetterwarnungen für die Schweiz\>

         ^

UDP_Wifi_Server6.ino:56: error: stray '\' in program

           <img src=\http://alarm.meteocentrale.ch/images/map/schweiz_preview.png\>

           ^

C:\Users\Krause\Desktop\UDP_Wifi_Server6.ino\UDP_Wifi_Server6.ino.ino:60:8: warning: missing terminating " character [enabled by default]

</html>",

       ^

UDP_Wifi_Server6.ino:60: error: missing terminating " character

</html>",

^

C:\Users\Krause\Desktop\UDP_Wifi_Server6.ino\UDP_Wifi_Server6.ino.ino: In function 'void handleRoot()':

UDP_Wifi_Server6.ino:41: error: expected primary-expression before '<' token

  <head>

  ^

UDP_Wifi_Server6.ino:41: error: 'head' was not declared in this scope

  <head>

   ^

UDP_Wifi_Server6.ino:42: error: expected primary-expression before '<' token

    <title>ESP8266 Demo</title>

    ^

UDP_Wifi_Server6.ino:42: error: 'title' was not declared in this scope

    <title>ESP8266 Demo</title>

     ^

UDP_Wifi_Server6.ino:54: error: unable to find numeric literal operator 'operator"" px'

    <div style=\/width:180px;height:180px; border: 1px solid black;\>

                                    ^

UDP_Wifi_Server6.ino:54: error: unable to find numeric literal operator 'operator"" px'

    <div style=\/width:180px;height:180px; border: 1px solid black;\>

                                                   ^

UDP_Wifi_Server6.ino:54: error: expected ';' before 'solid'

    <div style=\/width:180px;height:180px; border: 1px solid black;\>

                                                       ^

UDP_Wifi_Server6.ino:54: error: expected primary-expression before '>' token

    <div style=\/width:180px;height:180px; border: 1px solid black;\>

                                                                    ^

UDP_Wifi_Server6.ino:55: error: expected primary-expression before '<' token

         <a href=\http://alarm.meteocentrale.ch/index.html\ alt=\Aktuelle Unwetterwarnungen für die Schweiz\ title=\Aktuelle Unwetterwarnungen für die Schweiz\>

         ^

UDP_Wifi_Server6.ino:55: error: 'a' was not declared in this scope

         <a href=\http://alarm.meteocentrale.ch/index.html\ alt=\Aktuelle Unwetterwarnungen für die Schweiz\ title=\Aktuelle Unwetterwarnungen für die Schweiz\>

          ^

UDP_Wifi_Server6.ino:55: error: expected ';' before 'href'

         <a href=\http://alarm.meteocentrale.ch/index.html\ alt=\Aktuelle Unwetterwarnungen für die Schweiz\ title=\Aktuelle Unwetterwarnungen für die Schweiz\>

            ^

exit status 1
missing terminating " character

Den Code mit den ", welchen du mir geschickt hast, funktioniert in einem HTML-Tester gut, aber beim Arduino bekomme ich wie gesagt diese Fehlermeldungen.

Das war ja auch der Code für die HTML-Testseite :slight_smile:

Für dein Sketch musst du die notwendigen Backslashes (’’) vor jedem Anführungszeichen und am Ende jeder Zeile wieder einfügen und das Ganze wieder in Anführungszeichen einbetten:

"<html>\
  <head>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>SSID: %s</p>\
    <p>Passwort: %s</p>\
    <p>Temperatur: %s Grad</p>\
    <p>Feuchtigkeit: %s %</p>\
    <p>Zeit: %s </p>\
    <div style=\"width:180px;height:180px; border: 1px solid black;\">\
         <a href=\"http://alarm.meteocentrale.ch/index.html\" alt=\"Aktuelle Unwetterwarnungen für die Schweiz\" title=\"Aktuelle Unwetterwarnungen für die Schweiz\">\
           <img src=\"http://alarm.meteocentrale.ch/images/map/schweiz_preview.png\"> \
         </a>\
    </div>\
  </body>\
</html>"

Die Umwandlung der HTML-Seite in den String habe ich übrigens mit folgendem kleinen Python Script gemacht:

# HTML-File einlesen...
text = file("temp.html", "rt").read().strip()
# umwandeln...
text = text.replace('"', r'\"')
text = text.replace('\n', '\\\n')
# und wieder schreiben.
file("string.txt", "wt").write('"' + text + '"')

/Joe

...ähm du solltest dein Passwort nicht auf einem öffentlichen Webserver ausgeben ;)

/Joe

Ich habe alle deine Ratschläge befolgt, aber es funktioniert immer noch nicht. Geh mal auf: http://wlannesslau.internet-box.ch:8000. Im Quellcode wird nur angezeigt:

<html>  <head>    <title>ESP8266 Demo</title>    <style>      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }    </style>  </head>  <body>    <h1>Hello from ESP8266!</h1>    <p>SSID: Gabriel</p>    <p>Passwort: Gabriel123</p>    <p>Temperatur: 1391.8 Grad</p>    <p>Feuchtigkeit: 1411.8 %</p>    <p>Zeit: Sun Apr 24 18:59:23 2016
 </p>    <div style="w

Das Passwort ist nur für das Wifi-Netzwerk, welches vom ESP8266 gebildet wird. Ich glaube kaum, dass das jemand ausnutzen wird, weil die Recihweite eh nur 20 Meter ist. :wink:

Der HTML-String ist ca. 800 Zeichen lang. In deinem Demo hast du nur 400 Zeichen reserviert:

[b]
char temp[400];

snprintf ( temp, 400, 
...
[/b]

Trage in beiden Zeilen 1000 ein, dann sollte es gehen. Oder zerteile den String in mehrere kleinere

/Joe

Super! Es funktioniert! Vielen Dank! Eine Frage hätte ich noch: Wie kann ich ein zweites solches Fenster, (Code unten),
neben dieses Fenster setzen?

<div style="width:180px;height:180px; border: 1px solid black;">
<a href="http://alarm.meteocentrale.ch/europe-index.html" alt="Aktuelle Unwetterwarnungen für Europa" title="Aktuelle Unwetterwarnungen für Europa">
<img src="http://www.unwetterzentrale.de/images/map/europe_index_vorschau_UWZ-CH.png" style="border: 0;" alt="Aktuelle Unwetterwarnungen für Europa" />
</a>
</div>

Dazu ab besten eine Tabelle einfügen:

"<html>\
  <head>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #F7FF00; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>SSID: %s</p>\
    <p>Passwort: %s</p>\
    <p>Temperatur: %s Grad</p>\
    <p>Feuchtigkeit: %s %</p>\
    <p>Zeit: %s </p>\
    <table style=\"border-spacing: 8px;\">\
      <tr>\
        <td style=\"border: 1px solid black;\">\
          <a href=\"http://alarm.meteocentrale.ch/index.html\" alt=\"Aktuelle Unwetterwarnungen für die Schweiz\" title=\"Aktuelle Unwetterwarnungen für die Schweiz\">\
            <img src=\"http://alarm.meteocentrale.ch/images/map/schweiz_preview.png\"> \
          </a>\
        </td>     \
        <td  style=\"border: 1px solid black;\">\
          <a href=\"http://alarm.meteocentrale.ch/europe-index.html\" alt=\"Aktuelle Unwetterwarnungen für Europa\" title=\"Aktuelle Unwetterwarnungen für Europa\">\
            <img src=\"http://www.unwetterzentrale.de/images/map/europe_index_vorschau_UWZ-CH.png\" style=\"border: 0;\" alt=\"Aktuelle Unwetterwarnungen für Europa\" />\
          </a>\
        </td>\
      </tr>\
    </table>\
  </body>\
</html>"

Ich bin aber kein Web-Designer, hier gibt es sicher auch noch andere Möglichkeiten mit mehr Gestaltungsraum.

/Joe

Hello,

I am doing project “Sending Data from Arduino to webpage using WiFi” . I just copied the code from

internet and pasted in Arduino IDE . But I am getting following errors. Pls can anyone help me to fix this

problem.

Arduino: 1.8.0 (Windows 10), Board: “Arduino/Genuino Uno”

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino: In function ‘void check4IP(int)’:

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino:21:35: warning: deprecated conversion from string constant to ‘char*’ [-Wwrite-strings]

if(client.find(“WIFI GOT IP”))

^

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino: In function ‘void get_ip()’:

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino:37:30: warning: deprecated conversion from string constant to ‘char*’ [-Wwrite-strings]

if(client.find(“STAIP,”))

^

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino: In function ‘void connect_wifi(String, int)’:

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino:69:26: warning: deprecated conversion from string constant to ‘char*’ [-Wwrite-strings]

if(client.find(“OK”))

^

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino: In function ‘void sendwebdata(String)’:

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino:119:28: warning: deprecated conversion from string constant to ‘char*’ [-Wwrite-strings]

if(client.find(“OK”))

^

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino: In function ‘void loop()’:

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino:146:31: warning: deprecated conversion from string constant to ‘char*’ [-Wwrite-strings]

if(client.find(“0,CONNECT”))

^

C:\Users\Admin\Documents\Arduino\Snding_Data_WIFI\Snding_Data_WIFI.ino: In function ‘void Send()’:

Snding_Data_WIFI:165: error: unable to find string literal operator ‘operator""http’

webpage = "<a href=“http://circuitdigest.com/”;

^

exit status 1
unable to find string literal operator ‘operator""http’

This report would have more information with
“Show verbose output during compilation”
option enabled in File → Preferences.