Lien copié dans le presse-papiers !

Comment démarrer avec les écrans embarqués Riverdi STM32 en utilisant TouchGFX – par Controllerstech

Ce guide rapide décrit comment connecter Riverdi STM32 Embedded Display et démarrer un nouveau projet sur TouchGFX Designer.

Tutoriel – Riverdi STM32 Embedded Display première exécution avec TouchGFX

L’un des écrans embarqués Riverdi STM32 a été examiné par Controllerstech – Robotics Simplified, une société de développement de logiciels basée en Inde. Leur objectif est de fournir des connaissances logicielles pour les microcontrôleurs, en particulier les technologies les plus sophistiquées comme le STM32. C’est la raison pour laquelle ils ont préparé une brochure intitulée Getting started with Riverdi STM32 Embedded Display (Démarrer avec Riverdi STM32 Embedded Display).

Nous présentons ci-dessous le guide de Controllerstech, publié à l’origine ici : https://controllerstech.com/getting-started-with-riverdi-stm32-embedded-display/

Regardez le tutoriel vidéo sur la façon de démarrer avec Riverdi STM32 Embedded Display & TouchGFX :

Démarrer avec Riverdi STM32 Embedded Display

Ce tutoriel explique comment exécuter notre premier projet dans les écrans STM32 Embedded fournis par le Riverdi. Elle est spécialisée dans la fabrication de différents types d’écrans, dont l’écran basé sur le STM32 qui prend en charge le TouchGFX. L’écran peut être acheté sur le site https://riverdi.com/product-category/stm32-embedded-displays

L’utilisation de TouchGFX comme logiciel de conception lui confère un avantage par rapport à d’autres écrans intelligents que vous avez pu utiliser jusqu’à présent et qui ne disposent pas d’un concepteur solide. Le fait d’avoir un STM32H7 au cœur de la machine est un autre avantage, car nous connaissons les capacités de ce MCU.

Non seulement il peut être utilisé pour interfacer l’écran, mais nous disposons également de toutes sortes de périphériques pour interfacer d’autres appareils tels que CAN, ADD, DAC, UART, I2C, SPI, etc.

Voyons comment exécuter notre premier projet sur cet écran Riverdi.

Connexion

Comme il s’agit d’un projet très basique, je ne vais pas y connecter d’appareil externe. Ainsi, pour la connexion de base, il suffit de brancher l’alimentation et la liaison ST.

J’ai mis en évidence les ports d’alimentation et SWD dans l’image ci-dessus.

L’image ci-dessous, tirée de la fiche technique de l’écran, montre le brochage de ces ports.

J’ai effectué la connexion conformément à la description des broches donnée dans les images ci-dessus.
Pour le connecteur d’alimentation, je n’ai connecté que VCC à la broche 1 et GND à la broche 6. Et pour le SWD, j’ai connecté les 6 broches aux broches respectives du lien ST

TouchGFX Design

Note : Vous devez avoir au minimum la version 4.20 de TouchGFX.

L’image ci-dessous montre comment créer le projet.

  1. Cliquez sur créer pour créer un nouveau projet
  2. Recherchez le Riverdi pour voir les tableaux disponibles.
  3. Choisissez l’écran dont vous disposez. J’ai l’écran 10.1″, donc je choisis 101STM32H7
  4. Donner un nom au projet
  5. Cliquez sur créer pour créer le projet.

Ajouter une image de fond

Voici les étapes à suivre pour ajouter l’image d’arrière-plan. Je dispose déjà de l’image de la même résolution que l’écran au format PNG.

  1. Cliquez sur l’onglet image
  2. Sélectionner le widget image
  3. Cliquez sur l’image vide pour voir ses propriétés
  4. Dans la section image, cliquez sur aucune image
  5. Cliquez sur le bouton ajouter(+) pour ajouter l’image.

Parcourez maintenant l’image et ajoutez-la au projet.

Ajouter les widgets

Nous ajouterons également quelques widgets à ce projet. Je vais ajouter un curseur et une jauge. L’idée est simple, je veux que la jauge tourne en fonction de la façon dont nous déplaçons le curseur.

Les images ci-dessous montrent les configurations du curseur et de la jauge.

En fait, j’ai ajouté le curseur et la jauge à l’écran. Le curseur va de 0 à 100, tout comme la jauge. Ceci afin d’assurer l’uniformité entre eux.

Ajouter l’interaction

