ESP32-Touchscreen-UIs erstellen — Visuell

1. Gestalte deine Oberfläche

Öffne PicoPixel in deinem Browser und starte ein neues Projekt. Ziehe LVGL-Widgets — Buttons, Labels, Slider, Charts, Arcs, Switches und mehr — auf die Arbeitsfläche. Stelle die Display-Auflösung passend zum Bildschirm deines ESP32 ein: 320×240 für gängige SPI-TFTs, 240×240 für runde GC9A01-Displays oder 800×480 für größere Panels. Gestalte Farben, Schriften und Abstände visuell — in dieser Phase ist kein C-Code erforderlich.

2. Vorschau im Live-LVGL-Simulator

PicoPixel kompiliert LVGL zu WebAssembly und führt es direkt in deinem Browser aus. Die Vorschau ist die echte LVGL-Rendering-Engine — kein Mockup. Teste Touch-Interaktionen, Scrollen und Animationen, bevor du das Design auf deine Hardware überträgst. Du kannst auch einen Simulator-Link mit Teammitgliedern oder Kunden für Feedback teilen.

3. Exportiere deine UI-Dateien

Exportiere eine ZIP-Datei mit deiner UI als LVGL-C-Code (.c- und .h-Dateien). Die Ausgabe umfasst Widget-Erstellung, Styling, Layout und Ereignisverknüpfungen — alles mit Standard-LVGL-8.x-API-Aufrufen. Es gibt keine proprietären Abhängigkeiten und keine PicoPixel-Runtime-Bibliothek. LVGL-v9.x-Unterstützung ist geplant.

4. Integrieren und flashen

Entpacke die exportierten Dateien in dein ESP-IDF-, Arduino- oder PlatformIO-Projekt. Binde den UI-Header ein und rufe ui_init() auf, nachdem deine LVGL-Display- und Eingabetreiber konfiguriert sind. Kompilieren, flashen, und die UI auf deinem ESP32 stimmt pixelgenau mit dem Simulator überein. Für einen schnelleren Weg übergib die ZIP-Datei an einen KI-Programmierassistenten (Claude Code, Codex, etc.) und lass ihn die Integration automatisch erledigen.

ESP32-Varianten

PicoPixel generiert Standard-LVGL-Code, der auf jeder ESP32-Variante mit LVGL-8.x-Unterstützung funktioniert:

• •ESP32 (Original) — begrenzter SRAM; am besten für einfachere UIs
• •ESP32-S2 — USB-OTG-Unterstützung, moderate Display-Leistung
• •ESP32-S3 — empfohlen für die meisten Display-Projekte; Dual-Core mit PSRAM und ausreichend Leistung für komplexe UIs
• •ESP32-C3 — RISC-V Single-Core; geeignet für einfache UIs
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; gleiche Display-Leistung wie C3
• •ESP32-P4 — neueste Variante mit dedizierter GPU und Hardware-Pixelverarbeitung; ausgezeichnet für komplexe, hochauflösende GUIs. Getestet mit Waveshare- und Guition-Boards.

Beliebte Entwicklungsboards

Kompatibel mit jedem LVGL-fähigen ESP32-Entwicklungsboard, einschließlich:

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 Display-Boards
• •Guition ESP32-P4 Display-Boards
• •Elecrow Display-Boards
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Sunton-Boards (beliebte preiswerte ESP32-Display-Boards)

Kompatible Display-Treiber

PicoPixel generiert plattformunabhängigen LVGL-Code — der Display-Treiber wird in deinem LVGL-Port eingerichtet. Gängige Display-Controller, die mit LVGL auf ESP32 funktionieren:

• •ST7789 (am häufigsten für kleine TFTs)
• •ILI9341 (240×320 Displays)
• •ILI9488 (320×480 Displays)
• •GC9A01 (runde Displays)
• •ST7796 (größere Displays)
• •SSD1306 (kleine OLEDs)
• •MIPI DSI Displays (ESP32-P4)

Wenn dein Display mit LVGL funktioniert, funktioniert die Ausgabe von PicoPixel damit.

ESP-IDF-Integration

Der Export von PicoPixel ist reiner UI-Code — er enthält kein lv_init(), keine Display-Treiber-Registrierung und kein Tick-Handling. Dein Projekt muss bereits ein funktionierendes LVGL-8.x-Setup haben. Um PicoPixels UI hinzuzufügen:

1. 1.Exportiere deine UI aus PicoPixel (lädt eine .zip-Datei herunter)
2. 2.Erstelle ein ui/-Verzeichnis in deinem components/-Ordner
3. 3.Entpacke die exportierten Dateien in components/ui/
4. 4.Erstelle eine CMakeLists.txt in components/ui/, die die Quellen mit einer Abhängigkeit von lvgl registriert
5. 5.Füge ui zur REQUIRES-Liste in deiner main/CMakeLists.txt hinzu
6. 6.Binde #include "ui/ui.h" in deine main.c ein und rufe ui_init() nach deinem Display-Setup auf
7. 7.Kompilieren und flashen: idf.py build && idf.py flash

Arduino-IDE-Integration

Dein Sketch muss bereits LVGL 8.x installiert und einen funktionierenden Display-Treiber konfiguriert haben.

1. 1.Exportiere deine UI aus PicoPixel (lädt eine .zip-Datei herunter)
2. 2.Erstelle einen ui/-Ordner in deinem src/-Verzeichnis des Sketches
3. 3.Entpacke die exportierten Dateien in src/ui/
4. 4.Binde #include "src/ui/ui.h" in deine .ino-Datei ein
5. 5.Rufe ui_init() in setup() nach lv_init() und der Konfiguration deines Display-Treibers auf
6. 6.Arduino IDE kompiliert automatisch alle .c-Dateien in src/ rekursiv — keine Änderungen an der Build-Konfiguration nötig
7. 7.Auf deinen ESP32 hochladen

PlatformIO-Integration

Dein Projekt muss bereits LVGL 8.x in lib_deps und einen funktionierenden Display-Treiber konfiguriert haben.

1. 1.Exportiere deine UI aus PicoPixel (lädt eine .zip-Datei herunter)
2. 2.Entpacke die exportierten Dateien in src/ui/
3. 3.Binde #include "ui/ui.h" in main.cpp ein
4. 4.Rufe ui_init() nach deinem LVGL-Setup auf
5. 5.Keine Änderungen an platformio.ini nötig — PlatformIO kompiliert automatisch alle Quellen in src/
6. 6.Kompilieren und flashen: pio run --target upload

KI-gestützte Integration

Für einen schnelleren Weg exportiere die ZIP-Datei aus PicoPixel und übergib sie einem KI-Programmierassistenten. Sage Claude Code, GitHub Copilot oder Codex: „Füge diese PicoPixel-UI-Dateien zu meinem ESP32-LVGL-Projekt hinzu" — die meisten Assistenten können die Dateiablage, Includes und Build-Konfiguration automatisch erledigen.