#cheapyellowdisplay

Das Cheap Yellow Display (ESP32-2432S028) besitzt auf der Vorderseite ein kleines, oft übersehenes Bauteil: einen Fotowiderstand – kurz LDR (Light Dependent Resistor).

Ein LDR verändert seinen Widerstand abhängig von der Umgebungshelligkeit. Je heller es ist, desto geringer wird sein Widerstand – in dunkler Umgebung steigt er entsprechend an. Über einen analogen Eingang des ESP32 lässt sich diese Änderung als Messwert erfassen.

https://youtu.be/8sCQkLe3JlM

In der Praxis kann man dieses Feature sinnvoll nutzen, um das Display automatisch an die Umgebungshelligkeit anzupassen. So bleibt der Bildschirminhalt bei direkter Sonneneinstrahlung gut ablesbar, während das Display in dunkler Umgebung gedimmt werden kann – ideal für Dashboard- oder Smart-Home-Projekte.

In diesem Beitrag zeige ich dir Schritt für Schritt, wie du den LDR auf dem Cheap Yellow Display ausliest und in deinem Projekt verwendest.

Cheap Yellow Display - ESP32-2432S028 - Vorderseite

LDR am Cheap Yellow Display - ESP32-2432S028

Hinweis: Der LDR ist fest mit GPIO34 verbunden. GPIO34 und GPIO35 gehören beim ESP32 zu den reinen ADC-Eingängen und unterstützen keine OUTPUT-Funktionalität.

Was ist ein LDR überhaupt?

Ein LDR (Light Dependent Resistor) ist ein lichtabhängiger Widerstand. Er verändert seinen elektrischen Widerstand abhängig von der Helligkeit der Umgebung.

Das Prinzip ist einfach:

- Viel Licht → niedriger Widerstand - Wenig Licht → hoher Widerstand

Der LDR selbst erzeugt kein Signal. Er ist lediglich ein variabler Widerstand. Damit der ESP32 diesen Helligkeitswert erfassen kann, wird der LDR auf dem Board in einer Spannungsteiler-Schaltung betrieben.

Beim Cheap Yellow Display ist der LDR bereits fest mit GPIO34 (ADC1) verbunden. Eine zusätzliche Verdrahtung ist also nicht notwendig.

LDR am Cheap Yellow Display - ESP32-2432S028

LDR am Cheap Yellow Display auslesen

Der LDR auf dem Cheap Yellow Display (ESP32-2432S028) ist fest mit GPIO34 (ADC1) verbunden. Wir lesen den Helligkeitswert über den integrierten Analog-Digital-Wandler des ESP32 aus.

Der folgende Sketch gibt den Messwert nur dann aus, wenn sich dieser merklich ändert. Dadurch vermeiden wir unnötige serielle Ausgaben.

#define ldrPin 34 // LDR am GPIO34 // letzter gelesener Wert vom LDR int lastLDRValue = 0; // Zeitpunkt (in ms) des letzten Lesevorgangs unsigned long lastRead = 0; // Pause zwischen zwei Lesezyklen (in Millisekunden) const int PAUSE = 50; void setup() { // Start der seriellen Kommunikation mit 9600 Baud Serial.begin(9600); // ADC-Dämpfung setzen // siehe: https://docs.espressif.com/projects/arduino-esp32/en/latest/api/adc.html#analogsetattenuation analogSetAttenuation(ADC_0db); } void loop() { // aktuelle Millisekunden seit Start/Reset des Mikrocontrollers ermitteln unsigned long currentMillis = millis(); // prüfen, ob die definierte Pause abgelaufen ist if (currentMillis > (lastRead + PAUSE)) { // Zeitpunkt des letzten Lesevorgangs aktualisieren lastRead = currentMillis; // analogen Wert vom LDR (GPIO34) einlesen int currentLDRValue = analogRead(ldrPin); // nur reagieren, wenn sich der Wert deutlich verändert hat (>= 5) if (abs(currentLDRValue - lastLDRValue) >= 5) { // Ausgabe des Messwertes über die serielle Schnittstelle // kann z.B. im seriellen Plotter als Liniendiagramm dargestellt werden Serial.println(currentLDRValue); // neuen Wert als Referenz speichern lastLDRValue = currentLDRValue; } } }

Die gelesenen Werte können wir nun im seriellen Monitor der Arduino IDE auslesen oder auch im seriellen Plotter in einem Liniendiagram visualisieren lassen.

Ausgabe der Daten vom LDR im seriellen Monitor der Arduino IDE

visualisieren der Daten vom LDR im seriellen Plotter der Arduino IDE

Anzeigen des Wertes vom LDR auf dem Display des ESP32-2432S028 (CYD)

Nachdem wir den LDR über analogRead() auslesen können, soll der Messwert nun direkt auf dem Display des Cheap Yellow Display angezeigt werden.

CYD - Anzeige des Wertes vom LDR auf dem Display

CYD - Anzeige des Wertes vom LDR auf dem Display - Sensor abgedunkelt

Hierfür verwende ich LVGL in Kombination mit der TFT_eSPI-Bibliothek. Der aktuelle Helligkeitswert wird dabei:

- als numerischer Wert angezeigt - zusätzlich visuell über einen Kreis dargestellt, dessen Helligkeit sich abhängig vom LDR-Wert verändert #include #include #define TFT_HOR_RES 240 #define TFT_VER_RES 320 #define TFT_ROTATION LV_DISPLAY_ROTATION_270 #define DRAW_BUF_SIZE (TFT_HOR_RES * TFT_VER_RES / 10 * (LV_COLOR_DEPTH / 8)) uint32_t draw_buf; #define COLOR_BG lv_color_hex(0x000000) // Hintergrund: Schwarz #define COLOR_WHITE lv_color_hex(0xFFFFFF) // Weiß #define COLOR_YELLOW lv_color_hex(0xFDD835) // Gelb #define ldrPin 34 lv_obj_t *ldrValueLabel; int lastLDRValue = 0; unsigned long lastRead = 0; const int PAUSE = 250; lv_obj_t *ldrCircle; void setup() { Serial.begin(9600); analogSetAttenuation(ADC_0db); lv_init(); lv_display_t *disp = lv_tft_espi_create( TFT_HOR_RES, TFT_VER_RES, draw_buf, sizeof(draw_buf)); lv_display_set_rotation(disp, TFT_ROTATION); lv_obj_t *scr = lv_screen_active(); lv_obj_set_style_bg_color(scr, COLOR_BG, 0); lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0); lv_obj_set_style_pad_all(scr, 12, 0); lv_obj_set_scrollbar_mode(scr, LV_SCROLLBAR_MODE_OFF); lv_obj_t *ldrDescLabel = lv_label_create(scr); lv_label_set_text(ldrDescLabel, "LDR"); lv_obj_set_style_text_color(ldrDescLabel, COLOR_YELLOW, 0); lv_obj_set_style_text_font(ldrDescLabel, &lv_font_montserrat_28, 0); lv_obj_align(ldrDescLabel, LV_ALIGN_TOP_MID, 0, 0); ldrValueLabel = lv_label_create(scr); lv_label_set_text(ldrValueLabel, "0"); lv_obj_set_style_text_color(ldrValueLabel, COLOR_WHITE, 0); lv_obj_set_style_text_font(ldrValueLabel, &lv_font_montserrat_28, 0); lv_obj_align(ldrValueLabel, LV_ALIGN_TOP_MID, 0, 50); ldrCircle = lv_obj_create(scr); lv_obj_set_size(ldrCircle, 80, 80); lv_obj_set_style_radius(ldrCircle, LV_RADIUS_CIRCLE, 0); lv_obj_set_style_bg_color(ldrCircle, COLOR_YELLOW, 0); lv_obj_set_style_border_width(ldrCircle, 0, 0); lv_obj_set_style_bg_opa(ldrCircle, LV_OPA_0, 0); lv_obj_align(ldrCircle, LV_ALIGN_CENTER, 0, 40); setOpacity(0); } void setOpacity(int currentLDRValue) { int opa = map(currentLDRValue, 0, 1023, 255, 0); opa = constrain(opa, 0, 255); lv_obj_set_style_bg_opa(ldrCircle, (lv_opa_t)opa, 0); } void loop() { lv_tick_inc(5); lv_timer_handler(); unsigned long currentMillis = millis(); if (currentMillis > (lastRead + PAUSE)) { lastRead = currentMillis; int currentLDRValue = analogRead(ldrPin); if (abs(currentLDRValue - lastLDRValue) >= 5) { lastLDRValue = currentLDRValue; Serial.println(currentLDRValue); String s = String(currentLDRValue, DEC); lv_label_set_text(ldrValueLabel, s.c_str()); setOpacity(currentLDRValue); } } delay(5); } Hinweis zur Programmierung mit LVGL

Die grundlegende Einrichtung des Cheap Yellow Display (ESP32-2432S028) in Kombination mit der LVGL-Bibliothek habe ich bereits ausführlich anhand eines kleinen Dashboards erklärt.

Dort zeige ich unter anderem:

- Einrichtung von LVGL - Einbindung der TFT_eSPI-Bibliothek - Display-Rotation und Buffer-Konfiguration - Erstellen von Labels und grafischen Elementen - Grundlegende Struktur mit lv_timer_handler() und lv_tick_inc()

Falls du neu mit LVGL auf dem CYD arbeitest, empfehle ich dir zunächst einen Blick in meine YouTube-Playlist zu diesem Thema: ESP32 CYD Display mit LVGL programmieren - Komplettkurs

