Vom LCD zum Touchscreen: Meine Erfahrungen mit dem ESP32-2432S028R und LovyanGFX

Einen TFT Touchscreen mit einem ESP32 zu betreiben war schon länger ein Wunsch von mir. Der günstige Preis bei Ebay war dann der Auslöser für den Kauf.

Warum dieses Projekt

Dieses Projekt entstand aus dem Wunsch erste Erfahrungen mit TFT- und Touchscreen-Technik auf Basis eines ESP32 zu sammeln.

Bisher wurden in meiner Hausautomation einfache 20×4-Zeichen-LCD-Displays eingesetzt. Diese sind zuverlässig und praktisch, bieten aber nur begrenzte Möglichkeiten bei der Darstellung und Bedienung.

Mit dem ESP32-2432S028R (2,8-Zoll-TFT-Touchscreen) möchte ich den nächsten Schritt gehen und ausprobieren, welche Möglichkeiten moderne grafische Benutzeroberflächen bieten.

Das Ziel dieses Projektes ist es, die Grundlagen der TFT- und Touchscreen-Technik kennenzulernen und später die vorhandenen LCD-Bedieneinheiten meiner Hausautomation durch leistungsfähigere TFT-Touchscreens zu ersetzen.

Dabei geht es nicht nur um die Anzeige von Informationen wie Temperatur, Wetter oder Anlagenzustände, sondern auch um eine einfachere und intuitivere Bedienung der verschiedenen Funktionen im Haus.

Dieser Artikel beschreibt meine Erfahrungen, die ersten Schritte, die aufgetretenen Schwierigkeiten und die Lösungen, die ich während der Entwicklung gefunden habe.

Die Hardware

Inhalt der Lieferung war überschaubar: das ESP32/TFT-Board eine Blende mit Schrauben und ein Stift für den Touchscreen. Im Nachhinein stellte sich als großes Glück heraus, dass dem Bundle auch ein 4-poliger Stecker beilag. Dazu später mehr.

Von Haus aus ist ein Programm aufgespielt, das ein paar Animationen enthielt.

Die Programmierung meiner ESP8266 / NodeMCUs und nun auch des ESP32 erfolgt bei mir mittels Arduino IDE. Zuerst habe ich in den Einstellungen der Arduino IDE die zusätzliche Boardverwalter-URLs ergänzt: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json.

Anschließend habe ich das Board ausgewählt, in diesem Fall:

Werkzeuge – Board – ESP32 – ESP32 Dev Module

Je nachdem was jetzt programmiert wird, sind weitere Bibliotheken erforderlich. Die Arduino IDE meldet sich, wenn etwas fehlen sollte.

Treiber und erste Probleme mit den Bibliotheken

Spätestens wenn der ESP32 am USB-Port angeschlossen ist, wird es Zeit, sich um die benötigten Treiber zu kümmern. Aus der Bestellung ging das nicht hervor und der Lieferung lagen keinerlei Informationen bei. Google ist da gesprächiger. Folgende Treiber kommen häufig zum Einsatz:

Treiber	Typ
ILI9341	häufig bei 240×320 TFT
ST7789	häufig bei kleinen TFT
ST7796	größere TFT
ILI9488	480×320 TFT
GC9A01	runde Displays

Als Erstes bin ich auf die TFT_eSPI Bibliothek gestoßen. Der Inhalt ist, vorsichtig ausgedrückt, sehr unübersichtlich. Ein kurzer Auszug aus den Konfigurationsmöglichkeiten:

bool "ST7789 - 2"
help
Minimal configuration option, define additional parameters below for this display
config TFT_R61581_DRIVER
bool "R61581"
config TFT_RM68140_DRIVER
bool "RM68140"
config TFT_ST7796_DRIVER
bool "ST7796"
config TFT_SSD1351_DRIVER
bool "SSD1351"
config TFT_SSD1963_480_DRIVER
bool "SSD1963_480"
config TFT_SSD1963_800_DRIVER
bool "SSD1963_800"

Die Vielzahl der Konfigurationsmöglichkeiten war für mich als Hobbyprogrammierer zunächst sehr unübersichtlich. Da muss etwas anderes her. Irgendwann habe ich das gefunden.

LovyanGFX – die Lösung für mein ESP32-TFT-Projekt

#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include "lgfx_ESP32_2432S028.h"
#include <lgfx/v1/lgfx_fonts.hpp>

Und das war die Lösung – sie funktionierte auf Anhieb. Den TFT verwende ich im Querformat. Kann im void setup() mit

tft.setRotation(0);

festgelegt werden.

Leider lässt sich der Touchscreen nicht automatisch im Querformat betreiben. Das hab ich im Loop() angepasst, hier wird der Touchscreen abgefragt (dazu unten mehr) und dann je nach Bedarf gehandhabt.

In meinem Fall gibt es zunächst nur zwei Bedienfelder:

• einen Button für Licht
• einen Button für Kühlung

Die Touchabfrage erfolgt über:

