Présentation
Les boutons d’un écran ne servent à rien tant qu’aucune action ne leur est associée. L’éditeur d’événements permet de définir ces réactions sans écrire de code. Ce guide explique comment relier les widgets par glisser-déposer, puis choisir les déclencheurs et les actions de chaque connexion.
Qu'est-ce que l'éditeur d'événements ?
L’éditeur d’événements permet de relier les widgets : une interaction sur l’un déclenche une action sur un autre, ou sur l’écran lui-même. Chaque connexion comporte trois éléments :
- Une source, le widget avec lequel l'utilisateur interagit (par exemple, un bouton).
- Un déclencheur, l’interaction détectée (par exemple, un clic).
- Une action, la réaction à déclencher (par exemple, aller vers un autre écran), généralement dirigée vers un widget ou un écran de destination.
On peut décrire un événement par une phrase : « Quand l’utilisateur clique sur ce bouton, ouvrir l’écran Paramètres. » Ajoutez autant d’événements que nécessaire pour rendre votre interface interactive.
Pour créer un événement, reliez les widgets visuellement, sans écrire de script. À l’export, PicoPixel génère le code LVGL correspondant.
Ouvrir l'éditeur d'événements
Sélectionnez n'importe quel widget ou écran, puis passez à l'onglet Events dans la barre latérale droite (il se trouve à côté de Design et Inspect). C'est ici que chaque événement apparaît sous forme de carte que vous pouvez ouvrir et configurer.
Quand vous n'avez encore créé aucun événement, PicoPixel vous montre les trois façons de commencer :
- Cliquez sur le bouton + pour ajouter un événement.
- Sélectionnez un widget ou un écran, puis faites glisser une connexion depuis celui-ci vers un autre widget ou écran.
- Utilisez le bouton lecture dans l'en-tête pour lancer la vue des événements et les tester.
Connecter des widgets : faire glisser un nœud vers une destination
Le plus rapide est de créer la connexion directement sur le canevas :
- Sélectionnez le widget source, l'élément avec lequel vous voulez que l'utilisateur interagisse.
- Saisissez la petite poignée de connexion qui apparaît sur son bord et faites glisser un fil vers le widget ou l'écran que vous voulez affecter.
- Déposez-le sur cette destination. PicoPixel trace une ligne courbe entre les deux, avec un petit nœud sur le fil.
- Cliquez sur ce nœud pour choisir votre déclencheur (il affiche le déclencheur actuel, comme « Clicked »). La destination et le reste des détails se configurent dans le panneau Events.
La ligne représente l’événement. Elle permet de voir immédiatement quels widgets sont reliés.
Vous pouvez aussi cliquer sur + dans le panneau Events, puis choisir le déclencheur, l’action et la destination dans les menus déroulants. Utilisez la méthode qui vous convient le mieux.
Choisir un déclencheur
Le déclencheur indique ce qui provoque l’action. Cliquez sur le nœud de la connexion ou ouvrez le menu Trigger dans le panneau Events pour le choisir. Clicked est le plus courant, mais d’autres options sont disponibles :
- Clicked : un appui suivi d’un relâchement, comme lorsque l’on touche un bouton.
- Pressed, l'instant où un doigt touche l'écran.
- Released, quand le doigt se lève.
- Long Pressed / Long Pressed Repeat : un appui prolongé, déclenché une fois ou répété tant que l’appui est maintenu.
- Gesture, un glissement.
- Value Changed, quand la valeur d'un widget change : un curseur glissé, un interrupteur basculé, une case cochée. C'est le déclencheur naturel pour les curseurs, interrupteurs et molettes.
- Focused / Defocused, quand un widget obtient ou perd le focus.
- Screen Loaded / Screen Unloaded : l’arrivée sur un écran ou sa fermeture. Ces événements sont utiles pour initialiser un écran à son ouverture.
- Scroll Begin / Scroll End, quand le défilement commence ou s'arrête.
- Ready / Cancel : la validation ou l’annulation d’une saisie, par exemple avec le clavier à l’écran.
Choisissez un déclencheur adapté au widget. Clicked a du sens sur un bouton ; Value Changed est ce qu'il vous faut sur un curseur ou un interrupteur. Choisir le bon déclencheur fait la différence entre un événement qui se déclenche et un qui ne se déclenche jamais.
Choisir une action
L'action est ce qui se passe. Voici ce que vous pouvez choisir, en termes simples :
- Change Screen, naviguer vers un autre écran. Vous pouvez choisir une transition (Fondu, ou glisser gauche/droite/haut/bas), et définir sa vitesse et son délai. C'est ainsi que vous construisez des applications multi-écrans.
- Delete Screen, aller vers un autre écran et libérer celui que vous quittez (pratique sur les appareils à mémoire limitée).
- Show Widget / Hide Widget, afficher ou masquer quelque chose. Parfait pour les fenêtres pop-up, les panneaux et les sections « plus d'infos ».
- Set State, ajouter, supprimer ou basculer un état comme checked, disabled, focused ou pressed sur un widget.
- Set Opacity, faire varier l'opacité d'un widget de totalement visible (100) à invisible (0).
- Set Properties, modifier la position ou la taille d'un widget.
- Set Text, mettre à jour le texte affiché sur une étiquette ou un bouton.
- Set Sprite Mode, basculer un sprite vers l'une de ses phases (comme « Idle » ou « Running »), ou le démarrer/arrêter. Cette action permet au sprite de réagir aux interactions.
- Animated Image Mode, démarrer, arrêter ou redémarrer une image animée.
- Play Animation, exécuter une animation sur une timeline que vous avez configurée sur un widget.
- Modify Flag, pour un contrôle plus fin, ajouter/supprimer/basculer un flag LVGL (une option avancée).
- Call Function : appeler une fonction C par son nom. Écrivez cette fonction dans votre firmware pour gérer les comportements personnalisés.
Un exemple concret
Disons que vous avez un écran d'accueil avec un bouton « Paramètres » et un écran Paramètres séparé. Pour les relier :
- Sélectionnez le bouton Paramètres.
- Faites glisser une connexion depuis celui-ci vers l'écran Paramètres (ou choisissez-le comme destination dans le panneau Events).
- Définissez le déclencheur sur Clicked.
- Définissez l'action sur Change Screen, avec la destination pointant vers votre écran Paramètres.
- Vous pouvez choisir une transition Slide left pour donner la sensation d'avancer.
Lancez la lecture, puis touchez le bouton dans l’aperçu. L’écran Paramètres apparaît avec la transition choisie, sans code à écrire ni appareil à flasher.
Vous voulez qu'un personnage réagisse ? Ajoutez un bouton, définissez son déclencheur sur Clicked, choisissez l'action Set Sprite Mode, pointez-la vers votre sprite et choisissez la phase vers laquelle basculer (par exemple, « Happy »). Maintenant, appuyer sur le bouton change l'animation du sprite. Consultez le guide des sprites pour apprendre à construire le sprite lui-même.
Modifier et supprimer des événements
Chaque événement que vous créez apparaît sous forme de carte dans le panneau Events :
- Modifier, cliquez sur une carte pour la développer et changer le déclencheur, l'action, la destination ou l'une des options de l'action.
- Supprimer, utilisez le ✕ sur la carte pour supprimer cet événement. Son fil disparaît également du canevas.
Vous pouvez associer plusieurs événements au même widget, par exemple un sur Pressed et un autre sur Released, pour créer des interactions plus riches.
Et ensuite
Les événements transforment votre maquette en interface interactive. Pour aller plus loin :
- Construisez des widgets animés à plusieurs états à piloter avec Set Sprite Mode dans le guide des sprites.
- Gardez votre texte net et léger avec le guide des polices.
- Prêt à le mettre sur du matériel ? Suivez le tutoriel ESP32 pour exporter et flasher votre interface interactive.
