Der folgende Beitrag wurde uns von unserem Leser Eberhard Werminghoff zugesandt. Viel Spaß beim Lesen und Nachbasteln.

Einleitung

Im vorangegangenen Teil 1 wurde ein e-Paper-Display in seinen Varianten gezeigt und mit dem ESP32 verbunden. Außerdem haben wir den Aufbau der Software für den Kalender abstrahiert. In einem zweiten Teil importierten wir den Flow in Node-Red und gestalteten die Ausgabe auf dem e-Paper-Display. Anschließend haben wir den ESP32 mit der ESPHome Software „betankt“ um die Anzeige in Betrieb nehmen zu können.

ESP8266 D1 Mini im AZ-Touch MOD und ESPHome

Ein Leser richtete dann den Wunsch an uns, das Beispiel mit einem AZ-Touch und einem ESP8266 D1 Mini zu zeigen. Der D1 Mini hat zu wenig verfügbare Ports, sodass Ports, die an sich für das Laden des Programms erforderlich sind, von den Schnittstellen des Displays belegt werden. Außerdem wurden wir im Netz fündig. Dort hat sich der Entwickler von ESPHome ebenfalls geäußert. Der Arbeitsspeicher des ESP8266 ist seiner Aussage nach zu klein, ohne es zu begründen.

Unser Bloggerkollege Gerald Lechner hat sich den ESPHome Quellcode dann mal angesehen. Er kam zu dem Schluss, dass in der Datei ili9341_display.cpp die Berechnung des Puffers mit Pixelbreite x Pixelhöhe = 240 x320 = 76800 in getBufferLength() zu viel für den ESP8266 auf dem D1 Mini sind, auch wenn nur Teile des Bildchirms gepuffert werden. Außerdem ist die Berechnung nicht ganz korrekt, da normalerweise zwei Byte pro Pixel verwendet werden. Fazit daraus ist, dass sich der ESP8266 in Verbindung mit dem Display im AZ-Touch nur in C/C++ über die Arduino IDE, nicht jedoch mit ESPHome programmieren lässt. Danke an Gerald Lechner an dieser Stelle.

Ersatzweise zeige ich nun wie unsere Anwendung in einen AZ-Touch mit einem ESP32 integriert wird.

Da mit dem AZ-Touch gleich ein ansprechendes Gehäuse zur Verfügung steht, erfreut es sich großer Beliebtheit. In diesem Teil stellen wir also die AZ-Touch Variante vor, setzen aber das aus Teil 1 und 2 über die Einrichtung und Inbetriebnahme von Node-Red, MQTT und ESP Home Geschriebene voraus. In den Teilen, die Node-Red, MQTT und den Google-Kalender betreffen ist nichts verändert worden und sind deshalb nach wie vor gültig. Wir modifizieren lediglich die YAML-Konfigurationsdatei. Zuerst erläutere ich ihnen die YAML-Konfiguration und beende mit der Betankung des AZ-Touch.

Zieldarstellung

Wenn Sie diesen 3. Teil durchgearbeitet, in eine YAML-Datei übernommen und an das AZ-Touch-Display übertragen haben, sieht ihr AZ-Touch wie folgt aus:

Was ist anders?

Der AZ-Touch besitzt ein Touch-Display, welches aus zwei Komponenten besteht: Zum einen aus einem TFT-Bildschirm von Nextion mit einem ILI9341 Chip und zum anderen aus dem zugehörenden Touch-Controller mit einem XPT2046 Chip.

Es gibt den AZ-Touch in den Versionen mit 2,4 inch oder mit 2,8 inch Bildschirmdiagonale. Dieser Beitrag behandelt die 2,8 inch Variante. Besonderheiten zur 2,4 inch-Version bestehen nur in den x und y Angaben der Display-Koordinaten. Der TFT-Bildschirm wird über eine SPI-Schnittstelle angesteuert. Ich habe an der AZ-Touch-„Verkabelung“ nichts verändert. Für diejenigen von Ihnen, die diesen Beitrag mit Einzelkomponenten nachbauen möchten, habe ich mit der nachstehenden Tabelle eine „virtuelle Verkabelung“ dargestellt. 

