Twórz interfejsy dotykowe ESP32 — wizualnie

1. Zaprojektuj interfejs

Otwórz PicoPixel w przeglądarce i rozpocznij nowy projekt. Przeciągnij i upuść widżety LVGL — przyciski, etykiety, suwaki, wykresy, łuki, przełączniki i inne — do obszaru roboczego. Ustaw rozdzielczość wyświetlacza zgodnie z ekranem ESP32: 320×240 dla popularnych TFT SPI, 240×240 dla okrągłych wyświetlaczy GC9A01 lub 800×480 dla większych paneli. Dobieraj kolory, czcionki i odstępy wizualnie — na tym etapie kod C nie jest potrzebny.

2. Podgląd w symulatorze LVGL na żywo

PicoPixel kompiluje LVGL do WebAssembly i uruchamia go bezpośrednio w przeglądarce. Podgląd to prawdziwy silnik renderowania LVGL — nie makieta. Testuj interakcje dotykowe, przewijanie i animacje przed wgraniem projektu na urządzenie. Możesz także udostępnić link do symulatora członkom zespołu lub klientom w celu uzyskania opinii.

3. Eksportuj pliki UI

Eksportuj plik zip zawierający Twój UI jako kod C dla LVGL (pliki .c i .h). Wynik obejmuje tworzenie widżetów, stylizację, układ i wiązania zdarzeń — wszystko przy użyciu standardowych wywołań API LVGL 8.x. Nie ma zależności od zamkniętych bibliotek ani biblioteki runtime PicoPixel. Obsługa LVGL v9.x jest planowana.

4. Zintegruj i wgraj

Rozpakuj wyeksportowane pliki do projektu ESP-IDF, Arduino lub PlatformIO. Dołącz nagłówek UI i wywołaj ui_init() po skonfigurowaniu sterowników wyświetlacza i wejścia LVGL. Skompiluj, wgraj na urządzenie, a UI na ESP32 będzie identyczny z symulatorem piksel po pikselu. Aby przyspieszyć, przekaż plik zip asystentowi AI (Claude Code, Codex itp.) i pozwól mu automatycznie zająć się integracją.

Warianty ESP32

PicoPixel generuje standardowy kod LVGL, który działa na dowolnym wariancie ESP32 z obsługą LVGL 8.x:

• •ESP32 (oryginalny) — ograniczona pamięć SRAM; najlepszy dla prostszych interfejsów
• •ESP32-S2 — obsługa USB OTG, umiarkowane możliwości wyświetlania
• •ESP32-S3 — zalecany dla większości projektów z wyświetlaczem; dwurdzeniowy z PSRAM i wystarczającą mocą do złożonych interfejsów
• •ESP32-C3 — jednordzeniowy RISC-V; odpowiedni dla lekkich interfejsów
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; takie same możliwości wyświetlania jak C3
• •ESP32-P4 — najnowszy wariant z dedykowanym GPU i sprzętowym potokiem przetwarzania pikseli; doskonały do złożonych interfejsów GUI o wysokiej rozdzielczości. Przetestowany na płytkach Waveshare i Guition.

Popularne płytki rozwojowe

Kompatybilny z każdą płytką rozwojową ESP32 obsługującą LVGL, w tym:

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Płytki Waveshare ESP32-S3 / ESP32-P4 z wyświetlaczem
• •Płytki Guition ESP32-P4 z wyświetlaczem
• •Płytki Elecrow z wyświetlaczem
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Płytki Sunton (popularne, niedrogie płytki ESP32 z wyświetlaczem)

Kompatybilne sterowniki wyświetlaczy

PicoPixel generuje kod LVGL niezależny od platformy — sterownik wyświetlacza jest obsługiwany przez konfigurację portu LVGL. Popularne kontrolery wyświetlaczy współpracujące z LVGL na ESP32:

• •ST7789 (najpopularniejszy dla małych TFT)
• •ILI9341 (wyświetlacze 240×320)
• •ILI9488 (wyświetlacze 320×480)
• •GC9A01 (okrągłe wyświetlacze)
• •ST7796 (większe wyświetlacze)
• •SSD1306 (małe OLED)
• •MIPI DSI — wyświetlacze (ESP32-P4)

Jeśli Twój wyświetlacz działa z LVGL, kod z PicoPixel będzie z nim współpracować.

Integracja z ESP-IDF

Eksport PicoPixel to wyłącznie kod UI — nie zawiera lv_init(), rejestracji sterownika wyświetlacza ani obsługi ticków. Twój projekt musi mieć już działającą konfigurację LVGL 8.x. Aby dodać UI z PicoPixel:

1. 1.Wyeksportuj interfejs z PicoPixel — otrzymasz plik .zip
2. 2.Utwórz katalog ui/ w folderze components/ projektu
3. 3.Rozpakuj wyeksportowane pliki do components/ui/
4. 4.Utwórz CMakeLists.txt w components/ui/, rejestrujący źródła z zależnością od lvgl
5. 5.Dodaj ui do listy REQUIRES w main/CMakeLists.txt
6. 6.Dołącz #include "ui/ui.h" w main.c i wywołaj ui_init() po konfiguracji wyświetlacza
7. 7.Zbuduj i wgraj: idf.py build && idf.py flash

Integracja z Arduino IDE

Twój szkic musi mieć już zainstalowane LVGL 8.x i skonfigurowany sterownik wyświetlacza.

1. 1.Wyeksportuj interfejs z PicoPixel — otrzymasz plik .zip
2. 2.Utwórz folder ui/ w katalogu src/ szkicu
3. 3.Rozpakuj wyeksportowane pliki do src/ui/
4. 4.Dołącz #include "src/ui/ui.h" w pliku .ino
5. 5.Wywołaj ui_init() w setup() po wywołaniu lv_init() i skonfigurowaniu sterownika wyświetlacza
6. 6.Arduino IDE automatycznie kompiluje wszystkie pliki .c w src/ rekursywnie — nie są potrzebne zmiany w konfiguracji budowania
7. 7.Wgraj na ESP32

Integracja z PlatformIO

Twój projekt musi mieć już LVGL 8.x w lib_deps i skonfigurowany sterownik wyświetlacza.

1. 1.Wyeksportuj interfejs z PicoPixel — otrzymasz plik .zip
2. 2.Rozpakuj wyeksportowane pliki do src/ui/
3. 3.Dołącz #include "ui/ui.h" w main.cpp
4. 4.Wywołaj ui_init() po konfiguracji LVGL
5. 5.Nie są potrzebne zmiany w platformio.ini — PlatformIO automatycznie kompiluje wszystkie źródła w src/
6. 6.Zbuduj i wgraj: pio run --target upload

Integracja z pomocą AI

Aby przyspieszyć, eksportuj plik zip z PicoPixel i przekaż go asystentowi AI. Powiedz Claude Code, GitHub Copilot lub Codex: „Dodaj te pliki UI z PicoPixel do mojego projektu ESP32 LVGL” — większość asystentów poradzi sobie z umieszczeniem plików, dołączeniem nagłówków i konfiguracją budowania automatycznie.