Discover Top Posts Tagged with #esp32-2432s028

LDR auf dem Cheap Yellow Display auslesen – Schritt für Schritt erklärt

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 bietet hier jedoch den Vorteil, dass sich Sensorwerte nicht nur anzeigen, sondern auch ansprechend visualisieren lassen – etwa durch grafische Elemente wie Balken, Kreise oder dynamische Oberflächen.

#CheapYellowDisplay #ESP32-2432S028 #Fotowiderstand #LDR

Cheap Yellow Display als Heizungs-Thermometer: DS18B20 Tauchfühler anschließen

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).

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.

Quellcode /* ================================================================ Titel: Cheap Yellow Display als Heizungs-Thermometer Projekt: DS18B20 Tauchfühler mit LVGL Dashboard Autor: Stefan Draeger Website: https://draeger-it.blog Beitrag: https://draeger-it.blog/cheap-yellow-display-als-heizungs-thermometer-ds18b20-tauchfuehler-anschliessen/ Datum: Februar 2026 Plattform: Cheap Yellow Display (ESP32-2432S028) ================================================================ Beschreibung: --------------------------------------------------------------- Dieses Projekt zeigt, wie ein oder mehrere DS18B20 Temperatur- sensoren (wasserdichte Tauchfühler) am Cheap Yellow Display betrieben werden. Funktionen: - Auslesen von bis zu 5 DS18B20 Sensoren über OneWire (GPIO 27) - Eindeutige Adressierung über 64-Bit Sensor-ID - Temperaturmessung mit 11-Bit Auflösung - Anzeige der Messwerte auf dem Display via LVGL - Serielles Debugging über USB Ziel des Projekts ist es, ein kompaktes Heizungs-Thermometer mit Live-Anzeige zu realisieren, das sich flexibel erweitern lässt (z. B. Logging, Cloud-Anbindung, Grenzwertüberwachung). Hinweis: Für die Anzeige wird LVGL in Kombination mit TFT_eSPI verwendet. Die Display-Konfiguration muss zuvor korrekt eingerichtet sein. Weitere Details und Erweiterungen findest du im Blogbeitrag. --------------------------------------------------------------- */ #include #include #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; // Farben wie in deinem Beispiel #define COLOR_BG lv_color_hex(0x000000) #define COLOR_WHITE lv_color_hex(0xFFFFFF) #define COLOR_YELLOW lv_color_hex(0xFDD835) #define COLOR_GRAY lv_color_hex(0x9E9E9E) // ---------------- DS18B20 ---------------- #define sensorPin 27 OneWire oneWire(sensorPin); DallasTemperature ds(&oneWire); const int MAX_SENSORS = 5; DeviceAddress sensorAddrs; // ---------------- UI ---------------- lv_obj_t *titleLabel; lv_obj_t *sensorLabels; unsigned long lastRead = 0; const int PAUSE = 1000; // 1s Update ist praxisnah für Heizung bool firstUpdateDone = false; bool isValidAddress(const DeviceAddress addr) { for (uint8_t i = 0; i < 8; i++) { if (addr != 0) return true; } return false; } void setupLVGL() { 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); // Titel titleLabel = lv_label_create(scr); lv_label_set_text(titleLabel, "DS18B20 Sensoren"); lv_obj_set_style_text_color(titleLabel, COLOR_YELLOW, 0); lv_obj_set_style_text_font(titleLabel, &lv_font_montserrat_28, 0); lv_obj_align(titleLabel, LV_ALIGN_TOP_MID, 0, 0); // Sensorzeilen for (int i = 0; i < MAX_SENSORS; i++) { sensorLabels = lv_label_create(scr); lv_obj_set_style_text_color(sensorLabels, COLOR_WHITE, 0); lv_obj_set_style_text_font(sensorLabels, &lv_font_montserrat_18, 0); lv_obj_align(sensorLabels, LV_ALIGN_TOP_LEFT, 0, 50 + i * 30); lv_label_set_text_fmt(sensorLabels, "Sensor %d: --.- xC2xB0C", i + 1); } // Kleiner Hinweis unten lv_obj_t *hint = lv_label_create(scr); lv_obj_set_style_text_color(hint, COLOR_GRAY, 0); lv_obj_set_style_text_font(hint, &lv_font_montserrat_12, 0); lv_label_set_text(hint, "Stefan Draeger - https://draeger-it.blog"); lv_obj_align(hint, LV_ALIGN_BOTTOM_MID, 0, 0); } void setupSensors() { ds.begin(); // Für schnellere Messungen: 11-bit (~375ms). Für Heizung völlig ausreichend.