Die folgende Tabelle zeigt die internen Verknüpfungen des AZ-Touch zwischen den Komponenten Nextion Display und ESP32.

Nextion	ESP32	Verwendung
T_IRQ	GPOI2	Touch-Controller
T_DO	GPIO19	Touch-Controller mit MISO verbunden
T-_DIN	GPIO23	Touch-Controller mit MOSI verbunden
T_CS	GPIO14	Touchcontroller (chip select input)
T_CLK	GPIO18	Touch Controller (external clock input)
SDO (MISO)	GPIO19	SPI (Master Input, Slave Output)
LED	GPIO15	Steuerung der Hintergrundbeleuchtung
SCK	GPIO18	SPI (Serial Clock)
SDI (MOSI)	GPIO23	SPI (Master Output, Slave Input)
D/C	GPIO4	n.a.
RESET	GPIO22	n.a.
CS	GPIO5	SPI (Chip Select)
GND	GND	GND
VCC	3V3	3V3

Es gibt einige Schnittstellen, die doppelt genannt wurden, diese sind auf dem Board intern miteinander verbunden.

Das Vorstehende bedeutet, dass wir uns gegenüber der vorherigen Variante im Wesentlichen um die Bereiche Deep Sleep,  Anzeige (mit ILI9341) und Touchcontroller (XPT2046) sowie Bildschirmschoner kümmern müssen. 

Die Datei ili9341_ESP32.yaml

Die Datei ili9341_ESP32.yaml enthält die Konfiguration für unser Projekt und kann hier heruntergeladen werden. Ich gehe die gesamte Datei in Schritten durch und erläutere die einzelnen Abschnitte. Mit Abschnitt meine ich die Begriffe, die in der Datei ganz links – also ohne Einrückung – stehen. Bitte denken Sie daran, dass das hierarchische Einrücken strengen Regeln folgt. Immer 2 Leerzeichen aber keine Tabulatoren verwenden!

esphome

In diesem Abschnitt sind der name: und die Angaben unter platformio_options: hinzugekommen. 

 esphome:
   name: ili9341_esp32
   platform: ESP32
   board: nodemcu-32s
   platformio_options:
     upload_speed: 921600
     monitor_speed: 115200

logger

Dieser Abschnitt ist gegenüber der vorherigen Variante unverändert. Durch Weglassen der Angabe INFO würden weitere Informationen über die serielle Schnittstelle übertragen.

 logger:
   level: INFO

wifi

Der Begriff „!secret“ weist auf die Datei „secrets.yaml“ im gleichen Verzeichnis hin, in der die zugehörenden Zugangsdaten zu finden sind. Sie können auch die sicherheitsrelevanten Daten hier direkt eintragen. Z.B.: aus !secrets wifi_ssid wird  ssid: “TESTWLAN“

 wifi:
   ssid: !secret wifi_ssid
   password: !secret wifi_password
   fast_connect: true
   power_save_mode: none
   output_power: 20dB

mqtt

Auch hier hat sich gegenüber dem Teil 2 nichts Wichtiges geändert. Wenn der AZ-Touch ausgeschaltet wird, sendet der Broker (MQTT) über will_message: auf dem unter topic: angegebenen Pfad die unter payload: hinterlegte Nachricht. Ebenso wird verfahren, wenn der AZ-Touch wieder in Betrieb genommen wird: birth_message: wird auf dem unter topic: hinterlegten Pfad die unter payload: hinterlegte Nachricht absenden. Mit dem MQTT-Explorer können Sie sich die Nachrichten ansehen.

 mqtt:
   broker: !secret mqtt_ip
   username: !secret mqtt_user
   password: !secret mqtt_password
   id: mqtt_client
   birth_message:
     topic: ili9341_esp32/topic
     payload: 'Ich bin online' 
   will_message: 
     topic: ili9341_esp32/topic
     payload: 'Ich bin dann mal weg!' 

time

