9,99 €
Mehr erfahren.
- Herausgeber: Selbstverlag
- Kategorie: Fachliteratur
- Sprache: Deutsch
Tauche ein in die Welt moderner Mikrocontroller-GUIs – praxisnah, verständlich und sofort anwendbar! Dieses Buch ist die ideale Ergänzung zum gleichnamigen Videokurs und zeigt dir Schritt für Schritt, wie du mit dem ESP32 und der leistungsstarken LVGL-Bibliothek beeindruckende Benutzeroberflächen entwickelst – direkt in der Arduino-Umgebung. Ob einfache Buttons, interaktive Dashboards oder fortgeschrittene Projekte wie MQTT-Anbindungen und Bildanzeige per HTTP – hier lernst du nicht nur wie, sondern auch warum es funktioniert. Was dich erwartet: • Schneller Einstieg: Arduino IDE & ESP32 korrekt einrichten • LVGL verständlich erklärt – von der ILI9341-Ansteuerung bis zum Waveshare-Display • Grafische Elemente: Buttons, Charts, Touch-Eingaben und Kalibrierung • Eigene Projekte umsetzen: GUI-Anwendungen mit echten Displays • Design trifft Funktion: Oberflächen mit EEZStudio gestalten • Praxisbeispiele: Vokabeltrainer mit MQTT, Web-Bildergalerie und mehr • Extra: Alle Projekte inklusive direkt nutzbarem Beispielcode Ideal für alle, die bereits erste Erfahrungen mit Arduino gemacht haben und nun tiefer in die Entwicklung von grafischen Benutzeroberflächen einsteigen wollen – ganz ohne Vorkenntnisse in LVGL. Starte jetzt – und bring deine Mikrocontroller-Projekte auf das nächste Level! Markus Edenhauser, MA MSc
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Veröffentlichungsjahr: 2025
Ähnliche
LVGL und ESP32 Touchdisplays
Erstelle kreative Benutzeroberflächen mit LVGL und EEZStudio
Markus Edenhauser, MA MSc
2025-06-18
LVGL und ESP32 Touchdisplays
LVGL und ESP32 TouchdisplaysVorwortEinleitungBenötigte HardwareBenötigte SoftwareVorkenntnisse und VoraussetztungenCode und MateriallisteWelches Kapitel zuerst?Braucht man Node-RED?ZielgruppeMIT-Lizenz und HaftungsausschlussVorbereitung: Arduino IDE und ESP32 einrichtenArduino IDE und ESP32 unter Windows installierenArduino IDE und ESP32 unter Linux installierenPortprobleme unter LinuxEinrichtung der LVGL-BibliothekLVGL ein ÜberblickÜbersicht und Eigenschaften des CYD ESP32Installation und grundlegende Konfiguration von LVGLAnpassung von lvgl.hAnpassungen von User_Setup.hHello World mit CYDVerdrahtung von 2.8-inch TFT Touchscreen LCD ILI9341LVGL Widgets mit CYDTouchscreen-TestTouchscreen-Test ILI9341Touchscreen KalibrierungenAusgangssketch für alle Projektetouchscreen.h für die nachfolgenden ProjekteButtons anzeigenEventhandler mit ButtonEventhandler mit Button und LEDAnschluss BME280BME280-Daten auswertenExkurs BME280 mit ChartPraxisprojekt Chart mit Krypto-CoinsBilder konvertieren und darstellenEigene Schriftarten einbinden und Umlaute korrekt darstellenWidget TestLVGL FazitEEZStudioEEZStudio vs. SquareLine StudioInstallation von EEZStudio WindowsInstallation von EEZStudio LinuxErste Widgets platzierenGenerierten Code adaptieren und ausführenDesign 2 Screens mit ButtonsCodeanbindung und Logik 2 ScreensMit Arc-Widget PWM-LED steuernFazitWaveshare 1.47 LCD mit ESP32-C6Einrichtung und Test der LVGL-Bibliothek für Waveshare LCDHello World auf Waveshare LCDDashboard Design mit EEZ-StudioDashboard UI uploadDatensimulationWiFi und MQTT AnbindungFazitElecrow 1.28 Round DisplayEinrichtung der LVGL-Bibliothek für Elecrow DisplayErstes Beispiel zur Ansteuerung der HardwareHello World auf Elecrow DisplayPraxisprojekt LVGL TimerFazitPraxisbeispiel CYD: Vokabeltrainer mit MQTT-AnbindungVervielfältigung von ButtonsStatisches JSON auswertenButton InteraktionKontrolllogikVisuelle Rückmeldung und Statusverwaltung im VokabeltrainerWIFI und MQTT Verbindung mit Node-REDFazitPraxisbeispiel Foto-Anzeige via HTTP-EndpointOnline PNGs auf CYD darstellenExkurs Node-RED und Hundebilder-APIESPHomeHello World mit benutzerdefinierter SchriftartLVGL: Erstes Hello-World-ProjektLED-Steuerung mit LVGL-SwitchLVGL-Meter mit ZufallswertenLVGL-Meter mit BME280-SensorTemperaturverlauf mit BME280 als GraphESPHome-Uhr mit NTP und BildanzeigeAbschließende WorteBonusDownloadlinksÜber den AutorWeiteres vom AutorLVGL und ESP32 Touchdisplays
Copyright © Juni 2025 1. Auflage Selbstverlag
Markus Edenhauser, MA MSc Völser Straße 41 6020 Innsbruck Österreich pixeledi.eu/impressum
Du warst im Hintergrund – und doch in jedem Schritt mit dabei. Danke!
Vorwort
Touchdisplays sind längst fester Bestandteil unseres Alltags. Ob auf dem Smartphone, im Smart Home, im Auto oder in industriellen Anwendungen – sie bieten intuitiven Zugang zu digitalen Funktionen. Doch was, wenn du selbst eine Benutzeroberfläche gestalten möchtest? Was, wenn du Kontrolle über jedes Pixel haben willst und dein Projekt nicht nur funktioniert, sondern auch gut aussieht? Genau hier setzt dieses Buch an.
Mit dem ESP32 steht dir ein vielseitiger Mikrocontroller zur Verfügung, der nicht nur WLAN und Bluetooth integriert, sondern auch genug Leistung bietet, um anspruchsvolle Benutzeroberflächen zu ermöglichen. Das wahre Herzstück deines Touchprojekts ist jedoch LVGL – eine leistungsfähige, quelloffene GUI-Bibliothek für die Embedded-Entwicklung.
LVGL liefert dir die Werkzeuge, moderne, animierte und reaktionsschnelle GUIs zu bauen, angepasst an die Einschränkungen kleiner Displays und begrenzter Ressourcen. Zusammen mit EEZStudio, einem Open-Source-GUI-Designer, kannst du Layouts nicht nur visuell gestalten, sondern direkt in lauffähigen Code überführen. Das spart Zeit, reduziert Fehler und gibt dir kreative Freiheit.
Bevor wir gemeinsam größere Projekte umsetzen, tauchen wir zunächst in die Grundlagen ein. Du lernst, wie LVGL intern funktioniert, wie Widgets organisiert sind, welche Rolle Events, Styles und Layouts spielen und wie du diese Komponenten zu einer funktionalen Benutzeroberfläche zusammenfügst. Dieses Fundament ist entscheidend, um später schnell und gezielt Oberflächen entwerfen und erweitern zu können.
Anschließend sehen wir uns die konkrete Einrichtung der Entwicklungsumgebung für verschiedene Display-Modelle an. Dabei begleite ich dich Schritt für Schritt durch die Konfiguration von Displays wie dem Waveshare 1.47 LCD oder dem runden Elecrow 1.28 Zoll Panel – jeweils angepasst an die Besonderheiten der Hardware und des ESP32, sei es in der C3- oder C6-Variante.
Dann geht es direkt in die Praxis. Du platzierst erste Widgets, schreibst deinen ersten LVGL-Code, bringst deine Oberfläche auf das Display und erweckst sie durch Interaktionen zum Leben. Du baust Menüs, Buttons, Slideregler und Steuerflächen – alles mit klaren Beispielen und nachvollziehbaren Erklärungen. Dabei lernst du nicht nur, wie man UI-Elemente darstellt, sondern auch, wie sie mit deiner Anwendung logisch verknüpft werden, etwa zur Steuerung einer LED über Touch-Gesten.
Danach installierst du EEZStudio unter Linux oder Windows, entwirfst deine erste grafische Oberfläche und passt den generierten Code an. Du wirst eigene Screens gestalten, Navigationen einbauen und lernst, wie man zwischen Bildschirmen umschaltet, Eingaben verarbeitet und Zustände verwaltet.
Später erwarten dich praxisnahe Projekte: Du entwickelst ein Dashboard, simulierst Sensordaten, integrierst MQTT für die Kommunikation im Netzwerk und baust schließlich einen eigenen Vokabeltrainer mit interaktiver Rückmeldung und Statusverwaltung. Ein weiteres Kapitel zeigt dir, wie du Bilder aus dem Internet direkt auf deinem Display anzeigen kannst – inklusive einer unterhaltsamen Anwendung mit Hundebildern aus einer öffentlichen API, kombiniert mit Node-RED.
Dieses Buch begleitet dich von den ersten Zeilen bis hin zu vollständigen Projekten. Es richtet sich an Neugierige, Bastler, Entwickler und Maker, die mehr aus ihrem Touchdisplay machen wollen. Mit klaren Anleitungen, vielen Beispielen und einem stetigen Blick auf die Praxis lernst du nicht nur, wie man Benutzeroberflächen baut – du beginnst, sie zu gestalten.
Bereit, dein eigenes Interface zu erschaffen? Dann lass uns starten.
Markus Edenhauser, MA MSc
Einleitung
Bevor du mit den praktischen Übungen und Projekten beginnst, ist es wichtig, die benötigte Software und Hardware zu verstehen. In diesem Kapitel werde ich dir die notwendigen Tools und Bauteile vorstellen, die du für die Umsetzung der Projekte benötigst. Damit bist du bestens vorbereitet, um effizient und zielgerichtet zu arbeiten.
Benötigte Hardware
In diesem Kapitel möchte ich dir einen kurzen Überblick über die Displays geben, die im Laufe des Buchs zum Einsatz kommen. Detaillierte Informationen und Links findest du in der Materialliste im zugehörigen GitHub-Repository. Die konkrete Einrichtung und erste Beispiele folgen dann in den entsprechenden Unterkapiteln.
Besonders empfehlen kann ich dir das sogenannte “Cheap Yellow Display” – kurz CYD. Dabei handelt es sich um ein 320x240 TFT-Touchdisplay mit integriertem ESP32. Praktischerweise sind hier auch JST-Stecker mit passenden Litzen enthalten, über die du beispielsweise I2C-Sensoren oder andere Module bequem anschließen kannst. Der große Vorteil: Du sparst dir das mühsame Verkabeln auf dem Breadboard und kannst direkt mit deinen Projekten starten. Als Alternative dazu gibt es das ILI9341-basierte Display. Dieses besitzt keinen integrierten Mikrocontroller, lässt sich aber problemlos mit einem beliebigen ESP32 deiner Wahl kombinieren. Später im Buch zeige ich dir Schritt für Schritt, wie du es korrekt verdrahtest. Grundsätzlich kannst du damit nahezu alle Sketche, die wir für das CYD schreiben, mit minimalen Anpassungen an den GPIO-Zuordnungen, übernehmen.
Für etwas Abwechslung sorgt ein weiteres Display: das 1,47-Zoll-Panel von Waveshare. Es verfügt zwar nicht über Touch-Funktionalität, eignet sich aber hervorragend für LVGL-Projekte, bei denen es eher auf Anzeige als auf Interaktion ankommt. Auch hier gehen wir auf die Installation der LVGL-Bibliothek ein und setzen ein spannendes Praxisprojekt um.
Zum Schluss werfen wir noch einen Blick auf ein rundes 1,28-Zoll-Display von Elecrow. Dieses Display gibt es in ähnlicher Form auch von anderen Herstellern. Die hier verwendete Version enthält einen ESP32-C3 sowie diverse integrierte Komponenten wie einen Buzzer, ein RTC-Modul und einen Vibrationsmotor – ideal, um später auch haptisches Feedback in deine Benutzeroberflächen einzubauen.
Auch wenn du andere Displays verwendest, bleibt der grundsätzliche Ablauf beim Einrichten weitgehend gleich, da sich die herstellerspezifische Integration von LVGL oft nur in Details unterscheidet. Die Projekte in diesem Buch kannst du also in der Regel problemlos auch mit anderen Displays umsetzen. Die LVGL-Widgets selbst sind nämlich unabhängig von der verwendeten Display-Hardware, sie basieren auf einem internen Grafikpuffer, der erst am Ende auf dein konkretes Display übertragen wird.
Benötigte Software
In diesem Buch arbeiten wir ausschließlich mit der Arduino IDE – nicht mit PlatformIO. Aus Rückmeldungen zu meinen Kursen und Büchern weiß ich, dass viele Leser PlatformIO entweder vermeiden möchten oder die Einrichtung als zu aufwendig empfinden. Mit etwas Recherche kannst du aber jedes hier gezeigte Programm auch problemlos in PlatformIO verwenden.
Alle benötigten Bibliotheken installieren wir entweder direkt über die Arduino IDE oder laden sie manuell von den Websites der jeweiligen Hersteller.
Außerdem sehen wir uns ein Programm zur Gestaltung von LVGL-Oberflächen an: EEZStudio ist eine Open-Source-Alternative zum bekannten SquareLine Studio. Die genaue Installation und Einrichtung behandeln wir im entsprechenden Kapitel ausführlich.
Für die Bildbearbeitung, etwa um Fotos an die Displaygröße anzupassen, verwende ich GIMP. Du kannst aber genauso gut, jedes andere Grafikprogramm oder kostenlose Online-Tools wie https://www.photopea.com nutzen.
Alle hier gezeigten Beispiele und Programme sind sowohl unter Windows als auch unter Linux (z.B. Debian oder Arch) ausführbar. Die Installation und Einrichtung ist in beiden Fällen weitgehend identisch, aber es können kleine Unterschiede auftreten, die wir in den jeweiligen Abschnitten klären.
Vorkenntnisse und Voraussetztungen
Für dieses Buch solltest du erste Erfahrungen mit der Arduino IDE haben und die grundlegende C++-Syntax für Arduino verstehen. Alle Programmierinhalte werden zwar erklärt und Schritt für Schritt vorgezeigt, jedoch gehen wir nicht auf grundlegende Konzepte wie Datentypen oder einfache Programmierstrukturen ein. Ein GitHub-Account ist hilfreich, aber auch ohne diesen kannst du den Inhalt problemlos verfolgen.
Code und Materialliste
Die Links zu den Ressourcen findest du am Ende des Dokuments (Link für PDF und E-Book), da in der Vorschau vieler Online-Portale nur die ersten Seiten angezeigt werden. Dieses Kapitel wurde bewusst an dieser Stelle platziert, um dir den Zugriff auf alle wichtigen Materialien von Anfang an zu ermöglichen.
Im GitHub-Repository findest du immer die aktuellen Code-Beispiele, auch wenn sich etwas ändert. Du kannst das Repository entweder mit Git klonen oder den Ordner als ZIP herunterladen – eine Registrierung ist nicht nötig. Bei Fehlern oder Verbesserungsvorschlägen freue ich mich über einen Pull-Request.
Struktur des GitHub-Repository:
00_configs enthält die von mir verwendeten lvgl-Dateien.01_LVGL_Basics enthält die ersten Umsetzungen und den Ausgangsketch für alle weiteren Beispiele.Die anderen Ordner entsprechen den Kapiteln.
Viel Spaß beim Ausprobieren!
Welches Kapitel zuerst?
Der Kurs beginnt mit einer Einführung, die eine Einleitung, allgemeine Informationen und die Vorbereitung der Arduino IDE umfasst. Anschließend wird die LVGL-Bibliothek eingerichtet. Im Praxisteil startet der Kurs mit einem einfachen LVGL-Widget mithilfe von CYD. Darauf aufbauend folgen konkrete Umsetzungen mit verschiedenen Displays und Plattformen: EEZStudio, Waveshare 1.47 Zoll, Elecrow 1.28 Zoll rundes Display, ein Vokabeltrainer mit MQTT-Anbindung, eine Fotoanzeige über einen HTTP-Endpoint sowie ein Exkurs mit ESPHome-Beispielen.
Das Mermaid-Diagramm ist ebenfalls im GitHub-Repo.
Die Idee ist, zuerst die Grundlagen durchzugehen und die LVGL-Widgets am CYD selbst zu programmieren, um ein gutes Verständnis zu entwickeln. Danach kannst du frei mit den Praxisprojekten weitermachen.
Braucht man Node-RED?
Eine kurze Anmerkung zum Thema Node-RED und den Praxisbeispielen in diesem Buch. Ich habe den Kurs so aufgebaut, dass er selbstverständlich auch ohne Node-RED funktioniert. Einige Beispiele, die wir durchgehen, kannst du offline machen, egal ob es sich um den Vokabeltrainer oder andere Anwendungen handelt. Auch wenn wir uns später mal Bilder aus dem Internet laden wollen, zeige ich dir immer auch eine Variante, die ohne Node-RED auskommt.
Trotzdem wirst du an ein paar Stellen sehen, wie es mit Node-RED funktioniert. So kannst du zum Beispiel den Datenaustausch mit JSON simulieren oder MQTT-Verbindungen aufbauen. Bitte hab Verständnis, dass ich hier nicht darauf eingehe, wie man diese Tools installiert, das wäre ein eigener Kurs bzw. Buch. Dazu gibt es bereits ein separates Angebot von mir, in dem ich dir zeige, wie man Node-RED installiert, MQTT-Broker wie Mosquitto einrichtet und konfiguriert: https://pixeledi.eu/akademie/node-red (Es gibt Rabatt-Codes zu meinen Kursen am Ende des Buches!).
Wenn dich das interessiert, schau auch gerne mal auf meinem YouTube-Kanal vorbei, da findest du einige Videos dazu: https://www.youtube.com/@pixeledi
In diesem Praxisbuch sollen die Beispiele eher als kleiner Vorgeschmack dienen, um dir zu zeigen und auch zu visualisieren, welche Möglichkeiten du mit dem ESP32 und Plattformen wie Node-RED hast, um einfach und schnell Dinge wie HTTP-Endpunkte oder MQTT-Nachrichten umzusetzen.
Zielgruppe
Dieses Buch richtet sich an alle, die grafische Benutzeroberflächen mit LVGL auf Mikrocontrollern entwickeln möchten. Grundkenntnisse in C++ und erste Erfahrungen mit der Arduino-Programmierung werden vorausgesetzt. Wer bereits einmal ein einfaches Projekt vom PC auf ein Mikrocontroller-Board übertragen hat, ist gut vorbereitet. Auch wenn die Einrichtung der Arduino IDE im Buch erklärt wird, sollte der grundlegende Umgang damit vertraut sein, da keine Einführung in die Programmiersprache selbst erfolgt.
Auf meinem YouTube-Kanal (www.pixeledi.eu/@pixeledi) findest du viele Videos, in denen du den Start mit der Arduino IDE nachvollziehen kannst.
MIT-Lizenz und Haftungsausschluss
Hinweis zu den Code-Beispielen in diesem Buch: Der gesamte Code steht unter der MIT-Lizenz und kann somit frei wiederverwendet werden. Beachte bitte den Haftungsausschluss: Die Beispiele wurden sorgfältig erstellt, dennoch können Fehler enthalten sein. Es ist ratsam, den Code gründlich zu überprüfen, bevor du ihn anwendest, um Schäden an deinen Geräten zu vermeiden. Viel Erfolg und Freude beim Umsetzen der Projekte!
Vorbereitung: Arduino IDE und ESP32 einrichten
Bevor du in die kreative Welt von GUIs mit LVGL und dem ESP32 eintauchst, brauchst du eine stabile technische Grundlage. In diesem Kapitel richtest du deine Entwicklungsumgebung ein – Schritt für Schritt und zuverlässig. Du lernst, wie du die Arduino IDE installierst und dein ESP32-Board korrekt vorbereitest, egal ob unter Windows oder Linux. Diese Vorbereitung ist entscheidend, damit deine späteren GUI-Projekte reibungslos funktionieren.
Ich habe mich in diesem Buch bewusst für die Arduino IDE entschieden, weil sie einfacher nachzuvollziehen ist – besonders beim Einstieg. Selbstverständlich kannst du alles, was hier gezeigt wird, auch mit PlatformIO umsetzen. Du brauchst dort eventuell kleine Anpassungen bei den Bibliotheken oder der Konfiguration, aber der Code selbst läuft identisch.
Der Fokus liegt hier auf einer sauberen Einrichtung: mit den offiziellen Boardpaketen von Espressif, funktionierender serieller Verbindung und klarer Fehlersuche bei USB- oder Treiberproblemen. Wenn du diese Schritte sorgfältig umsetzt, ersparst du dir später viele unnötige Hürden.
Diese Links benötigst du später für die Installation in der Arduino IDE – unabhängig davon, mit welchem Betriebssystem du arbeitest:
Stable:https://dl.espressif.com/dl/package_esp32_index.jsonDevelopment: Falls dein Mikrocontroller nicht in der Liste verfügbar ist, könnte er hier aufgelistet sein. https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.jsonSobald dein ESP32 am Ende dieses Kapitels erfolgreich einen ersten Sketch ausführt, bist du startklar. Dann kannst du dich voll und ganz auf das konzentrieren, worum es in diesem Buch wirklich geht: kreative, performante GUIs mit LVGL.
Arduino IDE und ESP32 unter Windows installieren
Die Installation ist essenziell, deshalb findest du hier ein Video von mir zu diesem Thema: https://www.youtube.com/watch?v=fyKVfhQDtBQ
Arduino IDE herunterladen und installieren - Gehe auf arduino.cc und lade die aktuelle Version der IDE herunter (idealerweise .exe). - Wähle bei der Installation „Nur für diesen Benutzer“ und passe ggf. den Installationspfad an. - Bestätige während der Installation alle Treiber (vor allem Arduino USB-Treiber).
Arduino IDE starten und vorbereiten - Beim ersten Start erhält die IDE ggf. Windows-Firewall-Meldungen – alles zulassen. - Öffne oben rechts das Menü → Datei → Einstellungen - Füge unter „Zusätzliche Boardverwalter-URLs“ die gewünschte ESP32-URL ein (Stable oder Development).
ESP32 Plattform installieren - Gehe zu Werkzeuge → Board → Boardverwalter - Suche nach esp32, achte darauf, „esp32 by Espressif Systems“ auszuwählen, und installiere das Paket. - Warte, bis die Installation abgeschlossen ist (kann ein paar Minuten dauern).
Erster Test mit ESP32 - Wähle Werkzeuge → Board → ESP32 Dev Module - Schließe dein ESP32-Board per USB an (z.B. ein „Yellow Display“ Board). - Wähle den richtigen COM-Port (sichtbar unter „Werkzeuge → Port“). - Lade einen leeren Sketch hoch.
Wenn der Upload klappt, ist die IDE samt Boardpaket und Treibern korrekt eingerichtet.
Fehlerbehebung bei Uploadproblemen: - Anderes USB-Kabel testen - USB-Port wechseln - USB-Port in Virtual Maschine manuell durchreichen - Board-Treiber prüfen - Testweise einen Arduino Uno anschließen
Arduino IDE und ESP32 unter Linux installieren
Die Installation ist essenziell, deshalb findest du hier ein Video von mir zu diesem Thema: https://www.youtube.com/watch?v=yan6MyA0Gmw
Zunächst möchte ich dir gratulieren, dass du die richtige Umgebung für dein Projekt gefunden hast. Vermutlich hast du die Arduino IDE bereits eingerichtet. Im Folgenden gebe ich dir einen Überblick über die Details, auf die ich bei der Konfiguration achten werde.
Arduino IDE (AppImage) herunterladen - Gehe zu arduino.cc/software und lade die .AppImage-Datei herunter. - Wichtig: Keine Flatpak-Version verwenden – das verursacht oft Probleme mit Pfaden, Berechtigungen und USB-Zugriff.
AppImage ausführbar machen
Danach kannst du die IDE mit Doppelklick oder im Terminal starten:./arduino-ide_x.y.z_Linux_64bit.AppImage
ESP32 Boardpaket hinzufügen - Öffne Datei → Voreinstellungen - Trage bei „Zusätzliche Boardverwalter-URLs“ die gewünschte ESP32-URL ein (siehe oben)
ESP32 Plattform installieren - Gehe zu Werkzeuge → Board → Boardverwalter - Suche nach esp32, wähle „esp32 by Espressif Systems“ und klicke auf Installieren
Serielle Verbindung vorbereiten - Füge deinen Benutzer zur dialout-Gruppe hinzu, um auf /dev/ttyUSB0 o.ä. zugreifen zu können:
Danach: Abmelden oder System neu starten.
Falls der Zugriff auf den Port trotzdem scheitert:
Wenn kein Fehler kommt, ist alles korrekt eingerichtet. Jetzt kannst du mit der eigentlichen Entwicklung beginnen.
Portprobleme unter Linux
Wenn du Probleme beim Zugreifen auf serielle Geräte wie den USB-zu-Serial-Adapter hast, kann es an fehlenden Benutzerrechten oder blockierenden Diensten liegen. Hier ist eine Schritt-für-Schritt-Anleitung, wie du häufige Probleme löst.
Benutzer zur richtigen Gruppe hinzufügen
Um sicherzustellen, dass du die richtigen Berechtigungen hast, füge deinen Benutzer zur Gruppe dialout hinzu. Diese Gruppe ist für den Zugriff auf serielle Ports zuständig. Führe dazu folgenden Befehl aus:
Falls du zusätzlich die Gruppe uucp benötigst, was in einigen speziellen Fällen auf Arch-basierten Systemen erforderlich sein könnte, kannst du auch diesen Befehl verwenden:
Nachdem du diesen Befehl ausgeführt hast, musst du dich entweder abmelden und wieder anmelden oder den PC neu starten, damit die Gruppenänderungen wirksam werden.
Überprüfen, ob der Port existiert
Falls du nach der Anmeldung immer noch Probleme hast, überprüfe, ob der serielle Port tatsächlich existiert und welche Berechtigungen gesetzt sind. Das geht mit dem folgenden Befehl:
Dieser Befehl zeigt dir an, ob der Port /dev/ttyUSB0 vorhanden ist und welche Rechte darauf gesetzt sind. Wenn der Port nicht existiert oder die Berechtigungen falsch sind, kannst du die Berechtigungen temporär ändern:
Dieser Befehl setzt die Berechtigungen so, dass alle Benutzer darauf zugreifen können. Beachte, dass dies nur eine temporäre Lösung ist, und die Berechtigungen nach einem Neustart möglicherweise wieder zurückgesetzt werden.
Prüfen, ob der ModemManager das Gerät blockiert
Manchmal kann der ModemManager das Gerät blockieren, was zu Problemen beim Zugriff führt. Falls dieser Dienst aktiv ist, stoppe ihn testweise mit folgendem Befehl:
Überprüfe anschließend, ob der Zugriff auf den seriellen Port jetzt funktioniert. Wenn ja, kannst du entscheiden, ob du den Dienst dauerhaft deaktivieren möchtest.
Fazit
Mit diesen Schritten solltest du die meisten Probleme mit seriellen Geräten beheben können. Es ist wichtig, dass du sicherstellst, dass die richtigen Benutzergruppen und Berechtigungen gesetzt sind und dass keine Hintergrundprozesse wie der ModemManager das Gerät blockieren.
Deine Notizen:
Einrichtung der LVGL-Bibliothek
In diesem Kapitel zeige ich dir, wie du mit LVGL Widgets auf dem ESP32-Touchdisplay arbeitest. Widgets sind grafische Steuerelemente wie Buttons, Schieberegler oder Anzeigen, mit denen du interaktive Benutzeroberflächen gestalten kannst. Diese Elemente lassen sich im Code direkt über das Arduino-Framework ansprechen und steuern – sie bilden somit die Grundlage jeder grafischen Oberfläche.
Bevor wir mit den ersten Widgets starten, konfiguriere ich zunächst den Touchscreen für das CYD-Display. Dabei lernst du die relevanten Einstellungsmöglichkeiten kennen. Anschließend beginne ich mit einem einfachen Button. Ich zeige dir Schritt für Schritt, wie du ihn erstellst, wie du einen Event-Handler hinzufügst und wie du Interaktionen definierst.
Danach arbeite ich mich durch verschiedene Elemente von LVGL. Ich zeige dir, wie du die Dokumentation richtig nutzt und die Informationen auf deine eigenen Projekte überträgst. Auch wenn ich hier das CYD-Display verwende, gelten die Konzepte für alle anderen unterstützten Displays gleichermaßen. Die Unterschiede betreffen in der Regel nur die Art und Weise, wie die LVGL-Bibliothek eingebunden wird und darauf gehe ich in den spezifischen Display-Kapiteln noch ein.
Im weiteren Verlauf wirst du auch Praxisprojekte umsetzen. Ich zeige dir, wie du beispielsweise einen BME280-Sensor ausliest und die Daten auf dem Display darstellst. Du lernst, wie du Echtzeitdaten etwa von Kryptowährungen via API-Call holst und sie in einem Chart-Widget visualisierst. Zusätzlich zeige ich dir, wie du Bilder ins passende Format konvertierst und am Display anzeigst. Dabei verwende ich auch den integrierten Kartenslot, mit dem du externe Inhalte laden kannst.
Zum Abschluss lernst du noch, wie du eigene Schriftarten konvertierst und einbindest – besonders hilfreich, wenn du Sonderzeichen benötigst oder deinem Design eine persönliche Note verleihen willst.
All das geschieht im Kontext von LVGL und soll dir helfen, kreative, funktionale Benutzeroberflächen für deine Projekte zu entwickeln.
LVGL ein Überblick
LVGL (Light and Versatile Graphics Library) ist eine leistungsstarke, Open-Source-Grafikbibliothek, die speziell für die Entwicklung von Benutzeroberflächen auf eingebetteten Systemen und Mikrocontrollern entwickelt wurde. Sie ermöglicht es, intuitive und ansprechende Grafische Benutzeroberflächen (GUIs) zu erstellen, ohne dabei viel Speicher und Rechenleistung zu benötigen. LVGL ist besonders beliebt bei Projekten, die ein TFT-Display oder andere Bildschirme mit Mikrocontrollern wie dem ESP32 kombinieren.
Warum LVGL so verbreitet ist
LVGL erfreut sich großer Beliebtheit, da sie äußerst flexibel ist und eine breite Palette von Plattformen und Displays unterstützt. Die Bibliothek bietet eine umfangreiche Auswahl an Funktionen, die für die Erstellung moderner GUIs unerlässlich sind – darunter Unterstützung für verschiedene Widgets, Touchscreen-Interaktion, Animationen und dynamische Layouts. Besonders hervorzuheben ist, dass LVGL für Systeme mit begrenztem RAM und Prozessorleistung optimiert ist, was sie ideal für viele Embedded-System-Projekte macht.
Ein weiterer entscheidender Vorteil ist die umfangreiche Dokumentation und die aktive Community, die kontinuierlich neue Funktionen und Verbesserungen einbringen. Dies reduziert die Entwicklungszeit erheblich, da viele gängige Funktionalitäten bereits integriert sind und nicht von Grund auf neu entwickelt werden müssen.
Dokumentation
Die offizielle Dokumentation von LVGL ist umfassend, gut strukturiert und leicht zugänglich:
https://docs.lvgl.io
Hier findest du detaillierte Anleitungen zur Installation, Nutzung und zu fortgeschrittenen Funktionen. Von einfachen Beispielen bis hin zu komplexen Anwendungen.
Was sind Widgets?
In LVGL bezeichnet man grafische Komponenten mit dem Begriff “Widgets”. Dies sind die grundlegenden Bausteine einer Benutzeroberfläche, wie Buttons, Labels, Slider, Checkboxen und viele weitere. Widgets ermöglichen es dir, die Elemente deiner Benutzeroberfläche zu gestalten und zu steuern. Jedes Widget verfügt über spezifische Funktionen und Eigenschaften, die du anpassen und nutzen kannst, um das Verhalten und Aussehen zu verändern.
Widgets sind äußerst flexibel und lassen sich beliebig kombinieren, um auch komplexe GUIs zu erstellen. Du kannst sie positionieren, mit Ereignissen versehen und auf Benutzereingaben (z.B. Berührungen oder Tastendrücke) reagieren lassen.
Im Laufe dieses Projekts werden wir intensiv mit Widgets arbeiten, um die verschiedenen Teile der Benutzeroberfläche zu erstellen und die Interaktivität zu gewährleisten.
Übersicht und Eigenschaften des CYD ESP32
Das sogenannte Cheap Yellow Display (CYD) ist ein kompaktes Entwicklungsboard mit integriertem 2,8-Zoll-Touchscreen (240×320 Pixel) und basiert auf einem klassischen ESP32-Devboard. Es eignet sich hervorragend für verschiedenste Projekte, da bereits viele Komponenten direkt integriert sind.
Besonders praktisch ist, dass es passende 3D-Gehäuse z.B. auf Printables gibt – einige Modelle findest du auch in den Begleitmaterialien. Diese ermöglichen einen sicheren Halt und einfachen Zugang zu allen Tasten und Anschlüssen.
Die wichtigsten Merkmale auf einen Blick:
ESP32-Devboard (nicht C3 oder S3, sondern die klassische Variante)2,8” Touch-Display mit 240 × 320 Pixeln (resistiv, mit Touch-Stift bedienbar)Fotoresistor für HelligkeitsmessungReset- und Boot-Taste (wichtig für Flash-Vorgänge)MicroSD-KartenslotRGB-LED (programmierbar)JST Buchse für I2C und UART (3.3V, GND, SCL, SDA)Micro-USB-Anschluss zur Stromversorgung und ProgrammierungLötleisten und Buchsen mit weiteren GPIOsDie mitgelieferten JST-Stecker sind besonders praktisch: Sie sind verpolungssicher und rasten ein, was eine stabile Verbindung gewährleistet. Auf der anderen Seite sind einfache Dupont-Litzen, bei denen man jedoch auf die korrekte Belegung achten muss, um Kurzschlüsse zu vermeiden.
Das Touch-Display reagiert auch auf Finger Eingaben, für kleinere Bedienelemente empfiehlt sich aber der beiliegende Stylus. Insgesamt ist das CYD ein durchdachtes Board mit vielen Anwendungsmöglichkeiten – ideal für kompakte und interaktive Projekte.
Im nächsten Kapitel kümmern wir uns um die Einrichtung der LVGL-Bibliothek – der Kern unserer grafischen Benutzeroberfläche.
Installation und grundlegende Konfiguration von LVGL
Dieses Kapitel ist besonders wichtig. Hier richte ich die LVGL-Bibliotheken ein und lege damit die Basis für alle weiteren Projekte. Ich weiß aus eigener Erfahrung, dass es bei der Einrichtung oft zu Problemen kommt. Deshalb erkläre ich jeden Schritt genau und nachvollziehbar. So gelingt der Einstieg in die Arbeit mit grafischen Benutzeroberflächen ohne große Hürden.
Wenn das Grundprinzip einmal verstanden ist, lassen sich auch andere Displays leicht einrichten. Der Code für die LVGL-Widgets und die Benutzeroberfläche bleibt fast immer gleich, nur die Einstellungen für das jeweilige Display müssen angepasst werden.
Viele Display-Hersteller stellen eigene Varianten der LVGL-Bibliothek zur Verfügung. Diese enthalten oft spezielle Anpassungen für die jeweilige Hardware. Deshalb werft vorab immer einen Blick in die Dokumentation zum Display.
Ein weiterer Punkt ist die große Anzahl an Vorlagen im Internet. Gerade beim CYD gibt es viele Beispiele, die sich stark unterscheiden. Das kann verwirrend sein und frustriert, wenn man nicht zum gewünschten Ergebnis kommt. Deshalb zeige ich dir in diesem Abschnitt ganz konkret, wie ich das CYD einrichte. Ich gehe Schritt für Schritt vor und erkläre genau, worauf ich achte.
Die Anleitung gilt für alle Betriebssysteme.
Installation der Bibliotheken
In der Arduino IDE klicke ich links auf das dritte Symbol. Damit öffne ich die Bibliotheksverwaltung.
Dort installiere ich zwei wichtige Bibliotheken:
TFT_eSPI von Bodmer. Ich verwende Version 2.5.43.
LVGL von kisvegabor. Hier kann ich zwischen Version 8 und 9 wählen. Für das EEZ CYD eignet sich die Version 9. Manche anderen Displays arbeiten noch mit Version 8. Welche Version man benötigt, sieht man in der Doku der Hersteller. Wir installieren zunächst die Version 9.
XPT2046 von Paul Stoffregen
Anschließend öffne ich das Menü Datei und wähle Einstellungen. Dort sehe ich den Pfad für mein Sketchbook. Unter Windows lautet dieser bei mir zum Beispiel: C:\Users\pixeledi\Documents\Arduino
Diesen Ordner öffne ich im Datei-Explorer. Hier finde ich alle lokal installierten Bibliotheken, auch die Ordner für lvgl und TFT_eSPI wie auch XPT2046 sollten jetzt vorhanden sein.
Wenn ein Hersteller eigene Bibliotheken anbietet, kann ich diese hier manuell einfügen. Dazu kopiere ich den entsprechenden Ordner einfach in das Verzeichnis. Um Konflikte zu vermeiden, benenne ich vorhandene Ordner vorher um, so muss ich die Originalbibliothek später nicht erneut herunterladen.
Damit haben wir die grundlegende Einrichtung der Bibliotheken abgeschlossen. Weiter geht es mit der Anpassung der lvgl.h-Datei.
Anpassung von lvgl.h
Zu diesem Abschnitt gibt es ein Video von mir: https://www.youtube.com/watch?v=ICpx_ADMAKs
Als ersten Schritt öffne ich den Ordner lvgl. Der Pfad lautet bei mir: C:\Users\pixeledi\Documents\Arduino\libraries\lvgl\
Darin finde ich die Datei lv_conf_template.h. Diese kopiere ich und füge sie eine Ebene darüber ein, also direkt neben den Ordner lvgl. Die kopierte Datei benenne ich in lv_conf.h um. Dadurch ergibt sich folgende Verzeichnisstruktur:
- lv_conf.h - lvgl - TFT_eSPIDie Datei lv_conf.h befindet sich also nicht im Ordner lvgl, sondern auf derselben Ebene wie die Bibliotheksordner. Diese Platzierung gilt speziell für das CYD. Bei anderen Displays kann sowohl der Speicherort als auch der Dateiname oder Inhalt abweichen. Dies kann man meist in der Dokumentation des Display-Herstellers nachlesen. In den Praxisprojekten werden wir außerdem konkrete Beispiele sehen und zeigen, wie man die Installation von z.B. Waveshare- und Elecrow-Displays durchführt.
Ich öffne nun die Datei lv_conf.h mit einem Editor meiner Wahl. Ich empfehle, die Datei einmal vollständig durchzugehen, um einen Überblick über den Umfang und die möglichen Einstellungen zu bekommen. In diesem Abschnitt gehe ich auf die wichtigsten Punkte für das CYD ein. Gleich am Anfang ändere ich die folgende Zeile:
Sollte hier noch #if 0 stehen, ersetze ich die 0 durch eine 1. Die Raute # bleibt dabei erhalten. Damit aktiviere ich die Konfigurationsdatei.
Weiters suche ich nach dem Eintrag LV_USE_TFT_ESPI:
Falls bei LV_USE_TFT_ESPI noch eine 0 steht, setze ich sie auf 1. Dieser Schritt ist wichtig, damit die Ansteuerung über TFT_eSPI funktioniert. In meiner Version befindet sich der Eintrag bei Zeile 911.
Dann aktiviere ich die benötigten Schriftarten. Dazu suche ich nach LV_FONT_MONTSERRAT. Ab etwa Zeile 396 finde ich:
Ich trage eine 1 bei allen Schriftgrößen ein, die ich im Projekt nutzen möchte. Jede aktivierte Schriftart braucht Speicherplatz. Deshalb aktiviere ich nur die Schriftgrößen, die ich wirklich brauche. Wie man eigene Schriftarten konvertiert und einbindet, zeige ich später in einem eigenen Kapitel.
Nachdem ich alle Änderungen vorgenommen habe, speichere ich die Datei ab. Damit ist die grundlegende Konfiguration abgeschlossen. Damit das Display einsatzbereit ist, muss ich nun noch die Datei User_Setup.h anpassen.
Anpassungen von User_Setup.h
Zu diesem Abschnitt gibt es ein YouTube Video von mir: https://www.
