Samouczek ESP32 LVGL: Tworzenie interfejsu dotykowego

Dlaczego warto używać edytora wizualnego do interfejsów ESP32?

Tworzenie interfejsu dotykowego dla ESP32 w tradycyjny sposób jest powolne. Ręcznie piszesz kod C dla LVGL, aby umieścić każdy widget, ustawiasz kolory i rozmiary, wgrywasz to na płytkę, wpatrujesz się w wyświetlacz, przesuwasz kilka pikseli i znów wgrywasz. Każda mała zmiana oznacza kolejną podróż w obie strony do sprzętu.

Edytor wizualny odwraca ten proces. Przeciągasz widgety LVGL na obszar roboczy, stylujesz je klikając, widzisz wynik natychmiast — a potem eksportujesz kod C, gdy jesteś zadowolony. Czas poświęcasz na projektowanie, a nie na rekompilację.

Czego potrzebujesz

Nie potrzebujesz wiele, żeby podążać za tym poradnikiem:

• Płytka ESP32 z wyświetlaczem, każdy wariant ESP32, który potrafi uruchomić LVGL, zadziała (więcej na temat konkretnych płytek poniżej).
• Wybrany łańcuch narzędzi firmware: ESP-IDF, Arduino lub PlatformIO, z LVGL 8.x już dodanym oraz działającymi sterownikami wyświetlacza i dotyku.
• Bezpłatne konto PicoPixel — wszystko w tym poradniku odbywa się w przeglądarce.

Krok 1 - Ustaw rozmiar wyświetlacza

Otwórz edytor i rozpocznij nowy projekt. Pierwszą rzeczą, którą musisz ustawić prawidłowo, jest rozdzielczość — tak, by Twój projekt pasował do fizycznego ekranu piksel po pikselu.

Wybierz preset pasujący do Twojego wyświetlacza:

• 320×240, najczęstsze małe panele TFT SPI (ST7789, ILI9341).
• 240×240, okrągłe wyświetlacze jak GC9A01.
• 480×320, 480×480 lub 800×480, większe i kwadratowe panele.

Ustawienie tego od samego początku oznacza, że to, co projektujesz, jest dokładnie tym, co pojawia się na urządzeniu.

Krok 2 - Projektuj metodą przeciągnij i upuść

Teraz przyjemna część. Przeciągaj widgety LVGL z palety na obszar roboczy: przyciski, etykiety, suwaki, łuki, przełączniki, wykresy, listy rozwijane i wiele więcej (ponad 30 typów widgetów). Pozycjonuj je, a następnie używaj paneli bocznych, aby wizualnie ustawiać kolory, czcionki, odstępy i zaokrąglone narożniki. Na tym etapie — żadnego kodu C.

Kilka rzeczy wartych uwagi podczas budowania:

• Wiele ekranów. Dodaj tyle ekranów, ile potrzebujesz i połącz między nimi nawigację — świetne do menu, stron ustawień i dashboardów.
• Dotyk od samego początku. Widgety reagują na dotknięcia, a kontenery się przewijają, więc możesz projektować prawdziwe interakcje dotykowe, a nie tylko statyczne układy.
• Czcionki i obrazy są elementami pierwszej klasy. Tekst i grafika na urządzeniu wbudowanym muszą zostać przekonwertowane do formatu, który LVGL może przechowywać. PicoPixel zajmuje się tym za Ciebie — szczegóły dotyczące utrzymywania małego rozmiaru czcionek znajdziesz w przewodniku po czcionkach, a jeśli chcesz animowanych widgetów z wieloma stanami, zajrzyj do przewodnika po sprite'ach.

Krok 3 - Podgląd na żywo

Zanim dotkniesz sprzętu, kliknij podgląd. PicoPixel uruchamia prawdziwy silnik LVGL skompilowany do WebAssembly bezpośrednio w Twojej przeglądarce — to, co widzisz, to autentyczne renderowanie LVGL, a nie makieta ani przybliżenie.

Dotykaj przycisków, przeciągaj suwaki, przewijaj i sprawdzaj nawigację między ekranami. Naprawianie problemów z układem tutaj zajmuje sekundy; naprawianie ich na urządzeniu kosztuje cykl wgrywania. Możesz nawet udostępnić link do podglądu współpracownikowi lub klientowi w celu uzyskania opinii.

Krok 4 - Eksportuj gotowy do produkcji kod C

Gdy projekt wygląda tak jak chcesz, wyeksportuj go. Otrzymasz jeden plik picopixel_lvgl_ui.zip zawierający czysty, standardowy kod C dla LVGL 8.x:

• ui.c / ui.h, punkt wejścia z funkcjami ui_init() i ui_tick().
• screens.c / screens.h, Twoje ekrany i ich układ.
• styles, fonts, images, actions i vars, wszystko, czego używa Twój projekt, wygenerowane automatycznie.
• README.md, opis eksportu w prostym języku (omówiony w kroku 5).

