Przykładzdarzeń

Zawartość

• Ekran interakcji LVGL 480 x 480, przygotowany dla wyświetlaczy embedded i szybkich eksperymentów.
• Pięć przykładów przycisków, każdy pokazuje inny rodzaj reakcji UI.
• Kontrolki opacity, z przyciskami Low Opacity i High Opacity podłączonymi do tego samego celu obrazu.
• Przykład aktualizacji tekstu, używający przycisku Change Text do modyfikacji etykiety.
• Przykład zmiany właściwości, używający Set Properties - Size do zmiany rozmiaru obiektu docelowego.
• Trigger animacji, używający Play Animation, aby pokazać ruch lub przejście sterowane zdarzeniem.
• Podgląd okablowania w edytorze zdarzeń, z widocznymi liniami połączeń i węzłami triggera Clicked.
• Ustawienia akcji po stronie inspektora, pokazujące pola source, trigger, action, wartość opacity i destination.
• Cele obrazów, używające prostej turkusowej grafiki w stylu PicoPixel, aby łatwo było zobaczyć zmiany stanu.
• Zasób fontu Doto 32, używany dla kropkowanego tekstu display na canvasie.

Migawka zasobów

Szablon pozostaje na tyle mały, że można go zrozumieć jednym spojrzeniem. W panelu zasobów lokalna biblioteka pokazuje:

• Images: 1, wielokrotnego użytku grafika 500 x 500 w kolorze cyan, używana przez cele obrazów.
• Colors: 0, kolory są zastosowane bezpośrednio w projekcie.
• Fonts: 1, Doto 32, używany dla kropkowanego tekstu etykiety.
• Widgets: 0, dzięki czemu przykład skupia się na okablowaniu zdarzeń na poziomie ekranu, a nie zapisanych zasobach widgetów.

Panel warstw pokazuje projekt jako proste laboratorium interakcji na jednym ekranie:

• Screen 1, canvas 480 x 480.
• Button 1 do Button 5, klikalne źródła przykładów.
• Image 1, Image 2 i Image 3, widoczne cele zmian opacity, rozmiaru i animacji.
• Label 1, cel tekstowy używany przez przykład zmiany tekstu.

Dzięki temu plik jest przydatny do nauki, bo każde source i destination są widoczne na tym samym ekranie.

Struktura edytora zdarzeń

Gdy aktywny jest widok zdarzeń, PicoPixel nakłada graf interakcji na layout LVGL. Screenshot pokazuje projekt oznaczony jako Contains Events, a potem rysuje linie połączeń od źródeł-przycisków do ich celów.

• Low Opacity i High Opacity używają triggera Clicked i kierują się do tego samego celu obrazu.
• Change Text używa triggera Clicked i wskazuje na kropkowaną etykietę tekstową.
• Set Properties - Size używa triggera Clicked i wskazuje cel obrazu do zmiany rozmiaru.
• Play Animation używa triggera Clicked i wskazuje cel obrazu do odtwarzania animacji.
• Prawy panel zdarzeń pokazuje jedno wybrane zdarzenie z Source, Trigger, Action, ustawieniami wartości takimi jak Opacity oraz Destination.

To jest główna wartość edukacyjna szablonu: pokazuje, jak wizualny graf zdarzeń PicoPixel mapuje input użytkownika na zmiany obiektów LVGL, nie ukrywając relacji między triggerem i celem.

Dlaczego to dobrze działa z LVGL

Aplikacje LVGL zwykle potrzebują wielu małych interakcji: kliknąć przycisk, zaktualizować etykietę, zmienić stan obiektu, przesunąć obraz, przełączyć ekrany albo uruchomić animację. Ten przykład utrzymuje te wzorce jako widoczne i wielokrotnego użytku.