In diesem Beitrag konzentrieren wir uns ausschließlich auf das Auslesen und Visualisieren des LDR-Wertes.

Dashboard-Helligkeit automatisch mit dem LDR regulieren

Nachdem wir den LDR-Wert auslesen und visualisieren können, lässt sich dieser nun verwenden, um die Helligkeit eines Dashboards automatisch anzupassen.

Dashboard am CYD mit normaler Helligkeit

Dashboard am CYD mit abgedunkelten LDR

In diesem Beispiel simulieren wir ein kleines Dashboard mit:

- Temperaturwert - Statusanzeige - Hintergrundfläche

Je nach Umgebungshelligkeit wird dabei die gesamte Display-Helligkeit bzw. die Hintergrund-Deckkraft angepasst.

#include #include #define TFT_HOR_RES 240 #define TFT_VER_RES 320 #define TFT_ROTATION LV_DISPLAY_ROTATION_270 #define DRAW_BUF_SIZE (TFT_HOR_RES * TFT_VER_RES / 10 * (LV_COLOR_DEPTH / 8)) uint32_t draw_buf; #define COLOR_BG lv_color_hex(0x000000) #define COLOR_WHITE lv_color_hex(0xFFFFFF) #define COLOR_GREEN lv_color_hex(0x4CAF50) #define COLOR_RED lv_color_hex(0xE53935) // 3 Helligkeitsstufen enum BrightnessLevel { BRIGHT, MEDIUM, DARK }; // Farben-Array: lv_color_t colorSet = { // BRIGHT { lv_color_hex(0xFFFFFF), // Weiß lv_color_hex(0xFF0000), // Rot lv_color_hex(0x00FF00) // Grün }, // MEDIUM { lv_color_hex(0xAAAAAA), // Grau lv_color_hex(0xCC4444), // Mittel-Rot lv_color_hex(0x44CC44) // Mittel-Grün }, // DARK { lv_color_hex(0x555555), // Dunkelgrau lv_color_hex(0x662222), // Dunkelrot lv_color_hex(0x226622) // Dunkelgrün } }; #define ldrPin 34 lv_obj_t *titleLabel; lv_obj_t *tempLabel; lv_obj_t *statusLabel; unsigned long lastUpdate = 0; const int UPDATE_INTERVAL = 1000; BrightnessLevel getBrightnessLevel(int ldrValue) { if (ldrValue < 10) { return BRIGHT; } else if (ldrValue UPDATE_INTERVAL) { lastUpdate = millis(); int ldrValue = analogRead(ldrPin); int temperature = random(20, 35); bool warn = temperature > 30; String tempText = String(temperature) + " °C"; lv_label_set_text(tempLabel, tempText.c_str()); lv_label_set_text(statusLabel, warn ? "WARN" : "OK"); applyColorTheme(ldrValue, warn); } delay(5); }

Fazit

Das Auslesen eines LDR – oder generell anderer analoger Sensoren, die über einen Spannungsteiler betrieben werden (z. B. ein NTC-Widerstand) – ist mit dem ESP32 denkbar einfach. Im Grunde benötigt es nur wenige Zeilen Code, um einen stabilen Messwert über den ADC einzulesen und weiterzuverarbeiten.

Der integrierte LDR auf dem Cheap Yellow Display ist daher ein kleines, aber praktisches Feature, das sich ohne zusätzliche Hardware direkt nutzen lässt. Besonders für Projekte mit automatischer Helligkeitsanpassung oder einfachen Umgebungslicht-Erkennungen bietet sich dieser Sensor an.

Deutlich umfangreicher wird der Code erst dann, wenn der Messwert grafisch auf dem Display visualisiert wird. Durch den Einsatz von LVGL wächst das Projekt spürbar an – was jedoch der Flexibilität und den Gestaltungsmöglichkeiten geschuldet ist. Mit einem einfachen OLED-Display über I2C ließe sich die reine Anzeige des Messwertes deutlich schlanker umsetzen.

Das Cheap Yellow Display (CYD) habe ich auf meinem Blog bereits in mehreren Beiträgen vorgestellt. Das Board ist in der Maker-Szene sehr beliebt, weil es für wenig Geld einen ESP32 mit integriertem TFT-Display bietet und sich damit ideal für kleine Dashboards, Sensoranzeigen oder IoT-Projekte eignet.

Allerdings hat das Board auch einen kleinen Nachteil: Durch das integrierte Display sowie zusätzliche Komponenten wie RGB-LED, SD-Card-Slot und einen Speaker-Anschluss bleiben nur noch vergleichsweise wenige frei nutzbare GPIO-Pins übrig. Für viele Projekte reicht das völlig aus – wer jedoch mehrere Sensoren oder zusätzliche Hardware anschließen möchte, stößt hier schnell an Grenzen.

https://youtu.be/pZZyCmKtJmg

Genau hier kommt ein interessantes alternatives ESP32 Display Board ins Spiel: ein ESP32 mit 1,9-Zoll TFT Display. Auf den ersten Blick wirkt dieses Board wie der kleine Bruder des Cheap Yellow Display – deutlich kompakter und minimalistischer aufgebaut.

Der große Unterschied: Das kleine Board verzichtet bewusst auf Zusatzhardware wie RGB-LED, SD-Card-Slot oder Audio-Ausgang. Dadurch stehen mehr GPIO-Pins für eigene Projekte zur Verfügung.

Und das Beste daran: Benötigt man einzelne Funktionen wie eine RGB-LED, einen Lautsprecher oder einen SD-Kartenslot, lassen sich diese mit wenigen günstigen Modulen problemlos nachrüsten – und man bleibt trotzdem deutlich unter dem Preis des großen Cheap Yellow Display.

In diesem Beitrag schauen wir uns das ESP32 Board mit 1,9-Zoll Display genauer an und vergleichen es direkt mit dem bekannten Cheap Yellow Display.

Technische Daten des ESP32-Boards mit 1,9" Display

Im Inneren des Boards arbeitet ein ESP32-D0WD-V3 Mikrocontroller aus der bekannten ESP32-Familie von Espressif. Dieser bietet ausreichend Leistung für IoT-Projekte, Sensoranwendungen oder kleine grafische Benutzeroberflächen auf dem integrierten TFT-Display.

Die wichtigsten technischen Daten des Mikrocontrollers sowie des Boards habe ich dir in der folgenden Tabelle zusammengefasst.

EigenschaftWertMikrocontrollerESP32-D0WD-V3ProzessorarchitekturXtensa LX6CPUDual-CoreProgrammspeicher448 KBArbeitsspeicher (SRAM)520 KBWLANIEEE 802.11 b/g/n (2,4 GHz)Maximale Datenratebis zu 150 MbpsAnzahl I/O Pinsbis zu 34Freie Pins auf dem Boardca. 24SchnittstellenSPI, I²C, I²S, UART, CAN (TWAI)USB AnschlussUSB-CTasterRESET, BOOTDisplaygröße1,9 ZollDisplaytypTFT - ST7789Auflösung170 × 320 PixelFarbtiefe16 Bit Pinout des Boards ESP32-1732S019

Das Board stellt rund 24 frei nutzbare Pins des ESP32-D0WD-V3 zur Verfügung. Dadurch lassen sich problemlos Sensoren, Aktoren oder Erweiterungsmodule anschließen.

Ein klassischer VIN-Pin fehlt bei diesem Board. Stattdessen steht ein 5V-Pin zur Verfügung, der direkt über die USB-Versorgung gespeist wird.

Der Vorteil: Externe Komponenten können direkt mit 5 Volt versorgt werden, sodass nicht ausschließlich auf 3,3V-Sensoren oder Aktoren zurückgegriffen werden muss. Die GPIO-Pins selbst arbeiten weiterhin mit 3,3V Logikpegeln.

Vergleich mit dem Cheap Yellow Display (ESP32-2432S028)

Ein direkter Vergleich mit dem bekannten Cheap Yellow Display (ESP32-2432S028) bietet sich an, da auf beiden Boards derselbe Mikrocontroller zum Einsatz kommt. Im Inneren arbeitet ebenfalls ein ESP32-D0WD-V3, wodurch sich die reine Rechenleistung der beiden Boards kaum unterscheidet.

ESP32 mit 2.8 Zoll TFT-Display & Touch (ESP32-2432S028R)

Rückseite - ESP32-2432S028R

Lieferumfang - ESP32 mit 2.8 Zoll TFT-Display & Touch (ESP32-2432S028R)

Der größte Unterschied liegt daher nicht in der Performance, sondern vor allem in der Ausstattung und der verfügbaren Peripherie.

Das ESP32-2432S028 ist deutlich umfangreicher ausgestattet und bringt bereits mehrere Zusatzkomponenten direkt auf dem Board mit:

- 2,8" TFT Touch Display - LDR (Fotowiderstand) zur Helligkeitsmessung - RGB-LED auf der Rückseite - SD-Card Slot auf der Rückseite - drei Erweiterungsschnittstellen über JST-Stecker - separate Schnittstelle für einen Lautsprecher - dedizierte Schnittstelle für UART und externe Stromversorgung - erhältlich mit Micro-USB oder USB-C Anschluss

Durch diese Vielzahl an integrierten Komponenten eignet sich das Board besonders gut für Projekte, bei denen bereits viele Funktionen direkt verfügbar sein sollen.

Größeres Display für Dashboards

