Overzicht
Een scherm vol knoppen doet niet veel totdat je vertelt wat er moet gebeuren wanneer iemand erop tikt. Dat is het werk van de event editor: daar laat je je interface reageren. Deze gids legt uit wat de event editor is, hoe de drag-to-connect-mechaniek werkt en welk menu aan triggers en actions je kunt kiezen, allemaal zonder code te schrijven.
Wat is de event editor?
De event editor laat je widgets aan elkaar koppelen zodat iets doen met de ene widget iets laat gebeuren, bij een andere widget of bij het scherm zelf. Elke verbinding bestaat uit drie simpele onderdelen:
- Een source, de widget waarmee de gebruiker interactie heeft (bijvoorbeeld een button).
- Een trigger, wat ze ermee doen (bijvoorbeeld een click).
- Een action, wat er daardoor gebeurt (bijvoorbeeld go to another screen), meestal gericht op een destination widget of scherm.
Lees het als een zin: "When the user clicks this button, change to the Settings screen." Dat is één event. Je kunt er zoveel toevoegen als je wilt om je hele interface tot leven te brengen.
Events worden visueel gebouwd door verbindingen tussen widgets te slepen; er komt geen scripting bij kijken. Wanneer je je project exporteert, zet PicoPixel elk event om naar de bijpassende LVGL-code.
De event editor openen
Selecteer een widget of scherm en ga dan naar de Events-tab in de rechterzijbalk (naast Design en Inspect). Hier verschijnt elk event als een card die je kunt openen en configureren.
Wanneer je nog geen events hebt gemaakt, toont PicoPixel drie manieren om te beginnen:
- Klik op de +-knop om een event toe te voegen.
- Selecteer een widget of scherm en sleep daarna een verbinding van daar naar een andere widget of een ander scherm.
- Gebruik de play-knop in de header om de events-view te draaien en ze uit te proberen.
Widgets verbinden: sleep een node naar een destination
De snelste manier om een event te maken is direct op het canvas:
- Selecteer de source widget, het ding waarmee je wilt dat de gebruiker interactie heeft.
- Pak de kleine connection handle die op de rand verschijnt en sleep een wire naar de widget of het scherm dat je wilt beïnvloeden.
- Laat hem los op die destination. PicoPixel tekent een gebogen lijn tussen de twee, met een kleine node op de wire.
- Klik die node om je trigger te kiezen (hij toont de huidige, zoals "Clicked"). De destination en de rest van de details stel je in het Events-panel in.
Die visuele wire is het event. Je ziet in één oogopslag welke widgets waarmee verbonden zijn.
Liever niet slepen? Klik op de +-knop in het Events-panel en vul trigger, action en destination in met dropdowns. Zelfde resultaat; kies wat natuurlijk voelt.
Een trigger kiezen
De trigger is wat de gebruiker doet. Klik op de node op de wire (of de Trigger-dropdown in het Events-panel) om er een te kiezen. De meest gebruikte is Clicked, maar er is een volledige set:
- Clicked, tikken en loslaten. Dit is de alledaagse "button press" en degene die je het meest gebruikt.
- Pressed, het moment dat een vinger het scherm raakt.
- Released, wanneer de vinger omhooggaat.
- Long Pressed / Long Pressed Repeat, ingedrukt houden, of ingedrukt houden met herhaling.
- Gesture, een swipe.
- Value Changed, wanneer de waarde van een widget verandert: een slider wordt gesleept, een switch omgezet, een checkbox aangevinkt. Dit is de natuurlijke trigger voor sliders, switches en rollers.
- Focused / Defocused, wanneer een widget focus krijgt of verliest.
- Screen Loaded / Screen Unloaded, wanneer een scherm verschijnt of verdwijnt. Handig om dingen klaar te zetten zodra een scherm opent.
- Scroll Begin / Scroll End, wanneer scrollen begint of stopt.
- Ready / Cancel, gebruikt door inputs zoals het schermtoetsenbord.
Kies een trigger die bij de widget past. Clicked is logisch op een button; Value Changed wil je op een slider of switch. De juiste trigger is het verschil tussen een event dat afgaat en een dat nooit afgaat.
Een action kiezen
De action is wat er gebeurt. Dit kun je kiezen, in gewone taal:
- Change Screen, navigeer naar een ander scherm. Je kunt een transition kiezen (Fade, of Slide left/right/up/down), plus snelheid en delay. Zo bouw je apps met meerdere schermen.
- Delete Screen, ga naar een ander scherm en geef het scherm vrij dat je verlaat (handig op apparaten met weinig geheugen).
- Show Widget / Hide Widget, toon of verberg iets. Perfect voor pop-ups, panels en "more info"-secties.
- Set State, voeg een state zoals checked, disabled, focused of pressed toe aan een widget, verwijder die of toggle die.
- Set Opacity, fade een widget van volledig zichtbaar (100) naar onzichtbaar (0).
- Set Properties, verander de positie of grootte van een widget.
- Set Text, update de woorden op een label of button.
- Set Sprite Mode, schakel een sprite naar een van zijn fases (zoals "Idle" of "Running"), of start/stop hem. Dit is precies hoe je een sprite tot leven brengt.
- Animated Image Mode, start, stop of restart een animated image.
- Play Animation, draai een timeline animation die je op een widget hebt ingesteld.
- Modify Flag, voor fijnere controle: voeg een LVGL-flag toe, verwijder die of toggle die (een geavanceerde optie).
- Call Function, roep je eigen custom C-functie aan met naam. Dit is de uitweg voor alles wat custom is; die functie schrijf je in je firmware.
Een uitgewerkt voorbeeld
Stel dat je een Home-scherm hebt met een "Settings"-button, en een apart Settings-scherm. Zo verbind je ze:
- Selecteer de Settings button.
- Sleep een verbinding van hem naar het Settings screen (of kies dat als destination in het Events-panel).
- Zet de trigger op Clicked.
- Zet de action op Change Screen, met je Settings-scherm als destination.
- Kies eventueel een Slide left-transition zodat het voelt alsof je vooruit beweegt.
Druk op de play-knop en tik in de live preview op de button; je schuift direct naar Settings. Geen code, geen apparaat flashen.
Wil je een personage laten reageren? Voeg een button toe, zet de trigger op Clicked, kies de action Set Sprite Mode, wijs naar je sprite en kies de fase om naar te schakelen (bijvoorbeeld "Happy"). Nu verandert het tikken op de button de animatie van de sprite. Zie de sprites guide om de sprite zelf te bouwen.
Events bewerken en verwijderen
Elk event dat je maakt verschijnt als card in het Events-panel:
- Edit, klik een card open om trigger, action, destination of opties van de action te wijzigen.
- Delete, gebruik de ✕ op de card om dat event te verwijderen. De wire verdwijnt ook van het canvas.
Je kunt meerdere events aan dezelfde widget koppelen, bijvoorbeeld één op Pressed en een andere op Released, om rijkere interacties te bouwen.
Waar nu heen
Events veranderen een statische mock-up in een echte interface. Vanaf hier:
- Bouw geanimeerde widgets met meerdere states om aan te sturen met Set Sprite Mode in de sprites guide.
- Houd je tekst scherp en klein met de fonts guide.
- Klaar om het op hardware te zetten? Volg de ESP32 tutorial om je interactieve UI te exporteren en flashen.
