Status Box – Ansteuern eines Nextion Display über FHEM mit Hilfe von ESP Easy

Related Articles

Smarte Türklingel – Integration in FHEM

10. November 2022

IKEA VINDRIKTNING in FHEM integrieren

27. November 2021

BME680 schnell in FHEM integriert

13. März 2021

In diesem Beitrag möchte ich euch zeigen, wie das Nextion Display über den FHEM Server gesteuert werden kann. Dabei ist das Nextion Display an das Modul ESP-12F angebunden, welches die Firmware ESP Easy nutzt.

Was wird für dieses Projekt benötigt wird:

• Programmier Adapter (Affiliate Link: AZDelivery FT232RL USB zu TTL Serial Adapter für 3,3V und 5V inklusive E-Book!)
• Nodemcu oder vergleichbares mit Mikrocontroller ESP8266 (Affiliate Link: AZDelivery NodeMCU Lua Lolin V3 Module ESP8266 ESP-12F WIFI Wifi Development Board mit CH340 inklusive E-Book!)
• Nextion Display (Affiliate Link: NEXTION 2.4 Bildschirm HMI LCD Display Modul 2,4″ Zoll TFT Touch Panel 320×240 NX3224T024 für Arduino Raspberry Pi DIYmaker)
• 5V Netzteil (Affiliate Link: Universal-Netzteil 5V 3A/3000mA Ladegerät Netzteil (TÜV GS gelistet) für Heim-Elektronik, Router, Lautsprecher, LCD-Fernseher, Kameras, TV-Boxen, USB-Hub und mehr 5V Kleine Elektronikgeräte (7 Tipps))

Falls ihr den NodeMCU nutzt und über den Micro USB-Port versorgt, kann die Versorgung für das Nextion Display über den Pin VU erfolgen. Zunächst sollte aber das Spannungslevel geprüft werden, ob dieses wirklich auf 5V liegt. Falls dieses jedoch zu gering ist, kann es zu Problem mit dem Display kommen. Mehr Infos hierzu unter dem Kapitel Inbetriebnahme/Stromversorgung auf der Seite wiki.fhem.de.

Einstieg in das Parametrieren des Nextion Display

Im ersten Schritt ist es notwendig das Nextion Display selbst zu parametrieren. Dafür wird der Nextion Editor benötigt, welcher unter folgendem Link geladen werden kann. Ich habe mir für die .ZIP Datei entschieden.

Nach dem Ausführen der NextionEditor.exe öffnet sich folgendes Fenster:

Unter File > New wird ein Neues Projekt mit beliebigen Namen in einem beliebigen Ordner angelegt. Ich vergebe den Namen 05102020_StatusBox_Ver00. Als nächste muss das Display Model vergeben werden. In meinem Fall kommt das NX3224T024_011 zum Einsatz.

Die Display direction setze ich auf 90 Horizontal, da ich das Display liegend verwende. Mit OK wird nun das Projekt angelegt.

Im nächsten Schritt wird unter Postinitialize Event die Baudrate auf 115200 gesetzt. Folgender Befehl wird hinterlegt: baud=115200

In einem weiteren Schritt lege ich das Hintergrundbild fest. Da das Display eine Auflösung von 320 x 240 hat, verwende ich auch ein Bild mit dieser Größe. Mit dem „+“ Symbol kann nun ein Bild unter dem Reiter Picture hinzugefügt werden.

Das Hintergrundbild kann nun für die erste Seite angelegt werden, indem unter page0 das Attribute sta auf image gesetzt wird. Unter dem Attribute pic > browse wird nun das zuvor hochgeladene Bild ausgewählt. Der erste Abschnitt wäre geschafft und das Ergebnis sollte in etwa so aussehen:

Im nächsten Abschnitt wagen wir uns an etwas Text. Dazu ist es notwendig über Tools > Font Generator eine neue Schriftart anzulegen. Mit Generate font wird an einem beliebigen Ort die Schriftart abgepeichert.

Im linken Bereich des Fensters sollte nun die Schriftart mit der ID:0 sichtbar sein:

Da nun die erste Schriftart angelegt wurde, kann im linken Bereich des Fensters aus der Toolbox das Element Text ausgewählt werden. Das Attribute txt wird entsprechend angepasst. Das Attribute txt_maxl muss evt. angepasst werden, falls der Text zu lange wird. Ich erzeuge vier Text-Elemente:

Für einen ersten Erfolg kann nun ein Upload mit einem beliebigen USB-TTL Adapter durchgeführt werden (Affiliate Link: AZDelivery FT232RL USB zu TTL Serial Adapter für 3,3V und 5V inklusive E-Book! ). Dieser Adapter bietet den Vorteil, dass dieser 5V und 3.3V zur Verfügung stellen kann. Es ist lediglich notwendig, den Jumper entsprechend zu setzen. Mein Nextion Modul ist wie folgt durch den Hersteller verkabelt:

• Rotes Kabel -> 5V
• Blaues Kabel TX -> RX von Programmier Adapter
• Gelbes Kabel RX -> TX von Programmier Adapter
• Schwarzes Kabel -> GND

Nach einem Upload sollte nun das gleiche Bild wie im Editor, auch auf dem Display sichtbar sein. Der COM Port ist entsprechend zu setzen.

Da nun das Nextion Display etwas anzeigt, kann mit dem Parametrieren von ESP Easy begonnen werden.

Parametrieren von ESP Easy

Wie die Firmware ESP Easy auf den ESP8266 gelangt setze ich in diesem Zusammenhang voraus (Ein Tutorial gibt es unter folgendem Link).
Auf der Weboberfläche wird unter dem Reiter Devices wird mittels Add ein neues Device mit dem Namen Communication – Serial Server angelegt.

Die Parameter für dieses Device lauten wie folgt:

Unter Tools > Advanced und dem Punkt Serial Settings darf das Häkchen für Enable Serial Port nicht gesetzt sein.

Mehr muss in der Weboberfläche von ESP Easy nicht getan werden. Um nun den Text auf Nextion Display zu ändern, muss nur noch der FHEM Server entsprechend konfiguriert werden.

Parametrieren des FHEM Server

Zum Glück gibt es schon ein passendes FHEM Modul und das Einbinden ist sehr einfach.
In die fhem.cfg muss zunächst folgendes hinzugefügt werden:

define StatusBox_1 Nextion 192.168.1.150:23@115200
attr StatusBox_1devStateStyle style="color:red;;;;font-weight:bold;;;;text-align:right;;;;"
attr StatusBox_1 disable 0
attr StatusBox_1 expectAnswer 0
attr StatusBox_1 hasSendMe 1
attr StatusBox_1 room StatusBox
attr StatusBox_1 verbose 0

Der Name StatusBox_1 kann frei gewählt werden. Die IP Adresse, welche im meinem Fall 192.168.1.150 lautet, muss an die eigene angepasst werden. Ich empfehle in den Router-Einstellungen diesem Device eine fixe IP Adresse zu geben. Die Baud Rate von 115200 wurde mit dem Nextion Editor definiert (siehe Oben, Befehl baud=115200).
Nach dem Speichern, sollte im Raum StatusBox das Device StatusBox_1 zu sehen sein. Der Status sollte auf open sein, dann waren alle Schritte zuvor erfolgreich.

Mit dem Befehl cmd kann nun ein Befehl an das Display übermittelt werden:

set StatusBox_1 cmd page0.t02.txt="Test"

Dieser Befehl hatte zur Folge, dass die unter dem Punkt Temp. Innen [°C]: das Wort Test angezeigt wurde. Wichtig hierbei ist die korrekte Seite, in diesem Fall page0, zu verwenden. Der objname, in diesem Fall t2, wird über den Nextion Editor > Attribute definiert:

Da man sicher etwas sinnvolleres darstellen möchte als nur Test, kann man zum Beispiel mit dem FHEM Modul DOIF den Temperatur Wert automatisiert updaten lassen. Das Device ESPEasy_ESP_Easy_WZ_TempHum_WZ1 mit dem Reading Temperature.mav liefert hier die benötigten Informationen.

define di_NextionDisplay_Temp1 DOIF ([ESPEasy_ESP_Easy_WZ_TempHum_WZ1:Temperature.mav]) (set StatusBox_1 cmd page0.t2.txt="[ESPEasy_ESP_Easy_WZ_TempHum_WZ1:Temperature.mav]")
attr di_NextionDisplay_Temp1 do always
attr di_NextionDisplay_Temp1 group doif
attr di_NextionDisplay_Temp1 room StatusBox

Und die Netatmo Wetterstation, als Device netatmo_M02 mit dem Reading temperature, liefert die Temperaturwerte für den Außenbereich:

define di_NextionDisplay_Temp2_Outdoor DOIF ([netatmo_M02:temperature]) (set StatusBox_1 cmd page0.t3.txt="[netatmo_M02:temperature]")
attr di_NextionDisplay_Temp2_Outdoor do always
attr di_NextionDisplay_Temp2_Outdoor group doif
attr di_NextionDisplay_Temp2_Outdoor room StatusBox

Für beide DOIFs ist es wichtig das Attribute do always zu setzen, ansonst wird das DOIF nur einmal getriggert.

Zusammenfassung

In wenigen Schritten lässt sich ein kostengünstiges Farbdisplay durch den FHEM Server über WiFi ansprechen. Dieser Beitrag war nur ein Einstieg, um das Fundament für zukünftiges zu schaffen. Dabei wurde auch komplett die Touch-Funktionalität außer Acht gelassen, was dieses Display eigentlich so interessant macht (dazu aber mehr in weiteren Beiträgen).
Für den Geduldigen empfehle ich das Display über aliexpress.com zu beziehen, da dort das Display um einiges günstiger ist.