Ein klarer Vorteil des Cheap Yellow Display ist das größere 2,8-Zoll Display. Dieses bietet deutlich mehr Platz für grafische Oberflächen und eignet sich daher besonders gut für:

- Smart-Home Dashboards - Sensoranzeigen - Steueroberflächen - Statusanzeigen

Weniger freie GPIOs

Der Nachteil dieser umfangreichen Ausstattung ist allerdings schnell sichtbar: Viele der verfügbaren Pins werden bereits intern für Display, SD-Karte, RGB-LED oder andere Komponenten verwendet.

Dadurch bleiben beim Cheap Yellow Display nur wenige frei nutzbare GPIO-Pins übrig, um eigene Sensoren oder Aktoren anzuschließen.

Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, I²C-Sensoren oder Port-Expander zu verwenden. Dennoch bietet das kleinere ESP32-Board mit 1,9" Display hier von Haus aus deutlich mehr Flexibilität.

Aufbau - ESP32-2432S028R Cheap-Yellow-Display

Direktvergleich: ESP32 1,9″ Display vs Cheap Yellow Display

Nachdem wir uns beide Boards angeschaut haben, lohnt sich ein direkter Vergleich der wichtigsten Eigenschaften. Während das Cheap Yellow Display als All-in-One Lösung mit vielen integrierten Funktionen punktet, setzt das ESP32 Board mit 1,9″ Display eher auf ein minimalistisches Design mit mehr frei nutzbaren GPIO-Pins.

Ausgabe der CHIP Daten vom ESP32 via esptool

Die wichtigsten Unterschiede habe ich in der folgenden Tabelle zusammengefasst.

EigenschaftESP32 mit 1,9″ DisplayCheap Yellow Display (ESP32-2432S028)MikrocontrollerESP32-D0WD-V3ESP32-D0WD-V3Displaygröße1,9″ TFT2,8″ TFTAuflösung170 × 320 Pixel240 × 320 PixelTouchfunktion❌ nein✔️ jaRGB LED❌ nein✔️ jaLDR❌ nein✔️ jaSD-Card Slot❌ nein✔️ jaSpeaker Anschluss❌ nein✔️ jaErweiterungsports❌ keine✔️ 3 × JSTfreie GPIOs✔️ viele❌ wenigeUSB AnschlussUSB-CMicro-USB oder USB-C Preisvergleich und Verfügbarkeit

Ein weiterer wichtiger Unterschied zwischen den beiden Boards ist der Preis. Während das Cheap Yellow Display durch die vielen integrierten Komponenten etwas teurer ist, bekommt man das kleinere ESP32 Board mit 1,9″ Display bereits deutlich günstiger.

Boardebay.dealiexpress.comamazon.deESP32 mit 1,9 Zoll TFT Display12 €*8,69 €13,55 €*ESP32-2432S028 (Cheap Yellow Display)19,40 €*16,89 €16,29 €*

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!

Display für die Arduino IDE konfigurieren

Bevor das ESP32-Board mit 1,9″ Display in der Arduino IDE genutzt werden kann, muss zunächst das verwendete TFT-Display korrekt konfiguriert werden. Dieser Schritt ist wichtig, damit Auflösung, Treiber und die belegten Pins richtig angesprochen werden.

Wie die grundsätzliche Einrichtung mit TFT_eSPI funktioniert, habe ich bereits am Beispiel des Cheap Yellow Display in einem separaten Beitrag gezeigt. Die Vorgehensweise ist hier sehr ähnlich, allerdings müssen die Werte natürlich an das kleinere Display angepasst werden.

Den ausführlichen Beitrag zur Einrichtung findest du hier:

ESP32-Display als Edelmetall-Monitor – Konfiguration für das Board ESP32-2432S028 für LVGL & TFT_eSPI

Für das hier vorgestellte Board mit 1,9″ TFT-Display müssen insbesondere folgende Punkte angepasst werden:

- verwendeter Display-Treiber - ST7789 - Auflösung von 170 × 320 Pixel - die zum Board passenden SPI- und Steuerpins

Im nächsten Schritt zeige ich dir die konkrete Konfiguration für dieses Board, damit sich anschließend erste Texte oder Grafiken auf dem Display ausgeben lassen.

SPI-Steuerpins des ST7789 Displays auf dem ESP32-1732S019

Nachfolgende Einstellungen werden in der Datei C:UsersDocumentsArduinolibrariesTFT_eSPIUser_Setup.h vorgenommen.

#define USER_SETUP_ID 805 #define ST7789_DRIVER #define TFT_WIDTH 170 #define TFT_HEIGHT 320 #define TFT_RGB_ORDER TFT_BGR #define TFT_INVERSION_OFF #define TFT_BL 21 #define TFT_BACKLIGHT_ON HIGH #define TFT_MISO 12 #define TFT_MOSI 13 #define TFT_SCLK 14 #define TFT_CS 15 #define TFT_DC 2 #define TFT_RST -1 #define TOUCH_CS 33 #define LOAD_GLCD #define LOAD_FONT2 #define LOAD_FONT4 #define LOAD_FONT6 #define LOAD_FONT7 #define LOAD_FONT8 #define LOAD_GFXFF #define SMOOTH_FONT #define SPI_FREQUENCY 80000000 #define SPI_READ_FREQUENCY 20000000 #define SPI_TOUCH_FREQUENCY 2500000 #define USE_HSPI_PORT

Die Einstellungen habe ich aus dem GitHub Repository AndroidCrypto/TFT_eSPI (nach langem suchen), entnommen.

Beispielprojekt: Mini Gartendashboard auf dem 1,9″ Display

Um zu zeigen, wie sich das kleine 1,9-Zoll TFT Display in der Praxis nutzen lässt, habe ich ein einfaches Beispiel erstellt. Dabei handelt es sich bewusst zunächst nur um ein Mockup, das typische Informationen aus einem Garten- oder Smart-Home-Projekt visualisiert.

Die angezeigten Werte sind aktuell noch fest im Programm hinterlegt und werden nicht von echten Sensoren oder APIs abgerufen. Das Beispiel soll lediglich zeigen, wie sich mehrere Statusinformationen übersichtlich auf dem kleinen Display darstellen lassen.

Im Beispiel werden folgende Informationen angezeigt:

- aktuelle Leistung eines Balkonkraftwerks - Temperatur und Luftfeuchtigkeit im Gewächshaus - Status der Bewässerung - eine einfache Wetterübersicht

Solche Displays lassen sich später problemlos erweitern und beispielsweise mit MQTT, HTTP-APIs oder direkt angeschlossenen Sensoren verbinden.

Typische Erweiterungen wären zum Beispiel:

- Einlesen von Temperatur- und Feuchtigkeitssensoren (z. B. BME280 oder SHT30) - Abrufen von Wetterdaten über eine API - Anzeige von Leistungsdaten eines Balkonkraftwerks über eine lokale Schnittstelle - Integration in ein Smart-Home System wie Home Assistant

Das folgende Beispiel zeigt zunächst ein einfaches Dashboard-Layout, das die Informationen in mehrere Bereiche aufteilt.

Im nächsten Abschnitt schauen wir uns den dazugehörigen Arduino-Sketch an, mit dem dieses Mockup umgesetzt wurde.

Arduino Beispiel: Mini Gartendashboard auf dem ESP32 /* Titel: Mini Garten-Dashboard für ESP32 mit 1,9" Display Autor: Stefan Draeger */ #include #include TFT_eSPI tft = TFT_eSPI(); // Beispielwerte int balkonkraftwerkWatt = 420; int temperatur = 22; int luftfeuchtigkeit = 45; bool bewaesserungAktiv = false; // Wetter String wetterZustand = "Wolkig"; int wetterTemp = 23; String regenText = "Regen ab 15 Uhr"; // Zeitstempel String stand1 = "Stand: 08.03.2026"; String stand2 = "15:23 Uhr"; void drawBox(int x, int y, int w, int h, uint16_t color) { tft.drawRoundRect(x, y, w, h, 8, color); } void drawDashboard() { tft.fillScreen(TFT_BLACK); // Titel tft.setTextColor(TFT_CYAN, TFT_BLACK); tft.setTextDatum(TL_DATUM); tft.setTextFont(2); tft.drawString("Mini Garten-Dashboard", 10, 10); tft.drawFastHLine(10, 30, 150, TFT_DARKGREY); // ------------------------- // Balkonkraftwerk // ------------------------- drawBox(10, 40, 150, 55, TFT_YELLOW); tft.setTextFont(2); tft.setTextColor(TFT_YELLOW, TFT_BLACK); tft.drawString("Balkonkraftwerk", 18, 48); tft.setTextFont(4); tft.drawString(String(balkonkraftwerkWatt) + "W", 25, 68); // ------------------------- // Gewächshaus // ------------------------- drawBox(10, 105, 150, 45, TFT_GREEN); tft.setTextFont(2); tft.setTextColor(TFT_GREEN, TFT_BLACK); tft.drawString("Gewaechshaus", 18, 110); tft.setTextColor(TFT_WHITE, TFT_BLACK); tft.drawString(String(temperatur) + "C / " + String(luftfeuchtigkeit) + "%", 18, 128); // ------------------------- // Bewässerung // ------------------------- drawBox(10, 160, 150, 45, TFT_BLUE); tft.setTextColor(TFT_BLUE, TFT_BLACK); tft.drawString("Bewaesserung", 18, 165); if (bewaesserungAktiv) { tft.setTextColor(TFT_GREEN); tft.drawString("AN", 18, 182); } else { tft.setTextColor(TFT_RED); tft.drawString("AUS", 18, 182); } // ------------------------- // Wetter // ------------------------- drawBox(10, 215, 150, 65, TFT_ORANGE); tft.setTextColor(TFT_ORANGE, TFT_BLACK); tft.drawString("Wetter", 18, 220); tft.setTextColor(TFT_WHITE, TFT_BLACK); tft.drawString(wetterZustand, 18, 238); tft.drawString(String(wetterTemp) + "C", 90, 238); tft.drawString(regenText, 18, 254); // ------------------------- // Zeitstempel (umgebrochen) // ------------------------- tft.setTextFont(1); tft.setTextColor(TFT_LIGHTGREY, TFT_BLACK); tft.drawString(stand1, 10, 300); tft.drawString(stand2, 10, 310); } void setup() { tft.init(); tft.setRotation(0); tft.invertDisplay(true); drawDashboard(); } void loop() { }