#CheapYellowDisplay #DS18B20 #ESP32-2432S028 #Tauchfühler #Thermometer

ESP32 Touch-GUI mit LVGL: RGB-LED per Slider und Buttons steuern

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.

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.

/* ESP32-2432S028R (Cheap Yellow Display / CYD) + LVGL --------------------------------------------------- Ziel: - Touch-GUI mit 3 Buttons (Rot/Grün/Blau) zum Ein/Aus der RGB-LED Kanäle - Slider zur Helligkeitsregelung (PWM) für aktive Kanäle - Die RGB-LED ist auf dem Board fest verbaut und besitzt eine gemeinsame Kathode, deshalb ist die PWM-Logik invertiert: 0 = voll an, 255 = aus. Hardware: - TFT 240x320 mit TFT_eSPI - Resistiver Touch XPT2046 (SPI) - RGB-LED Pins: R=GPIO4, G=GPIO16, B=GPIO17 (kann je nach Board variieren) */ #include #include #include /* ----------------------------- Touch (XPT2046) Pins ----------------------------- Diese Pinbelegung entspricht dem typischen CYD-Board. Wichtig: Touch läuft über SPI (hier HSPI), getrennt vom Display. */ #define XPT2046_IRQ 36 #define XPT2046_MOSI 32 #define XPT2046_MISO 39 #define XPT2046_CLK 25 #define XPT2046_CS 33 SPIClass touchSPI(HSPI); // Wir nutzen den HSPI-Bus für Touch XPT2046_Touchscreen ts(XPT2046_CS, XPT2046_IRQ); /* ----------------------------- Display Einstellungen ----------------------------- TFT-Auflösung und LVGL-Rotation (abhängig von deinem Setup) */ #define TFT_HOR_RES 240 #define TFT_VER_RES 320 #define TFT_ROTATION LV_DISPLAY_ROTATION_270 /* Forward Declarations (Funktionsprototypen) - Damit kann die Funktion später im Code definiert werden, aber vorher schon genutzt werden. */ static void on_btn_press(lv_event_t *e); // (wird in deinem Code aktuell nicht genutzt) static void slider_event_cb(lv_event_t *e); static void refreshBrightness(); /* ----------------------------- LVGL Draw Buffer ----------------------------- LVGL rendert in einen Draw Buffer (Teilstücke), der dann an TFT_eSPI ausgegeben wird. Faustregel: größerer Buffer = flüssiger, aber mehr RAM-Verbrauch. Hier: 1/10 des Screens. Bei LV_COLOR_DEPTH = 16 braucht LVGL entsprechend Speicher. */ #define DRAW_BUF_SIZE (TFT_HOR_RES * TFT_VER_RES / 10 * (LV_COLOR_DEPTH / 8)) uint32_t draw_buf; // uint32_t Array => "in 32-bit Blöcken" /* ----------------------------- Farben für UI ----------------------------- lv_color_hex(...) erzeugt LVGL-Farbwerte. */ #define COLOR_BLACK lv_color_hex(0x000000) #define COLOR_GOLD lv_color_hex(0xD4AF37) #define COLOR_SILVER lv_color_hex(0xD9D9D9) #define COLOR_WHITE lv_color_hex(0xFFFFFF) /* Achtung: COLOR_BLUE ist doppelt definiert (einmal oben, einmal unten) -> Das ist nicht kritisch, aber unsauber. Die zweite Definition "gewinnt". */ #define COLOR_BLUE lv_color_hex(0x1E88E5) #define COLOR_RED lv_color_hex(0xE53935) #define COLOR_RED_DARK lv_color_hex(0x8C2A27) #define COLOR_GREEN lv_color_hex(0x43A047) #define COLOR_GREEN_DARK lv_color_hex(0x1B331C) #define COLOR_BLUE lv_color_hex(0x1E88E5) #define COLOR_BLUE_DARK lv_color_hex(0x104675) /* ----------------------------- Touch Kalibrierung ----------------------------- TS_X_MIN/MAX und TS_Y_MIN/MAX sind Rohwerte des XPT2046 Controllers. Diese Werte kommen aus einer Kalibrierung: Touch an Ecken -> Rohwerte messen. */ #define TS_X_MIN 200 #define TS_X_MAX 3700 #define TS_Y_MIN 240 #define TS_Y_MAX 3800 /* ----------------------------- RGB LED Pins ----------------------------- Auf dem CYD ist die RGB-LED fest verbaut. Diese GPIOs sind typische Belegungen bei ESP32-2432S028R. */ #define LED_RED 4 #define LED_GREEN 16 #define LED_BLUE 17 /* ----------------------------- Status Flags ----------------------------- Merken, ob der jeweilige Farbkanal aktiv (true) oder aus (false) ist. */ static bool statusLedRed = false; static bool statusLedGreen = false; static bool statusLedBlue = false; /* ----------------------------- LVGL Objekte (globale Zeiger) ----------------------------- Werden in setup() erzeugt und später in Callbacks genutzt. */ lv_obj_t *btn_red; lv_obj_t *btn_green; lv_obj_t *btn_blue; lv_obj_t *slider; lv_obj_t *slider_label; /* Helligkeit 0..255 (logisch "wie hell soll es sein?") Da LED invertiert ist, wird im PWM später 255 - brightness verwendet.