Enfin, nous ajouterons une interaction à cet écran. Pour ce faire, vous devez cliquer sur interaction, puis sur le bouton +.

Cliquez maintenant sur l’interaction pour la configurer.

  • L’interaction se déclenchera chaque fois que la valeur du curseur sera modifiée.
  • Cela appellera une nouvelle fonction virtuelle, dont le nom est sliderupdated.
  • Nous écrirons plus tard cette fonction dans l’IDE.

Générer le code

Maintenant que tout est terminé, nous allons générer le code en cliquant sur le bouton générer comme indiqué dans l’image ci-dessous.

Une fois le code généré, nous l’ouvrirons dans l’IDE cube.

Cliquez sur le bouton  » Fichiers  » comme indiqué dans l’image ci-dessus. Le dossier du projet s’ouvre alors.

  • Retournez maintenant dans le dossier principal du projet.
  • Vous y trouverez le dossier cubeIDE, ouvrez-le.
  • Vous y trouverez le fichier de projet, qui peut être ouvert avec le cubeIDE.

Le code

Il suffit d’écrire un petit code dans le fichier Screen1view.cpp. Vous pouvez voir l’emplacement du fichier dans la structure du projet.

Nous devons d’abord définir la fonction sliderupdated que nous avons créée (dans l’interaction) dans le fichier d’en-tête.

Nous allons maintenant créer cette fonction dans le fichier source et écrire le code à l’intérieur.

void Screen1View::slidderupdated(int value)
{
gauge1.setValue(value);
gauge1.invalidate();
}

Ici, la fonction slidderupdated sera appelée chaque fois que le curseur signalera une nouvelle valeur modifiée.

Nous allons simplement appeler la fonction setvalue pour donner une valeur à la jauge. La fonction invalidate sera appelée pour que la nouvelle valeur prenne effet.

Charger le projet à afficher

Vous ne pouvez pas charger le projet à l’aide de cube IDE. Vous devez utiliser soit le programmateur de cube, soit le GFX tactile lui-même.

Dans les deux cas, nous devons d’abord copier le fichier du chargeur externe dans le répertoire du programmeur de cubes.

Le fichier du chargeur externe se trouve dans le projet que nous avons créé. Son emplacement est indiqué ci-dessous.

Il suffit de copier ce fichier dans le répertoire du programmeur de cube. Dans mon cas, il s’agit de C:NProgram FilesSTMicroelectronicsNSTM32CubeNSTM32CubeProgrammerNExternalLoader.

Une fois le chargeur copié, redémarrez le Touch GFX pour qu’il puisse voir le nouveau chargeur.

Cliquez maintenant sur Exécuter la cible pour charger le projet dans l’écran.

Résultat

Les images ci-dessous montrent la position du curseur et celle de la jauge.

Riverdi – le fabricant européen de présentoirs de la plus haute qualité

Pourquoi devriez-vous nous faire confiance et faire confiance à nos produits ? Riverdi est le fabricant européen de présentoirs de la plus haute qualité. Nous produisons des écrans LCD TFT depuis plus de 10 ans et nous livrons régulièrement des écrans à de nombreux clients dans le monde entier.

Sur notre site web, vous trouverez de nombreuses séries d’écrans différents, mais ce que nous livrons, ce n’est pas seulement des écrans de la plus haute qualité, mais aussi une documentation parfaite. Sur le site web, vous trouverez également des modèles 3D de chaque écran. La plupart d’entre eux sont accompagnés d’un rapport EMI, qui vous permet de connaître le niveau d’émissions. Le processus de commande est convivial. Si vous souhaitez commander un échantillon, vous pouvez l’acheter dans notre boutique en ligne. Il suffit de se rendre sur le site https://riverdi.com/product-category/stm32-embedded-displays/.

Vous pouvez également contacter l’un de nos distributeurs. Riverdi dispose d’un vaste réseau de distribution comprenant de nombreux partenaires américains qui peuvent vous livrer le présentoir en une seule fois.

N’oubliez pas de vous ABONNER à notre chaîne YouTube et de remplir le FORMULAIRE D’ADHÉSION,
pour rester informé de notre matériel de l’Université Riverdi et des événements en direct !

window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("consent", "default", { ad_storage: "denied", ad_user_data: "denied", ad_personalization: "denied", analytics_storage: "denied", functionality_storage: "denied", personalization_storage: "denied", security_storage: "granted", wait_for_update: 2000, }); gtag("set", "ads_data_redaction", true); gtag("set", "url_passthrough", true);