• Przyciski są natywnymi obiektami input LVGL, więc ten sam wzorzec działa z touch, focusem enkodera albo innymi sterownikami wejścia.
• Trigger jest jawny, używa w edytorze węzłów Clicked, więc wiadomo, co uruchamia każdą akcję.
• Cele są normalnymi obiektami LVGL, w tym obrazami i etykietami, więc wyeksportowana UI pozostaje edytowalna z firmware.
• Zmiany opacity i właściwości są lekkie, dzięki czemu przykłady pasują do małych wyświetlaczy embedded.
• Okablowanie animacji uczy przekazania sterowania, od zdarzenia użytkownika do wizualnej zmiany, która może działać niezależnie.
• Projekt eksportuje się jako standardowy kod UI LVGL 8.x, więc można go zintegrować z ESP-IDF, Arduino, PlatformIO, STM32, Zephyr albo innym buildem LVGL.

Wzorzec runtime

PicoPixel może wygenerować okablowanie zdarzeń za Ciebie, ale koncept mapuje się bezpośrednio na zwykłe callbacki LVGL. Jeśli musisz rozszerzyć wyeksportowaną UI o własną logikę firmware, wzorzec zwykle brzmi: sprawdź kod zdarzenia, potem zaktualizuj obiekt docelowy.

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

Użyj edytora wizualnego do typowego okablowania, a własne callbacki C zostaw dla zachowań zależnych od stanu firmware, danych z sensorów, ustawień urządzenia albo odpowiedzi sieci.

Pomysły na dostosowanie

Użyj tego jako darmowego szablonu interakcji LVGL, a potem zamień kontrolki demo na własną UI produktu.

• Zastąp pięć przycisków demo przełącznikami ustawień, pozycjami menu, kontrolkami dashboardu albo komendami hardware.
• Zmień akcje opacity w stany disabled/enabled, warning albo selected/unselected.
• Użyj akcji tekstu dla komunikatów statusu takich jak Connected, Saving, Armed, Charging albo Complete.
• Zamień przykład właściwości rozmiaru w wskaźnik postępu, rozwijaną kartę, efekt stanu pressed albo pulse powiadomienia.
• Użyj przykładu animacji dla przejść stron, feedbacku potwierdzenia, stanów ładowania albo sygnałów uwagi.
• Dodaj akcje nawigacji między wieloma ekranami LVGL, gdy przykłady jednego ekranu będą już jasne.
• Połącz przyciski z prawdziwymi zdarzeniami firmware, takimi jak zmiana jasności, przełączanie przekaźnika, wybór trybu albo uruchomienie flow kalibracji.

Eksport do projektu

Otwórz szablon w PicoPixel, sprawdź graf zdarzeń, zmień nazwy kluczowych źródeł i celów, a potem wyeksportuj projekt jako kod LVGL C. Wygenerowane pliki można dodać do istniejącego projektu embedded jak każdy inny export PicoPixel.

Dla projektów ESP32 typowy flow wygląda tak:

1. Skonfiguruj sterowniki display i input.
2. Otwórz ten szablon zdarzeń i dopasuj przyciski, etykiety, obrazy i akcje.
3. Wyeksportuj UI PicoPixel jako LVGL C.
4. Dodaj wyeksportowane pliki do projektu ESP-IDF, Arduino albo PlatformIO.
5. Wywołaj ui_init() po przygotowaniu LVGL i sterownika display.
6. Dodawaj własne callbacki firmware tylko tam, gdzie wizualny edytor zdarzeń nie wystarcza.

Więcej kontekstu znajdziesz w PicoPixel event editor guide, ESP32 LVGL UI tutorial oraz przewodniku using PicoPixel templates.

Najlepsze zastosowania

Ten szablon dobrze pasuje, gdy potrzebujesz czytelnego punktu startowego dla:

• przykładów zdarzeń LVGL
• demo interakcji kliknięcia przycisku
• prototypów dotykowej UI ESP32
• ekranów ustawień i paneli sterowania
• dashboardów smart-home
• menu wearable albo handheld
• przykładów triggerów animacji
• zmian stanu tekstu i obrazu
• nauki, jak wizualne zdarzenia PicoPixel stają się zachowaniem LVGL