Exempledevenements

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.

Instantané des ressources

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.

Cette disposition est la principale valeur pédagogique du modèle : elle montre comment le graphe visuel d'événements de PicoPixel relie une entrée utilisateur à des changements d'objets LVGL sans masquer la relation entre le déclencheur et la cible.

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 build LVGL.

Modèle d'exécution

PicoPixel peut générer pour vous le câblage des événements, mais le concept correspond directement aux callbacks LVGL normaux. Si vous devez étendre l'interface exportée avec une logique firmware personnalisée, le schéma consiste généralement à vérifier le code d'événement, puis à mettre à 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 callbacks 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 contrôles 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, contrôles de dashboard 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, retours de confirmation, états de chargement ou signaux d'attention.
• 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 flux de calibration.

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 les projets ESP32, le flux habituel est :

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 callbacks 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.

Meilleures utilisations

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
• Dashboards domotiques
• Menus de wearable 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