Exempled’événements

Ce qui est inclus

• Écran d'interaction LVGL 480 x 480, dimensionné pour les écrans embarqués et les expérimentations rapides.
• Cinq exemples de boutons, chacun montrant un type différent de réponse d'interface.
• Contrôles d'opacité, avec les boutons Low Opacity et High Opacity connectés à la même cible image.
• Exemple de mise à jour de texte, utilisant le bouton Change Text pour modifier un libellé.
• Exemple de changement de propriété, utilisant Set Properties - Size pour modifier la taille d'un objet cible.
• Déclencheur d'animation, utilisant Play Animation pour démontrer un mouvement ou une transition piloté par événement.
• Aperçu du câblage dans l'éditeur d'événements, avec lignes de connexion visibles et nœuds déclencheurs Clicked.
• Paramètres d'action côté inspecteur, montrant les champs source, déclencheur, action, valeur d'opacité et destination.
• Cibles image, utilisant un simple graphisme cyan de style PicoPixel afin que les changements d'état soient faciles à voir.
• Ressource de police Doto 32, utilisée pour le texte à points sur le canevas.

Ressources du projet

Le modèle reste assez petit pour être compris d'un coup d'œil. Dans le panneau des ressources, la bibliothèque locale montre :

• Images : 1, un graphisme cyan réutilisable de 500 x 500 utilisé par les cibles image.
• Couleurs : 0, les couleurs étant appliquées directement dans le design.
• Polices : 1, Doto 32, utilisée pour le texte de libellé à points.
• Widgets : 0, afin de garder l'exemple centré sur le câblage d'événements au niveau écran plutôt que sur des widgets enregistrés.

Le panneau des calques présente le projet comme un laboratoire d'interaction simple sur un seul écran :

• Screen 1, le canevas 480 x 480.
• Button 1 à Button 5, les sources cliquables des exemples.
• Image 1, Image 2 et Image 3, les cibles visibles pour les changements d'opacité, de taille et d'animation.
• Label 1, la cible texte utilisée par l'exemple de changement de texte.

C'est utile pour l'apprentissage, car chaque source et chaque destination est visible sur le même écran.

Structure de l'éditeur d'événements

Quand la vue des événements est active, PicoPixel superpose le graphe d'interaction sur la mise en page LVGL. La capture montre le projet marqué Contains Events, puis trace des lignes de connexion depuis les boutons sources vers leurs destinations.

• Low Opacity et High Opacity utilisent tous deux un déclencheur Clicked et pointent vers la même cible image.
• Change Text utilise un déclencheur Clicked et pointe vers le libellé en pointillés.
• Set Properties - Size utilise un déclencheur Clicked et pointe vers une cible image à redimensionner.
• Play Animation utilise un déclencheur Clicked et pointe vers une cible image pour la lecture d'animation.
• Le panneau d'événements à droite montre un événement sélectionné avec Source, Trigger, Action, des réglages de valeur comme Opacity, et Destination.

Les connexions montrent clairement comment chaque interaction de l’utilisateur agit sur un objet LVGL. Le déclencheur et sa cible restent visibles ensemble, ce qui facilite l’apprentissage.

Pourquoi cela fonctionne bien pour LVGL

Les applications LVGL ont généralement besoin de nombreuses petites interactions : cliquer sur un bouton, mettre à jour un libellé, changer l'état d'un objet, déplacer une image, changer d'écran ou démarrer une animation. Cet exemple garde ces schémas visibles et réutilisables.

• Les boutons sont des objets d'entrée LVGL natifs, donc le même schéma fonctionne avec le tactile, le focus par encodeur ou d'autres pilotes d'entrée.
• Le déclencheur est explicite, avec des nœuds Clicked dans l'éditeur, ce qui rend clair ce qui démarre chaque action.
• Les cibles sont des objets LVGL normaux, y compris des images et des libellés, donc l'interface exportée reste modifiable depuis le firmware.
• Les changements d'opacité et de propriétés sont légers, ce qui rend les exemples adaptés aux petits écrans embarqués.
• Le câblage d'animation enseigne le passage de relais, depuis un événement utilisateur vers un changement visuel qui peut s'exécuter indépendamment.
• Le projet s'exporte en code d'interface LVGL 8.x standard, intégrable à ESP-IDF, Arduino, PlatformIO, STM32, Zephyr ou un autre projet LVGL.

Fonctionnement dans le firmware

PicoPixel génère les connexions d’événements sous forme de fonctions de rappel LVGL. Pour ajouter une logique propre à votre firmware, vérifiez généralement le code de l’événement, puis mettez à jour l’objet cible.

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

Utilisez l'éditeur visuel pour le câblage courant, puis réservez les fonctions de rappel C personnalisés aux comportements qui dépendent de l'état du firmware, des données de capteurs, des paramètres de l'appareil ou de réponses réseau.

Idées de personnalisation

Utilisez-le comme modèle gratuit d'interaction LVGL, puis remplacez les commandes de démo par votre propre interface produit.

• Remplacez les cinq boutons de démo par des bascules de réglages, éléments de menu, commandes de tableau de bord ou commandes matérielles.
• Transformez les actions d'opacité en états désactivé/activé, états d'avertissement ou états sélectionné/non sélectionné.
• Utilisez l'action de texte pour des messages d'état comme Connected, Saving, Armed, Charging ou Complete.
• Transformez l'exemple de propriété de taille en indicateur de progression, carte développée, effet d'état pressé ou pulsation de notification.
• Utilisez l'exemple d'animation pour des transitions de page, confirmations visuelles, états de chargement ou signaux visuels.
• Ajoutez des actions de navigation entre plusieurs écrans LVGL une fois les exemples mono-écran compris.
• Associez les boutons à de vrais événements firmware, comme modifier la luminosité, basculer un relais, sélectionner un mode ou lancer un étalonnage.

Exporter vers votre projet

Ouvrez le modèle dans PicoPixel, inspectez le graphe d'événements, renommez les sources et cibles clés, puis exportez le projet en code C LVGL. Les fichiers générés peuvent être ajoutés à un projet embarqué existant comme n'importe quel export PicoPixel.

Pour intégrer le projet à un ESP32 :

1. Configurez vos pilotes d'affichage et d'entrée.
2. Ouvrez ce modèle d'événements et adaptez les boutons, libellés, images et actions.
3. Exportez l'interface PicoPixel en C LVGL.
4. Ajoutez les fichiers exportés à votre projet ESP-IDF, Arduino ou PlatformIO.
5. Appelez ui_init() une fois LVGL et votre pilote d'affichage prêts.
6. Ajoutez des fonctions de rappel firmware personnalisés uniquement lorsque l'éditeur visuel d'événements ne suffit pas.

Pour plus de contexte, consultez le guide de l'éditeur d'événements PicoPixel, le tutoriel ESP32 LVGL UI et le guide sur l'utilisation des modèles PicoPixel.

Idées d’utilisation

Ce modèle convient bien lorsque vous voulez un point de départ clair pour :

• Exemples d'événements LVGL
• Démos d'interaction par clic de bouton
• Prototypes d'interface tactile ESP32
• Écrans de réglages et panneaux de contrôle
• Tableaux de bord domotiques
• Menus de appareil porté sur soi ou d'appareil portable
• Exemples de déclenchement d'animation
• Changements d'état de texte et d'image
• Comprendre comment les événements visuels PicoPixel deviennent un comportement LVGL