Présentation
Un écran rempli de boutons ne fait pas grand-chose jusqu'à ce que vous lui disiez quoi faire quand quelqu'un les appuie. C'est le rôle de l'éditeur d'événements : c'est là que vous rendez votre interface réactive. Ce guide explique ce qu'est l'éditeur d'événements, comment fonctionne la mécanique de glisser-pour-connecter, et le menu complet des déclencheurs et des actions disponibles, le tout sans écrire de code.
Qu'est-ce que l'éditeur d'événements ?
L'éditeur d'événements vous permet de relier des widgets entre eux pour qu'une action sur un widget déclenche quelque chose sur un autre widget ou sur l'écran lui-même. Chaque connexion est construite à partir de trois éléments simples :
- Une source, le widget avec lequel l'utilisateur interagit (par exemple, un bouton).
- Un déclencheur, ce que l'utilisateur lui fait (par exemple, un clic).
- Une action, ce qui se passe en résultat (par exemple, aller vers un autre écran), généralement dirigée vers un widget ou un écran de destination.
Lisez-le comme une phrase : « Quand l'utilisateur clique sur ce bouton, aller vers l'écran des Paramètres. » C'est un événement. Vous pouvez en ajouter autant que vous le souhaitez pour donner vie à toute votre interface.
Les événements sont créés visuellement en faisant glisser des connexions entre les widgets, aucun scripting n'est impliqué. Lorsque vous exportez votre projet, PicoPixel transforme chaque événement en code LVGL correspondant pour vous.
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
La façon la plus rapide de créer un événement se fait 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.
Ce fil visuel est l'événement. Vous pouvez voir d'un coup d'œil quels widgets sont connectés à quoi.
Vous préférez ne pas faire glisser ? Cliquez plutôt sur le bouton + dans le panneau Events et remplissez le déclencheur, l'action et la destination depuis les menus déroulants. Même résultat, choisissez ce qui vous semble le plus naturel.
Choisir un déclencheur
Le déclencheur est ce que fait l'utilisateur. Cliquez sur le nœud du fil (ou sur le menu déroulant Trigger dans le panneau Events) pour en choisir un. Le plus courant de loin est Clicked, mais il en existe un ensemble complet :
- Clicked, une pression relâchée. C'est votre « appui sur bouton » quotidien, celui que vous utiliserez le plus.
- Pressed, l'instant où un doigt touche l'écran.
- Released, quand le doigt se lève.
- Long Pressed / Long Pressed Repeat, maintenu appuyé, ou maintenu et se répétant.
- 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, quand un écran apparaît ou disparaît. Idéal pour préparer des choses dès qu'un écran s'ouvre.
- Scroll Begin / Scroll End, quand le défilement commence ou s'arrête.
- Ready / Cancel, utilisé par des saisies comme 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. C'est exactement ainsi que vous donnez vie à un sprite.
- Animated Image Mode, démarrer, arrêter ou redémarrer une image animée.
- Play Animation, exécuter une animation sur une ligne de temps 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 votre propre fonction C personnalisée par son nom. C'est la sortie de secours pour tout ce qui est personnalisé ; vous écrivez cette fonction dans votre firmware.
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.
- Choisissez optionnellement une transition Slide left pour donner la sensation d'avancer.
Appuyez sur le bouton de lecture et tapez sur le bouton dans l'aperçu en direct, vous glisserez directement vers Paramètres. Aucun code, aucun flashage du dispositif.
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 sont ce qui transforme une maquette statique en une véritable interface. À partir d'ici :
- 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.
