Démarrer avec LVGL sur Riverdi STM32 Display-guide complet

Ce guide montre comment donner vie à un écran Riverdi STM32H7 en utilisant LVGL – du clonage du dépôt à l’exécution de votre première interface personnalisée avec une image et un bouton.
Vous apprendrez à.. :

• connecter le matériel,
• ouvrez et construisez le projet dans STM32CubeIDE,
• Exécutez la démo LVGL,
• et créez une interface utilisateur simple et personnalisée avec le logo de Riverdi et un bouton interactif.

À la fin, vous aurez une base de travail pour votre propre projet d’interface graphique basée sur LVGL sur les écrans embarqués STM32 de Riverdi.

Matériel

Connexions

L’écran STM32H7 utilise deux connecteurs Molex :

• SWD (programmation) – connectez votre ST-Link ici.
• Alimentation (12 V ) – pour l’alimentation externe.

⚠️ N’alimentez pas l’écran et ne connectez pas ST-Link simultanément pour la première fois sans avoir vérifié la polarité correcte.

Logiciel

Cloner le projet

En utilisant LVGL Project Creator, veuillez télécharger le projet correspondant à la taille d’écran que vous utilisez. Tout ce que vous avez à faire est d’écrire Riverdi dans la barre de recherche sur la gauche, appuyez sur le projet approprié et appuyez sur Télécharger comme vous pouvez le voir sur l’image ci-dessous.

Facultatif : clonez la bibliothèque LVGL la plus récente

Si vous n’êtes pas sûr que la bibliothèque LVGL que vous avez dans votre projet est la plus récente ou si vous voulez simplement la mettre à jour, vous pouvez simplement supprimer le contenu du répertoire et télécharger la bibliothèque manuellement. Pour ce faire, tapez simplement ceci dans votre CLI :

cd riverdi-lvgl-101/Middlewares/Third_Party/

git clone https://github.com/lvgl/lvgl.git lvgl

Importer le projet dans STM32CubeIDE

1. Ouvrez STM32CubeIDE.
2. Allez dans Fichier → Ouvrir des projets à partir du système de fichiers…
3. Cliquez sur Directory…, sélectionnez le sous-répertoire STM32CubeIDE de votre dossier cloné riverdi-lvgl-101.
4. Cliquez sur Terminer.

Le projet apparaît alors dans l’explorateur de projets.

Construire et exécuter l’exemple LVGL

Ouvrez le fichier main.c qui se trouve dans CM7/Application/User/Core. Après toutes les initialisations, il devrait y avoir une fonction lv_demo_widgets() qui est appelée avant PWM et kernel.

Vous pouvez construire le projet en appuyant sur Ctrl+B ou sur l’icône du marteau en haut à gauche de l’écran. Le processus de construction devrait prendre un certain temps, jusqu’à quelques minutes. Si vous voyez des avertissements, tout devrait bien se passer, cela peut être dû à de nouvelles versions de la bibliothèque LVGL ou de CubeIDE.

Si vous souhaitez consulter d’autres exemples LVGL et analyser leur code, il vous suffit d’ouvrir Middlewares/LVGL/lvgl/examples et d’appeler l’un des exemples de votre choix à l’endroit où lv_demo_widgets() est appelée.

Créer notre propre exemple

Nous allons créer notre propre exemple contenant une image et un bouton qui change la couleur de l’écran en une de nos couleurs Riverdi.

Étape 1 – Préparer le logo Riverdi

1. Téléchargez le logo de Riverdi à partir du site web de Riverdi.
2. Ouvrez le convertisseur d’images LVGL.
3. Choisissez le format de couleur : RGB565
4. Cliquez sur « Convert » et téléchargez le fichier .c généré.
5. Placez-le à côté de votre fichier main.c.
6. Ajoutez cette ligne au début de main.c :
   • extern const lv_image_dsc_t riverdi_logo ;

Note: Si votre image a un fond noir – cela est dû au format .png – aucun fond n’est traduit par Image Converter en 0x00 – couleur noire. Si vous voulez le rendre blanc, remplacez simplement tous les 0x00 par des 0xff dans votre IDE ou votre éditeur de texte.