#CheapYellowDisplay #ESP32-2432S028 #ESP32-2432S028R

ESP32 Development Board mit 2,8 Zoll Touch Display: Programmieren für Anfänger

In diesem Beitrag möchte ich dir ein ESP32 Development Board mit Touch Display vorstellen und zeigen wie dieser programmiert wird. https://youtu.be/xEy-4FJiRHs Ein herzliches Dankeschön an lowstreaming für die großzügige Unterstützung mit dem ESP32 Mikrocontroller. Diese Geste ermöglicht mir, die spannenden Möglichkeiten des Mikrocontrollers und des 2,8 Zoll (ca. 7 cm) Touch Displays zu erkunden und gemeinsam Lösungen zu finden. Deine Unterstützung macht diese technologische Reise besonders inspirierend. Vielen Dank!

Bezug

Diesen Mikrocontroller bekommst du auf ebay.de für derzeit knapp 18 €* inkl. Versandkosten. Auf alieexpress.com findest du dieses Modul unter "ESP32 Development Board 2.8inch LCD TFT" jedoch deutlich günstiger, jedoch musst du dort mit einer längeren Lieferzeit rechnen. 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!

Lieferumfang

Zum Lieferumfang gehört neben dem Mikrocontroller noch: - ein Micro-USB-Kabel, - ein Stift für den Touch Screen, - ein Anschlusskabel

Pinout des ESP32 Development Board 2.8inch LCD TFT

Schauen wir uns zunächst den Aufbau des ESP32 Development Boards an. Auf der Vorderseite findest du das 2,8 Zoll TFT Touch Display. Auf der Rückseite wird es schon spannender, denn dort findest du einige Schnittstellen.

Aufbau ESP32 Development Board mit 2,8 Zoll TFT Touch Display An den beiden seitlichen Schnittstellen kannst du zusätzliche Sensoren / Aktoren anschließen und programmieren. Des Weiteren findest du noch eine RGB LED, an welcher du die Farben separat via PWM Signal steuern kannst (es ist also keine WS18B20 LED oder ähnliches).

Beschriftung der Schnittstellen und RGB LED am ESP32 Development Board

Technische Daten des ESP32 Development Board mit 2,8 Zoll Touch Display