Brak własnościowych zależności i brak biblioteki uruchomieniowej PicoPixel do dodania — to czyste LVGL, które działa tak samo niezależnie od tego, czy korzystasz z ESP-IDF, Arduino czy PlatformIO.

Krok 5 - Dodaj interfejs do swojego projektu ESP32

Rozpakuj eksport do swojego projektu (większość osób umieszcza go w folderze ui/). Następnie w swoim firmware musisz zrobić tylko dwie rzeczy: wywołać ui_init() raz po skonfigurowaniu LVGL i sterowników wyświetlacza/dotyku, oraz wywołać ui_tick() w głównej pętli.

W szkicu w stylu Arduino wygląda to tak:

#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);
}

Aby przełączać ekrany w czasie działania (na przykład gdy przycisk zostanie wciśnięty), wywołaj loadScreen() z ekranem, który chcesz wyświetlić. To cała integracja — skompiluj, wgraj, a interfejs na Twoim ESP32 będzie wyglądał dokładnie tak, jak widziałeś w przeglądarce.

Które płytki ESP32 działają?

Ponieważ PicoPixel eksportuje standardowy kod C dla LVGL, działa on na praktycznie każdym ESP32, który potrafi uruchomić LVGL 8.x. Krótki przewodnik po wariantach:

• ESP32-S3, najlepszy wybór dla większości projektów z wyświetlaczami: dwurdzeniowy z PSRAM i sporym zapasem dla rozbudowanych interfejsów.
• ESP32 (oryginalny) / ESP32-S2, odpowiedni do prostszych interfejsów; pilnuj budżetu pamięci.
• ESP32-C3 / C6, lekkie jednordzeniowe chipy RISC-V, dobre do mniejszych interfejsów.
• ESP32-P4, najpotężniejszy chip Espressif z dedykowanym GPU do płynnych interfejsów w wysokiej rozdzielczości. Eksport PicoPixel był testowany na płytkach ESP32-P4 od Waveshare i Guition.

Popularne gotowe płytki — LILYGO T-Display-S3, M5Stack Core2/CoreS3, płytki wyświetlaczy Waveshare i Sunton, Espressif ESP32-S3-BOX oraz budżetowy „Cheap Yellow Display" — wszystkie działają, podobnie jak popularne sterowniki ST7789, ILI9341, GC9A01 (okrągły) i ILI9488.

Utrzymywanie lekkiego interfejsu w pamięci

Wbudowane wyświetlacze mają znacznie mniej pamięci niż telefon czy laptop, dlatego odrobina uwagi sprawia, że interfejs jest szybki i oszczędny:

• Dobierz odpowiedni rozmiar czcionki. Każda czcionka jest przechowywana w określonym rozmiarze pikselowym, a duże zestawy znaków (szczególnie chiński, japoński i koreański) szybko zajmują dużo miejsca. Przewodnik po czcionkach pokazuje, jak zawierać tylko znaki, których faktycznie używasz.
• Dostosuj głębię koloru do wyświetlacza. Panel 16-bitowy nie potrzebuje obrazów 32-bitowych — wybór właściwej głębi zmniejsza rozmiar zasobów.
• Używaj ponownie zamiast duplikować. Zbuduj widget raz i używaj go na różnych ekranach i w różnych projektach.

Często zadawane pytania

Czy PicoPixel działa z ESP32?

Tak. Generuje standardowy kod C dla LVGL, który działa z ESP-IDF, Arduino i PlatformIO na każdym wariancie ESP32 obsługującym LVGL 8.x. Eksport był testowany na sprzęcie ESP32-P4.

Którą wersję LVGL obsługuje?

LVGL 8.x. Eksportowany kod używa API LVGL 8.x, więc nie mieszaj go z wywołaniami LVGL 9.x. (Obsługa v9 jest planowana.)

Czy muszę pisać jakiś kod C?

Tylko małą ilość kodu łączącego w kroku 5 — wywołania ui_init() i ui_tick(). Sam interfejs jest projektowany wizualnie i generowany automatycznie.

Czy jest bezpłatny?

Tak. PicoPixel jest bezpłatny do użytku osobistego i hobbystycznego bez wymagania karty kredytowej. Użytek komercyjny zaczyna się od $17/mies. ($204/rok).

Kolejne kroki

Znasz już pełną ścieżkę od pomysłu do wgranego interfejsu: ustaw rozdzielczość, projektuj metodą przeciągnij i upuść, podejrzyj na żywo, wyeksportuj i zintegruj. Co dalej:

• Przejdź do edytora i rozpocznij projekt na app.picopixel.io.
• Przejrzyj stronę buildera GUI dla ESP32, aby dowiedzieć się więcej o obsługiwanych płytkach i środowiskach.
• Wzbogać widgety za pomocą animowanych sprite'ów i niestandardowych czcionek.
• Rozważasz opcje? Sprawdź, jak PicoPixel wypada na tle innych edytorów LVGL.