Korzystanie z edytora zdarzeń

Czym jest edytor zdarzeń?

Edytor zdarzeń pozwala łączyć widżety tak, aby interakcja z jednym widżetem wywoływała reakcję innego widżetu lub całego ekranu. Każde połączenie składa się z trzech prostych części:

• Źródło, widżet, z którym użytkownik wchodzi w interakcję (na przykład przycisk).
• Wyzwalacz, to, co użytkownik robi (na przykład click).
• Akcja, to, co dzieje się w wyniku (na przykład go to another screen), zwykle skierowana na docelowy widżet albo ekran.

Czytaj to jak zdanie: "Gdy użytkownik kliknie ten przycisk, przejdź do ekranu Settings." To jedno zdarzenie. Możesz dodać ich tyle, ile chcesz, aby ożywić cały interfejs.

Otwieranie edytora zdarzeń

Wybierz dowolny widżet albo ekran, a potem przełącz się na kartę Events w prawym pasku bocznym (obok Design i Inspect). Tutaj każde zdarzenie pojawia się jako karta, którą możesz otworzyć i skonfigurować.

Gdy nie masz jeszcze żadnych zdarzeń, PicoPixel pokazuje trzy sposoby startu:

1. Kliknij przycisk +, aby dodać zdarzenie.
2. Wybierz widżet albo ekran, a potem przeciągnij połączenie z niego do innego widżetu albo ekranu.
3. Użyj przycisku play w nagłówku, aby uruchomić widok zdarzeń i je wypróbować.

Łączenie widżetów: przeciągnij węzeł do celu

Najszybciej utworzysz zdarzenie bezpośrednio w obszarze roboczym:

1. Wybierz widżet źródłowy, czyli rzecz, z którą użytkownik ma wchodzić w interakcję.
2. Chwyć mały uchwyt połączenia, który pojawia się na jego krawędzi, i przeciągnij połączenie do widżetu albo ekranu, na który chcesz wpłynąć.
3. Upuść go na celu. PicoPixel narysuje zakrzywioną linię między nimi, z małym węzłem na linii połączenia.
4. Kliknij ten węzeł, aby wybrać wyzwalacz (pokazuje bieżący, np. "Clicked"). Cel i resztę szczegółów ustawiasz w panelu Events.

Linia przedstawia połączenie zdarzenia. Od razu widać, które widżety są z czym połączone.

Wybieranie wyzwalacza

Wyzwalacz to to, co robi użytkownik. Kliknij węzeł na linii połączenia (albo listę Trigger w panelu Events), aby go wybrać. Najczęstszy jest Clicked, ale dostępny jest pełny zestaw:

• Clicked, dotknięcie i puszczenie. To zwykłe naciśnięcie przycisku i najczęściej wybierany wyzwalacz.
• Pressed, moment, w którym palec dotyka ekranu.
• Released, gdy użytkownik odrywa palec od ekranu.
• Long Pressed / Long Pressed Repeat, przytrzymanie albo przytrzymanie z powtarzaniem.
• Gesture, przesunięcie.
• Value Changed, gdy zmienia się wartość widżetu: przesunięty suwak, przestawiony przełącznik czy zaznaczone pole wyboru. Ten wyzwalacz pasuje do suwaków, przełączników i list przewijanych.
• Focused / Defocused, gdy widżet uzyskuje lub traci fokus.
• Screen Loaded / Screen Unloaded, gdy ekran się pojawia albo znika. Przydatne do przygotowania zawartości przy otwieraniu ekranu.
• Scroll Begin / Scroll End, gdy przewijanie zaczyna się albo kończy.
• Ready / Cancel, używane przez wejścia takie jak klawiatura ekranowa.

Wybieranie akcji

Akcja to to, co się dzieje. Oto opcje w prostych słowach:

• Change Screen, przejdź do innego ekranu. Możesz wybrać przejście (Fade albo Slide left/right/up/down), jego szybkość i opóźnienie. Tak budujesz aplikacje z wieloma ekranami.
• Delete Screen, przejdź do innego ekranu i zwolnij ten, który opuszczasz (przydatne na urządzeniach z małą pamięcią).
• Show Widget / Hide Widget, pokaż albo ukryj coś. Idealne dla pop-upów, paneli i sekcji "więcej informacji".
• Set State, dodaj, usuń albo przełącz stan taki jak checked, disabled, focused albo pressed na widżecie.
• Set Opacity, ustaw przezroczystość widżetu od w pełni widocznego (100) do niewidocznego (0).
• Set Properties, zmień pozycję albo rozmiar widżetu.
• Set Text, zaktualizuj słowa widoczne na etykiecie albo przycisku.
• Set Sprite Mode, przełącz sprite na jeden z trybów (np. "Idle" albo "Running") albo uruchom/zatrzymaj go. Dzięki temu postać reaguje na zdarzenia.
• Animated Image Mode, uruchom, zatrzymaj albo zrestartuj Animated Image.
• Play Animation, odtwórz animację skonfigurowaną na osi czasu dla tego widżetu.
• Modify Flag, dokładniejsza kontrola: dodaj/usuń/przełącz flagę LVGL (opcja zaawansowana).
• Call Function, wywołaj własną funkcję C po nazwie. Dzięki temu dodasz własne działanie, którego nie ma na liście. Funkcję piszesz w oprogramowaniu urządzenia.

Przykład krok po kroku

Załóżmy, że masz ekran Home z przyciskiem "Settings" i osobny ekran Settings. Aby je połączyć:

1. Wybierz przycisk Settings.
2. Przeciągnij połączenie z niego do ekranu Settings (albo wybierz go jako cel w panelu Events).
3. Ustaw trigger na Clicked.
4. Ustaw action na Change Screen, z destination jako ekran Settings.
5. Opcjonalnie wybierz przejście Slide left, aby ruch przypominał przejście do przodu.

Kliknij przycisk play i dotknij przycisku w podglądzie na żywo; przejdziesz prosto do Settings. Bez kodu, bez wgrywania programu urządzenia.

Edytowanie i usuwanie zdarzeń

Każde utworzone zdarzenie pojawia się jako karta w panelu Events:

• Edit, kliknij kartę, aby ją rozwinąć i zmienić wyzwalacz, akcję, cel albo opcje akcji.
• Delete, użyj ✕ na karcie, aby usunąć zdarzenie. Jego połączenie również zniknie z obszaru roboczego.

Możesz podłączyć kilka zdarzeń do tego samego widżetu, na przykład jedno na Pressed, a drugie na Released, aby budować bogatsze interakcje.

Dokąd dalej

Zdarzenia zamieniają statyczną makietę w działający interfejs. Dalej możesz:

• Budować animowane, wielostanowe widżety sterowane przez Set Sprite Mode w poradniku o sprite’ach.
• Zadbać o czytelność tekstu i niewielki rozmiar czcionek z przewodnikiem po czcionkach.
• Chcesz uruchomić projekt na urządzeniu? Przejdź przez poradnik ESP32, aby wyeksportować i wgrać interaktywne UI.