HTML Buttons für den ESP Webserver

Hallo und herzlich willkommen zu unserem heutigen Beitrag.

Nachdem es gestern um HTML und eckigen Klammern ging, wollen wir uns heute anhand einer kleinen Schaltung anschauen was man mit ein wenig HTML und einem kleinen Skript umsetzen kann.

Dazu benötigen wir folgende Bauteile:

Ein Microcontroller mit ESP8266-Chip wie z.B. das Amica V2
Ein Relais Modul wie unser 2-Relais Modul
Ein DC-DC Step-Up Modul, da der Amica nur 3,3V liefert, unser Relais aber 5V benötigt
Ein Breadboard mit Jumper-Kabel, wie z.B. unser beliebtes Set

Natürlich kann man das Relais-Modul auch direkt mit einem 5V versorgen, und das Step-Up Modul einsparen. Dies macht für ein fertiges Projekt in einem Gehäuse mehr Sinn, da mit dem gleichen Netzteil auch der Amica versorgt werden kann.

Wie man das Step-Up Modul verwendet und einstellt haben wir bereits in unserem Blog-Beitrag "MT3608 Step-Up DC-DC Spannungsregler" beschrieben.

Wir verbinden die Bauteile wie folgt:

Im letzten Beitrag wurde schon darauf eingegangen wie wir den ESP mit einem bestehenden WLAN verbinden, und wie wir eine Anfrage vom Browser beantworten, inklusive der Ausgabe einer kleinen HTML-Datei.

Ich hatte bei einigen HTML-Tags erwähnt dass diese Seit HTML5 nicht mehr verwendet werden sollten. Bei modernen Webseiten wird die Gestaltung oftmals mittels Cascading Stylesheets (CSS) verwirklicht.

Bevor jetzt alle weglaufen mit der Furcht dass nun ein CSS-Kurs kommt, sei erwähnt dass es mittels CSS möglich ist schöne Buttons, Texte, Slider und Formulare zu gestalten.

Wenn man bei der Google Bildersuche nach "css buttons" sucht, tauchen einige Beispiele auf.

Nun geht es um die Umsetzung - welchen Code laden wir nun auf unseren ESP hoch?

Wir nehmen als Basis den Code aus dem Tutorial von https://randomnerdtutorials.com/esp8266-web-server/ und passen den Code an:

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

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

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

// 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";

// Die verwendeted GPIO Pins
// D1 = GPIO5 und D2 = GPIO4 - einfach bei Google nach "Amica Pinout" suchen  
const int output5 = 5;
const int output4 = 4;

void setup() {
  Serial.begin(115200);
  // Die definierten GPIO Pins als output definieren ...
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // ... und erstmal auf LOW setzen
  digitalWrite(output5, LOW);
  digitalWrite(output4, 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";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } 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);
            }
            
            // Hier wird nun die HTML Seite angezeigt:
            client.println("<!DOCTYPE html><html>");
            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>");
            }
            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("");
  }
}

 Wir laden den Code auf unseren Amica, und öffnen in der Arduino-IDE den Seriellen Monitor:

Als Nächstes geben wir im Browser, z.B. auf dem Handy, die IP Adresse des Servers ein. (Achtung, der PC oder das Smartphone müssen mit dem gleichen Netzwerk wie der ESP verbunden sein).

Nun können wir ganz einfach vom Smartphone (oder PC) aus die Relais schalten.

Und wer sich ein wenig im Internet umschaut kann auch schönere Buttons finden, wie z.B. diese:

Den HTML-Code und den CSS Code für diese Buttons gibt es bei http://jsfiddle.net/tovic/ve8mU/light/

Ich hoffe dieser Beitrag hat Ihnen einen Einblick in die Möglichkeiten des ESP Webservers gegeben.

Wenn Ihnen dieser Beitrag gefallen hat, würde ich mich über eine kurze Rückmeldung freuen. Schreiben Sie uns doch einfach ob für Sie das Thema SVG zur Anzeige von Balken und kleinen Vektorgrafiken mit dem ESP Webserver interessieren würde.

Ich wünsche Ihnen viel Spaß beim nachbauen, und verabschiede mich bis zum nächsten Artikel.