ESP32 LVGL-Tutorial: Eine Touchscreen-UI erstellen

Warum einen visuellen Editor für ESP32-UIs verwenden?

Eine Touchscreen-Oberfläche für einen ESP32 auf herkömmliche Weise zu bauen ist mühsam. Du schreibst LVGL-C-Code, um jedes Widget zu platzieren, setzt Farben und Größen, flasht alles auf dein Board, starrst aufs Display, justierst ein paar Pixel nach und flasht erneut. Jede kleine Änderung bedeutet eine weitere Runde mit der Hardware.

Ein visueller Editor dreht das um. Du ziehst LVGL-Widgets auf eine Zeichenfläche, gestaltest sie per Klick und siehst das Ergebnis sofort — dann exportierst du den C-Code, wenn du zufrieden bist. Du verbringst deine Zeit mit Gestalten statt mit Neu-Kompilieren.

Was du brauchst

Du brauchst nicht viel, um mitzumachen:

• Ein ESP32-Board mit Display — jede ESP32-Variante, die LVGL ausführen kann, funktioniert (mehr zu spezifischen Boards weiter unten).
• Deine bevorzugte Firmware-Toolchain: ESP-IDF, Arduino oder PlatformIO, mit bereits hinzugefügtem LVGL 8.x und funktionierenden Display- und Touch-Treibern.
• Ein kostenloses PicoPixel-Konto — alles in diesem Leitfaden passiert im Browser.

Schritt 1 — Displaygröße festlegen

Öffne den Editor und starte ein neues Projekt. Das Erste, was du richtig einstellen musst, ist die Auflösung — damit dein Design pixel-genau zu deinem physischen Bildschirm passt.

Wähle ein Preset, das zu deinem Display passt:

• 320×240, die häufigsten kleinen SPI-TFT-Panels (ST7789, ILI9341).
• 240×240, runde Displays wie das GC9A01.
• 480×320, 480×480 oder 800×480, größere und quadratische Panels.

Wenn du das von Anfang an richtig einstellst, wird das, was du designst, genau das, was auf dem Gerät zu sehen ist.

Schritt 2 — Design per Drag-and-Drop

Jetzt kommt der spaßige Teil. Ziehe LVGL-Widgets aus der Palette auf die Zeichenfläche: Schaltflächen, Labels, Schieberegler, Bögen, Schalter, Diagramme, Dropdown-Menüs und mehr (insgesamt über 30 Widget-Typen). Positioniere sie und verwende die Seitenleisten, um Farben, Schriftarten, Abstände und abgerundete Ecken visuell zu gestalten. In dieser Phase kein C-Code.

Ein paar Dinge, die beim Erstellen nützlich sind:

• Mehrere Bildschirme. Füge so viele Bildschirme hinzu, wie du brauchst, und verknüpfe die Navigation zwischen ihnen — ideal für Menüs, Einstellungsseiten und Dashboards.
• Touch von Anfang an. Widgets reagieren auf Tippen, und Container scrollen, sodass du echte Touchscreen-Interaktionen gestalten kannst — keine statischen Layouts.
• Schriften und Bilder sind erstklassig. Text und Grafiken auf einem eingebetteten Gerät müssen in ein Format konvertiert werden, das LVGL speichern kann. PicoPixel übernimmt das für dich — sieh dir unsere Schriftarten-Anleitung für Details an, wie du Schriften klein hältst, und die Sprites-Anleitung, wenn du animierte, mehrzustandige Widgets möchtest.

Schritt 3 — Live-Vorschau

Bevor du deine Hardware anfasst, klicke auf Vorschau. PicoPixel führt die echte LVGL-Engine aus, die zu WebAssembly kompiliert wurde, direkt in deinem Browser — was du siehst, ist echtes LVGL-Rendering, kein Mock-up oder eine grobe Annäherung.

Tippe auf Schaltflächen, ziehe Schieberegler, scrolle und überprüfe deine Bildschirmnavigation. Layout-Probleme hier zu beheben dauert Sekunden; sie auf dem Gerät zu beheben kostet einen Flash-Zyklus. Du kannst sogar einen Vorschau-Link mit einem Teamkollegen oder Kunden teilen, um Feedback zu erhalten.

Schritt 4 — Produktionsreifen C-Code exportieren

Wenn das Design stimmt, exportiere. Du erhältst eine einzelne picopixel_lvgl_ui.zip mit sauberem, standardmäßigem LVGL-8.x-C-Code:

• ui.c / ui.h, der Einstiegspunkt mit ui_init() und ui_tick().
• screens.c / screens.h, deine Bildschirme und ihr Layout.
• styles, fonts, images, actions und vars — alles, was dein Design verwendet, für dich generiert.
• README.md, eine verständliche Beschreibung des Exports (behandelt in Schritt 5).

Es gibt keine proprietären Abhängigkeiten und keine PicoPixel-Laufzeitbibliothek hinzuzufügen — es ist reines LVGL, sodass es gleichermaßen funktioniert, ob du ESP-IDF, Arduino oder PlatformIO verwendest.