lgfx::touch_point_t tp;
if (tft.getTouch(&tp)) {

Hier erfolgt die Umrechnung und Anpassung der Touchscreen an den TFT

int x = 320 - tp.y - 40; // + = links / - = rechts
int y = 240 - tp.x + 30; // + = hoch / - = runter

Dies ist der Bereich, in dem das Touchpanel den Tastendruck erkennt.

if (x >= 165 && x <= 315 && y >= 190 && y <= 250) {button_kuehl();}
if (x >= 48 && x <= 150 && y >= 190 && y <= 250) {button_licht();}

Touchscreen – Kalibrierung und Anpassung der Koordinaten

Die Button-Werte für Lage und Größe:

tft.fillRoundRect(165, 185, 150, 50, 8, kuehlfarbe2);
tft.drawRoundRect(165, 185, 150, 50, 8, TFT_WHITE);
draw_kuehl_icon_farbe(tft, 215, 195, kuehltempfarbe);

stimmen „NICHT“ automatisch mit den Werten des Touchscreen überein. Der TFT ist x =240 und Y = 320, es werden aber auch x Werte über 245 oder sogar 250 ausgegeben.

Der Touchcontroller arbeitet unabhängig vom Display und liefert Rohwerte. Diese müssen durch Kalibrierung und Transformation an die Displaykoordinaten angepasst werden:

// Serial.print("RAW X=");
// Serial.print(tp.x);
// Serial.print(" RAW Y=");
// Serial.println(tp.y);

im Loop ist diese Ausgabe sehr hilfreich. Der mitgelieferte Stift für den Touchscreen hat da gute Dienste geleistet. Es war eine manuelle Anpassung der Buttonabfrage auf dem Touchscreen nötig gewesen. Die Anpassung erfolgte durch manuelles Verschieben und Testen der Buttonbereiche.

Erstellen der Benutzeroberfläche – Felder, Farben und Texte

Das Erstellen der Feldern mit Hintergrundfarbe und Text ist mit LovyanGFX einfach.

Ein Beispiel für zwei Anzeige-Felder:

// schaltnetzteil feld1
tft.fillRoundRect(3, 87, 105, 67, 8, netzteilfarbe1);
tft.drawRoundRect(3, 87, 105, 67, 8, TFT_WHITE);
// schaltnetzteil feld2
tft.fillRoundRect(110, 67, 105, 87, 8, netzteilfarbe1);
tft.drawRoundRect(110, 67, 105, 87, 8, TFT_WHITE);
tft.drawString("Oberfl.", 10, 100);
tft.drawString("AbLuft.", 10, 125);
tft.drawString(tempstrloben + " C", 137, 100);
tft.drawString(tempstrlluft + " C", 137, 125);

Die Darstellung von Text funktioniert grundsätzlich problemlos. Schade ist, das die Schriftgröße und Zeichendicke nur eingeschränkt (Größe / fette Schrift) benutzt werden können. Um die Schrift fetter darzustellen musste ich den Umweg über leichtes versetzen einer 2. Ausgabe gehen. Durch die minimale Verschiebung entsteht der Eindruck einer kräftigeren Schrift.

tft.setFont(&fonts::Font2);
tft.setTextSize(1);
tft.setTextColor(TFT_BLACK);
tft.drawString(String("PWM ") + pwm, 10, 163);
tft.drawString(String("PWM ") + pwm, 10, 164);

Farben

Mit den vordefinierten Farben wie z.B. TFT_WHITE oder TFT_DARKGREY hatte ich Schwierigkeiten. Wenn ich auf die Hintergrundfarbe z.B TFT_WHITE eine andere Farbe gelegt habe, z.B TFT_ORANGE. Es entstanden teilweise Farbmischungen, deren Ursache ich nicht nachvollziehen konnte.

Besser bin ich mit tft.fillRoundRect(165, 185, 150, 50, 8, 0XCFFF) gefahren, das war dann auch ein Hellblau.

Das Endergebnis – Oberfläche, Icons und Einbindung eigener Grafiken

So sieht das Endergebnis aus. Es hat mich positiv überrascht. Obwohl das TFT nur eine Auflösung von 240×320 Pixeln besitzt, reicht die Darstellung für meine Anwendung vollkommen aus.

Die Oberfläche bietet genügend Platz, um wichtige Informationen übersichtlich darzustellen und Bedienelemente für die Hausautomation unterzubringen.

Icons und eigene Grafiken

Die Icons wurden von der KI erstellt und reichen für mich aus. Im Programm werden diese mit

#include "licht_icon_farbe.h"
#include "kuehl_icon_farbe.h"
#include "wlan_icon.h"
#include "sonnenaufgang.h"
#include "sonnenuntergang.h"

eingebunden. Dadurch bleibt das Hauptprogramm übersichtlich und eine Wiederverwendung ist möglich und in einer eigenen Datei hinterlegt:

z. B. das WLAN-Icon:

#ifndef CC_H
#define CC_H
#include <LovyanGFX.hpp>
// WLAN Icon ca. 20% kleiner
// x, y = unterer Mittelpunkt (Basis vom Symbol)
static inline void draw_wlan_icon(LGFX &tft, int x, int y)
{
uint16_t color = 0xFB00 ; // 0x0000;
// Basis-Punkt (4 -> 3)
tft.fillCircle(x, y, 3, color);
int x1 = 200; // alt 200;
int y1 = 340;
tft.drawArc(x, y, 4, 3, x1, y1, color);
tft.drawArc(x, y, 7, 6, x1, y1, color);
tft.drawArc(x, y, 10, 9, x1, y1, color);
tft.drawArc(x, y, 14, 12, x1, y1, color);}
#endif

Die Tore zur Außenwelt – I2C und Anschluss weiterer Sensoren

Leider ist die Anzahl der freien GPIO sehr limitiert. Mein Lieblingswerkzeug der I2C Bus ist vorhanden, jemand hat mitgedacht und gleich einen verkabelten Stecker dem Bundle beigelegt, dort habe ich ein Thermometer DS1621 und probeweise einen PCF8574 angeschlossen. Der ESP32 hat zwar interne Pullups, ich empfehle aber externe 4,7K Widerstände.

Die Buchse CN1 liefert

• GND
• 3.3V
• SDA
• SCL

Die I²C-Pins sind dabei:

Wire.begin(27,22);// SCL, SDA

Den I2C-Takt habe ich vorsichtshalber etwas reduziert.

Wire.setClock(50000);

Zusammenfassung und Fazit

Für den Preis ist das ESP32-2432S028R ein sehr gutes Werkzeug.

Wenn die Arduino IDE eingerichtet ist, die Bibliotheken und Treiber installiert sind und man sich etwas eingearbeitet hat, macht es viel Spaß, mit diesem Board zu arbeiten.

Für mich ist es ein guter Einstieg in die Welt der TFT-Displays und Touchscreen-Bedienung.

Besonders interessant ist die Möglichkeit, meine bisher eingesetzten 20×4-LCD-Bedieneinheiten meiner Hausautomation später durch moderne TFT-Touchscreens zu ersetzen.

Was würde ich beim nächsten ESP32-TFT-Projekt anders machen?

Nach den Erfahrungen mit diesem Projekt würde ich einige Dinge beim nächsten Aufbau anders planen.

Als Erstes würde ich mir vor dem Programmieren noch genauer überlegen, welche Funktionen das Gerät später wirklich haben soll. Während der Entwicklung kamen immer wieder neue Ideen dazu, wodurch sich der Aufbau und auch der Code mehrfach geändert haben.

Bei der Hardwareauswahl würde ich noch stärker darauf achten, welche Anschlüsse bereits durch Display, Touch und andere Komponenten belegt sind. Gerade beim ESP32 sind die verfügbaren GPIO-Pins zwar zahlreich, aber nicht jeder Pin ist für jede Aufgabe geeignet.

Auch bei der Software würde ich die Struktur von Anfang an stärker aufteilen. Eine klare Trennung von Display, Touch, Sensoren und Kommunikation würde spätere Erweiterungen einfacher machen.

Trotzdem war genau dieser Lernprozess ein wichtiger Teil des Projekts. Viele Erkenntnisse entstehen erst beim Ausprobieren, Testen und Verbessern. Für mich war das Projekt deshalb nicht nur der Bau eines TFT-Displays, sondern vor allem eine praktische Möglichkeit, mehr über den ESP32, Touch-Bedienung und die Programmierung mit LovyanGFX zu lernen.

Beim nächsten Projekt würde ich also nicht unbedingt alles anders machen – aber vieles besser vorbereiten.

---

Über den Autor

Dieses Projekt wurde entwickelt von:
Michael
Deutschland

Projekt: ESP32 TFT Touchscreen Hausautomation
Juli 2026

Für Fragen und Anregungen: esp32-projekte@gmx.de

Hinweis / Haftungsausschluss

Die auf dieser Seite beschriebenen Erfahrungen, Bewertungen und Meinungen beruhen ausschließlich auf meinen persönlichen Tests und meinem eigenen Einsatz des beschriebenen ESP32-Boards sowie der verwendeten Hard- und Software. Sie stellen meine subjektive Einschätzung zum Zeitpunkt der Veröffentlichung dar und erheben keinen Anspruch auf Vollständigkeit oder allgemeine Gültigkeit.

Alle Angaben wurden nach bestem Wissen und Gewissen erstellt. Für die Richtigkeit, Vollständigkeit oder Aktualität der Informationen wird jedoch keine Gewähr übernommen. Die Umsetzung der beschriebenen Schaltungen, Programme oder Änderungen erfolgt auf eigene Verantwortung. Eine Haftung für Schäden, Datenverlust oder Folgeschäden, die durch die Nutzung der bereitgestellten Informationen entstehen, ist ausgeschlossen, soweit dies gesetzlich zulässig ist.

Die Nennung von Produkt-, Firmen- oder Markennamen erfolgt ausschließlich zur Beschreibung und Identifikation der verwendeten Produkte. Alle Marken- und Warenzeichen sind Eigentum ihrer jeweiligen Inhaber.