ESP8266 Sensordaten auf Webseite ausgeben

 

Gestern haben wir gezeigt wie einfach unser ESP8266 mit dem MAX6675-Temperatorsensor zusammenarbeitet.

Heute möchten wir den Sketch ein wenig erweitern, um die WiFi-Fähigkeit des Moduls auszunutzen.

Dafür binden wir die Bibliothek "ESP8266WiFi" ein. Diese übernimmt die Anmeldung an ein bestehendes WLAN, und übernimmt das Senden und Empfangen der Daten an den Client.

Mittels "WiFiServer server(80);" starten wir einen Server der auf Port 80 läuft.

 

 

#include <ESP8266WiFi.h>
#include <max6675.h>
const char* ssid = "Wlan Name (SSID)";
const char* password = "Wlan Schlüssel";

int thermoDO = 12;
int thermoCS = 13;
int thermoCLK = 14;

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

MAX6675 thermocouple(thermoCLK, thermoCS, thermoDO); // Wir richten den Temperatursensor ein 

void setup()
{
  Serial.begin(115200);
  Serial.println();

  Serial.printf("Verbinde mit %s ", ssid);
  WiFi.begin(ssid, password); // Versucht mit WLAN Name und Schlüssel zu verbinden
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println(" verbunden");
  server.begin();
  Serial.printf("Webserver gestartet, öffnen Sie %s in einem Webbrowser\n", WiFi.localIP().toString().c_str());
}

// Inhalt der Weibseite generieren
String prepareHtmlPage()
{
  String htmlPage =
     String("HTTP/1.1 200 OK\r\n") +
            "Content-Type: text/html\r\n" +
            "Connection: close\r\n" +  // Die Verbindung wird nach der Übertragung geschlossen
            "Refresh: 5\r\n" +  // Automatisch alle 5 Sekunden neu laden
            "\r\n" +
            "<!DOCTYPE HTML>" +
            "<html>" +
            "Temperatur in &deg;C:  " + String(thermocouple.readCelsius()) + //Ausgabe der Temperatur
            "</html>" +
            "\r\n";
  return htmlPage;
}

void loop()
{
  WiFiClient client = server.available();
  // warten auf Verbindung vom Client (Webbrowser)
  if (client)
  {
    Serial.println("\n[Client hat sich verbunden]");
    while (client.connected())
    {
      // zeilenweise einlesen was der Client (Webbrowser) anfragt
      if (client.available())
      {
        String line = client.readStringUntil('\r');
        Serial.print(line);
        // bis zum Ende der Anfrage warten (=Leerzeile)
        if (line.length() == 1 && line[0] == '\n')
        {
          client.println(prepareHtmlPage()); // Antwort ausgeben
          break;
        }
      }
    }
    delay(1000); // dem Browser Zeit geben um die Antwort zu empfangen
    // Die Verbindung schließen:
    client.stop();
    Serial.println("[Client getrennt]");
    Serial.print("C = "); 
    Serial.println(thermocouple.readCelsius());
    delay(10);
  }
}

 

Die Ausgabe der Temperatur im seriellen Monitor ist nur zur Fehlersuche. Auf dem Seriellen Monitor sehen wir nun:

Serielle Ausgabe

 

Die Ausgabe im Browser sieht dann wie folgt aus:

 Browser Ansicht

 

Wer sich ein Wenig mit den Grundlagen von HTML beschäftigt (Ich empfehle einen Blick auf https://selfhtml.org/) kann im Abschnitt prepareHtmlPage() das Aussehen und den Inhalt der Seite beliebig anpassen. 

Dann können auch mehrere Sensordaten auf einer Seite ausgegeben werden.

Der ESP8266 kann sowohl als Webserver, aber auch aus Client fungieren. Damit bietet der Mikrokontroller viele neue Lösungsansätze und ermöglicht konstengünstig spannende neue Projekte.

 

 

Letzter Artikel Epoxidharz, eine wasserdichte Sache

Kommentar

Hoschy - Juli 13, 2018

In Zeile 28 steht: " öffnen Sie %s in einem Webbrowser\n", WiFi.localIP "
das %s bezieht sich auf das Wifi.localIP, das ist die IP des webservers, des arduinos / mcu oder ähnliches wo die Webseite zum anzeigen drauf läuft.

Klaus - Juli 6, 2018

Moin,
ein Anfänger sucht in selfhtml.org den Abschnit prepareHtmlPage – wünsche ein wenig mehr Hilfe.

michael - Juli 6, 2018

Bin leider noch Anfänger:
Was bedeutet das Zeichen “%s” in der Zeile 28?

Mit was für einer Adresse rufe ich im Broser die Seite auf?

Hinterlasse einen Kommentar

Kommentare müssen vor der Veröffentlichung überprüft werden

Erforderliche Angabe