In diesem Abschnitt wird die aktuelle Uhrzeit von Timeservern geholt und später unten rechts auf dem Display angezeigt. Im Gegensatz zur stündlichen Aktualisierung der ePaper-Variante, wird hier die aktuelle Uhrzeit angezeigt. Die drei URLs werden wahlweise angetriggert, je nachdem, welcher zu erreichen ist. 

 time:
   - platform: sntp
     id: sntp_time
     timezone: Europe/Berlin
     servers:
       - 0.pool.ntp.org
       - 1.pool.ntp.org
       - 2.pool.ntp.org

sensor

Unter dem sensor-Abschnitt stehen die Sensoren, deren Ergebnis ein numerischer Wert ist. In diesem Projekt finden Sie lediglich die Angabe der Feldstärke des ankommenden WiFi-Signals in dBm

 sensor:
   #RSSI based on MAC-Address ESP32
   - platform: wifi_signal
     name: "WiFi Signal Sensor"
     update_interval: 30s 
     id: rssi_value_dsp

text_sensor

Wie der Name schon sagt, werden im Abschnitt text_sensor: alle nicht numerischen und nicht boolschen Sensoren zu finden sein.

 text_sensor: 
   #Aktueller Tag im Jahr
   - platform: template
     name: "Tag im Jahr"
     lambda: |-
       auto doy = id(sntp_time).now().strftime("%j");
       return {doy};
     id: tpl_doy
     update_interval: 10s  

Textsensor „Stunden Minuten“

In diesem Sensor wird im ersten Schritt aus time: (id: sntp_time) ein Zeitstempel ermittelt und anschließend in ein lesbares Format umgewandelt.

 text_sensor:
   ...
   - platform: template
     name: "Stunden Minuten"
     lambda: |-
       auto time  = id(sntp_time).now().strftime("%H:%M");
       return {time};
     id: tpl_hour_sec
     update_interval: 5s

Textsensor: MQTT-Empfangsdaten

In diesen Sensoren werden alle erforderlichen Daten, die vom MQTT-Broker empfangen werden, in eine id: gespeichert. Sie werden zu einem späteren Zeitpunkt für die Anzeige benötigt. 

Der Sensor ist nur ein Muster von insgesamt 22 Sensoren für MQTT.

 text_sensor:
   ...
   - platform: mqtt_subscribe
     id: kalenderwoche
     topic: /SmartHome/Display/Kalenderwoche

font

Zum Darstellen von Zeichen und Ziffern auf einem Display müssen die entsprechenden Informationen in Form eines Zeichensatzes bereitgestellt werden. 

 font:
   - file: 'fonts/arial.ttf'
     id: font1
     size: 15
     glyphs:
       ['&', '@', '!', ',', '.', '?', '"', '%', '(', ')', '+', '-', '_', ':', '°', '0',
        '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
        'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
        'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', 'a', 'b', 'c', 'd', 'e', 'f',
        'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
        'u', 'v', 'w', 'x', 'y', 'z','å', 'Ä', 'ä', 'Ö', 'ö', 'Ü', 'ü', '/']

Diese Zeichensätze liegen in ttf-Files im Ordner „fonts“ und werden im ttf-Format hinterlegt.

Windows-Benutzer finden die Zeichensätze im Verzeichnis:  „C:\Windows\Fonts“. Kopieren Sie die benötigten Zeichensätze in das Verzeichnis „fonts“ unterhalb von „esphome“. Es gibt Konfigurationen, die auf glyphs: verzichten, dann wird aber nur der reine ASCII-Zeichensatz verfügbar sein. Die deutsche Sprache kennt aber auch Umlaute, deshalb müssen Sie alle Zeichen, die Sie verwenden, in der oben vorgegebenen Art und Weise auflisten. Für jeden zu verwendenden Zeichensatz müssen Sie eine derartige Konfiguration anlegen.

