ESP32-Touchscreen-UIs erstellen — Visuell

1. Gestalten Sie Ihre Oberfläche

Öffnen Sie PicoPixel in Ihrem Browser und starten Sie ein neues Projekt. Ziehen Sie LVGL-Widgets — Buttons, Labels, Slider, Charts, Arcs, Switches und mehr — auf die Arbeitsfläche. Stellen Sie die Display-Auflösung passend zum Bildschirm Ihres 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. Gestalten Sie 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 Ihrem Browser aus. Die Vorschau ist die echte LVGL-Rendering-Engine — kein Mockup. Testen Sie Touch-Interaktionen, Scrollen und Animationen, bevor Sie Ihre Hardware anfassen. Sie können auch einen Simulator-Link mit Teammitgliedern oder Kunden für Feedback teilen.

3. Exportieren Sie Ihre UI-Dateien

Exportieren Sie eine ZIP-Datei mit Ihrer UI als LVGL-C-Code (.c- und .h-Dateien). Die Ausgabe umfasst Widget-Erstellung, Styling, Layout und Event-Bindings — 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

Entpacken Sie die exportierten Dateien in Ihr ESP-IDF-, Arduino- oder PlatformIO-Projekt. Binden Sie den UI-Header ein und rufen Sie ui_init() auf, nachdem Ihre LVGL-Display- und Eingabetreiber konfiguriert sind. Kompilieren, flashen, und die UI auf Ihrem ESP32 stimmt pixelgenau mit dem Simulator überein. Für einen schnelleren Weg übergeben Sie die ZIP-Datei an einen KI-Code-Assistenten (Claude Code, Codex, etc.) und lassen Sie 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-Fähigkeit
• •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 leichte UIs
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; gleiche Display-Fähigkeit 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 von Ihrer LVGL-Port-Konfiguration gehandhabt. 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 Ihr 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. Ihr Projekt muss bereits ein funktionierendes LVGL-8.x-Setup haben. Um PicoPixels UI hinzuzufügen:

1. 1.Exportieren Sie Ihre UI aus PicoPixel (lädt eine .zip-Datei herunter)
2. 2.Erstellen Sie ein ui/-Verzeichnis in Ihrem components/-Ordner
3. 3.Entpacken Sie die exportierten Dateien in components/ui/
4. 4.Erstellen Sie eine CMakeLists.txt in components/ui/, die die Quellen mit einer Abhängigkeit von lvgl registriert
5. 5.Fügen Sie ui zur REQUIRES-Liste in Ihrer main/CMakeLists.txt hinzu
6. 6.Binden Sie #include "ui/ui.h" in Ihre main.c ein und rufen Sie ui_init() nach Ihrem Display-Setup auf
7. 7.Kompilieren und flashen: idf.py build && idf.py flash

Arduino-IDE-Integration

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

1. 1.Exportieren Sie Ihre UI aus PicoPixel (lädt eine .zip-Datei herunter)
2. 2.Erstellen Sie einen ui/-Ordner in Ihrem src/-Verzeichnis des Sketches
3. 3.Entpacken Sie die exportierten Dateien in src/ui/
4. 4.Binden Sie #include "src/ui/ui.h" in Ihre .ino-Datei ein
5. 5.Rufen Sie ui_init() in setup() nach lv_init() und der Konfiguration Ihres 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.Hochladen auf Ihren ESP32

PlatformIO-Integration

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

1. 1.Exportieren Sie Ihre UI aus PicoPixel (lädt eine .zip-Datei herunter)
2. 2.Entpacken Sie die exportierten Dateien in src/ui/
3. 3.Binden Sie #include "ui/ui.h" in main.cpp ein
4. 4.Rufen Sie ui_init() nach Ihrem 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 exportieren Sie die ZIP-Datei aus PicoPixel und übergeben Sie sie einem KI-Code-Assistenten. Sagen Sie 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.