Comment faire tourner LVGL sur l’écran Riverdi EVE
Pour faire tourner une interface graphique moderne sur un microcontrôleur, il faut généralement composer avec les framebuffers, les contraintes de mémoire et les compromis en matière de performances.
Avec EVE, développé par notre partenaire Bridgetek, le rendu des graphismes HMI haute qualité, la gestion audio et la gestion tactile sont désormais pris en charge par le GPU. Parallèlement, LVGL, également partenaire de Riverdi, offre un framework d’interface utilisateur flexible et très répandu.
Le résultat : avec cette configuration, tu peux créer des interfaces complexes sans pousser le microcontrôleur à ses limites, et ça permet à des processeurs pas chers de piloter des écrans couleur sophistiqués et d’aspect professionnel avec une charge minimale
Ce guide explique comment faire fonctionner LVGL sur un écran intelligent Riverdi EVE4 à l’aide de la carte d’évaluation Riverdi basée sur le STM32F4.
Cet exemple utilise l’écran Riverdi RVT70HSBNWC00-B de 7 pouces, connecté via SPI grâce à l’interface RiBUS.
Ce tutoriel a pour but de t’expliquer comment :
- initialiser LVGL sur le microcontrôleur hôte
- connecter LVGL au moteur graphique EVE
- afficher les widgets LVGL à l’écran
- activer l’interaction tactile
Contrairement aux écrans embarqués classiques, l’architecture EVE ne nécessite pas que le microcontrôleur hôte génère un tampon d’image complet. À la place, l’hôte envoie des commandes de dessin au GPU EVE, qui génère l’image finale.
Ça réduit considérablement l’utilisation de la mémoire et la charge du processeur sur le microcontrôleur.
Matériel utilisé
Dans ce tutoriel, on utilise EVE4 (BT817Q). D’après la documentation LVGL, ça devrait aussi marcher sur d’autres versions d’EVE, mais ça n’a pas encore été testé.
Les composants matériels suivants sont utilisés dans ce tutoriel.
Riverdi RVT70HSBNWC00-B
- Écran intelligent EVE4 de 7 pouces
- Résolution : 1280 × 600
- Moteur graphique intégré BT817Q
- Écran tactile capacitif projeté
Carte d’évaluation Riverdi
- Microcontrôleur STM32F4
ST-Link
- utilisé pour la programmation et le débogage
Câble plat RiBUS
- utilisé pour la communication SPI entre l’hôte et le module EVE
Câbles micro-USB
- un pour ST-Link
- un pour alimenter la carte d’évaluation
Configuration logicielle requise
Avant de commencer le processus d’intégration, il faut préparer plusieurs composants logiciels. Le projet est développé à l’aide de STM32CubeIDE comme environnement de développement, avec LVGL qui fournit le framework d’interface utilisateur graphique. La communication avec le moteur graphique EVE est gérée par les bibliothèques de support Riverdi EVE, qui implémentent l’interface de bas niveau entre le microcontrôleur hôte et le GPU BT817.
Dans cette configuration, LVGL ne rend pas directement les pixels dans un tampon d’image. À la place, les opérations de dessin de LVGL sont converties en commandes EVE qui sont envoyées au GPU via SPI. Le périphérique EVE exécute ensuite ces commandes pour afficher l’image finale à l’écran.
Les outils logiciels suivants sont nécessaires :
STM32CubeIDE (ou un autre IDE)
- environnement de développement pour les projets STM32
- servant à configurer les périphériques, à compiler le projet et à programmer le microcontrôleur
Bibliothèque graphique LVGL
- framework d’interface graphique embarqué servant à créer l’interface utilisateur
- fournit des widgets, un système de mise en page et la gestion des événements
Bibliothèques de support Riverdi EVE
- permettre une communication de bas niveau avec le GPU EVE]
- gérer les transactions SPI et l’accès au FIFO de commandes
Git
- ça sert à télécharger des dépôts et des projets d’exemple
Pour trouver le projet, rends-toi sur le site GitHub de Riverdi et cherche le dépôt EVE-LVGL.
Comprendre l’architecture de rendu d’EVE
Une différence majeure entre les écrans EVE et les écrans embarqués classiques réside dans la manière dont les images sont générées. Dans la plupart des systèmes embarqués, le microcontrôleur (MCU) affiche les pixels dans une mémoire tampon d’image, qui est ensuite lue en continu par le contrôleur d’affichage pour rafraîchir l’écran
Les appareils EVE adoptent une approche différente. Au lieu d’envoyer un tampon de trame, le microcontrôleur hôte envoie des commandes de dessin au GPU. Ces commandes décrivent ce qui doit être affiché à l’écran, tandis que le moteur graphique EVE génère les pixels finaux en interne.
Ça réduit considérablement l’utilisation de la mémoire et les besoins en bande passante sur le microcontrôleur.
L’image rendue est définie par une structure appelée « liste d’affichage ». La liste d’affichage est une séquence de commandes GPU exécutées à chaque image pour générer l’image finale.
Voici donc à quoi ressemble un pipeline d’affichage simplifié :
MCU → commandes d’affichage → GPU EVE → écran LCD
C’est grâce à cette architecture basée sur des commandes que des interfaces graphiques complexes peuvent fonctionner sur des microcontrôleurs relativement petits.
Blocs de mémoire clés d’EVE
En interne, le GPU EVE utilise plusieurs zones de mémoire pour traiter les commandes graphiques.
RAM_DL
- stocke la liste d’affichage utilisée pour afficher l’image actuelle
RAM_G
- mémoire graphique polyvalente utilisée pour les images, les polices et d’autres ressources
FIFO de commandes
- tampon utilisé par le coprocesseur pour recevoir les commandes de la microcontrôleuse
Le microcontrôleur hôte écrit des commandes dans la file d’attente FIFO de commandes. Le coprocesseur EVE interprète ces commandes et construit la liste d’affichage stockée dans RAM_DL. Pendant le cycle de rafraîchissement de l’écran, le GPU exécute la liste d’affichage et génère l’image finale.
Comment LVGL s’intègre dans le pipeline
Quand on utilise LVGL avec des écrans classiques, ça affiche les pixels dans un tampon d’image situé dans la mémoire du microcontrôleur. Avec les écrans EVE, le processus est différent.
Les opérations de dessin LVGL sont converties en commandes GPU EVE, qui sont envoyées au périphérique via SPI. Le GPU génère ensuite la liste d’affichage et effectue le rendu de l’image en interne.
Le flux obtenu ressemble à ça :
Ça permet à LVGL de faire tourner des interfaces utilisateur complexes tout en limitant considérablement l’utilisation de la mémoire du microcontrôleur.
Créer le projet STM32
La prochaine étape, c’est de préparer le projet de développement pour la carte d’évaluation Riverdi. Le microcontrôleur hôte exécutera le framework LVGL et communiquera avec le GPU EVE via SPI.
Commence par créer un nouveau projet STM32 dans STM32CubeIDE pour le microcontrôleur utilisé sur la carte d’évaluation. Une fois le projet créé, configure les périphériques nécessaires pour communiquer avec le dispositif EVE.
L’interface la plus importante, c’est le SPI, qui sert à transmettre des commandes et des données entre le microcontrôleur et le contrôleur graphique EVE.
En plus du SPI, plusieurs signaux de contrôle doivent être configurés en broches GPIO. Ces signaux servent à contrôler l’état d’alimentation du dispositif EVE et à gérer la communication avec le GPU.
Les signaux habituels requis par l’interface EVE sont notamment :
CS
- signal de sélection de puce pour la communication SPI
PD
- broche de contrôle de mise hors tension servant à réinitialiser ou à redémarrer le dispositif EVE
INT
- ligne d’interruption utilisée par le GPU pour signaler des événements au microcontrôleur hôte
Une fois l’interface SPI et les signaux GPIO configurés, tu peux compiler le projet et le flasher sur la carte pour vérifier que la configuration matérielle de base fonctionne.
Initialisation de LVGL et du pilote d’affichage EVE
Une fois l’environnement du projet prêt, il faut initialiser la bibliothèque LVGL. Cette étape prépare les structures internes de LVGL et active le moteur graphique.
lv_init();
LVGL propose un pilote d’affichage dédié aux GPU EVE. Ce pilote convertit les opérations de dessin LVGL en commandes comprises par le moteur graphique EVE.
Le pilote d’affichage est créé à l’aide de la fonction lv_draw_eve_display_create().
lv_display_t * disp = lv_draw_eve_display_create( 1280, 600, LV_DISPLAY_RENDER_MODE_DIRECT );
Ces paramètres définissent la résolution de l’écran. Dans cet exemple, on utilise la résolution 1280×600 de l’écran Riverdi RVT70HSBNWC00-B.
Activer la saisie tactile
L’écran Riverdi EVE intègre un contrôleur tactile capacitif accessible via l’interface GPU EVE.
LVGL propose une fonction d’aide qui permet de créer un pilote de périphérique d’entrée relié au moteur tactile EVE.
lv_draw_eve_touch_create(disp);
Une fois cette fonction appelée, les coordonnées tactiles détectées par le contrôleur EVE sont automatiquement transmises à LVGL et converties en événements d’entrée.
Ça permet aux widgets LVGL, comme les boutons, les curseurs et les listes, de réagir aux actions de l’utilisateur.
Lancer la première démo LVGL
Une fois que les pilotes d’affichage et d’entrée ont été initialisés, le système est prêt à afficher la première interface graphique.
Pour vérifier facilement que l’intégration fonctionne, tu peux créer un écran avec plusieurs widgets LVGL standard. Tu trouveras ci-dessous un exemple de code :
static void create_test_ui(void)
{
lv_obj_t * scr = lv_screen_active();
/* Contexte */
lv_obj_set_style_bg_color(scr, COLOR_BG, 0);
lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0);
/* Titre */
lv_obj_t * title = lv_label_create(scr);
lv_label_set_text(title, "LVGL sur Riverdi EVE");
lv_obj_set_style_text_font(title, &lv_font_montserrat_44, 0);
lv_obj_set_style_text_color(title, COLOR_TEXT, 0);
lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 48);
/* Sous-titre */
lv_obj_t * subtitle = lv_label_create(scr);
lv_label_set_text(subtitle, « Test de compatibilité de base des widgets »);
lv_obj_set_style_text_font(subtitle, &lv_font_montserrat_24, 0);
lv_obj_set_style_text_color(subtitle, COLOR_TEXT, 0);
lv_obj_align(subtitle, LV_ALIGN_TOP_MID, 0, 100);
/* --- ancrages de mise en page --- */
int start_y = 170 ;
int col_left = 180 ;
int col_right = 640 ;
/* Bouton */
lv_obj_t * btn = lv_button_create(scr);
lv_obj_set_size(btn, 200, 60);
lv_obj_align(btn, LV_ALIGN_TOP_LEFT, col_left, start_y);
lv_obj_set_style_bg_color(btn, COLOR_ACCENT, 0);
lv_obj_t * btn_label = lv_label_create(btn);
lv_label_set_text(btn_label, "Bouton");
lv_obj_center(btn_label);
/* Curseur */
lv_obj_t * slider = lv_slider_create(scr);
lv_obj_set_width(slider, 260);
lv_obj_align(slider, LV_ALIGN_TOP_LEFT, col_right, start_y + 15);
lv_slider_set_value(slider, 45, LV_ANIM_OFF);
lv_obj_set_style_bg_color(slider, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(slider, COLOR_ACCENT, LV_PART_INDICATOR);
/* Commutateur */
lv_obj_t * sw = lv_switch_create(scr);
lv_obj_align(sw, LV_ALIGN_TOP_LEFT, col_left, start_y + 120);
lv_obj_t * sw_label = lv_label_create(scr);
lv_label_set_text(sw_label, "Commutateur");
lv_obj_set_style_text_color(sw_label, COLOR_TEXT, 0);
lv_obj_align_to(sw_label, sw, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
/* Case à cocher */
lv_obj_t * cb = lv_checkbox_create(scr);
lv_checkbox_set_text(cb, « Case à cocher »);
lv_obj_set_style_text_color(cb, COLOR_TEXT, 0);
lv_obj_align(cb, LV_ALIGN_TOP_LEFT, col_right, start_y + 120) ;
/* Bar */
lv_obj_t * bar = lv_bar_create(scr);
lv_obj_set_size(bar, 500, 20);
lv_obj_align(bar, LV_ALIGN_TOP_MID, 0, start_y + 220);
lv_bar_set_value(bar, 70, LV_ANIM_OFF);
lv_obj_set_style_bg_color(bar, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(bar, COLOR_ACCENT, LV_PART_INDICATOR);
lv_obj_t * bar_label = lv_label_create(scr);
lv_label_set_text(bar_label, "Bar");
lv_obj_set_style_text_color(bar_label, COLOR_TEXT, 0);
lv_obj_align_to(bar_label, bar, LV_ALIGN_OUT_TOP_MID, 0, -8);
}
Conclusion
Dans ce guide, on t’a montré comment faire tourner LVGL sur un écran Riverdi EVE4 en utilisant la carte d’évaluation Riverdi comme plateforme hôte.
Au lieu d’afficher un framebuffer classique sur le microcontrôleur, le système utilise le moteur graphique EVE pour générer l’image finale. Le microcontrôleur hôte envoie des commandes de dessin via SPI, tandis que le GPU BT817 construit la liste d’affichage et affiche l’image à l’écran.
Cette architecture permet d’exécuter des interfaces graphiques complexes sur des microcontrôleurs relativement petits, tout en limitant la consommation de mémoire et la charge du processeur.
Une fois que le pilote d’affichage est correctement initialisé, tu peux utiliser LVGL pour créer des applications graphiques complètes, exactement comme avec les autres pilotes d’affichage pris en charge.
À partir de là, les développeurs peuvent commencer à créer leurs propres interfaces en utilisant les widgets, les mises en page et les mécanismes de gestion des événements de LVGL.
D’autres mesures pourraient inclure :
- Intégration d’écrans personnalisés et de la logique d’application
- Ajouter des images et des polices stockées dans EVE RAM_G
- Optimisation de la communication SPI pour améliorer les performances de rendu
Pour ça, va jeter un œil sur le site de documentation de LVGL et explore notre dépôt GitHub Riverdi.
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 !
Consultez notre catalogue de produits et voyez comment vous pouvez économiser sur la qualité, et non sur la qualité.
