Spis treści
Wprowadzenie
Podczas tworzenia wbudowanych interfejsów graficznych ważne są spójność stylistyczna i przejrzysta architektura.
LVGL to potężne narzędzie do kontrolowania całego wyglądu i stylu aplikacji za pomocą stylów globalnych oraz systemu niestandardowych motywów.
W tym artykule dowiesz się, jak:
- zdefiniuj style globalne,
- przypisz je do własnego motywu na zamówienie,
- zaktualizuj cały interfejs jednym wywołaniem funkcji,
- i dlaczego takie podejście usprawnia proces inżynieryjny, zwłaszcza w dużych lub rozwijających się projektach GUI.
A wszystko to na naszym standardowym 10-calowym wyświetlaczu Riverdi.
Jak to działa
LVGL pozwala na:
- Zdefiniuj style (lv_style_t),
- Stwórz motyw na zamówienie,
- Przypisz funkcję zwrotną, która stosuje style w zależności od typu obiektu,
- Powiedz LVGL, żeby przebudowało motyw i odświeżyło wszystkie obiekty.
To architektura przyjazna dla inżynierów: zmiana w jednym miejscu wpływa na wszystko.
Przykład kodu – motyw globalny wielokrotnego użytku
Poniżej znajdziesz pełny przykład pokazujący:
- ogólne style dla przycisków i suwaków,
- dynamiczna zmiana palety,
- automatyczna zmiana stylu wszystkich obiektów.
Globalne zmienne stylów
static lv_style_t style_common_main;
static lv_style_t style_slider_main;
static lv_style_t style_slider_indicator;
static lv_style_t style_slider_knob;
static lv_palette_t current_palette = LV_PALETTE_ORANGE;
Zastosuj funkcję wywołania zwrotnego motywu
Automatycznie stosuje style do widżetów na podstawie klasy. Można to łatwo rozszerzyć na kolejne typy widżetów.
static void theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
if(lv_obj_check_type(obj, &lv_button_class)) {
lv_obj_add_style(obj, &style_common_main, 0);
}
if(lv_obj_check_type(obj, &lv_slider_class)) {
lv_obj_add_style(obj, &style_slider_main, LV_PART_MAIN);
lv_obj_add_style(obj, &style_slider_indicator, LV_PART_INDICATOR);
lv_obj_add_style(obj, &style_slider_knob, LV_PART_KNOB);
}
}
Przebudowa motywu (podstawowa sztuczka inżynierska)
To powoduje ponowne wygenerowanie stylów, przypisanie ich do motywu i wymusza globalne odświeżenie strony.
static void rebuild_theme(void)
{
lv_style_reset(&style_common_main);
lv_style_reset(&style_slider_main);
lv_style_reset(&style_slider_indicator);
lv_style_reset(&style_slider_knob);
/* Styl przycisków */
lv_style_init(&style_common_main);
lv_style_set_bg_color(&style_common_main, lv_palette_main(current_palette));
lv_style_set_border_color(&style_common_main, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_border_width(&style_common_main, 3);
lv_style_set_radius(&style_common_main, 6);
/* Style suwaka */
lv_style_init(&style_slider_main);
lv_style_set_bg_color(&style_slider_main, lv_palette_lighten(current_palette, 2));
lv_style_set_bg_opa(&style_slider_main, LV_OPA_COVER);
lv_style_init(&style_slider_indicator);
lv_style_set_bg_color(&style_slider_indicator, lv_palette_darken(current_palette, 2));
lv_style_init(&style_slider_knob);
lv_style_set_bg_color(&style_slider_knob, lv_color_white());
/* Podłącz motyw */
lv_theme_t * th_act = lv_display_get_theme(NULL);
static lv_theme_t th_new;
th_new = *th_act;
lv_theme_set_parent(&th_new, th_act);
lv_theme_set_apply_cb(&th_new, theme_apply_cb);
lv_display_set_theme(NULL, &th_new);
lv_obj_report_style_change(NULL);
}
Zmień kolor motywu
Oto funkcja, która zmienia kolor w aktualnie używanym motywie po naciśnięciu przycisku. Ma to po prostu pokazać, jak łatwo to zrobić. Jeśli chcesz mieć więcej kolorów, polecam użyć tablicy.
static void color_change_event_cb(lv_event_t * e)
{
if(current_palette == LV_PALETTE_ORANGE)
current_palette = LV_PALETTE_GREEN;
else if(current_palette == LV_PALETTE_GREEN)
current_palette = LV_PALETTE_BLUE;
else
current_palette = LV_PALETTE_ORANGE;
rebuild_theme();
}
Ostatnia prezentacja
Tutaj tworzymy domyślny przycisk u góry, wyświetlany na wyświetlaczu. Następnie wywołujemy funkcję `rebuild_theme()`, żeby zmienić główny styl używanych przez nas widżetów. Teraz możemy dodać kolejny przycisk pod pierwszym, a pod nim jeszcze suwak. Powinieneś dostrzec różnice w stylach między przyciskami. Po naciśnięciu przycisku zmieniamy też kolor nowych widżetów, podczas gdy domyślny pozostaje bez zmian.
void lv_example_style_change(void)
{
lv_obj_t *btn_default = lv_button_create(lv_screen_active());
lv_obj_align(btn_default, LV_ALIGN_CENTER, 0, -100);
lv_label_set_text(lv_label_create(btn_default), „Przycisk domyślny”);
rebuild_theme();
lv_obj_t * btn_themed = lv_button_create(lv_screen_active());
lv_obj_align(btn_themed, LV_ALIGN_CENTER, 0, 100);
lv_obj_add_event_cb(btn_themed, color_change_event_cb, LV_EVENT_CLICKED, NULL);
lv_label_set_text(lv_label_create(btn_themed), „Zmień kolor motywu”);
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_align(slider, LV_ALIGN_CENTER, 0, 200);
lv_obj_set_width(slider, 250);
lv_slider_set_value(slider, 40, LV_ANIM_OFF);
}
Dlaczego style globalne są przydatne
Większość inżynierów szybko zauważa, że stylizacja GUI staje się chaotyczna, gdy każdy przycisk, suwak czy widget ma swój własny kod stylów.
Motywy globalne pozwalają rozwiązać kilka problemów inżynieryjnych:
- Scentralizowane sterowanie wizualne
Cała logika stylizacji jest w jednym miejscu. Nie musisz przeglądać 10 plików, żeby zmienić przycisk czy suwak.
- Szybsze zmiany w interfejsie użytkownika
Zmiana kolorów marki przebiega błyskawicznie.
Dział marketingu prosi o „zielony zamiast pomarańczowego”?
Wystarczy zmienić jedną zmienną → cały GUI się aktualizuje.
- Architektura skalowalna dla dużych projektów
Kiedy interfejs użytkownika rozrasta się ponad kilka ekranów, lokalne stylizowanie staje się niemożliwe do ogarnięcia.
Globalne motywy gwarantują:
- stałe marże,
- jednolite promienie,
- spójne stosowanie palety kolorów,
- spójne działanie widgetów.
- Żadnego kopiowania i wklejania stylów
Bez motywów inżynierowie muszą powielać kod stylów na różnych ekranach.
Style globalne pozwalają uniknąć powtórzeń i zmniejszyć rozmiar kodu.
- Zmiana motywu w czasie wykonania, na przykład:
- Tryb ciemny/jasny,
- Motywy, które możesz sam wybrać,
- Tryby bezpieczeństwa (np. interfejs użytkownika „Ostrzeżenie” ma czerwony motyw),
- Branding OEM (jedno firmware, wiele skórek graficznych).
Jeśli chcesz dowiedzieć się więcej, zajrzyj na stronę LVGL.
ODKRYJ NASZĄ
Whitepaper
Osiągnij idealną interakcję użytkownika z wyświetlaczem dzięki odpowiedniemu czujnikowi Touch Sensor IC. Czy kiedykolwiek zmagałeś się z problemami związanymi z fantomowymi dotknięciami lub certyfikacją? Rozwiń swoje prace B+R jak profesjonalista dzięki naszemu Whitepaperowi!
Przejdź do naszego katalogu produktów i zobacz, jak możesz oszczędzać dzięki jakości, nie na jakości.