Fazit: Für welche Projekte eignet sich das ESP32 1,9″ Display?

Das ESP32-Board mit 1,9″ TFT Display ist eine interessante Alternative zum bekannten Cheap Yellow Display. Während das größere Board mit vielen integrierten Funktionen wie Touchscreen, SD-Karten-Slot oder RGB-LED punktet, setzt das kleinere Modell auf ein deutlich minimalistischeres Konzept.

Der beliebte Mikrocontroller ESP32-2432S028, besser bekannt als Cheap Yellow Display (CYD), verfügt in der neueren Version über eine praktische USB-C-Schnittstelle. Darüber lässt sich das Board problemlos mit Strom versorgen – beispielsweise über ein Netzteil oder eine Powerbank.

Möchtest du das CYD jedoch ohne USB-Kabel betreiben – etwa fest in ein Gehäuse integriert oder direkt an einem Akku-Pack – dann kannst du die 5V-Versorgung auch über die Pins VIN und GND auf der Rückseite einspeisen.

https://youtu.be/0xGtr_9yxP0

In diesem Beitrag zeige ich dir, wie du das Cheap Yellow Display korrekt über VIN mit 5V betreibst und worauf du dabei unbedingt achten solltest.

ESP32 mit 2.8 Zoll TFT-Display & Touch (ESP32-2432S028R)

Rückseite - ESP32-2432S028R

Lieferumfang - ESP32 mit 2.8 Zoll TFT-Display & Touch (ESP32-2432S028R)

Standard-Stromversorgung über USB

Der einfachste Weg, das Cheap Yellow Display (ESP32-2432S028) mit Strom zu versorgen, ist die USB-C-Schnittstelle.

Hier kannst du:

- ein USB-Netzteil - einen PC - oder eine Powerbank

anschließen.

Gerade eine Powerbank ist für mobile Projekte besonders praktisch. Sie liefert stabile 5V, es gibt keine offenen Kontakte und du kannst sie bei Bedarf einfach austauschen, wenn der Akku leer ist. Das ist nicht nur komfortabel, sondern auch deutlich sicherer als eine offene Verdrahtung über VIN.

Problem mit intelligenten Powerbanks

Moderne Powerbanks sind „intelligent“. Das bedeutet: Sie schalten sich automatisch ab, wenn der angeschlossene Verbraucher zu wenig Strom zieht.

Im normalen Betrieb ist das kein Problem. Schwierig wird es jedoch, wenn der ESP32 in den Deep Sleep geht.

Im Deep Sleep sinkt der Stromverbrauch teilweise auf wenige Milliampere oder sogar darunter. Für viele Powerbanks sieht das so aus, als wäre kein Gerät mehr angeschlossen – und sie schalten sich ab.

Die Folge: Das Board verliert komplett die Stromversorgung.

Lösung: Mindestlast erzeugen

In solchen Fällen benötigt man einen kleinen USB-Adapter oder ein Modul, das künstlich eine Mindestlast erzeugt. Diese Adapter sorgen dafür, dass dauerhaft ein kleiner Strom fließt, sodass die Powerbank eingeschaltet bleibt.

virtuelle Last für Powerbank

Alternativ kann man auch:

- einen kleinen Lastwiderstand einsetzen - ein Low-Power-Load-Modul verwenden - oder eine Powerbank wählen, die ausdrücklich für Low-Power-Geräte geeignet ist

Gerade bei IoT-Projekten mit Deep Sleep ist das ein Punkt, den man unbedingt berücksichtigen sollte.

Hinweis zur externen Spannungsversorgung

Wenn du zur Versorgung ein geregeltes Netzteil oder einen Buck-Converter verwendest, musst du unbedingt darauf achten, dass die Ausgangsspannung korrekt auf 5V eingestellt ist. Eine zu hohe Spannung kann den Spannungsregler oder im schlimmsten Fall den ESP32 dauerhaft beschädigen.

Steckernetzteil - Parameter

Miss die Spannung am besten vor dem Anschluss mit einem Multimeter nach – gerade bei einstellbaren Modulen ist das ein wichtiger Schritt.

Batterieshield für LiPo 18650 Batterien

LiIon Batterie 18650 mit 8800mAh Leistung

Expansionboard für die LiPo Batterie Typ 18650 mit Stiftleisten für 5V

In meinem Fall verwende ich einen LiPo-Akku mit 18650-Zellen. Theoretisch könnte ich die 5V auch über ein USB-Kabel abgreifen, da das Akkumodul einen entsprechenden Ausgang bereitstellt. Für den direkten Betrieb über VIN greife ich jedoch die geregelten 5V direkt am Modul ab.

Betrieb mit LiPo-Akku und Adapter-Modul

Für kompakte Projekte verwende ich gern sogenannte LiPo-Akku-Adapter-Module. Diese sind besonders praktisch, da sie mehrere Funktionen in einem Board vereinen:

- Anschluss für eine 3,7V LiPo-Zelle (z. B. 16340) - integrierte Ladeelektronik - geregelter 5V-Ausgang - teilweise zusätzlich ein 3V / 3,3V-Ausgang - Micro-USB-Anschluss zum Laden

Solche Module eignen sich hervorragend für kleine, mobile Projekte mit dem Cheap Yellow Display, da sie:

✔ wenig Platz benötigen ✔ eine stabile Spannung liefern ✔ den Akku direkt laden können ✔ keine zusätzliche Ladeelektronik erfordern

Anschluss eines Akkus an das Cheap Yellow Display

Am Cheap Yellow Display befindet sich der Anschluss für VIN unten links auf der Rückseite des Boards.

Du kannst hierfür das mitgelieferte Anschlusskabel verwenden, das eigentlich für die GPIO-Pins gedacht ist. Die einzelnen Leitungen lassen sich problemlos auf die Pins VIN und GND stecken und anschließend mit einer externen 5V-Stromquelle verbinden.

Achte dabei unbedingt auf die korrekte Belegung und Polarität, bevor du die Spannung anlegst.

ESP32 CYD mit externem Akku über kleine LiPo Batterie 16340

Verwendete Module

Für die im Beitrag gezeigten Beispiele habe ich folgende Module verwendet:

- Cheap Yellow Display (ESP32-2432S028)* - LiPo-Adapter* für 16340 Akkus* (mit integriertem 5V-Ausgang) - 2-fach LiPo-Adapter* für 18650 Akkus* - USB-Last-Adapter für Powerbanks* (simuliert eine Mindestlast)

Diese Module eignen sich gut für die mobile Stromversorgung des Cheap Yellow Display und liefern eine stabile 5V-Stromversorgung über VIN.

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!

Fazit

Das Cheap Yellow Display (ESP32-2432S028) lässt sich problemlos sowohl über USB-C als auch direkt über den VIN-Pin mit 5V betreiben.

Während eine Powerbank die einfachste Lösung darstellt, eignet sich für kompakte und fest verbaute Projekte ein LiPo-Modul mit geregeltem 5V-Ausgang besonders gut.

Das Cheap Yellow Display (ESP32-2432S028) ist weit mehr als nur ein günstiges Touch-Display. Durch den integrierten ESP32 eignet es sich hervorragend für kleine Monitoring-Projekte – zum Beispiel zur Temperaturüberwachung einer Heizungsanlage.

https://youtu.be/-gNTzQVMN00

In diesem Beitrag zeige ich dir, wie du einen wasserdichten DS18B20 Tauchfühler anschließt und Temperaturen im Bereich von 0–90 °C zuverlässig misst. Die aktuelle Temperatur wird direkt auf dem Display angezeigt.

Hinweis aus der Community Die Idee zu diesem Beitrag stammt übrigens direkt aus der YouTube-Community. Unter meinem Video zum Thema „Mehr als vier Taster am Cheap Yellow Display?“ kam die Frage auf, ob sich mit dem Cheap Yellow Display auch ein Tauchfühler zur Heizungsüberwachung realisieren lässt.

Diese Frage greife ich hier auf und zeige eine mögliche Lösung mit dem DS18B20 – inklusive Anzeige auf dem Display und Logging über ThingSpeak.

Genau solche Impulse aus der Community machen die Projekte hier besonders spannend 😊

Problem & Ziel: Temperatur zuverlässig überwachen

In vielen Heizungsanlagen gibt es mehrere interessante Messpunkte: Vorlauf, Rücklauf, Pufferspeicher oder Warmwasserleitung. Zwar besitzen moderne Heizungen meist integrierte Sensoren, doch diese Werte sind nicht immer leicht zugänglich oder lassen sich nur umständlich auswerten.

Gerade wenn man:

