Dans ce guide, nous montrons comment construire une application GUI simple en utilisant TouchGFX et l’exécuter sur trois cartes STM32 Nucleo différentes associées à des écrans Riverdi. Ce guide est entièrement autonome, vous pouvez donc suivre chaque étape sans regarder la vidéo d’accompagnement.
Que vous évaluiez les modules Riverdi ou que vous découvriez TouchGFX pour la première fois, ce projet de démarrage démontre la rapidité avec laquelle vous pouvez créer une logique d’interface utilisateur interactive, générer du code, l’intégrer dans STM32CubeIDE et l’exécuter sur le matériel.
Matériel utilisé
Nous utilisons trois cartes STM32 Nucleo, chacune associée à un écran Riverdi :
1. Nucleo-C092RC + Riverdi RVA15MD
Une carte STM32 compacte et économique, idéale pour les démonstrations TouchGFX de base et la logique UX simple. Associée à l’écran rond RVA15MD de 1,54″, elle constitue une configuration d’entrée idéale.
2. Nucleo-WBA65RI + Riverdi RVA15MD
Une toute nouvelle plateforme Nucleo sans fil, plus puissante, qui offre une connectivité moderne et une interface graphique plus performante – excellente pour les applications d’affichage circulaire Riverdi les plus avancées.
3. Nucleo-H563ZI + Riverdi RVA35HI
Une carte Nucleo haut de gamme et très performante avec beaucoup de mémoire pour des graphiques TouchGFX plus riches, pilotant ici un écran RVA35HI de 3,5 pouces.
Aucune liaison ST-Link externe n’est nécessaire – toutes lescartes sont équipées d’une liaison ST-Link V3 intégrée.
Créer votre propre exemple à partir de zéro
Connexion du matériel
La connexion des écrans Riverdi aux cartes Nucleo ne prend que quelques instants :
- Branchez le FFC de l’écran dans l’adaptateur ou le connecteur du Nucleo.
Le câble flexible est claveté et ne s’adapte que dans un sens. - Connectez la carte à l’aide du port USB-C ST-LINK.
La LED verte confirme l’alimentation et la disponibilité du débogueur. - Aucun programmateur externe, cavalier ou adaptateur n’est nécessaire.
Une fois connecté, nous passons directement au développement de l’interface utilisateur.
Création de l’interface utilisateur dans TouchGFX Designer
Ouvrez TouchGFX Designer et commencez avec un nouveau projet :
Pas à pas
- Cliquez sur Créer (le bouton plus sur l’écran de démarrage).
- Dans le sélecteur de cartes, recherchez votre carte (par exemple « H563 » ou « WBA65 »).
- Choisissez le Nucleo approprié avec l’écran Riverdi (RVA)
- Donnez un nom à votre projet et confirmez en cliquant sur CREATE.
- Designer s’ouvre sur un canevas vierge correspondant à la résolution de votre écran.
Création de l’interface utilisateur de démonstration
Pour créer notre exemple simple de réglage de la luminosité :
- Dans la barre d’outils supérieure, faites glisser une boîte sur le canevas.
Redimensionnez-la pour qu’elle couvre l’ensemble de l’écran – elle servira d’arrière-plan blanc. - Ajoutez un widget Slider.
Déplacez-le au centre en le faisant glisser sur le canevas. - Choisissez l’un des préréglages par défaut de TouchGFX – dans la vidéo, nous utilisons le petit curseur jaune.
Configuration du curseur
Dans le panneau Propriétés:
- Régler le minimum = 0
- Régler le maximum = 200
- (Facultatif) Réglez la valeur initiale = 200 pour un écran de départ entièrement lumineux.
Tout ce qui a été ajouté est visible dans l’arbre des widgets à gauche.
Ajouter des interactions dans TouchGFX
Nous lions maintenant le curseur à un appel de fonction :
- Ouvrez l’onglet Interactions.
- Appuyez sur l’icône + pour ajouter une nouvelle interaction.
- Choisissez la modification de la valeur du curseur comme déclencheur.
- Sélectionnez slider1 comme widget.
- Pour l’action, choisissez Appeler une nouvelle fonction virtuelle.
- Nom de la fonction : sliderChanged
TouchGFX génère cette méthode virtuelle dans Screen1ViewBase.
Ensuite, nous générons le code.
Générer le code et ouvrir le projet dans CubeIDE
Naviguez vers :
Application → Utilisateur → gui → Screen1View.cpp
TouchGFX a déjà généré l’appel de rappel dans la classe de base.
Nous implémentons maintenant la logique dans Screen1View.cpp :
void Screen1View::sliderChange(int value)
{
// Échelle de la plage du curseur (0-200) à la plage alpha (0-255)
uint8_t alpha = (valeur * 255) / 200 ;
box1.setAlpha(alpha) ;
box1.invalidate() ;
}
Veillez à ajouter la déclaration dans Screen1View.hpp :
virtual void sliderChange(int value) ;
C’est toute la logique nécessaire – pas de pilotes matériels ni de code HAL.
Test du projet : simulateur et programmation de la cible
Retour à TouchGFX Designer :
- Cliquez sur Run Simulator (deuxième icône rose)
→ Vous pouvez tester votre curseur de luminosité instantanément sans matériel. - Cliquez sur Program and Run Target (troisième icône rose ou F6)
→ Cela permet de construire, de flasher et d’exécuter le micrologiciel directement sur votre carte Nucleo.
Résumé
Ce guide montre à quelle vitesse vous pouvez le faire :
- Créez un projet TouchGFX
- Ajouter des éléments d’interface utilisateur
- Connecter les interactions des widgets
- Mettre en œuvre une logique C++ simple
- Générer et construire le code
- Flash directement à partir de TouchGFX Designer
- Et le faire fonctionner sur n’importe quelle carte Nucleo associée à un écran Riverdi.
Grâce aux modules STM32 de Riverdi et à l’écosystème Nucleo de ST, la création d’interfaces graphiques interactives devient rapide, prévisible et conviviale pour les développeurs.
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é.