ModellESP32-2432S028RProzessorESP32-WROOM-32(ESP32-D0WDQ6) Espressif ESP32 32 Bit Dual Core ProzessorBildschirmTFT Display mit ILI9341 Treiber, Auflösung: 240 px x 320 px, 2,8 Zoll (ca. 7 cm) TFT-Display, TouchscreenBetriebstemperatur -20 bis + 70 °CVersorgungsspannung5V, ca. 90 mAGewicht44 gModulgröße8,6 cm x 5,4 cm

Anschluss an den Computer und installieren des CH340 Treibers

Wenn du diesen Mikrocontroller an deinen Computer mit dem mitgelieferten Micro-USB-Kabel anschließt, dann sollte dieser sofort erkannt werden.

Wenn dieser nicht erkannt wird, wie in der Grafik zu sehen, dann musst du den Treiber für den USB-Serial Converter CH340 installieren. Diesen Treiber kannst du dir unter https://www.wch.cn/download/CH341SER_ZIP.html herunterladen. Die Webseite ist leider auf Chinesisch, aber du kannst dir diese recht einfach im Browser mit wenigen Klicks übersetzen lassen.

Programmieren des ESP32 Development Board in der Arduino IDE

Zunächst möchte ich dieses Board in der Arduino IDE programmieren. Sämtlichen Quellcode von den Beispielen findest du auch auf meinem GitHub Repository unter StefanDraeger/ESP32_Development_Board_ESP32-2432S028R. Installieren des Boardtreibers für den ESP32 Dazu muss zunächst der Boardtreiber für den Mikrochip ESP-WROOM-32 installiert werden. Im ersten Schritt müssen wir wie erwähnt den Boardtreiber installieren, dazu navigieren wir zu den Einstellungen und wählen dort die Schaltfläche hinter "Zusätzliche Boardverwalter URLs"(1).

Im neuen Dialog geben wir nun die nachfolgende Adresse(2) ein. https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json Und bestätigen dieses mit der Schaltfläche OK (3).

Jetzt können wir zum Boardverwalter (4) wechseln und nach ESP32(5) suchen. Aus der Ergebnisliste wählen wir im Eintrag "esp32 von Espressif Systems" (6) die Schaltfläche INSTALLIEREN. In meinem Falle ist diese bereits in der derzeit aktuellen Version 2.014 installiert und ich habe hier die Schaltfläche ENTFERNEN (7).

Programmieren der RGB LED Auf der Rückseite des ESP32 Development Boards findest du eine RGB LED, welche du über die nachfolgenden Pins via PWM Signal steuern kannst. - Rot > IO17 - Grün > IO4 - Blau > IO16 Beispiel - setzen einer Farbe an der RGB LED via PWM Signal Auf der Seite https://www.rapidtables.com/web/color/RGB_Color.html findest du einen einfachen ColorPicker aus welchem du dir eine Farbe auswählen und den RGB Wert ablesen kannst.

Diesen RGB Wert (R = red, G = green, B = blue) setzt sich aus den Farben rot, grün und blau zusammen. Diese Farbe kannst du dann mit der Funktion "analogWrite(, )" setzen. //RGB LED //LED, Farbe rot #define ledRed 17 //LED, Farbe grün #define ledGreen 4 //LED, Farbe blau #define ledBlue 16 void setup() { //definieren das die Pins als Ausgang dienen pinMode(ledRed, OUTPUT); pinMode(ledGreen, OUTPUT); pinMode(ledBlue, OUTPUT); //setzen der Farbe lila an der RGB LED //Farbe rot mit 178 von max. 255 analogWrite(ledRed, 178); //Farbe grün mit 102 von max. 255 analogWrite(ledGreen, 102); //Farbe blau mit dem maximalen Wert von 255 analogWrite(ledBlue, 255); } void loop() { } Wenn der Quellcode nun übertragen wurde, dann sollte die RGB LED in der Farbe Lila aufleuchten.

