ESP8266WiFi Webanwendung / Sonderzeichen

Hallo,

ich habe ein Problem auf der Webseite werden die Ä,Ü richtig angezeigt!
Ich bekomme es einfach nicht hin ich hoffe mal wieder einer hier helfen kann

/*********
  Rui Santos
  Complete project details at http://randomnerdtutorials.com  
*********/

// Wir laden die uns schon bekannte WiFi Bibliothek
#include <ESP8266WiFi.h>

#include <RCSwitch.h>

RCSwitch mySwitch = RCSwitch();

// Hier geben wir den WLAN Namen (SSID) und den Zugansschlüssel ein
const char* ssid     = "======";
const char* password = "======";

// Wir setzen den Webserver auf Port 80
WiFiServer server(80);

// Eine Variable um den HTTP Request zu speichern
String header;

// Hier wird der aktuelle Status des Relais festgehalten
String output5State = "off";
String output4State = "off";
String output14State = "off";
// Die verwendeted GPIO Pins
// D1 = GPIO5 und D2 = GPIO4 - einfach bei Google nach "Amica Pinout" suchen  
const int output5 = 5;
const int output4 = 4;
const int output14 = 14;
void setup() {
  Serial.begin(115200);
  // Die definierten GPIO Pins als output definieren ...,
    mySwitch.enableTransmit(5);  // Der Sender wird an Pin 10 angeschlossen

  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
    pinMode(output14, OUTPUT);
  // ... und erstmal auf LOW setzen
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);
  digitalWrite(output14, LOW);
  // Per WLAN mit dem Netzwerk verbinden
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Die IP vom Webserver auf dem seriellen Monitor ausgeben
  Serial.println("");
  Serial.println("WLAN verbunden.");
  Serial.println("IP Adresse: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Hört auf Anfragen von Clients

  if (client) {                             // Falls sich ein neuer Client verbindet,
    Serial.println("Neuer Client.");          // Ausgabe auf den seriellen Monitor
    String currentLine = "";                // erstelle einen String mit den eingehenden Daten vom Client
    while (client.connected()) {            // wiederholen so lange der Client verbunden ist
      if (client.available()) {             // Fall ein Byte zum lesen da ist,
        char c = client.read();             // lese das Byte, und dann
        Serial.write(c);                    // gebe es auf dem seriellen Monitor aus
        header += c;
        if (c == '\n') {                    // wenn das Byte eine Neue-Zeile Char ist
          // wenn die aktuelle Zeile leer ist, kamen 2 in folge.
          // dies ist das Ende der HTTP-Anfrage vom Client, also senden wir eine Antwort:
          if (currentLine.length() == 0) {
            // HTTP-Header fangen immer mit einem Response-Code an (z.B. HTTP/1.1 200 OK)
            // gefolgt vom Content-Type damit der Client weiss was folgt, gefolgt von einer Leerzeile:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // Hier werden die GPIO Pins ein- oder ausgeschaltet
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
                mySwitch.send(20225, 24); // Der 433mhz Sender versendet die Dezimalzahl „1234“

            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              mySwitch.send(20226, 24); // Der 433mhz Sender versendet die Dezimalzahl „1234“

            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            }



            else if (header.indexOf("GET /14/on") >= 0) {
              Serial.println("GPIO 14 on");
              output14State = "on";
              digitalWrite(output14, HIGH);
            } else if (header.indexOf("GET /14/off") >= 0) {
              Serial.println("GPIO 14 off");
              output14State = "off";
              digitalWrite(output14, LOW);
            }

            
            
            // Hier wird nun die HTML Seite angezeigt:
         
            client.println("<!DOCTYPE html><html>");
//meta-refresh page every 2 seconds
          client.print("<HEAD>");
          client.print("<meta http-equiv=\"refresh\" content=\"2\">");
          client.print("<TITLE />Zoomkat's meta-refresh test</title>");
          client.print("</head>");

            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // Es folgen der CSS-Code um die Ein/Aus Buttons zu gestalten
            // Hier können Sie die Hintergrundfarge (background-color) und Schriftgröße (font-size) anpassen
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #333344; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #888899;}</style></head>");
            
            // Webseiten-Überschrift
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Zeige den aktuellen Status, und AN/AUS Buttons for GPIO 5  
            client.println("<p>GPIO 5 - State " + output5State + "</p>");
            // wenn output5State = off, zeige den EIN Button       
            if (output5State=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">EIN</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">AUS</button></a></p>");
            } 
               
            // Das gleiche für GPIO 4
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // Wenn output4State = off, zeige den EIN Button       
            if (output4State=="off") {
              client.println("<p><a href=\"/4/on\"><button class=\"button\">EIN</button></a></p>");
            } else {
              client.println("<p><a href=\"/4/off\"><button class=\"button button2\">AUS</button></a></p>");
            }


              // Das gleiche für GPIO 14
            client.println("<p>GPIO 14 - State " + output4State + "</p>");
            // Wenn output14State = off, zeige den EIN Button       
            if (output14State=="off") {
              client.println("<p><a href=\"/14/on\"><button class=\"button\">EIN</button></a></p>");
            } else {
              client.println("<p><a href=\"/14/off\"><button class=\"button button2\">AUS</button></a></p>");
            


            
            }
            client.println("</body></html>");
            
            // Die HTTP-Antwort wird mit einer Leerzeile beendet
            client.println();
            // und wir verlassen mit einem break die Schleife
            break;
          } else { // falls eine neue Zeile kommt, lösche die aktuelle Zeile
            currentLine = "";
          }
        } else if (c != '\r') {  // wenn etwas kommt was kein Zeilenumbruch ist,
          currentLine += c;      // füge es am Ende von currentLine an
        }
      }
    }
    // Die Header-Variable für den nächsten Durchlauf löschen
    header = "";
    // Die Verbindung schließen
    client.stop();
    Serial.println("Client getrennt.");
    Serial.println("");
  }
}

ich habe ein Problem auf der Webseite werden die Ä,Ü richtig angezeigt!

Wo ist da dein Problem ?

Hier ist mein Problem es wird mir so angezeigt!!

Gewächshaussteuerung
Gewächshaus Gießanlage 🏠off

Dann fehlt in deinem Satz ein "nicht".
Und das Problem liegt im falschen Zeichensatz, da bin ich allerdings überfragt, wo du dran drehen darfst.
Sicher kommt noch jemand rum, der mehr weiß.

Hi

Auf 'HTML'isch ist ein Ä ein Ä (A Umlaut) , wenn ich mich recht entsinne - Wikipedia wird Das sicher etwas genauer wissen.
Du möchtest ALLES, was der Arduino in Seinen 8 Bit nicht an Sonderzeichen raus bringen kann in HTML-Code parsen.

MfG

@Tommy @ #5
Danke für die Korrektur - ist dann doch schon einige Jährchen her ...

Du musst den Zeichensatz Deiner HTML-Seite richtig deklarieren, z.B. (HTML-4.1)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>

oder HTML5

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>

und Deine Seite dann auch in UTF-8 schreiben, z.B. mit Notepad++

@postmaster-ino: Die alte Schreibweise für ä war ä.

Gruß Tommy

Edit: Ich glaube die Arduino-IDE schreibt mittlerweile auch UTF-8

manuel20134:
Ich bekomme es einfach nicht hin ich hoffe mal wieder einer hier helfen kann

self <---> html.org

Gruß Fips