- den Temperaturverlauf über mehrere Tage analysieren möchte - Optimierungspotenzial bei der Heizkurve sucht - eine einfache visuelle Kontrolle direkt vor Ort wünscht

fehlt oft eine unkomplizierte und kostengünstige Lösung.

Genau hier setzt dieses Projekt an.

Ziel ist es, mit dem Cheap Yellow Display ein kompaktes Heizungs-Thermometer zu realisieren, das:

- die aktuelle Temperatur direkt auf dem Display anzeigt - mehrere Sensoren über nur einen GPIO unterstützt

Ohne Spezialhardware, ohne teure Industrie-Controller – sondern mit einer einfachen, flexiblen ESP32-Lösung.

Warum DS18B20? Vorteile gegenüber NTC & analogen Fühlern

Für dieses Projekt verwende ich bewusst einen DS18B20 und keinen klassischen NTC-Widerstand oder analogen Temperatursensor.

Der größte Vorteil liegt im verwendeten 1-Wire-Protokoll: Der DS18B20 benötigt lediglich einen einzigen Daten-GPIO (zzgl. GND und 3,3 V) sowie einen 4,7 kΩ Pull-Up-Widerstand. Damit spart man wertvolle Pins.

Temperatursensor DS18B20

Gerade beim Cheap Yellow Display (ESP32-2432S028) ist das ein echter Pluspunkt. Durch Display, Touch und interne Beschaltung stehen nur wenige GPIOs frei zur Verfügung – insgesamt sind es gerade einmal fünf gut nutzbare Pins.

Ein weiterer entscheidender Vorteil: Jeder DS18B20 besitzt eine eindeutige 64-Bit-ID. Dadurch lassen sich mehrere Sensoren problemlos an denselben GPIO anschließen und separat auslesen.

Das bedeutet konkret:

- Mehrere Temperaturmessstellen - Nur ein Daten-Pin am ESP32 - Keine zusätzlichen ADC-Kanäle nötig - Klare Adressierung jedes Sensors

Bei einem analogen NTC wäre das deutlich aufwendiger: Man benötigt für jeden Sensor einen eigenen ADC-Eingang, eine passende Widerstandsbeschaltung und muss die Temperatur über eine Kennlinie (z. B. Steinhart-Hart) berechnen.

Der DS18B20 hingegen liefert bereits einen digitalen, kalibrierten Temperaturwert mit einer Auflösung von bis zu 12 Bit – ohne Rechenaufwand auf deiner Seite.

Gerade für ein Heizungs-Monitoring mit mehreren Messpunkten ist das die deutlich elegantere Lösung.

Benötigte Komponenten

Für meinen Aufbau verwende ich folgende Bauteile:

- DS18B20 Temperatursensor* (wasserdicht, Edelstahlkapsel) Ideal für Heizungsleitungen oder Pufferspeicher. Der Sensor ist für Temperaturen von -55 °C bis +125 °C ausgelegt und damit perfekt für den Bereich 0–90 °C geeignet. - 4,7 kΩ Widerstand* Wird als Pull-Up-Widerstand für die 1-Wire-Datenleitung benötigt. Ohne diesen funktioniert die Kommunikation mit dem DS18B20 nicht zuverlässig. - Breadboard* Für den schnellen und sauberen Testaufbau ohne Löten. - Breadboardkabel* (Dupont-Leitungen) Zum Verbinden von Sensor, Widerstand und Cheap Yellow Display. - Cheap Yellow Display (ESP32-2432S028)* Das Herzstück des Projekts. Übernimmt das Auslesen des Sensors, die Anzeige der Temperatur sowie die Übertragung der Daten an ThingSpeak. - Anschlusskabel Mini JST PH 1.25 (4-Pin) Dieses Kabel wird benötigt, um die frei zugänglichen Pins des Cheap Yellow Displays zu nutzen. Darüber greifen wir GND, 3,3 V und einen GPIO für die 1-Wire-Datenleitung ab. - USB-Anschlusskabel Zur Stromversorgung des Displays sowie zum Programmieren über die Arduino IDE bzw. für die serielle Ausgabe.

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!

Pinbelegung des Temperatursensors DS18B20

Der kleine Sensor verfügt über drei Beinchen welche mit GND, DATA und VDD belegt sind v.l.n.r. Die Richtung dabei ist wenn die flache Seite mit der Beschriftung zu dir zeigt.

Aufbau der Schaltung - DS18B20 Sensor am Cheap Yellow Display

Für den Anschluss eines DS18B20 Sensors benötigst du nur einen 4,7 kOhm Widerstand sowie in paar Breadboardkabel.

Wenn du nur einen Sensor anschließe möchtest sieht die Schaltung wiefolgt aus:

Schaltung - ein DS18B20 Sensor am Cheap Yellow Display

Die Sensoren bekommst du entweder als einfachen Baustein oder auch in einem wasserfesten Gehäuse. Wenn du es besonders einfach haben möchtest dann bekommst du auch noch eine fertige Platine wo du den Sensor aufstecken kannst und so dir ein Anschluss auf dem Breadboard sparen kannst.

verschiedene DS18B20 Sensoren

Du kannst jedoch auch mehrere Sensoren an einen GPIO anschließen und auslesen, da die Sensoren jeweils wie bereits erwähnt über eine eindeutige UUID verfügen kann man daraus dann jeden Sensor eindeutig erkennen (dazu später im Abschnitt zum Quellcode mehr).

Schaltung - mehrere DS18B20 Sensoren am Cheap Yellow Display

Auslesen des Sensors am Mikrocontroller in der Arduino IDE

Auf meinem Blog habe ich dir bereits an diversen Mikrocontrollern gezeigt wie man den Sensor auslesen kann.

- DS18B20-Sensoren am Raspberry Pi Pico W: Temperaturdaten auf einer Webseite anzeigen - ESP32 – Temperatursensor DS18B20 - Ausgeben der Temperaturwerte des DS18B20 Sensors auf dem M5StickC - Weekendprojekt: Relais & Temperatursensor DS18B20 steuern

Die Programmierung unterscheidet sich hier nicht wirklich, jedoch möchte ich dir aufzeigen wie du die Sensordaten via LVGL auf dem Display des Cheap Yellow Display anzeigen lassen kannst. Dabei wird die Anzahl der Sensoren flexibel sein!

Schaltung - Cheap Yellow Display mit fünf Temperatursensoren vom Typ DS18B20

Hier das fertige Projekt zum Download als ZIP-Datei:

Programm: Ausgeben der Sensordaten von fünf DS18B20 Sensoren auf dem Cheap Yellow DisplayHerunterladen Benötigte Bibliothek zum auslesen des Sensors in der Arduino IDE

Damit wir den Sensor auslesen können, müssen wir die Bibliothek "DallasTemperature" über den Bibliotheksverwalter der Arduino IDE installieren. Du findest auf dem GitHub Repository von Miles Burton noch weitere Informationen und Beispiele zu dieser.

Auslesen der Adressen der angeschlossenen Sensoren

Wie bereits mehrfach erwähnt verfügt jeder Sensor über eine eigene UUID bzw. Adresse über welche dieser angesteuert / ausgelesen werden kann. In meinem Fall habe ich 5 Sensoren angeschlossen und lese mir zunächst einmal alle Adressen aus und speicher mir diese in einer Liste (ein Array).

Quellcode #include #define sensorPin 27 OneWire oneWire(sensorPin); DallasTemperature ds(&oneWire); const int MAX_SENSORS = 5; DeviceAddress sensorAddrs; void setup(void) { Serial.begin(115200); delay(10); ds.begin(); Serial.println("Suche nach Sensoren..."); Serial.print("Anzahl gefundener Sensoren: "); Serial.println(ds.getDeviceCount(), DEC); for (int i = 0; i < MAX_SENSORS; i++) { if (ds.getAddress(sensorAddrs, i)) { Serial.print("Sensor "); Serial.print(i); Serial.print(" Adresse: "); for (uint8_t b = 0; b < 8; b++) { if (sensorAddrs < 16) Serial.print("0"); Serial.print(sensorAddrs, HEX); } Serial.println(); } else { Serial.print("Sensor "); Serial.print(i); Serial.println(" wurde nicht gefunden!"); } } } void loop(void) { }

Die Ausgabe erfolgt beim starten / neustarten des Mikrocontrollers daher erfolgt zusätzlich noch eine technische Ausgabe im oberen Bereich!

Ausgabe der Adressen der angeschlossenen DS18B20 Sensoren über seriellen Monitor Ausgeben der Sensordaten der fünf angeschlossenen Sensoren im seriellen Plotter

Die Arduino IDE verfügt über einen seriellen Plotter in welchem wir recht einfach einen und auch mehrere numerische Werte in einem Liniendiagramm visualisieren lassen können. Diesen möchten ich nun nutzen um die fünf Sensorwerte grafisch darzustellen.

