In diesem zweiten Teil möchte ich speziell darauf eingehen, wie du eine kleine Webseite für den ESP-01S mit dem Temperatursensor DS18B20 erstellen kannst.
Den ersten Teil zu diesem Beitrag findest du unter Arduino Lektion 81: ESP-01S Temperatursensorshield DS18B20 in diesem Beitrag hatte ich dir gezeigt, wie die Daten in einem JSON ausgeben werden können. Die Anzeige der Daten auf einer Webseite ist aber auch nicht viel schwerer, was du gleich erfahren wirst.
Inhaltsverzeichnis
- Was wird für dieses kleine Projekt benötigt?
- Programmieren einer Webseite mit Sensordaten des DS18B20 am ESP-01S in der Arduino IDE
Was wird für dieses kleine Projekt benötigt?
Du benötigst nachfolgende Module zum Programmieren und messen der Sensordaten:
- einen ESP-01S*,
- ein Modul mit Temperatursensor DS18B20*,
- ein USB-Programmer* für den ESP-01S,
- ein Jumper
- Universal Netzteil*
Zusätzlich benötigst du noch ein Netzteil, welches eine Spannung von 3,7V bis max. 12V liefert. Wobei ich meines auf 4V einstelle.
Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!
Programmieren einer Webseite mit Sensordaten des DS18B20 am ESP-01S in der Arduino IDE
Aus dem ersten Beitrag entnehme ich das kleine Beispiel mit der Ausgabe als JSON und forme diese einfach als HTML Seite um.
Schritt 1 – Import der benötigten Bibliotheken
Für den Mikrocontroller ESP-01S benötigen wir zusätzlich einen Boardtreiber. Diesen können wir installieren wenn wir zuvor die nachfolgende Adresse den zusätzlichen Boardverwalter URLs hinzufügen.
https://arduino.esp8266.com/stable/package_esp8266com_index.jsonDes Weiteren benötigen wir noch die Bibliothek DallasTemperature von Miles Burton.
#include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <DallasTemperature.h> #include "secrets.h"
Zusätzlich erzeuge ich die Datei secrects.h in welcher ich die Verbindungsdaten (SSID & Passwort) zum lokalen WLAN ablege.
#define SSID "xxx" #define PASSWORD "yyy"
Schritt 2 – aufbauen einer WiFi Verbindung zum lokalen WLAN
Im zweiten Schritt bauen wir die WiFi Verbindung zum lokalen WLAN auf. Auch wenn der Mikrocontroller hinterher die Daten über die serielle Schnittstelle nicht mehr anzeigen kann, gebe ich im Code trotzdem die IP-Adresse aus. Jeder Router sollte den verbundenen Geräten immer dieselbe IP-Adresse vergeben, somit können wir zunächst im ersten Durchlauf ohne den Sensor die IP-Adresse auf dem seriellen Monitor ablesen können.
const char* ssid = SSID; //SSID aus dem Router
const char* password = PASSWORD; //Passwort für den Zugang zum WLAN
ESP8266WebServer server(80); //Port auf welchem der Server laufen soll.
void setup() {
Serial.begin(9600);
delay(10); //10ms. Warten damit die Seriele Kommunikation aufgebaut wurde.
WiFi.begin(ssid, password); //Initialisieren der Wifi Verbindung.
Serial.print("Aufbau der Verbindung zu ");
Serial.println(SSID);
while (WiFi.status() != WL_CONNECTED) { //Warten bis die Verbindung aufgebaut wurde.
Serial.print(".");
delay(500);
}
Serial.println();
IPAddress ip = WiFi.localIP();
Serial.print("IP-Adresse: ");
Serial.println(ip);
server.on("/tempsensor", callTempsensor);
server.begin(); // Starten des Servers.
}
Schritt 3 – Erstellen einer kleinen Webseite für die Sensordaten
Die kleine Webseite verfügt lediglich über eine Überschrift und zwei Paragrafen, in welche zum einen die Temperatur und zum anderen ein Hinweistext enthalten ist.
void callTempsensor() {
sensor.requestTemperatures();
String celsiusValue = String(sensor.getTempCByIndex(0));
String webseite = "<html>";
webseite += "<head><style>";
webseite += " body{background-color:black;}";
webseite += " h1{color:green; font-weight:bold;}";
webseite += " .txtTemp{color:white; font-weight:bold;}";
webseite += " .txtHint{color:white; font-size:10px;}";
webseite += "</style></head>";
webseite += "<body>";
webseite += " <h1>Temperatursensor DS18B20</h1>";
webseite += " <p class='txtTemp'>Die Temperatur beträgt: {temp}°</p>";
webseite += " <p class='txtHint'>Aktualisiert sich automatisch jede Sekunde!</p>";
webseite += "</body></html>";
server.send(200, "text/html", webseite);
}
Der CSS Stylesheet ist im Header -Bereich hinterlegt und lässt sich dort sehr einfach erweitern.
webseite += "<head><style>";
webseite += " body{background-color:black;}";
webseite += " h1{color:green; font-weight:bold;}";
webseite += " .txtTemp{color:white; font-weight:bold;}";
webseite += " .txtHint{color:white; font-size:10px;}";
webseite += "</style></head>";
Zum Schluss wird der Platzhalter {temp} innerhalb des Strings mit dem Temperaturwert ersetzt.
webseite.replace("{temp}", celsiusValue);
fertiges Programm
Nachfolgend das fertige Programm zum Anzeigen der Sensorwerte auf einer Webseite am ESP-01S.
Zu einem Test habe ich das ganze mal in den Tiefkühlschrank gepackt und es werden hier auch die Minusgrade angezeigt.
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DallasTemperature.h>
#include "secrets.h"
#define ONE_WIRE_BUS 2 //Sensor DS18B20 am digitalen Pin 2
OneWire oneWire(ONE_WIRE_BUS); //
//Übergabe der OnewWire Referenz zum kommunizieren mit dem Sensor.
DallasTemperature sensor(&oneWire);
const char* ssid = SSID; //SSID aus dem Router
const char* password = PASSWORD; //Passwort für den Zugang zum WLAN
ESP8266WebServer server(80); //Port auf welchem der Server laufen soll.
void setup() {
Serial.begin(9600);
delay(10); //10ms. Warten damit die Seriele Kommunikation aufgebaut wurde.
WiFi.begin(ssid, password); //Initialisieren der Wifi Verbindung.
Serial.print("Aufbau der Verbindung zu ");
Serial.println(SSID);
while (WiFi.status() != WL_CONNECTED) { //Warten bis die Verbindung aufgebaut wurde.
Serial.print(".");
delay(500);
}
Serial.println();
IPAddress ip = WiFi.localIP();
Serial.print("IP-Adresse: ");
Serial.println(ip);
server.on("/tempsensor", callTempsensor);
server.begin(); // Starten des Servers.
sensor.begin(); //Starten der Kommunikation mit dem Sensor
}
void loop() {
server.handleClient();
}
void callTempsensor() {
sensor.requestTemperatures();
String celsiusValue = String(sensor.getTempCByIndex(0));
String webseite = "<html><head>";
webseite += "<style>";
webseite += " body{background-color:black;}";
webseite += " h1{color:green; font-weight:bold;}";
webseite += " .txtTemp{color:white; font-weight:bold;}";
webseite += " .txtHint{color:white; font-size:10px;}";
webseite += "</style></head>";
webseite += "<body>";
webseite += " <h1>Temperatursensor DS18B20</h1>";
webseite += " <p class='txtTemp'>Die Temperatur beträgt: {temp}°</p>";
webseite += " <p class='txtHint'>Aktualisiert sich automatisch jede Sekunde!</p>";
webseite += "</body></html>";
webseite.replace("{temp}", celsiusValue);
server.send(200, "text/html", webseite);
}