Die Schriftart haben Sie  jetzt konfiguriert, jetzt kommen wir zur Schriftgröße. Wollen Sie z.B. die Schriftart Arial in den Schriftgrößen 15 und 18 Pixel verwenden, benötigen Sie zwei verschiedene Einträge unterhalb von font:

 font:
   - file: 'fonts/arial.ttf'
     id: font1
     size: 15
     glyphs:
       .......
   - file: 'fonts/arial.ttf'
     id: font3
     size: 18
     glyphs:
     ...........

color

Unser e-Paper Display aus Teil 1 und Teil 2 kannte nur schwarz oder weiß. Das nun verwendete TFT-Display hat natürlich die Möglichkeit, Schriften in Farbe darzustellen. Die zu verwendenden Farben müssen jedoch vorher unter color: definiert werden. 

 color:
   - id: my_red
     red: 100%
     green: 0%
     blue: 0%
  
   - id: my_grey
     red: 70%
     green: 70%
     blue: 70%
     
   - id: my_yellow
     red: 100%
     green: 100%
     blue: 0%

Wir können die definierten Farben später unter dem ID-Namen (z.B.: my_red) ansprechen. Die Farben werden klassisch im RGB-Format in „%“ angegeben.

output

Das TFT-Display hat eine Hintergrundbeleuchtung, die über den PIN 15 des ESP gesteuert wird. 

 output:
   - platform: ledc
     pin: 15
     id: gpio_15_backlight_pwm
   - platform: gpio
     pin: 15
     id: gpio_backlight_off
     inverted: yes  

Unter platform: ledc wird ein LEDC PWM Kanal als OUTPUT definiert. platform: gpio definiert ein GPIO als Ausgang, zusätzlich wird eine Invertierung des Ausganges angefordert.

light

Dieser Teil steuert den Ausgang der Hintergrundbeleuchtung auf dem GPIO15 mit der id: gpio_15_backlight_pwm. Die Bedingung on_turn_off: wird über das off getriggert und schaltet sich  nach 20s wieder an. Beachten Sie, dass im Kapitel vorher das inverted: auf yes steht. Das hat zur Folge, dass ein turn_off die LED der Hintergrundbeleuchtung für 20s einschaltet.

 light:
   - platform: monochromatic
     output: gpio_15_backlight_pwm
     name: "Touchdisplay Licht"
     id: back_light
     restore_mode: ALWAYS_OFF
     on_turn_off:
       then:
         - delay: 20s
         - light.turn_on:
             id: back_light

spi

Nun geht es an die SPI-Schnittstelle des Displays.

 # Für ESP32
 spi:
   clk_pin: 18 
   mosi_pin: 23
   miso_pin: 19
   id: ili9341_spi

Die klassische SPI-Schnittstelle kennt nur die drei o.g. Verbindungen. Der Identifier
id: ili9341_spi wird für die nachfolgende Definition diese Schnittstellenbeschreibung übernehmen.

display

 display:
   - platform: ili9341
     model: TFT_2.4
     spi_id: ili9341_spi
     cs_pin: 5
     dc_pin: 4
     auto_clear_enabled: true
     update_interval: 20s
     reset_pin: 22
     rotation: 90
     lambda: |-

platform: ili9341 definiert die zu konfigurierenden Positionen. Was unbedingt notwendig ist (required) und was optional angegeben werden kann ist hier zu finden.

model: kennt nur zwei Beschreibungen, entweder ein TFT-Display mit einer Diagonalen von 2.4 inch oder das Display des M5STACK. Obwohl wir ein 2.8 inch Display benutzen, können wir das Modell TFT_2.4 verwenden, da auch die 2.8 Variante mit einem ILI9341 betrieben wird. Wir benutzen das Display im Querformat und haben so nun 320x240 Pixel. Sie müssen bei der Positionierung von Elementen in Ihren Projekten die Pixelanzahl des Displays beachten und anpassen. 

spi_id: Hier greifen wir die SPI-Definition mit der id: ili9341_spi aus dem vorherigen Kapitel wieder auf und integrieren diesen in die display: Definition.

auto_clear_enabled: Verständlich, dass wir das Display beim Einschalten zurücksetzen, daher: true

update_interval: Das Display wird alle 20s aktualisiert.

