Overzicht
Met de event-editor bepaal je hoe je interface reageert op een tik, een gewijzigde waarde of een ander event. Je verbindt widgets op het canvas, kiest een trigger en stelt een actie in. Deze handleiding legt uit hoe dat werkt, zonder dat je C-code hoeft te schrijven.
Wat is de event-editor?
Een event koppelt een gebeurtenis aan een actie. Het bestaat uit drie onderdelen:
- Source: de widget waarop het event plaatsvindt, bijvoorbeeld een knop.
- Trigger: de gebeurtenis die de actie start, bijvoorbeeld een klik.
- Action: wat er daarna gebeurt, bijvoorbeeld naar een ander scherm gaan. Bij veel acties kies je ook een Destination: de widget of het scherm waarop de actie wordt uitgevoerd.
Je kunt een event lezen als een zin: als de gebruiker op deze knop klikt, open dan het scherm Instellingen. Voeg meerdere events toe om de rest van je interface te laten reageren.
Je maakt events door widgets visueel met elkaar te verbinden. Bij het exporteren zet PicoPixel die verbindingen om in de bijbehorende LVGL-code.
De event-editor openen
Selecteer een widget of scherm en open het tabblad Events in de rechterzijbalk, naast Design en Inspect. Elk event verschijnt hier als een kaart die je kunt openklappen en instellen.
Als er nog geen events zijn, toont PicoPixel hoe je aan de slag gaat:
- Klik op + om een event toe te voegen.
- Selecteer een widget of scherm en sleep een verbinding naar een andere widget of een ander scherm.
- Gebruik de afspeelknop bovenaan om de events uit te proberen.
Widgets verbinden op het canvas
Zo maak je rechtstreeks op het canvas een event:
- Selecteer de bronwidget (Source), bijvoorbeeld de knop waarop de gebruiker moet tikken.
- Pak het kleine verbindingspunt aan de rand en sleep een lijn naar de widget of het scherm dat je wilt aansturen.
- Laat los op het doel (Destination). PicoPixel tekent een gebogen verbindingslijn met een klein knooppunt erop.
- Klik op het knooppunt om een trigger te kiezen. Het toont de huidige trigger, bijvoorbeeld Clicked. De overige instellingen vind je in het paneel Events.
Elke lijn stelt één event voor. Zo zie je meteen welke onderdelen met elkaar verbonden zijn.
Je kunt ook op + in het paneel Events klikken en daar de trigger, actie en bestemming kiezen. Dat geeft hetzelfde resultaat als slepen.
Een trigger kiezen
De trigger bepaalt wanneer de actie wordt uitgevoerd. Klik op het knooppunt in de verbindingslijn of open Trigger in het paneel Events.
- Clicked: tikken en weer loslaten; de gebruikelijke keuze voor een knop.
- Pressed: het moment waarop de gebruiker het scherm aanraakt.
- Released: het moment waarop de gebruiker loslaat.
- Long Pressed / Long Pressed Repeat: lang indrukken, eventueel met herhaling.
- Gesture: een veegbeweging.
- Value Changed: de waarde verandert, bijvoorbeeld doordat iemand een schuifregelaar verplaatst, een schakelaar omzet of een selectievakje aanvinkt.
- Focused / Defocused: de widget krijgt of verliest focus.
- Screen Loaded / Screen Unloaded: een scherm wordt geopend of verlaten. Handig om bij het openen iets klaar te zetten.
- Scroll Begin / Scroll End: het scrollen begint of stopt.
- Ready / Cancel: bevestigen of annuleren bij invoerelementen, zoals het schermtoetsenbord.
Kies een trigger die bij de widget past: Clicked voor een knop, Value Changed voor een schuifregelaar of schakelaar. Met de verkeerde trigger wordt je actie mogelijk nooit uitgevoerd.
Een actie kiezen
De actie bepaalt wat er gebeurt. Dit zijn de mogelijkheden:
- Change Screen: open een ander scherm. Kies eventueel een overgang, zoals Fade of Slide left/right/up/down, en stel snelheid en vertraging in.
- Delete Screen: open een ander scherm en geef het geheugen van het verlaten scherm vrij. Dit helpt op apparaten met weinig geheugen.
- Show Widget / Hide Widget: toon of verberg een widget, bijvoorbeeld een pop-up of paneel met extra informatie.
- Set State: voeg een toestand zoals checked, disabled, focused of pressed toe, verwijder die of wissel tussen aan en uit.
- Set Opacity: verander de dekking van volledig zichtbaar (100) naar onzichtbaar (0).
- Set Properties: verander de positie of grootte.
- Set Text: wijzig de tekst van een label of knop.
- Set Sprite Mode: kies een animatietoestand van een sprite, zoals Idle of Running, of start en stop het afspelen.
- Animated Image Mode: start, stop of herstart een Animated Image.
- Play Animation: speel een animatie af die je op de tijdlijn voor een widget hebt gemaakt.
- Modify Flag: voeg een LVGL-flag toe, verwijder die of wissel de waarde. Dit is bedoeld voor geavanceerde instellingen.
- Call Function: roep een eigen C-functie aan op naam. De functie schrijf je zelf in je firmware; zo kun je gedrag toevoegen dat niet tussen de standaardacties staat.
Een uitgewerkt voorbeeld
Stel dat je op het beginscherm een knop Settings hebt die het instellingenscherm moet openen:
- Selecteer de knop Settings.
- Sleep een verbinding naar het instellingenscherm, of kies dat scherm bij Destination in het paneel Events.
- Kies Clicked als trigger.
- Kies Change Screen als actie en het instellingenscherm als bestemming.
- Kies eventueel de overgang Slide left om naar het nieuwe scherm te schuiven.
Druk op de afspeelknop en probeer de knop in het voorbeeld uit. Je hoeft hiervoor geen code te schrijven of je apparaat te flashen.
Een personage laten reageren werkt op dezelfde manier: kies Clicked, daarna Set Sprite Mode, wijs je sprite aan en kies bijvoorbeeld Happy. Lees de spritehandleiding om de sprite zelf op te bouwen.
Events bewerken en verwijderen
Elk event staat als kaart in het paneel Events:
- Bewerken: open de kaart en pas de trigger, actie, bestemming of actie-instellingen aan.
- Verwijderen: klik op ✕ op de kaart. Ook de verbindingslijn op het canvas verdwijnt.
Je kunt meerdere events aan één widget koppelen, bijvoorbeeld een actie bij Pressed en een andere bij Released.
Verder aan de slag
Met events maak je van een statisch ontwerp een interactieve interface.
- Bouw een sprite met meerdere animatietoestanden en stuur die aan met Set Sprite Mode.
- Lees de lettertypehandleiding om tekst scherp weer te geven zonder onnodig geheugen te gebruiken.
- Volg de ESP32-handleiding om je interface te exporteren en op je apparaat te zetten.