Programm - setzen der Farbe Lila an der RGB LED des ESP32 Development BoardHerunterladen Beispiel - anzeigen aller Farbkombinationen an der RGB LED Wir können jetzt mit drei For-Schleifen alle Farbkombinationen auf der RGB LED aufleuchten lassen. Dazu müssen wir lediglich in jeder Schleife den entsprechenden Farbwert setzen. //RGB LED //LED, Farbe rot #define ledRed 17 //LED, Farbe grün #define ledGreen 4 //LED, Farbe blau #define ledBlue 16 void setup() { //definieren das die Pins als Ausgang dienen pinMode(ledRed, OUTPUT); pinMode(ledGreen, OUTPUT); pinMode(ledBlue, OUTPUT); } void loop() { //For-Schleifen über die einzelnen Farbwerte for (int red = 0; red < 255; red++) { //setzen der Farbe rot mit dem aktuellen Wert aus der For-Schleife analogWrite(ledRed, red); for (int green = 0; green < 255; green++) { //setzen der Farbe grün mit dem aktuellen Wert aus der For-Schleife analogWrite(ledGreen, green); for (int blue = 0; blue < 255; blue++) { //setzen der Farbe blau mit dem aktuellen Wert aus der For-Schleife analogWrite(ledBlue, blue); //eine kleine Pause von 25 Millisekunden delay(25); } } } } TFT-Touchdisplay programmieren Als Nächstes möchte ich dir gerne zeigen, wie das TFT-Touchdisplay programmiert wird. Installieren der benötigten Bibliothek zum Ansteuern des TFT-Touchdisplays Bevor wir Text, Bilder oder geometrische Formen auf dem TFT-Display anzeigen können, müssen wir eine Bibliothek installieren. In der Arduino IDE öffnen wir dazu den Bibliotheksverwalter (1) und suchen dort nach "TFT_eSPI" (2), um diese Bibliothek jetzt zu installieren, müssen wir auf die Schaltfläche "INSTALLIEREN" klicken. In meinem Fall habe ich diese Bereits installiert und bei mir wird die Schaltfläche "ENTFERNEN" angezeigt.

Diese Bibliothek kommt mit sehr vielen Beispielen daher, welche wir jedoch erst nach einer kleinen Änderung i lauffähig auf den Mikrocontroller aufspielen können. Konfiguration für das TFT-Display setzen Bevor wir jedoch mit dem TFT-Display arbeiten können, müssen wir die Konfiguration setzen, diese geben wir in der Datei "User_Setup.h" ein. Die Datei findest du im Ordner C:Users%username%DocumentsArduinolibrariesTFT_eSPI Es ist ratsam sich von der originalen Datei eine kopie zu erstellen so das man ggf. noch andere Displays später programmieren kann.