rotation: Hiermit können Sie dem Display mitteilen, ob Sie es hochkant oder quer betreiben wollen. Wir drehen die Darstellung um 90° und erhalten eine Darstellung im Querformat. Drehen wir auf 180° wird die Darstellung hochkant und fehlerhaft, bei 270 steht die Anzeige auf dem Kopf - also wieder zurück auf 90°.

lambda: Im vorherigen 2. Teil hatte ich bereits darauf hingewiesen, dass in ESPHome die Möglichkeit besteht, C++ Code einzuschleusen. Ich beschränke mich deshalb auf die Möglichkeiten, die ich hier genutzt habe. Betrachten wir die Zeile:

 it.print(8, 90, id(font3),id(red),id(wochentag1).state.c_str());

it.print bezeichnet die Aktion, dahinter stehen Formatierungsangaben. Allgemein könnte man die Formatierung wie folgt angeben:

(x-Wert der Anzeige, y-Wert der Anzeige, Schriftart, Schriftfarbe, darzustellender Wert)

Der x-Wert kann nur Werte annehmen, die sich aus der Breite des Displays ergeben. Der y-Wert hängt von der Höhe des Displays ab. Für Schriftart und Schriftfarbe wird die id() aufgerufen. Der Wert für den Wochentag muss umformatiert werden, weil er in der vom MQTT-Broker angelieferten Form nicht verwendet werden kann.

 it.printf(160,239, id(font1),TextAlign::BOTTOM_CENTER, "Version: 2.0");

Sehr komfortabel sind die Möglichkeiten unter it.printf(). Die Angabe des x-/ y-Wertes dient für die Angabe hinter TextAlign:: als Ausgangspunkt. Danach folgen entweder TOP_ oder BOTTOM_ (oben oder unten). Die folgende Schrift orientiert sich entweder an einer gedachten Linie oberhalb der Schrift oder einer Linie unterhalb. Dazu gesellt sich die Schriftorientierung bezogen auf den angegeben Punkt. Die Schriftorientierung ist links- (LEFT) oder rechts-bündig (RIGHT) oder zentriert (CENTER). Hinzu kommt eine umfangreiche Formatierung der darzustellenden Werte. Schauen Sie mal in der Funktion printf() der C-Bibliothek nach.

xpt2046

Dieser Abschnitt gehört zum Touch-Decoder. Dieser liefert bei Berührung die Hoch- und Rechtswerte des berührten Punktes. Ziel des Bildschirmschoners ist die Vermeidung des Einbrennens des Bildschirms. Die Gefahr ist hier gegeben, da Informationen immer an den gleichen Stellen angezeigt werden und dort stehen bleiben. 

 xpt2046:
   id: touchscreen
   cs_pin: 14
   irq_pin: 2
   update_interval: 50ms
   report_interval: 1s
   threshold: 400
   dimension_x: 320
   dimension_y: 240
   calibration_x_min: 256
   calibration_x_max: 3839
   calibration_y_min: 180
   calibration_y_max: 3640
   swap_x_y: yes
   on_state:
     - lambda: |-
         if (touched)
           ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%d",
               id(touchscreen).x,
               id(touchscreen).y,
               id(touchscreen).x_raw,
               id(touchscreen).y_raw
               );
           auto call = id(back_light).turn_off();
           call.perform();

Normalerweise müsste der Bildschirm kalibriert werden. Da wir ihn aus dem Schlaf durch einfaches Antippen des Displays aufwecken, ist es unerheblich auf welchen Punkt wir drücken. Der gesamte Schirm ist aktiv.

Programm hochladen

Für das Hochladen müssen bestimmte Voraussetzungen erfüllt sind:

1. ESPHome ist installiert (Teil1)
2. Sie haben bereits den Flow nach Node-Red importiert und den Google-Kalender importiert (Teil2).
   

Wechseln Sie nun in das Verzeichnis, welches Sie für ESPHome eingerichtet haben:

 C:\>I:
 I:\>cd esphome
 I:\ESPHome>