Quellcode #include #define sensorPin 27 OneWire oneWire(sensorPin); DallasTemperature ds(&oneWire); const int MAX_SENSORS = 5; DeviceAddress sensorAddrs; void setup(void) { Serial.begin(115200); delay(10); ds.begin(); Serial.println("Suche nach Sensoren..."); Serial.print("Anzahl gefundener Sensoren: "); Serial.println(ds.getDeviceCount(), DEC); for (int i = 0; i < MAX_SENSORS; i++) { if (ds.getAddress(sensorAddrs, i)) { Serial.print("Sensor "); Serial.print(i); Serial.print(" Adresse: "); for (uint8_t b = 0; b < 8; b++) { if (sensorAddrs < 16) Serial.print("0"); Serial.print(sensorAddrs, HEX); } Serial.println(); } else { Serial.print("Sensor "); Serial.print(i); Serial.println(" wurde nicht gefunden!"); } } } void printSensordata(DeviceAddress deviceAddress, int index) { float tempC = ds.getTempC(deviceAddress); Serial.print("Sensor" + String(index, DEC) + ":"); Serial.println(tempC); } void loop(void) { ds.requestTemperatures(); for (int i = 0; i < MAX_SENSORS; i++) { printSensordata(sensorAddrs, i+1); } delay(125); } Ausgeben der Sensordaten auf dem Display via LVGL

Nachdem wir die Sensordaten erfolgreich ermittelt und über die serielle Schnittstelle ausgegeben haben, ist der nächste Schritt nicht mehr weit: Die Temperaturwerte sollen direkt auf dem Display des Cheap Yellow Displays angezeigt werden.

Schaltung - Cheap Yellow Display mit fünf Temperatursensoren vom Typ DS18B20

Hier kommt erneut LVGL zum Einsatz. Die Einrichtung der Bibliothek ist zu Beginn etwas aufwendiger – insbesondere was Display-Initialisierung und Buffer-Konfiguration betrifft. Ist das Setup jedoch einmal erledigt, lässt sich die Benutzeroberfläche sehr strukturiert und vergleichsweise komfortabel programmieren.

Gerade für ein kleines Heizungs-Dashboard bietet LVGL eine saubere Möglichkeit, Werte übersichtlich darzustellen und das Layout flexibel anzupassen.

Das Cheap Yellow Display (CYD) verfügt über eine integrierte Touchoberfläche, über die sich komfortabel virtuelle Buttons auf dem Display realisieren lassen. In vielen Projekten reicht das völlig aus.

Es gibt jedoch Situationen, in denen klassische Taster sinnvoller sind – zum Beispiel dann, wenn das Display nicht ungeschützt zugänglich sein soll oder das Gerät in einem Gehäuse verbaut wird. Auch für robuste Industrie- oder Outdoor-Anwendungen sind physische Taster oft die bessere Wahl.

Auf der Rückseite des CYD befinden sich zwei Anschlüsse, über die insgesamt fünf freie GPIOs des verbauten ESP32 erreichbar sind. Über diese Pins lassen sich problemlos bis zu fünf Taster anschließen und direkt Funktionen auf dem Display auslösen.

https://youtu.be/Mo5ZAxKVj9w

In diesem Beitrag zeige ich dir nicht nur, wie du diese vier Taster korrekt anschließt, sondern auch eine elegante Lösung, mit der du noch mehr als vier Taster verwenden kannst.

Schaltung - ESP32 - Cheap Yellow Display mit zwei Taster auf Breadboard

Cheap Yellow Display mit zwei Taster - aktive blaue LED

Cheap Yellow Display mit zwei Taster - aktive gelbe LED

Zwei Möglichkeiten, einen Taster anzuschließen

Grundsätzlich gibt es zwei Wege, einen Taster an einen GPIO des ESP32 anzuschließen:

- Mit externem PullUp- oder PullDown-Widerstand - Ohne externen Widerstand, unter Nutzung der internen PullUp-Funktion des ESP32

Schaltung - Pullup & Pulldown Widerstand

Die bequemere und für die meisten Projekte völlig ausreichende Variante ist die zweite. Hier nutzen wir einfach die im ESP32 integrierten PullUp-Widerstände. Dadurch wird die Verdrahtung deutlich einfacher und es sind keine zusätzlichen Bauteile notwendig.

Schaltung - ESP32 - Cheap Yellow Display mit zwei Taster auf Breadboard

Benötigte Komponenten

Für den Anschluss von vier Tastern benötigst du:

- zwei Taster* (12×12 mm, Printmontage, mit Tasterkappe) - fünf Breadboardkabel*, 10 cm, männlich–männlich - ein 400 Pin Breadboard* - ein Anschlusskabel* (Breadboardkabel weiblich auf vierpolige Mini-JST-Anschlüsse, 1.25 mm Raster, PH 1.25 4 Pin) - ein ESP32 Cheap Yellow Display*

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!

Da das Cheap Yellow Display über insgesamt vier freie GPIOs verfügt, lassen sich grundsätzlich bis zu vier Taster anschließen.

Mit dem mitgelieferten 4-poligen Mini-JST-Kabel können jedoch nur zwei dieser GPIOs komfortabel genutzt werden. Möchtest du alle vier freien Pins verwenden und somit vier Taster anschließen, benötigst du ein weiteres passendes Anschlusskabel.

Solche Mini-JST-Kabel mit 1,25 mm Raster (PH_1.25_4P) findest du beispielsweise bei Amazon oder AliExpress meist recht günstig.

Freie GPIOs auf der Rückseite des Cheap Yellow Display

Auf der Rückseite des Cheap Yellow Display (ESP32-2432S028) befinden sich zwei Mini-JST-Anschlüsse, über die mehrere freie GPIOs des ESP32 erreichbar sind.

Diese sind wie folgt aufgebaut:

Anschluss 1:

- 3× GPIO - 1× GND

Anschluss 2:

- 2× GPIO - 1× GND - 1× 3,3V

freie GPIO am ESP32-2432S028 (CYD)

Damit stehen dir insgesamt fünf frei nutzbare GPIO-Pins zur Verfügung, die sich ideal für Taster, Sensoren oder andere digitale Eingänge eignen.

Der Anschluss mit der zusätzlichen 3,3V-Leitung ist besonders praktisch, wenn du externe Bauteile direkt mit der vom Board bereitgestellten Spannung versorgen möchtest – beispielsweise Sensoren oder Widerstandsnetzwerke.

Wichtig: Die GPIOs arbeiten mit 3,3V Logik. Es dürfen daher keine 5V-Signale direkt an diese Pins angelegt werden.

Warum ohne externen Widerstand?

Beim Anschluss ohne externen Widerstand wird der Taster wie folgt verschaltet:

- Ein Pin des Tasters → an einen GPIO - Der andere Pin → an GND

Im Code wird der GPIO dann als INPUT_PULLUP definiert. Der interne PullUp-Widerstand sorgt dafür, dass der Pin im Normalzustand auf HIGH liegt. Beim Drücken des Tasters wird der Pin mit GND verbunden und geht auf LOW.

Programmierung vorbereiten

Bevor wir mit der Programmierung beginnen, solltest du zunächst alle angeschlossenen Kabel vom Cheap Yellow Display entfernen – mit Ausnahme des USB-Kabels zur Stromversorgung und zum Upload des Sketches.

Der Grund dafür ist einfach: Nach einem Reset oder beim Hochladen eines neuen Programms können die GPIOs kurzfristig ihren Zustand ändern. Je nach vorherigem Sketch können Pins beispielsweise als OUTPUT konfiguriert gewesen sein und beim Start auf HIGH oder LOW gesetzt werden.

Sind in diesem Moment externe Bauteile angeschlossen, kann es – im ungünstigsten Fall – zu Kurzschlüssen oder unerwünschten Spannungszuständen kommen.

Um das Risiko zu vermeiden, empfiehlt es sich, das Board zunächst „nackt“ zu programmieren und die Taster erst danach wieder anzuschließen.

Programmierung: RGB-LED als Rückmeldung nutzen

Für die Programmierung starten wir bewusst mit einem einfachen Beispiel: Statt direkt etwas auf dem Display anzuzeigen, verwenden wir die auf der Rückseite verbaute RGB-LED als visuelle Rückmeldung.

Cheap Yellow Display mit zwei Taster

Das hat zwei Vorteile:

- Wir können schnell prüfen, ob ein Tastendruck erkannt wurde. - Der Fokus bleibt auf den Tastern und der GPIO-Logik – ohne zusätzlichen Display-Code.

Im folgenden Beispiel lassen wir die RGB-LED in unterschiedlichen Farben aufleuchten. Später können wir diese Farben dann gezielt nutzen, um Tastendrücke zu bestätigen.

Cheap Yellow Display mit zwei Taster - aktive gelbe LED

Cheap Yellow Display mit zwei Taster - aktive blaue LED /* RGB-LED am Cheap Yellow Display per Taster steuern --------------------------------------------------- In diesem Beispiel werden zwei externe Taster am Cheap Yellow Display (ESP32-2432S028) verwendet, um die integrierte RGB-LED als visuelle Rückmeldung anzusteuern. Gelber Taster → LED leuchtet Gelb Blauer Taster → LED leuchtet Blau Hinweis: Die RGB-LED auf dem CYD ist als Common-Anode-LED ausgeführt. Das bedeutet: LOW = LED an HIGH = LED aus Autor: Stefan Draeger Blogbeitrag: https://draeger-it.blog/cheap-yellow-display-mit-tastern-erweitern-so-gehts/ */ // --- RGB LED Pinbelegung (CYD Rückseite) --- #define ledRedPin 4 #define ledGreenPin 16 #define ledBluePin 17 // --- Taster GPIOs --- #define buttonYellowPin 27 #define buttonBluePin 22 void setup() { Serial.begin(9600); // Taster mit internem PullUp-Widerstand konfigurieren // Nicht gedrückt = HIGH // Gedrückt = LOW pinMode(buttonYellowPin, INPUT_PULLUP); pinMode(buttonBluePin, INPUT_PULLUP); // RGB LED Pins als Ausgang definieren pinMode(ledRedPin, OUTPUT); pinMode(ledGreenPin, OUTPUT); pinMode(ledBluePin, OUTPUT); // Alle Farben ausschalten (Common Anode → HIGH = aus) digitalWrite(ledRedPin, HIGH); digitalWrite(ledGreenPin, HIGH); digitalWrite(ledBluePin, HIGH); } void loop() { // Prüfen ob gelber Taster gedrückt wurde if (digitalRead(buttonYellowPin) == LOW) { Serial.println("Taster GELB gedrückt!"); setRgbLedValue(true, true, false); // Gelb (Rot + Grün) delay(500); // einfache Entprellung } // Prüfen ob blauer Taster gedrückt wurde if (digitalRead(buttonBluePin) == LOW) { Serial.println("Taster BLAU gedrückt!"); setRgbLedValue(false, false, true); // Blau delay(500); // einfache Entprellung } } // Funktion zum Setzen der RGB-Farbe // true = Farbe an // false = Farbe aus void setRgbLedValue(bool r, bool g, bool b) { // LOW schaltet LED EIN // HIGH schaltet LED AUS digitalWrite(ledRedPin, r ? LOW : HIGH); digitalWrite(ledGreenPin, g ? LOW : HIGH); digitalWrite(ledBluePin, b ? LOW : HIGH); }

