In der letzten Lektion hast du einen Webserver in seiner einfachsten Form erstellt und ein einfaches Hello world auf einer ebenso einfachen Webseite ausgegeben.
Lass uns nun einen Schritt weiter gehen. In dieser Lektion ermittelst du mithilfe deines Sensors die aktuelle Raumtemperatur. Wenn du die die IP-Adresse des Servers aufrufst erscheint diese dann auf der Webseite.
Passe den Sketch an
Die gute Nachricht: Du kannst den Großteil des Sketchs aus der letzten Lektion einfach übernehmen. Hinzufügen musst du lediglich etwas Code für die Messung der Temperatur. Ebenso bedarf es ein paar Anpassungen der Webseite, die dein Server an deinen Client übermittelt.
Zunächst zur Temperatur. Füge zu Beginn des Sketchs folgende Zeilen hinzu:
#include "DHT.h"
#define DHTPIN 4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
float temp;Im Setup „startest“ du den Sensor:
dht.begin();Nun folgt die eigentliche Messung. Diese integrierst du im Loop – mitten in der Antwort des Servers an den Client. Das hat den Vorteil, dass du immer die aktuelle Temperatur erhältst, sobald du eine neue Anfrage stellst, also zum Beispiel einen Refresh im Browser machst.
___STEADY_PAYWALL___
temp = dht.readTemperature();
Serial.print("Temperatur = ");
Serial.print(temp);
Serial.println(" *C");Etwas mehr HTML für deine Webseite
Jetzt musst du nur noch die Antwort des Servers – also die Webseite etwas anpassen. Zunächst fügst du dem <head> der Webseite die Zeichencodierung UTF-8 hinzu, damit das Grad-Zeichen ° korrekt dargestellt wird:
client.println("<meta charset=\"utf-8\"></head>");Anschließend ersetzt du Headline Hello world! durch Die aktuelle Temperatur und fügst direkt darunter einen neuen Absatz hinzu, der den Messwert deines Temperatursensors in der Variablen temp enthält:
client.println("<body><h1 align=\"center\">Die aktuelle Temperatur</h1>")
client.println("<p align=\"center\">");
client.println(temp);
client.println("°C</p>");
client.println("</body></html>");Teste deine neue Webseite
Den gesamten Sketch findest du oben im Reiter Downloads. Lade ihn auf deinen ESP8266 und rufe die die IP-Adresse im Browser auf. Siehst du die aktuelle Temperatur?
Teste auch, ob sich die Temperatur verändert, wenn du deinen ESP8266 samt Sensor an einen anderen Ort stellst und eine neue Anfrage schickst.
In der nächsten Lektion integrierst du eine Funktion, die dir die „Arbeit“ abnimmt – statt manuell die Webseite zu aktualisieren macht sie das von alleine.