Öffnen Sie dann die Datei ili9341_ESP32.yaml, die Sie hier herunterladen können. Editieren Sie alle mit !secret enthaltenden Zeilen. Ein Beispiel erläutert das:

Aus 

 ssid: !secret wifi_ssid

wird:

 ssid: "musterwlan"

Abschließend vergessen Sie nicht zu speichern. Nun verbinden Sie den AZ-Touch mit der USB-Schnittstelle und beginnen die Konvertierung mit der Zeile:

 I:\ESPHome>esphome run ili9341_ESP32.yaml

Haben Sie Geduld! Je nach Rechner kann es etwas dauern. Dann zeigen sich folgende Zeilen:

 ==============00==== [SUCCESS] Took 25.38 seconds =============================
 ←[32mINFO Successfully compiled program.←[0m
 Found multiple options, please choose one:
   [1] COM13 (Silicon Labs CP210x USB to UART Bridge (COM13))
   [2] COM3 (HP hs2340 HSPA+ Mobile Broadband Module Device Management (COM3))
   [3] COM4 (HP hs2340 HSPA+ Mobile Broadband Module Device Management (COM4))
   [4] COM5 (HP hs2340 HSPA+ Mobile Broadband Module Modem)
 (number):

Wählen Sie die Nummer „[1]“ aus. Wenn Sie diese oder ähnlich aussehende Zeilen sehen, ist die Software hochgeladen worden. 

 ←[32mINFO Successfully uploaded program.←[0m
 ←[32mINFO Starting log output from COM13 with baud rate 115200←[0m
 [19:28:19][I][logger:214]: Log initialized
 [19:28:19][I][app:029]: Running through setup()...
 [19:28:20][I][wifi:245]: WiFi Connecting to 'BUEWLAN'...
 [19:28:22][I][wifi:502]: WiFi Connected!
 [19:28:22][I][mqtt:175]: Connecting to MQTT...
 [19:28:22][I][mqtt:215]: MQTT Connected!
 [19:28:22][I][app:062]: setup() finished successfully!
 [19:28:22][I][app:102]: ESPHome version 2022.1.1 compiled on Apr  6 2022, 19:20:06

Wenn der Bildschirmschoner gegriffen hat und Sie das Display durch ein Antippen wieder aktivieren, sehen sie eine Zeile die dieser hier ähnelt:

 [20:40:28][I][cal:306]: x=161, y=128, x_raw=2175, y_raw=1928

Dort sind die x/y-Koordinaten des Punktes auf dem Bildschirm aufgezeigt, den Sie angetippt haben. x_raw und y_raw sind für die Kalibrierung des Bildschirms erforderlich, interessieren uns hier aber nicht. Damit sollte das Display die gewollten Informationen anzeigen. Glückwunsch!

Möglicher Fehler

Nach der ersten Inbetriebnahme des AZ-Touch MOD zeigte der Bildschirm außer einem hellen Leuchten nichts an. Nach langem Suchen fiel mir auf, dass der ESP32 nicht tief genug im Sockel saß. Die Lötpunkte der Sockelleiste des D1-Mini waren zu hoch und verhinderten einen richtigen Sitz im Sockel auf der anderen Seite der Platine. Nachdem ich die Lötpunkte etwas abgekniffen hatte, lief die Anzeige fehlerfrei.

Fazit

Sie haben nun einen Exkurs über ESPHome verfolgt und hoffentlich festgestellt, dass Ihnen gerade im Zusammenspiel Node-Red -> MQTT -> ESPHome ein einfaches Werkzeug zur Anzeige von Daten in die Hand gegeben wurde. Auch wenn Sie Daten aus anderen Systemen (z.B. von einem Homeserver) anzeigen wollen, ist die Nutzung von MQTT und dieser ESPHome-Anzeige eine sehr gute Lösung. Inhalte, die über einen längeren Zeitraum konstant sind, eignen sich für ein e-Paper-Display. Anzuzeigende kurzlebige Daten sind eher etwas für ein TFT-Display, so wie es hier vorgestellt wurde.

Teil 1, Teil 2