Waveshare ESP32-S3 RLCD 4.2: Bilder anzeigen mit LVGL â ohne Code-Chaos
Nachdem ich das Waveshare ESP32-S3 RLCD 4.2 Display bereits in einem ersten Beitrag vorgestellt und im zweiten Teil die grundlegende Programmierung mit der Arduino IDE gezeigt habe, wird es nun etwas praktischer.
Denn ein Display wird natĂŒrlich erst dann richtig spannend, wenn nicht nur einfache Texte oder Demo-Elemente angezeigt werden, sondern auch eigene Grafiken, Icons oder Bilder. Genau darum soll es in diesem Beitrag gehen.
- ESP32-S3 mit 4,2âł Display: ePaper Killer? Unboxing & erster Eindruck (Teil 1) - ESP32-S3 RLCD Display ansteuern: So klappt die Programmierung mit Arduino IDE (Teil 2) https://youtu.be/cSbd2kzE7Cs
Ich zeige dir, wie du Bilder auf dem Waveshare RLCD Display mit LVGL anzeigen kannst. DafĂŒr nutze ich eine kleine eigene Library, mit der sich JPEG-Grafiken ĂŒber eine URL laden und auf dem Display darstellen lassen.
Die Library findest du auf GitHub und kannst sie direkt in dein eigenes Projekt einbinden.
SW Bild auf dem RLCD Display von Waveshare
SW Logo auf dem RLCD Display von Waveshare
SW Wettersymbole auf dem RLCD Display von Waveshare
Transparenzhinweis: Das GerĂ€t wurde mir von Waveshare fĂŒr dieses Review kostenfrei zur VerfĂŒgung gestellt. Ich freue mich immer, wenn ich in dieser Form unterstĂŒtzt werde und neue Hardware frĂŒhzeitig testen kann.
SelbstverstĂ€ndlich hat dies keinen Einfluss auf meine Bewertung â ich teile wie gewohnt meine ehrliche Meinung und praktische Erfahrungen mit dem Board.
Ziel des Projektes
Nachdem das Waveshare ESP32-S3 RLCD 4.2 Display grundsÀtzlich eingerichtet ist und mit der Arduino IDE programmiert werden kann, geht es in diesem Beitrag um eine etwas praxisnÀhere Anwendung: Grafiken auf dem Display anzeigen.
Das Ziel ist es, eine Bilddatei nicht fest in den Quellcode einzubauen, sondern diese ĂŒber eine URL aus dem Internet zu laden und anschlieĂend mit LVGL auf dem RLCD Display darzustellen.
Gerade fĂŒr kleine Anzeigeprojekte ist dieser Ansatz sehr praktisch. Die Grafik kann auf einem Webserver liegen und bei Bedarf einfach ausgetauscht werden, ohne dass der ESP32 jedes Mal neu programmiert werden muss.
Damit eignet sich das Projekt zum Beispiel fĂŒr:
- Statusanzeigen - Wettergrafiken - Logos und Icons - News-Displays - einfache Dashboards - dynamisch erzeugte Bilder von einem Server
Ablauf laden eines Bildes auf dem ESP32-S3 von Waveshare mit LVGL und eigener Library
Im Mittelpunkt steht dabei ein möglichst einfacher Ablauf: Der ESP32-S3 verbindet sich mit dem WLAN, lĂ€dt eine vorbereitete JPEG-Grafik ĂŒber eine URL und zeigt diese anschlieĂend mit LVGL auf dem Display an.
Warum eine eigene Library?
Das Anzeigen von Bildern mit LVGL auf dem Waveshare ESP32-S3 RLCD 4.2 Display ist grundsÀtzlich gut machbar, bringt aber schnell einiges an zusÀtzlichem Code mit sich. Besonders dann, wenn die Grafik nicht fest im Sketch hinterlegt ist, sondern dynamisch aus dem Internet geladen werden soll.
FĂŒr diesen Beitrag wollte ich den eigentlichen Beispielcode möglichst schlank und verstĂ€ndlich halten. Der Fokus soll nicht darauf liegen, sich durch viele Hilfsfunktionen, Dateiverarbeitung und interne Details zu arbeiten, sondern darauf, wie man eine Grafik praktisch auf dem Display anzeigen kann.
Ein weiterer Vorteil ist die Wiederverwendbarkeit. Die Library kann nicht nur fĂŒr dieses eine Beispiel genutzt werden, sondern spĂ€ter auch in anderen Projekten eingesetzt oder erweitert werden. Gerade bei Displays ist das praktisch, weil man hĂ€ufig Ă€hnliche Funktionen benötigt, etwa zum Anzeigen von Logos, Icons, Wettergrafiken oder Statusbildern.
Auch spĂ€tere Erweiterungen lassen sich so sauberer umsetzen. Das Waveshare Board besitzt beispielsweise einen SD-Karten-Slot, der in dieser Version noch nicht unterstĂŒtzt wird. Da die Bildlogik aber bereits in einer eigenen Library gekapselt ist, kann diese Funktion spĂ€ter gezielt ergĂ€nzt werden, ohne den eigentlichen Beispielsketch unnötig aufzublĂ€hen.
Die Library findest du auf GitHub: https://github.com/StefanDraeger/lvgl-image-loader-esp32
So bleibt der Beispielcode nachvollziehbar und die Bildlogik sauber gekapselt.
Benötigte Komponenten
FĂŒr dieses Projekt benötigst du neben dem Waveshare ESP32-S3 RLCD 4.2 Display nur wenige zusĂ€tzliche Komponenten. Wichtig ist ein ESP32-Board mit ausreichend PSRAM, da die Bilddaten im Speicher verarbeitet werden.
Hardware
FĂŒr den Aufbau verwende ich:
- Waveshare ESP32-S3 RLCD 4.2 - USB-C Kabel - WLAN-Verbindung - PC mit Arduino IDE - Bilddatei auf einem Webserver oder GitHub
Das Waveshare Board eignet sich fĂŒr dieses Projekt besonders gut, da es bereits einen ESP32-S3 mit PSRAM besitzt. Genau dieser zusĂ€tzliche Speicher ist wichtig, wenn Bilddaten geladen, zwischengespeichert und anschlieĂend mit LVGL auf dem Display angezeigt werden sollen.
Warum PSRAM wichtig ist
Beim Anzeigen von Grafiken werden deutlich mehr Speicherressourcen benötigt als bei einfachen Textausgaben oder kleinen UI-Elementen. Die Bilddaten mĂŒssen zunĂ€chst geladen und anschlieĂend so bereitgestellt werden, dass LVGL diese als Grafik anzeigen kann.
Ein ESP32 ohne ausreichend PSRAM kann hier schnell an seine Grenzen kommen. Deshalb richtet sich diese Library aktuell an Boards mit genĂŒgend Speicher, wie zum Beispiel das Waveshare ESP32-S3 RLCD 4.2.
Software
Auf der Softwareseite benötigst du:
- Arduino IDE - ESP32 Boardpaket - LVGL - Waveshare Display-Konfiguration aus Teil 2 - lvgl-image-loader-esp32 Library Hinweis zum Cheap Yellow Display
Das weit verbreitete Cheap Yellow Display ESP32-2432S028R wird von dieser Library derzeit nicht unterstĂŒtzt.
Der Grund dafĂŒr ist, dass dieses Board in der bekannten Standardvariante nicht die gleichen Speicherreserven wie das Waveshare ESP32-S3 RLCD Board bietet. FĂŒr einfache LVGL-OberflĂ€chen ist das Cheap Yellow Display weiterhin sehr interessant, fĂŒr dieses konkrete Projekt mit dynamisch geladenen Grafiken aus dem Internet ist es aktuell jedoch nicht vorgesehen.
Der Fokus dieser Anleitung liegt daher klar auf dem Waveshare ESP32-S3 RLCD 4.2 Display beziehungsweise auf ESP32-Boards mit ausreichend PSRAM.
Vorbereitung der Grafiken
Bevor eine Grafik auf dem Waveshare ESP32-S3 RLCD 4.2 Display angezeigt wird, sollte sie möglichst gut fĂŒr das Display vorbereitet werden. Das ist bei diesem Display besonders wichtig, da es sich nicht um ein klassisches Farbdisplay handelt.
Das RLCD Display kann nur Schwarz, Weià und Graustufen darstellen. GrundsÀtzlich lassen sich damit auch Bilder mit HelligkeitsverlÀufen anzeigen, in der Praxis wirkt die Darstellung von Graustufen jedoch schnell etwas körnig. Besonders bei Fotos oder sehr detailreichen Grafiken fÀllt das deutlich auf.
farbiger Drache in SW auf RLCD Display von Waveshare
farbiger Drache
Die besten Ergebnisse erzielst du daher mit Grafiken, die möglichst klar auf Schwarz und Weià reduziert sind.
schwarz/weiĂ Drache auf dem RLCD Display von Waveshare
Gut geeignet sind zum Beispiel:
- Logos - Icons - Piktogramme - einfache Symbole - kontrastreiche Grafiken
Weniger gut geeignet sind dagegen:
- Fotos mit vielen Details - Bilder mit weichen FarbverlÀufen - dunkle Motive - Grafiken mit feinen Graustufen - sehr kleine Schrift
FĂŒr dieses Projekt empfiehlt es sich daher, die Grafik bereits vorab passend aufzubereiten. Idealerweise wird das Bild auf die benötigte GröĂe skaliert und anschlieĂend in ein klares Schwarz-WeiĂ-Bild umgewandelt. Dadurch wirkt die Darstellung auf dem RLCD Display deutlich sauberer und besser lesbar.
Die Auflösung des Displays betrĂ€gt 300 Ă 400 Pixel. Wenn du eine Grafik bildschirmfĂŒllend anzeigen möchtest, sollte sie daher möglichst genau auf diese GröĂe vorbereitet werden. Kleinere Grafiken, Icons oder Logos können natĂŒrlich ebenfalls verwendet und spĂ€ter passend auf dem Display positioniert werden.
Besonders wichtig ist ein hoher Kontrast. Je klarer sich helle und dunkle Bereiche voneinander unterscheiden, desto besser wirkt das Ergebnis auf dem RLCD Display.
Library von GitHub einbinden
Die Library wird direkt ĂŒber GitHub als ZIP-Datei heruntergeladen.
In der Arduino IDE wird die ZIP-Datei anschlieĂend ĂŒber folgenden MenĂŒpunkt eingebunden:
Sketch > Bibliothek einbinden > .ZIP-Bibliothek hinzufĂŒgen...
Arduino IDE - ZIP Bibliothek einbinden
Nach der Installation muss im Sketch nur noch diese Include-Zeile ergÀnzt werden:
#include "lvgl_image_loader.h"
Damit steht die Library im Projekt zur VerfĂŒgung und kann fĂŒr das Laden und Anzeigen der Grafiken verwendet werden.
Beispielcode Schritt fĂŒr Schritt erklĂ€rt
Nachdem die Library eingebunden wurde, kann der eigentliche Sketch sehr ĂŒbersichtlich gehalten werden. Wichtig sind im Wesentlichen drei Punkte: Die Library wird eingebunden, ein ImageLoader-Objekt wird erzeugt und anschlieĂend wird die gewĂŒnschte Grafik geladen und auf einem LVGL-Objekt angezeigt.
kompletter Quellcode - Anzeigen von einem Bild auf dem RLCD Display von Waveshare /** * LvglImageLoader - Example for Waveshare RLCD 4.2" * * Hardware: * - Waveshare RLCD 4.2" (400x300) (https://www.waveshare.com/esp32-s3-rlcd-4.2.htm) * - ESP32-S3 with PSRAM * * Wiring: * - GPIO 12 â MOSI * - GPIO 11 â CLK * - GPIO 5 â CS * - GPIO 40 â DC * - GPIO 41 â RST */ #include "display_bsp.h" #include "src/app_bsp/lvgl_bsp.h" #include "src/ui_src/generated/gui_guider.h" #include #include #include "lvgl_image_loader.h" #define MOSI 12 #define SCL 11 #define DC 5 #define CS 40 #define RST 41 #define SCREEN_WIDTH 400 #define SCREEN_HEIGHT 300 const char *ssid = "YOUR_WIFI_SSID"; const char *password = "YOUR_WIFI_PASSWORD"; const char *imageUrl = "https://github.com/StefanDraeger/lvgl-image-loader-esp32/blob/main/images/drache.jpg?raw=true"; const int IMAGE_WIDTH = 300; const int IMAGE_HEIGHT = 300; DisplayPort RlcdPort(MOSI, SCL, DC, CS, RST, SCREEN_WIDTH, SCREEN_HEIGHT); LvglImageLoader imageLoader; static void Lvgl_FlushCallback(lv_display_t *drv, const lv_area_t *area, uint8_t *color_map) { uint16_t *buffer = (uint16_t *)color_map; for (int y = area->y1; y y2; y++) { for (int x = area->x1; x x2; x++) { uint8_t color = (*buffer < 0x7fff) ? ColorBlack : ColorWhite; RlcdPort.RLCD_SetPixel(x, y, color); buffer++; } } RlcdPort.RLCD_Display(); lv_disp_flush_ready(drv); } void setup() { Serial.begin(115200); RlcdPort.RLCD_Init(); Lvgl_PortInit(400, 300, Lvgl_FlushCallback); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("nVerbunden!"); if (Lvgl_lock(-1)) { // Screen vorbereiten lv_obj_t *screen = lv_scr_act(); lv_obj_set_style_bg_color(screen, lv_color_white(), LV_PART_MAIN); // Container mittig lv_obj_t *container = lv_obj_create(screen); lv_obj_set_size(container, IMAGE_WIDTH, IMAGE_HEIGHT); lv_obj_set_style_border_width(container, 0, LV_PART_MAIN); lv_obj_set_style_pad_all(container, 0, LV_PART_MAIN); lv_obj_set_style_bg_color(container, lv_color_white(), LV_PART_MAIN); lv_obj_center(container); // Bild laden imageLoader.loadImage(imageUrl, container, IMAGE_WIDTH, IMAGE_HEIGHT); Lvgl_unlock(); } } void loop() { vTaskDelay(pdMS_TO_TICKS(1000)); }
ZunÀchst wird die Library im Sketch eingebunden:
#include "lvgl_image_loader.h"
Danach wird ein Objekt der Library erzeugt:
LvglImageLoader imageLoader;
Dieses Objekt ĂŒbernimmt spĂ€ter das Laden der Bilddatei und die Ăbergabe an LVGL.
Damit das Bild auf dem Display angezeigt werden kann, wird zunĂ€chst ein Container erstellt. Dieser Container dient als Zielbereich fĂŒr die Grafik:
lv_obj_t *container = lv_obj_create(lv_scr_act()); lv_obj_set_size(container, 300, 300); lv_obj_center(container);
In diesem Beispiel wird der Container auf 300 Ă 300 Pixel gesetzt und mittig auf dem Display platziert. Das passt gut zu den zuvor vorbereiteten Beispielgrafiken.
Wichtig ist, dass der ESP32-S3 zu diesem Zeitpunkt bereits mit dem WLAN verbunden ist, da die Grafik ĂŒber eine URL geladen wird.
AnschlieĂend wird die Grafik ĂŒber eine URL geladen:
imageLoader.loadImage("https://github.com/StefanDraeger/lvgl-image-loader-esp32/blob/main/images/drache.jpg?raw=true", container, 300, 300);
Die erste Angabe ist die URL zur Bilddatei. Danach folgt der LVGL-Container, in dem die Grafik angezeigt werden soll. Die letzten beiden Werte geben die gewĂŒnschte Breite und Höhe des Bildes an.
Die Library selbst unterstĂŒtzt das Laden von JPEG-Bildern ĂŒber HTTPS, nutzt PSRAM fĂŒr den Bildpuffer und kann die Grafik fĂŒr RLCD- beziehungsweise ePaper-Ă€hnliche Displays in Graustufen umwandeln. AuĂerdem sind Wiederholungsversuche, Redirects und Timeouts vorgesehen.
Optional können die Verbindungsparameter angepasst werden:
imageLoader.setMaxRetries(3); imageLoader.setRetryDelay(5000); imageLoader.setTimeout(15000);
Damit lÀsst sich festlegen, wie oft ein Download erneut versucht wird, wie lange zwischen zwei Versuchen gewartet wird und wann ein Verbindungsversuch abgebrochen werden soll.
FĂŒr den Einstieg reicht der Ablauf aber bereits aus:
#include "lvgl_image_loader.h" LvglImageLoader imageLoader; lv_obj_t *container = lv_obj_create(lv_scr_act()); lv_obj_set_size(container, 300, 300); lv_obj_center(container); imageLoader.loadImage("https://github.com/StefanDraeger/lvgl-image-loader-esp32/blob/main/images/drache.jpg?raw=true", container, 300, 300);
Der eigentliche Sketch bleibt dadurch angenehm kurz. Die Display-Initialisierung und LVGL-Konfiguration stammen aus dem vorherigen Teil der Beitragsreihe. In diesem Abschnitt geht es nur noch darum, eine vorbereitete Grafik ĂŒber eine URL zu laden und auf dem RLCD Display auszugeben.
Ergebnis auf dem RLCD Display
Nach dem Hochladen des Sketches verbindet sich der ESP32-S3 mit dem WLAN und lĂ€dt die hinterlegte Bilddatei aus dem Internet. AnschlieĂend wird die Grafik ĂŒber die Library verarbeitet und im LVGL-Container auf dem RLCD Display angezeigt.
In meinem Beispiel verwende ich eine Grafik mit 300 Ă 300 Pixeln, die mittig auf dem Display platziert wird. Dadurch bleibt rundherum noch etwas Abstand, und das Motiv wirkt nicht gequetscht.
schwarz/weiĂ Drache auf dem RLCD Display von Waveshare
Das Ergebnis zeigt, dass sich das Waveshare RLCD nicht nur fĂŒr Texte oder UI-Elemente eignet, sondern auch fĂŒr eigene Grafiken.
Aktuelle EinschrÀnkungen
Die Library ist aktuell bewusst schlank gehalten und unterstĂŒtzt derzeit nur JPEG-Bilder. Andere Bildformate wie PNG, BMP oder GIF werden in dieser Version noch nicht verarbeitet.
AuĂerdem werden die Bilder momentan ausschlieĂlich von einem Webspace beziehungsweise ĂŒber eine URL geladen. Das bedeutet: Die Grafik muss online erreichbar sein, damit der ESP32-S3 sie herunterladen und anschlieĂend auf dem RLCD Display anzeigen kann.
Der vorhandene SD-Karten-Slot des Waveshare ESP32-S3 RLCD 4.2 wird in dieser Version noch nicht genutzt. Eine spÀtere Erweiterung, bei der Bilder direkt von der SD-Karte geladen werden können, ist jedoch geplant.
Ausblick & Fazit
Einfache Schwarz-WeiĂ-Bilder lassen sich auf dem Waveshare ESP32-S3 RLCD 4.2 gut darstellen. Besonders bei klaren Motiven wirkt das Ergebnis sauber und gut lesbar.
Im nĂ€chsten Beitrag geht es einen Schritt weiter: Ich zeige dir, wie du eine News von Tagesschau.de lĂ€dst und anschlieĂend Text und Bild gemeinsam auf dem Display anzeigen kannst.
News auf dem RLCD Display von Waveshare
Damit wird aus der reinen Bildanzeige ein kleines Praxisprojekt fĂŒr eine dynamische Informationsanzeige.
FAQ â Bilder auf dem Waveshare ESP32-S3 RLCD 4.2 anzeigen
Kann ich auf dem Waveshare ESP32-S3 RLCD 4.2 Bilder anzeigen?