Étape 2 – Ajouter un nouveau fichier source

Dans STM32CubeIDE, créez un nouveau fichier :

Application/User/Core/ui_riverdi_logo.c

#include "lvgl.h"
extern const lv_image_dsc_t riverdi_logo ;

statique lv_color_t colors[3] ;
statique uint8_t color_index = 0 ;
statique lv_obj_t * scr ;

static void color_btn_event_cb(lv_event_t * e)
{
index_couleur = (index_couleur + 1) % 3 ;
lv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN) ;
}

void ui_riverdi_logo_create(void)
{
colors[0] = lv_color_make(0, 0, 255) ; // Bleu
colors[1] = lv_color_make(0, 255, 0) ; // Vert
colors[2] = lv_color_make(255, 0, 0) ; // Rouge

scr = lv_obj_create(NULL) ;
lv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN) ;
lv_screen_load(scr) ;

lv_obj_t * img = lv_image_create(scr) ;
lv_image_set_src(img, &riverdi_logo) ;
lv_obj_align(img, LV_ALIGN_CENTER, 0, -40) ;

lv_obj_t * btn = lv_button_create(scr) ;
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 100) ;
lv_obj_add_event_cb(btn, color_btn_event_cb, LV_EVENT_CLICKED, NULL) ;

lv_obj_t * label = lv_label_create(btn) ;
lv_label_set_text(label, "Change Color") ;
lv_obj_center(label) ;
}

Étape 3 – Appeler la fonction

Ouvrez à nouveau le fichier main.c et remplacez lv_demo_widgets() ; par ui_riverdi_logo_create() ;

Ensuite, construisez et flashez le projet.

Note: Si une erreur de construction se produit, reconstruisez – CubeIDE indexe parfois mal les nouveaux fichiers.

Analyse de notre code

void color_btn_event_cb() – cette fonction est une fonction d’événement qui est appelée lorsque le bouton est pressé. Dans son corps, nous changeons la couleur d’arrière-plan (bg) par l’une des couleurs du tableau colors[].

void ui_riverdi_logo_create() – cette fonction est notre interface utilisateur complète. De haut en bas :

• Nous créons l’écran avec l’une des couleurs d’arrière-plan.
• Nous plaçons l’image sur l’écran et l’alignons au centre. Les nombres suivants sont les coordonnées X et Y de l’emplacement d’alignement. Dans cet exemple, -40 signifie que nous plaçons l’image 40px au-dessus du centre de l’écran.
• Ensuite, nous créons le bouton – en ne lui donnant aucun style, il conserve son aspect et son comportement par défaut. Nous le plaçons 100px en dessous du centre pour qu’il ne se superpose pas à l’image.
• Enfin, nous créons l’étiquette du bouton – « Change Color ». Pour l’apposer sur le bouton, il suffit de passer le bouton en paramètre de lv_label_create.

Prochaines étapes

Vous avez maintenant un environnement LVGL fonctionnel sur la plateforme STM32H7 de Riverdi.
À partir de là, vous pouvez :

• Ajouter d’autres widgets (étiquettes, curseurs, graphiques)
• Intégrer les gestes tactiles
• Explorez les animations et les thèmes

Résumé

Vous venez de le faire :

1. Clonez et ouvrez le projet LVGL pour l’écran Riverdi STM32H7,
2. Exécutez l’application de démonstration de LVGL,
3. Créez votre propre écran personnalisé avec une image et un bouton.

Ce flux de travail est la base parfaite pour développer des interfaces graphiques professionnelles sur les écrans embarqués de Riverdi en utilisant LVGL.

DÉCOUVREZ NOTRE

Livre blanc

Réalisez l’interaction parfaite entre l’utilisateur et l’écran avec le bon circuit intégré pour capteur tactile. Vous avez déjà été confronté à des problèmes d’événements tactiles fantômes ou de certification ? Boostez votre R&D comme un pro grâce à notre livre blanc !

Livre blanc

Consultez notre catalogue de produits et voyez comment vous pouvez économiser sur la qualité, et non sur la qualité.

Vérifier maintenant

Contactez-nous maintenant, économisez avec la qualité, pas sur la qualité.

Contactez-nous