Die nachfolgende Konfiguration habe ich vom GitHub Repository https://github.com/OttoMeister/ARDUINO_ESP32-2432S028R entnommen und funktioniert für den hier gezeigten Mikrocontroller. #define ILI9341_2_DRIVER #define TFT_WIDTH 240 #define TFT_HEIGHT 320 #define TFT_BL 21 #define TFT_BACKLIGHT_ON HIGH #define TFT_MOSI 13 #define TFT_SCLK 14 #define TFT_CS 15 #define TFT_DC 2 #define TFT_RST 12 #define TFT_BL 21 #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 55000000 #define SPI_READ_FREQUENCY 20000000 //Touch Screen: ?????????ß #define XPT2046_IRQ 36 #define XPT2046_MOSI 32 #define XPT2046_MISO 39 #define XPT2046_CLK 25 #define XPT2046_CS 33 #define SPI_TOUCH_FREQUENCY 2500000 Beispiel - Text "Hallo Welt!" auf dem TFT-Display anzeigen Schreiben wir zunächst auf das TFT-Display den Text "Hallo Welt!" in unterschiedlicher Textgröße, Farbe und Position. //Bibliothek zum ansteuern des TFT Displays #include #include //Datei mit den definierten Schriftarten #include "Free_Fonts.h" //eine instanz vom TFT Display Objekt erstellen TFT_eSPI tft = TFT_eSPI(); void setup(void) { //beginn der kommunikation mit dem TFT Display tft.init(); //drehen des Displays tft.setRotation(3); //Hintergrundfarbe auf Schwarz setzen tft.fillScreen(TFT_BLACK); //Textfarbe Magenta mit Hintergrundfarbe Schwarz tft.setTextColor(TFT_MAGENTA, TFT_BLACK); //Schriftart FSB9 setzen tft.setFreeFont(FSB9); //den Cursor an die Position x=10 & y=45 setzen tft.setCursor(10, 45); //den Text "Hallo Welt!" an die gesetzte Cursorposition //schreiben tft.print("Hallo Welt!"); //Weitere Texte mit unterschiedlichen Farben, Positionen und //Schriftgrößen auf dem TFT-Display anzeigen tft.setTextColor(TFT_VIOLET, TFT_BLACK); tft.setFreeFont(FSB12); tft.setCursor(10, 65); tft.print("Hallo Welt!"); tft.setTextColor(TFT_PINK, TFT_BLACK); tft.setFreeFont(FSB18); tft.setCursor(10, 95); tft.print("Hallo Welt!"); tft.setTextColor(TFT_GREEN, TFT_BLACK); tft.setFreeFont(FSB24); tft.setCursor(10, 130); tft.print("Hallo Welt!"); } void loop() { } Der Code bewirkt nun das auf dem Display der Text "Hallo Welt!" in unterschiedlichen Textgrößen, Farben und Positionen angezeigt wird.

Programm - schreiben von Text auf dem TFT-Display des ESP32 Development BoardHerunterladen Beispiel - Bild auf dem TFT-Display anzeigen Zur Bibliothek TFT_eSPI erhältst du wie erwähnt sehr viele Beispiele, eines davon ist "LittleFS_PNG". Dieses Beispiel demonstriert wie du ein Bild auf dem Display anzeigen lassen kannst. Einrichten eines LittleFS Dateisystems auf dem ESP32 Das LittleFS ist ein eigenes kleines, leichtgewichtiges Dateisystem welches auf Embeddedsystems wie dem ESP32 anwendung findet. Die Dateien werden dabei auf dem ESP32 Chip gespeichert und nicht auf der SD-Karte! Damit du Daten auf den Chip in diesem speziellen Format speichern kannst, benötigst du ein Plugin als JAR-Datei, jedoch kann du dieses nur in die klassische Arduino IDE (Version 1.8.x) integrieren.

Ich habe mir nun die derzeitige Version 1.8.19 als ZIP-Datei heruntergeladen und entpackt. Im nächsten Schritt muss nun der Pfad wiefolgt angelegt werden arduino-1.8.19toolsESP32FStool und in diesen Ordner die Datei esp32fs.jar abgelegt werden.

Ablegen von Dateien auf dem LittleFS Dateisystems In meinem Fall wechsel ich jetzt also nun von der neuen Arduino IDE 2.x zur klassischen Version um eine Datei auf den Mikrocontroller hochzuladen. Das Plugin findest du unter Werkzeuge > ESP32 Sketch Data Upload.

Wenn nun auf den Menüeintrag "ESP32 Sketch Data Upload" geklickt wird, öffnet sich ein Dialog in welchem wir das Dateisystem auswählen.

Im Ersten durchgang existiert der Ordner "data" im Sketch Ordner nicht und daher muss dieser zunächst angelegt werden. Daher bestätigen wir diesen Dialog mit der Schaltfläche "Yes". Wenn der Ordner und der Mikrocontroller vorbereitet wurden dann wird dir dieses in der Konsole mit dem Text "Hard resetting via RTC pin..." angezeigt.

Wir können jetzt mit der Tastenkombination Strg + K oder über das Menü Sketch > Sketch-Ordner anzeigen in den Sketch Ordner wechsel und sollten nun einen zusätzlichen Ordner "data" sehen. Dieser Data liegt quasi paralell zur unserer INO-Datei. Read the full article

#2.8ZollTouchDisplay #ESP32 #ESP32DevelopmentBoard #ESP32-2432S028