Korzystanie z edytora zdarzeń

Czym jest edytor zdarzeń?

Edytor zdarzeń pozwala łączyć widgety tak, aby działanie na jednym widgetcie powodowało coś innego, w innym widgetcie albo na samym ekranie. Każde połączenie składa się z trzech prostych części:

• Źródło, widget, 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 widget 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 widget 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 widget albo ekran, a potem przeciągnij połączenie z niego do innego widgetu albo ekranu.
3. Użyj przycisku play w nagłówku, aby uruchomić widok zdarzeń i je wypróbować.

Łączenie widgetów: przeciągnij węzeł do celu

Najszybszy sposób utworzenia zdarzenia jest bezpośrednio na canvasie:

1. Wybierz widget ź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 przewód do widgetu 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 przewodzie.
4. Kliknij ten węzeł, aby wybrać wyzwalacz (pokazuje bieżący, np. "Clicked"). Cel i resztę szczegółów ustawiasz w panelu Events.

Ten wizualny przewód jest zdarzeniem. Od razu widać, które widgety są z czym połączone.

Wybieranie wyzwalacza

Wyzwalacz to to, co robi użytkownik. Kliknij węzeł na przewodzie (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 codzienny "button press" i najczęściej używany wybór.
• Pressed, moment, w którym palec dotyka ekranu.
• Released, gdy palec się podnosi.
• Long Pressed / Long Pressed Repeat, przytrzymanie albo przytrzymanie z powtarzaniem.
• Gesture, przesunięcie.
• Value Changed, gdy zmienia się wartość widgetu: przeciągnięty suwak, przełączony switch, zaznaczony checkbox. To naturalny wyzwalacz dla suwaków, switchy i rollerów.
• Focused / Defocused, gdy widget dostaje albo traci focus.
• Screen Loaded / Screen Unloaded, gdy ekran się pojawia albo znika. Świetne do przygotowania rzeczy w chwili otwarcia 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 widgetcie.
• Set Opacity, ustaw przezroczystość widgetu od w pełni widocznego (100) do niewidocznego (0).
• Set Properties, zmień pozycję albo rozmiar widgetu.
• Set Text, zaktualizuj słowa widoczne na etykiecie albo przycisku.
• Set Sprite Mode, przełącz sprite na jedną z faz (np. "Idle" albo "Running") albo uruchom/zatrzymaj go. Tak właśnie dajesz sprite'owi życie.
• Animated Image Mode, uruchom, zatrzymaj albo zrestartuj animated image.
• Play Animation, odtwórz animację timeline ustawioną na widgetcie.
• Modify Flag, dokładniejsza kontrola: dodaj/usuń/przełącz flagę LVGL (opcja zaawansowana).
• Call Function, wywołaj własną funkcję C po nazwie. To wyjście awaryjne dla rzeczy niestandardowych; piszesz tę funkcję w firmware.

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 flashowania 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 przewód też zniknie z canvasu.

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

Dokąd dalej

Zdarzenia zmieniają statyczny mock-up w prawdziwy interfejs. Dalej możesz:

• Budować animowane, wielostanowe widgety sterowane przez Set Sprite Mode w przewodniku po sprite'ach.
• Utrzymać tekst ostry i mały z przewodnikiem po fontach.
• Gotowy na hardware? Przejdź przez tutorial ESP32, aby wyeksportować i wgrać interaktywne UI.