LVGL (Light and Versatile Graphics Library) to biblioteka graficzna typu open-source napisana w języku C, która umożliwia tworzenie nowoczesnych interfejsów użytkownika dla mikrokontrolerów i urządzeń wbudowanych. Dzięki swojej lekkości i elastyczności LVGL stała się najpopularniejszym rozwiązaniem do projektowania GUI na płytkach takich jak ESP32, STM32 czy inne mikrokontrolery. W tym artykule dowiesz się, jak uruchomić LVGL na ESP32 – od instalacji i konfiguracji, aż po stworzenie pierwszego interfejsu.
Czym jest LVGL?
LVGL to otwarta, bezpłatna biblioteka graficzna dedykowana systemom wbudowanym. Umożliwia tworzenie interfejsów użytkownika z wykorzystaniem ponad 30 w pełni konfigurowalnych widżetów, takich jak przyciski, suwaki, pola tekstowe czy wirtualne klawiatury.
Główne cechy LVGL
Najważniejsze możliwości projektowania w LVGL przedstawiają się następująco:
- ponad 30 widżetów – przyciski, suwaki, pola tekstowe, klawiatury i wiele innych;
- obsługa dowolnych rozdzielczości ekranu – od małych wyświetlaczy LCD po większe panele dotykowe;
- efekty wizualne – antyaliasing, wielokąty, cienie i inne zaawansowane rysunki;
- wielojęzyczność – pełna obsługa kodowania UTF-8 oraz tekstów w wielu krojach pisma;
- obsługa różnych formatów obrazów – możliwość wczytywania danych z pamięci flash lub karty SD;
- niskie zużycie pamięci – prosty interfejs i minimalny footprint pamięciowy;
- wiele urządzeń wejściowych – obsługa dotyku, przycisków czy enkoderów dla tego samego ekranu.
Wymagania systemowe
Aby uruchomić LVGL na ESP32, musisz spełnić następujące minimalne wymagania:
- mikrokontroler/procesor – 16, 32 lub 64-bitowy;
- częstotliwość zegara – > 16 MHz;
- pamięć flash/ROM – > 64 kB (rekomendowane 180 kB);
- pamięć RAM – 8 kB (rekomendowana 24 kB);
- bufor ramki – przynajmniej jeden;
- bufor graficzny – większy niż liczba pikseli w rozdzielczości poziomej;
- kompilator – C99 lub nowszy.
ESP32 z łatwością spełnia te wymagania, dlatego świetnie sprawdza się w projektach z interfejsem graficznym.
Instalacja i konfiguracja LVGL
Pobranie biblioteki
Rozpocznij od sklonowania repozytorium LVGL z GitHub:
git clone --recurse-submodules https://github.com/lvgl/lvgl.git
Integracja z projektem ESP-IDF
Po pobraniu biblioteki skopiuj folder lvgl do katalogu components w Twoim projekcie ESP-IDF. Struktura projektu powinna wyglądać następująco:
my_project/
├── main/
│ ├── CMakeLists.txt
│ ├── main.c
│ └── lvgl_helpers.c (opcjonalnie)
├── components/
│ └── lvgl/
├── CMakeLists.txt
└── sdkconfig
Konfiguracja sdkconfig
Aby LVGL pracował prawidłowo z ESP32, ustaw w pliku konfiguracyjnym następujące parametry:
CONFIG_FREERTOS_HZ=1000
CONFIG_LVGL_TICK_CUSTOM=y
CONFIG_LVGL_TICK_CUSTOM_FREQ=1000
Te ustawienia synchronizują timery FreeRTOS i LVGL, gwarantując płynne odświeżanie interfejsu.
Podstawowy kod – pierwszy interfejs
Oto minimalny kod niezbędny do uruchomienia LVGL na ESP32:
void app_main() {
// Inicjalizacja LVGL
lv_init();
// Inicjalizacja sterownika ekranu
lvgl_driver_init();
// Inicjalizacja bufora dla LVGL
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf1[DISP_BUF_SIZE];
lv_disp_draw_buf_init(&draw_buf, buf1, NULL, DISP_BUF_SIZE);
// Utworzenie przykładowego interfejsu
lv_obj_t *label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "Witaj, tu LVGL na ESP32!");
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
// Główna pętla
while (1) {
lv_task_handler();
vTaskDelay(pdMS_TO_TICKS(10));
}
}
Po uruchomieniu tego kodu zobaczysz komunikat „Witaj, tu LVGL na ESP32!” wyświetlony na ekranie podłączonym do ESP32.
Wybór wyświetlacza
Najpopularniejszym wyborem dla projektów z ESP32 jest wyświetlacz 2.4″ SPI ze sterownikiem ILI9341 o rozdzielczości 240×320 pikseli. Tego typu ekrany są łatwo dostępne i bardzo dobrze wspierane przez społeczność LVGL.
Nowoczesną alternatywą są zestawy z wyświetlaczem dotykowym ESP32-2432S028R (TFT 2.8″, 240×320), które umożliwiają tworzenie interaktywnych interfejsów z obsługą dotyku.
Dla szybkiego porównania najczęściej wybieranych opcji zobacz poniższą tabelę:
| Model/moduł | Sterownik | Rozdzielczość | Interfejs | Dotyk |
|---|---|---|---|---|
| TFT 2.4″ (typowe moduły) | ILI9341 | 240×320 | SPI | opcjonalny (XPT2046 jako osobny kontroler) |
| ESP32-2432S028R | ILI9341 + XPT2046 | 240×320 | SPI | zintegrowany (rezystancyjny) |
Portowanie LVGL na inne mikrokontrolery
Chociaż artykuł skupia się na ESP32, LVGL łatwo przenieść na inne mikrokontrolery. Przykładowo port na STM32F407 z wyświetlaczem ILI9341 i kontrolerem dotyku XPT2046 potwierdza uniwersalność biblioteki. Kluczowe kroki to:
- Pobranie biblioteki i wstępna konfiguracja
- Dodanie sterownika wyświetlacza
- Dodanie sterownika dotyku (jeśli wymagany)
- Uruchomienie przykładów i testowanie
Dzięki modułowej architekturze LVGL portowanie na PIC, ATmegę czy STM32 jest szybkie i przewidywalne.
Narzędzia wspierające – SquareLine Studio
Tworzenie interfejsów można znacznie przyspieszyć za pomocą SquareLine Studio – narzędzia do wizualnego projektowania GUI, które generuje kod dla ESP32. To rozwiązanie szczególnie przydaje się przy bardziej złożonych aplikacjach i prototypowaniu.
Przykłady aplikacji
ESP-IoT-Solution (oficjalny projekt Espressifa) zawiera gotowe przykłady aplikacji LVGL:
- termostat – interfejs do kontroli temperatury;
- kawa – interfejs interaktywny maszyny do kawy;
- konfiguracja Wi‑Fi – ekran do konfiguracji połączenia Wi‑Fi na ESP32.
To doskonały punkt startowy, by poznać dobre praktyki i strukturę realnych projektów.
Praktyczne wskazówki
Obsługa dotyku
Jeśli pracujesz z wyświetlaczem dotykowym, dodaj sterownik kontrolera dotyku (np. XPT2046) i przeprowadź kalibrację. Poprawna kalibracja jest kluczowa dla precyzyjnego działania interfejsu.
Optymalizacja pamięci
Zwróć uwagę na rozmiar bufora graficznego – powinien być co najmniej równy liczbie pikseli w rozdzielczości poziomej. Dla ekranów 240×320 oznacza to minimum 240 pikseli bufora.
Główna pętla
Regularnie wywołuj obsługę zdarzeń LVGL w pętli głównej:
while (1) {
lv_task_handler();
vTaskDelay(pdMS_TO_TICKS(10));
}
Funkcja lv_task_handler() przetwarza zdarzenia, animacje i odświeża ekran, zapewniając płynność działania UI.
Zasoby i dokumentacja
LVGL posiada bogatą dokumentację i aktywną społeczność:
- oficjalna strona – LVGL.io z pełną dokumentacją i narzędziami online;
- forum LVGL – miejsce do zadawania pytań i dzielenia się doświadczeniami;
- GitHub – repozytoria z przykładami i portami na różne mikrokontrolery;
- repozytoria społeczności – przykłady portowań dla STM32, PIC, ATmega i innych.