Fazit und Ausblick

Das Cheap Yellow Display (ESP32-2432S028) lässt sich nicht nur über die integrierte Touchoberfläche bedienen, sondern auch problemlos mit externen Tastern erweitern. Über die freien GPIOs auf der Rückseite können mehrere Buttons direkt angeschlossen und mit der internen PullUp-Funktion des ESP32 ausgewertet werden.

Gerade bei Projekten, bei denen das Display geschützt verbaut ist oder eine robuste Bedienung erforderlich ist, sind physische Taster eine sinnvolle Ergänzung.

Dank der integrierten RGB-LED eignet sich das CYD außerdem hervorragend, um Eingaben direkt sichtbar zu machen – ganz ohne zusätzlichen Display-Code.

Ausblick

Im nächsten Schritt zeige ich dir, wie du noch mehr Taster an nur einem einzigen GPIO betreiben kannst – mithilfe eines analogen Eingangs und einer Widerstandsleiter. Damit lässt sich die Anzahl der Eingabemöglichkeiten deutlich erhöhen, ohne zusätzliche Hardware wie Portexpander einsetzen zu müssen.

Wenn du das Cheap Yellow Display weiter ausreizen möchtest, folgen außerdem Beiträge zu:

- Mehrere Taster an einem ADC-Pin - Drehencoder am CYD - Erweiterung über I²C - Gehäusebau und feste Integration

Das CYD bietet deutlich mehr Möglichkeiten, als es auf den ersten Blick vermuten lässt.

FAQ – Taster am Cheap Yellow Display (ESP32-2432S028)

Wie kann ich einen Taster am Cheap Yellow Display anschließen?

Ein Taster wird einfach zwischen einem freien GPIO und GND angeschlossen. Im Code wird der Pin als INPUT_PULLUP konfiguriert. Dadurch ist kein externer Widerstand notwendig. Beim Drücken des Tasters wechselt der Pin von HIGH auf LOW.

Warum reagiert mein Taster nicht am ESP32-2432S028?

Mögliche Ursachen sind:

- Kein gemeinsamer GND angeschlossen - Falscher GPIO verwendet - PullUp-Widerstand im Code vergessen - Pin im vorherigen Sketch als OUTPUT konfiguriert gewesen

Prüfe außerdem, ob du den Taster korrekt zwischen GPIO und GND verbunden hast.

Warum ist die RGB-LED am CYD invertiert?

Die RGB-LED auf dem Cheap Yellow Display ist als Common-Anode-LED ausgeführt. Das bedeutet:

- LOW = LED an - HIGH = LED aus

Dieses Verhalten unterscheidet sich von manchen Arduino-Beispielen.

Wie viele Taster kann ich am Cheap Yellow Display anschließen?

Über die freien GPIOs auf der Rückseite stehen insgesamt fünf Pins zur Verfügung. Mit den Mini-JST-Anschlüssen lassen sich komfortabel zwei bis vier Taster anschließen.

Für noch mehr Taster kann ein analoger Eingang mit einer Widerstandsleiter verwendet werden.

Kann ich 5V an die GPIOs des Cheap Yellow Display anschließen?

Nein. Die GPIOs des ESP32 arbeiten mit 3,3V Logik. 5V können den Mikrocontroller dauerhaft beschädigen.

Kann ich mehrere Taster an einem GPIO betreiben?

In meinem bereits veröffentlichten Beitrag zum Edelmetall-Monitor auf dem Cheap Yellow Display habe ich gezeigt, wie sich mit LVGL ein interaktives Dashboard auf dem ESP32 umsetzen lässt. Dort lag der Fokus auf der Anzeige von Echtzeitdaten und der Gestaltung einer Touch-Oberfläche.

In diesem Beitrag gehen wir einen Schritt weiter: Ich zeige, wie du eine RGB-LED direkt über das Touchdisplay steuerst – mit farbigen Buttons zum Ein- und Ausschalten der einzelnen Kanäle sowie einem Slider zur Regelung der Helligkeit. Das Projekt eignet sich perfekt, um den Umgang mit LVGL-Events, Slidern und Button-Callbacks praxisnah zu vertiefen.

Wo bekommt man das Cheap Yellow Display (CYD)?

Das sogenannte Cheap Yellow Display (CYD) ist kein reines TFT-Modul, sondern ein komplettes ESP32-Entwicklungsboard mit integriertem 2,8″-Touchdisplay (240 × 320 Pixel). Der ESP32 ist bereits auf der Platine verbaut, sodass keine zusätzliche Display-Ansteuerung oder externe Verkabelung notwendig ist – ideal für Projekte mit LVGL und Touch-GUI.

Lieferumfang - ESP32 mit 2.8" TFT-Display & Touch (ESP32-2432S028R)

ESP32 mit 2.8" TFT-Display & Touch (ESP32-2432S028R)

Rückseite - ESP32-2432S028R

Erhältlich ist das CYD unter Bezeichnungen wie:

- ESP32-2432S028 - ESP32-2432S028R - Cheap Yellow Display ESP32

Typische Bezugsquellen sind AliExpress, Amazon und eBay. Auf AliExpress ist das Board oft für unter 15 € erhältlich, während es bei Amazon in der Regel etwas teurer, dafür aber schneller lieferbar ist.

ESP32-2432S028R auf Aliexpress

Aufbau des Cheap Yellow Display - ESP32-2432S028R

Das Cheap Yellow Display (ESP32-2432S028R) ist ein kompaktes All-in-One-Entwicklungsboard, bei dem ein ESP32-Mikrocontroller, ein 2,8″-TFT-Display (240 × 320 Pixel) sowie ein resistiver Touchscreen bereits auf einer Platine integriert sind. Dadurch eignet sich das Board besonders gut für Projekte mit LVGL und interaktiven Benutzeroberflächen, ohne dass zusätzliche Hardware notwendig ist.

Ein praktisches Detail ist die auf der Rückseite des Boards fest verbaute RGB-LED. Diese ist direkt mit drei GPIO-Pins des ESP32 verbunden und kann ohne zusätzliche Verdrahtung angesteuert werden.

In diesem Projekt nutze ich dafür folgende Pins:

- Rot: GPIO 4 - Grün: GPIO 16 - Blau: GPIO 17

Die genaue Belegung kann je nach Board-Variante leicht abweichen. Im Zweifel hilft ein Blick auf das jeweilige Pinout oder ein kurzer Funktionstest per Code.

Aufbau - ESP32-2432S028R Cheap-Yellow-Display

Wichtig: Die auf dem CYD verbaute RGB-LED ist über eine gemeinsame Kathode angeschlossen. Dadurch ist die PWM-Logik im Vergleich zu einer „normalen“ Ansteuerung invertiert:

- PWM-Wert 0 → LED voll an - PWM-Wert 255 → LED aus

Für die Helligkeitsregelung muss der gewünschte Wert daher entsprechend umgerechnet werden (z. B. 255 - Helligkeit). Darauf gehe ich im Code weiter unten konkret ein.

Voraussetzungen & benötigte Bibliotheken

Bevor wir das Touchdisplay kalibrieren und anschließend die RGB-LED über Buttons und Slider steuern, müssen zunächst die grundlegenden Software-Voraussetzungen erfüllt sein.

Für dieses Projekt benötigst du:

- ein Cheap Yellow Display (ESP32-2432S028R*) - die Arduino IDE (empfohlen: Version 2.x) - folgende Bibliotheken: - lvgl - TFT_eSPI - XPT2046_Touchscreen

Die Bibliotheken kannst du direkt über den Bibliotheksverwalter der Arduino IDE installieren.

Zusätzlich muss die TFT_eSPI-Library einmalig auf das Cheap Yellow Display angepasst werden (z. B. über User_Setup.h oder User_Setup_Select.h). Dabei werden unter anderem die Display-Pins, die Auflösung (240 × 320 Pixel) und der verwendete Controller festgelegt.

Diese Konfiguration ist sowohl für die spätere LVGL-GUI als auch für den Kalibrier-Sketch des Touchdisplays erforderlich. Wie die Anpassung von TFT_eSPI im Detail funktioniert, habe ich bereits in meinem vorherigen Beitrag zum Edelmetall-Monitor auf dem Cheap Yellow Display beschrieben.

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!

