In diesem Artikel möchte ich euch erklären wie Ihr die Daten der ESP8266 Messstationen die euer Mosquitto Broker in eurem Smarthome einsammelt via einem Python-Skript und einer HTML Datei anzeigen könnt. Die Web-Seite kann von jedem Gerät mit Browser angezeigt werden. Ich werde dazu mein Smartphone verwenden da dies für mich an sinnvollsten erscheint. Daher wird es auch nicht viele Funktionen auf der Web-Seite geben außer der Anzeige der Luftfeuchte und Temperatur pro Messstation.

Die kleine Grafik erklärt das Zusammenspiel zwischen ESP8266, Raspberry Pi und einem Smartphone. Das Ziel ist es die gemessenen Werte pro Zimmer via Web-Seite auf z. B. einem Smartphone anzeigen zu lassen.

Smarthome Aufbau

Smarthome Aufbau

Hinweis:

Dies Anleitung habe ich selber im Netz gefunden und für so gut befunden das ich diese für mich daheim ausprobiert und leicht modifiziert habe. Die originale englische Version findet Ihr hier im Netz: ESP8266 Publishing DHT22 Readings with MQTT to Raspberry Pi

Voraussetzung

Es muss der Mosquitto Broker auf einem Raspberry Pi oder aber auch auf dem gleichen installiert sein auf dem auch die Web-Seite läuft. Generell kann der Mosquitto Broker zusammen mit der Web-Seite auf einem Raspberry Pi laufen da die erforderliche Rechenleitung sehr gering ist.

Damit es jetzt losgehen kann gehe ich davon aus, dass der Mosquitto Broker wie im folgenden Artikel beschrieben auf dem Rasbperry Pi installiert ist auf dem auch jetzt der Flask-Web-Server wie im nachfolgenden Abschnitt beschrieben installiert wird.

Mosquitto Broker Installation: Mosquitto Broker auf dem Raspberry Pi installieren

Software Installation:

Viele Programme bzw. Module müssen nicht installiert werden um dieses kleine Projekt zu realisieren. Eigentlich wird nur der Flask Web-Server benötigt plus das PAHO-MQTT Modul und SocketIO. Wie alles installiert wird erfahrt ihr in den beiden folgenden Abschnitten.

Flask Web-Server installieren:

Bitte führt die folgenden Befehle aus um eure Raspbian Installation für die Installation von Flask vorzubereiten.

Befehl: sudo apt-get update
Befehl: sudo apt-get upgrade

Je nach verwendeter Version von Raspbian kann der Flask Web-Server schon installiert sein. Eine entsprechende Meldung wird euch dann angezeigt und die Installation von Flask kann da schon vorhanden übersprungen werden.

Befehl: sudo apt-get install python-pip python-flask git-core

Mit den folgenden Befehlen wird jetzt der Flask Server (falls noch nicht installiert) sowie PAHO-MQTT installiert.

Befehl: sudo pip install flask (sollte schon vorhanden sein)
Befehl: sudo pip install paho-mqtt

SocketIO installieren

Die Installation von SocketIO ist notwendig um die Interaktion des Flask Web-Servers mit dem Gerät das die Web-Seite anzeigt wie z. B. einem Smartphone zu ermöglichen. So lassen sich schöne Funktionen abbilden wie das Laden der aktuellen Werte von Temperatur und Luftfeuchte ohne die Web-Seite ständig neu laden zu müssen.

Befehl: sudo pip install flask-socketio

Jetzt sind alle Programme installiert und der Raspberry Pi wird idealerweise neu gestartet. Anschließend wird das kleine Python Programm bzw. Skript auf dem Raspberry Pi angelegt.

Python Skript

Das Python Programm bezieht einmal die aktuellen Temperatur- und Luftfeuchtewerte für den verfügbaren Raum vom MQTT Broker und befüllt mit diesen Werten die kleine Web-Seite die Du Dir auf Deinem Smartphone anzeigen lassen kannst. Also im Großen und Ganzen ein recht einfacher Aufbau.

Das Programm stammt nicht von mir sondern von Rui Santos und ich habe es lediglich leicht modifiziert. So habe ich einen Sensor (Wohnzimmer) ergänzt der einen In-Door und einen Out-Door DHT22 Sensor verwendet.

Die Python Datei app.py kann hier von meiner Web-Seite herunter geladen werden.

Download: app.zip

Lege jetzt einen Ornder mit z. B. dem Namen “app” an und entpacke in diese die ZIP-Datei. Am Ende liegt das Python Programm app.py dann im Ordner mit dem Namen app.

HTML Seite

Damit die Daten auch in einem schönen Rahmen angezeigt werden können braucht der Flask Web-Server bzw. die kleine Python App die zuvor erstellt wurde eine HTML Datei innerhalb derer die Anzeige erfolgt. Dieses kleine HTML-Template mit dem Namen “main.html” ist nicht weiter schwierig und kann auch wieder individuell angepasst werden um weitere Sensoren.

Da ich hier den Quellcode nicht einfügen kann habe ich die main.html Datei in eine ZIP Datei gepackt und hier online zum Download gestellt.

Download: main.zip

Die main.html Datei muss dann in einem Unterodrnder “templates” kopiert werden. Dieser Ordner liegt auf der Ebene bzw. im Verzeichnis app auf der auch die app.py Datei gespeichert wurde. So findet das Python Programm app.py dann die main.html Datei und es wird die passende Anzeige im Browser angezeigt.

Mir ist die Anzeige der Temperatur wichtig und weniger ob die Anzeige ein schönes Design hat. Dafür ist der Code auch recht einfach…

ESP8266 Web-GUI

ESP8266 Web-GUI

Zusammenfassung:

Auf dem Raspberry Pi ist jetzt alles installiert, was benötigt wird um die gemessenen Luftfeuchtewerte und Temperaturen pro ESP8266 NodeMCU einzusammeln. Zur Erinnerung es wurde der MQTT Dienst eingerichtet sowie der Flask Web-Server installiert. Anschließend wurde noch das Python Programm erstellt das die Werte vom MQTT Dienst einließt und via HTML Seite ausgibt.

Jetzt fehlt nur noch der Zusammenbau des ESP8266 NodeMCU mit dem DHT22 Sensor und das Flashen des ESP8266.


Beitragsübersicht Smarthome ESP8266 NodeMCU

Hier folgt die Übersicht meiner Artikel rund um das Thema Smarthome mit dem günstigen ESP8266 NodeMCU Board. Das Ziel ist es selber eine Lösung zu bauen die ihre Daten nicht in der Cloud speichert sondern lokal und somit gehören einem selber die aufgezeichneten Daten.


SmartHome - Mosquitto Broker auf dem Raspberry Pi installieren
SmartHome - ESP8266 NodeMCU und DHT22 Sensor zusammenbauen und programmieren
SmartHome - Temperatur und Luftfeuchte Messung mit dem ESP8266
(Visited 1.735 times, 1 visits today)