Schritt 5 — Die UI in dein ESP32-Projekt integrieren

Entpacke den Export in dein Projekt (die meisten legen es in einem ui/-Ordner ab). Dann musst du in deiner Firmware nur zwei Dinge tun: ui_init() einmal aufrufen, nachdem LVGL und deine Display-/Touch-Treiber eingerichtet sind, und ui_tick() in deiner Hauptschleife aufrufen.

So sieht es in einem Arduino-Stil-Sketch aus:

#include <lvgl.h>
#include "ui/ui.h"          // exported by PicoPixel

void setup() {
  lv_init();
  // ... initialize your display + touch drivers here ...
  ui_init();                // builds the UI you designed
}

void loop() {
  lv_timer_handler();       // let LVGL render and handle input
  ui_tick();                // keep PicoPixel's screens updated
  delay(5);
}

Um zur Laufzeit Bildschirme zu wechseln (z. B. wenn eine Schaltfläche gedrückt wird), rufe loadScreen() mit dem gewünschten Bildschirm auf. Das ist die gesamte Integration — kompilieren, flashen, und die UI auf deinem ESP32 entspricht dem, was du im Browser gesehen hast.

Welche ESP32-Boards funktionieren?

Da PicoPixel Standard-LVGL-C-Code exportiert, läuft er auf praktisch jedem ESP32, der LVGL 8.x ausführen kann. Ein kurzer Überblick über die Varianten:

• ESP32-S3, der Sweet Spot für die meisten Display-Projekte: Dual-Core mit PSRAM und viel Spielraum für reichhaltige UIs.
• ESP32 (original) / ESP32-S2, gut für einfachere Oberflächen; achte auf deinen Speicherverbrauch.
• ESP32-C3 / C6, leichte Single-Core-RISC-V-Chips, gut für kleinere UIs.
• ESP32-P4, Espressifs leistungsstärkstes Chip mit einer dedizierten GPU für flüssige, hochauflösende Oberflächen. PicoPixels Export wurde auf ESP32-P4-Boards von Waveshare und Guition getestet.

Beliebte Fertig-Boards — LILYGO T-Display-S3, M5Stack Core2/CoreS3, Waveshare- und Sunton-Display-Boards, das Espressif ESP32-S3-BOX und das günstige „Cheap Yellow Display" — funktionieren alle, ebenso wie gängige Treiber wie ST7789, ILI9341, GC9A01 (rund) und ILI9488.

Die UI speicherschonend halten

Eingebettete Displays haben weit weniger Speicher als ein Telefon oder Laptop, daher hält etwas Sorgfalt deine UI schnell und Flash-freundlich:

• Schriften richtig dimensionieren. Jede Schriftart wird in einer festen Pixelgröße gespeichert, und große Zeichensätze (besonders Chinesisch, Japanisch und Koreanisch) summieren sich schnell. Die Schriftarten-Anleitung zeigt, wie du nur die Zeichen einbindest, die du tatsächlich verwendest.
• Farbtiefe ans Display anpassen. Ein 16-Bit-Panel braucht keine 32-Bit-Bilder — die richtige Tiefe wählen verkleinert deine Assets.
• Wiederverwenden statt duplizieren. Erstelle ein Widget einmal und verwende es auf mehreren Bildschirmen und Projekten wieder.

Häufige Fragen

Funktioniert PicoPixel mit ESP32?

Ja. Es generiert Standard-LVGL-C-Code, der mit ESP-IDF, Arduino und PlatformIO auf jeder ESP32-Variante funktioniert, die LVGL 8.x ausführt — und der Export wurde auf ESP32-P4-Hardware getestet.

Welche LVGL-Version wird unterstützt?

LVGL 8.x. Der exportierte Code verwendet LVGL-8.x-APIs — mische ihn daher nicht mit LVGL-9.x-Aufrufen. (v9-Unterstützung ist geplant.)

Muss ich C-Code schreiben?

Nur die kleine Menge an Verbindungscode in Schritt 5 — das Aufrufen von ui_init() und ui_tick(). Die UI selbst wird visuell gestaltet und für dich generiert.

Ist es kostenlos?

Ja. PicoPixel ist kostenlos für den persönlichen und Hobbyeinsatz ohne erforderliche Kreditkarte. Die kommerzielle Nutzung beginnt ab 17 $/Monat (204 $/Jahr).

Nächste Schritte

Du kennst jetzt den gesamten Weg von der Idee zur geflashten UI: Auflösung festlegen, mit Drag-and-Drop gestalten, Live-Vorschau, exportieren und integrieren. Von hier aus:

• Starte direkt im Editor und beginne ein Projekt unter app.picopixel.io.
• Sieh dir die ESP32-GUI-Builder-Seite für mehr zu Board- und Framework-Unterstützung an.
• Bereichere deine Widgets mit animierten Sprites und benutzerdefinierten Schriften.
• Wägst du deine Optionen ab? Sieh, wie PicoPixel mit anderen LVGL-Editoren verglichen wird.