Touchdisplay kalibrieren (XPT2046)

Damit Touch-Eingaben auf dem Cheap Yellow Display zuverlässig an der richtigen Position ankommen, muss der resistive Touchcontroller (XPT2046) einmal kalibriert werden. Der Controller liefert rohe Analogwerte, die je nach Board leicht variieren. Diese Rohwerte müssen später auf die tatsächliche Displayauflösung (240 × 320 Pixel) gemappt werden.

Für die Kalibrierung nutze ich einen kleinen Test-Sketch, der die Rohdaten der X- und Y-Koordinaten sowohl im seriellen Monitor als auch direkt auf dem Display ausgibt.

Vorgehensweise - Kalibrier-Sketch auf das CYD flashen. - Seriellen Monitor auf 115200 Baud öffnen. - Nacheinander möglichst genau in die vier Ecken des Displays tippen: - oben links - oben rechts - unten links - unten rechts - Die jeweils kleinsten und größten Werte notieren: - TS_X_MIN = kleinster gemessener X-Wert - TS_X_MAX = größter gemessener X-Wert - TS_Y_MIN = kleinster gemessener Y-Wert - TS_Y_MAX = größter gemessener Y-Wert

Diese vier Werte werden anschließend im Haupt-Sketch verwendet, um die Touch-Rohdaten korrekt auf die Display-Pixel zu skalieren:

#define TS_X_MIN 200 #define TS_X_MAX 3700 #define TS_Y_MIN 240 #define TS_Y_MAX 3800 Touch-Rohwerte auf Bildschirmkoordinaten abbilden

Im eigentlichen Projekt werden die Rohwerte dann mit map() auf die Displayauflösung umgerechnet:

int px = map(p.x, TS_X_MIN, TS_X_MAX, 1, TFT_HOR_RES); int py = map(p.y, TS_Y_MIN, TS_Y_MAX, 1, TFT_VER_RES);

Damit erhält LVGL die korrekten Koordinaten für Buttons, Slider und andere GUI-Elemente.

Typische Stolperfallen - Achsen vertauscht oder gespiegelt: Je nach Board-Variante und ts.setRotation() kann es nötig sein, X/Y zu tauschen oder die Mapping-Richtung zu invertieren. - Ungenaue Werte an den Rändern: Die äußersten Pixel lassen sich mit resistiven Touchscreens oft nicht perfekt treffen. Deshalb sollte man die Ecken möglichst präzise antippen und die Werte leicht „abrunden“.

Nach dieser einmaligen Kalibrierung funktionieren Touch-Events auf dem CYD deutlich zuverlässiger – und Buttons sowie Slider lassen sich exakt dort bedienen, wo sie angezeigt werden.

Quellcode /* CYD Touch Rohdaten / Kalibrier-Helfer ----------------------------------- Zweck: - Rohwerte (X/Y) des XPT2046 Touchcontrollers ausgeben (Serial + Label) - Damit kannst du die Kalibrierwerte TS_X_MIN/MAX und TS_Y_MIN/MAX ermitteln Wichtig: - Dieser Sketch gibt aktuell die ROHWERTE p.x/p.y aus (nicht gemappt!) - Für LVGL "Pointer Device" sollte man data->state und data->point setzen. In diesem Sketch ist das absichtlich nicht nötig, weil wir nur Rohdaten loggen. - Dennoch: data->state wird bei Touch aktuell nicht auf PRESSED gesetzt. Das ist ok, solange du nicht willst, dass LVGL wirklich "Klicks" verarbeitet. */ #include #include #include /* -------------------- Touch-Pins (CYD Standard) -------------------- XPT2046 ist ein resistiver Touch-Controller, der per SPI angebunden ist. Diese Pins sind typisch für ESP32-2432S028R (CYD). */ #define XPT2046_IRQ 36 #define XPT2046_MOSI 32 #define XPT2046_MISO 39 #define XPT2046_CLK 25 #define XPT2046_CS 33 SPIClass touchSPI(HSPI); // HSPI-Bus wird für Touch genutzt XPT2046_Touchscreen ts(XPT2046_CS, XPT2046_IRQ); /* -------------------- Display-Auflösung / Rotation -------------------- TFT-Auflösung: 240 x 320 Pixel LVGL Rotation: abhängig davon, wie dein Display physisch "steht" */ #define TFT_HOR_RES 240 #define TFT_VER_RES 320 #define TFT_ROTATION LV_DISPLAY_ROTATION_270 /* UI-Farben */ #define COLOR_ORANGE lv_color_hex(0xFB8C00) #define COLOR_BG lv_color_hex(0x000000) /* -------------------- LVGL Draw Buffer -------------------- LVGL rendert in einen Buffer und TFT_eSPI gibt ihn auf das Display aus. */ #define DRAW_BUF_SIZE (TFT_HOR_RES * TFT_VER_RES / 10 * (LV_COLOR_DEPTH / 8)) uint32_t draw_buf; /* Label, in das wir live die Koordinaten schreiben */ lv_obj_t *koordinaten; /* -------------------- Touch-Kalibrierwerte -------------------- Diese Werte werden im eigentlichen Projekt für map(...) genutzt. In diesem Rohdaten-Sketch sind sie nicht notwendig, da du Rohwerte anzeigen willst. -> Du kannst sie hier später mit den gemessenen Eckwerten aktualisieren. */ #define TS_X_MIN 200 #define TS_X_MAX 3700 #define TS_Y_MIN 240 #define TS_Y_MAX 3800 /* -------------------- LVGL Input Callback -------------------- LVGL fragt hier regelmäßig den Touch ab. Wir prüfen: - IRQ aktiv? (tirqTouched) - Touch wirklich gedrückt? (touched) Dann lesen wir die Rohwerte per getPoint(). Hinweis: getPoint() liefert Rohwerte (typisch ca. 0..4095). */ static void my_touch_read(lv_indev_t *indev, lv_indev_data_t *data) { (void)indev; if (ts.tirqTouched() && ts.touched()) { TS_Point p = ts.getPoint(); // Rohwerte in die serielle Konsole ausgeben Serial.print("Touch: X = "); Serial.print(p.x); Serial.print(" | Y = "); Serial.println(p.y); // Rohwerte als Text auf dem Display anzeigen char coord; sprintf(coord, "X=%d Y=%d", p.x, p.y); lv_label_set_text(koordinaten, coord); // Für diesen Sketch optional: // data->state = LV_INDEV_STATE_PRESSED; // (Wenn du willst, dass LVGL es als "echten Touch" erkennt.) } else { // Kein Touch data->state = LV_INDEV_STATE_RELEASED; } } void setup() { Serial.begin(115200); Serial.println("Touch-Koordinaten Test gestartet"); // LVGL starten lv_init(); // Touch SPI initialisieren und Touch Controller starten touchSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS); ts.begin(touchSPI); // Rotation für Touchcontroller (nicht identisch mit Displayrotation!) // Je nach Board kann hier 0..3 nötig sein. ts.setRotation(2); // Display für LVGL erstellen lv_display_t *disp = lv_tft_espi_create(TFT_HOR_RES, TFT_VER_RES, draw_buf, sizeof(draw_buf)); lv_display_set_rotation(disp, TFT_ROTATION); // Touch in LVGL registrieren lv_indev_t *indev = lv_indev_create(); lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER); lv_indev_set_read_cb(indev, my_touch_read); // Screen Styling lv_obj_t *scr = lv_screen_active(); lv_obj_set_style_bg_color(scr, COLOR_BG, 0); lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0); // Überschrift lv_obj_t *lbl = lv_label_create(scr); lv_label_set_text(lbl, "Rohdaten"); lv_obj_set_style_text_color(lbl, COLOR_ORANGE, 0); lv_obj_set_style_text_font(lbl, &lv_font_montserrat_22, 0); lv_obj_align(lbl, LV_ALIGN_TOP_MID, 0, 90); // Label für Koordinatenanzeige koordinaten = lv_label_create(scr); lv_obj_set_style_text_color(koordinaten, COLOR_ORANGE, 0); lv_obj_set_style_text_font(koordinaten, &lv_font_montserrat_22, 0); lv_obj_align(koordinaten, LV_ALIGN_TOP_MID, 0, 120); } void loop() { // LVGL "arbeiten lassen" lv_timer_handler(); lv_tick_inc(5); delay(5); }

Programmierung mit LVGL

Da ich in meinem vorherigen Beitrag bereits ausführlich gezeigt habe, wie das Cheap Yellow Display mit ESP32 und LVGL in Betrieb genommen und grundlegend konfiguriert wird, steigen wir hier direkt in die Praxis ein.

Ziel ist es, eine einfache Touch-Oberfläche zu erstellen, mit der sich eine RGB-LED über drei Buttons (Rot, Grün, Blau) ein- und ausschalten lässt. Zusätzlich kommt ein Slider zum Einsatz, über den die Helligkeit aller aktiven Kanäle geregelt wird.

Dabei zeige ich unter anderem:

- wie Buttons und Slider mit LVGL erstellt werden - wie Event-Callbacks für Touch-Eingaben funktionieren - wie sich die GUI-Elemente mit der Hardware (RGB-LED) verknüpfen lassen - und worauf man bei PWM-Ansteuerung und Helligkeitsregelung achten sollte

Wenn du das CYD bereits lauffähig hast, kannst du den folgenden Code direkt übernehmen und an deine eigenen GPIO-Pins anpassen.