{"id":129652,"date":"2025-12-23T10:51:48","date_gmt":"2025-12-23T09:51:48","guid":{"rendered":"https:\/\/riverdi.com\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"modified":"2025-12-23T10:51:48","modified_gmt":"2025-12-23T09:51:48","slug":"getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","status":"publish","type":"post","link":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","title":{"rendered":"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l&rsquo;interface graphique TouchGFX"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #002175;color:#002175\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #002175;color:#002175\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Materiel_utilise\" >Mat\u00e9riel utilis\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Creer_votre_propre_exemple_a_partir_de_zero\" >Cr\u00e9er votre propre exemple \u00e0 partir de z\u00e9ro<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Connexion_du_materiel\" >Connexion du mat\u00e9riel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Creation_de_linterface_utilisateur_dans_TouchGFX_Designer\" >Cr\u00e9ation de l&rsquo;interface utilisateur dans TouchGFX Designer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Creation_de_linterface_utilisateur_de_demonstration\" >Cr\u00e9ation de l&rsquo;interface utilisateur de d\u00e9monstration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Ajouter_des_interactions_dans_TouchGFX\" >Ajouter des interactions dans TouchGFX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Generer_le_code_et_ouvrir_le_projet_dans_CubeIDE\" >G\u00e9n\u00e9rer le code et ouvrir le projet dans CubeIDE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Test_du_projet_simulateur_et_programmation_de_la_cible\" >Test du projet : simulateur et programmation de la cible<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Resume\" >R\u00e9sum\u00e9<\/a><\/li><\/ul><\/nav><\/div>\n<p>Dans ce guide, nous montrons comment construire une application GUI simple en utilisant TouchGFX et l&rsquo;ex\u00e9cuter sur trois cartes STM32 Nucleo diff\u00e9rentes associ\u00e9es \u00e0 des \u00e9crans Riverdi. Ce guide est enti\u00e8rement autonome, vous pouvez donc suivre chaque \u00e9tape sans regarder la vid\u00e9o d&rsquo;accompagnement. <\/p>\n<p>Que vous \u00e9valuiez les modules Riverdi ou que vous d\u00e9couvriez TouchGFX pour la premi\u00e8re fois, ce projet de d\u00e9marrage d\u00e9montre la rapidit\u00e9 avec laquelle vous pouvez cr\u00e9er une logique d&rsquo;interface utilisateur interactive, g\u00e9n\u00e9rer du code, l&rsquo;int\u00e9grer dans STM32CubeIDE et l&rsquo;ex\u00e9cuter sur le mat\u00e9riel.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Materiel_utilise\"><\/span>Mat\u00e9riel utilis\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127947\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1.png\" alt=\"\" width=\"826\" height=\"500\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-300x182.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-768x465.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-600x363.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-64x39.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/p>\n<p>Nous utilisons trois cartes STM32 Nucleo, chacune associ\u00e9e \u00e0 un \u00e9cran Riverdi :<\/p>\n<p><strong>1. Nucleo-C092RC + Riverdi RVA15MD<br \/>\n<\/strong>Une carte STM32 compacte et \u00e9conomique, id\u00e9ale pour les d\u00e9monstrations TouchGFX de base et la logique UX simple. Associ\u00e9e \u00e0 l&rsquo;\u00e9cran rond RVA15MD de 1,54&Prime;, elle constitue une configuration d&rsquo;entr\u00e9e id\u00e9ale. <\/p>\n<p><strong>2. Nucleo-WBA65RI + Riverdi RVA15MD<br \/>\n<\/strong>Une toute nouvelle plateforme Nucleo sans fil, plus puissante, qui offre une connectivit\u00e9 moderne et une interface graphique plus performante &#8211; excellente pour les applications d&rsquo;affichage circulaire Riverdi les plus avanc\u00e9es.<\/p>\n<p><strong>3. Nucleo-H563ZI + Riverdi RVA35HI<br \/>\n<\/strong>Une carte Nucleo haut de gamme et tr\u00e8s performante avec beaucoup de m\u00e9moire pour des graphiques TouchGFX plus riches, pilotant ici un \u00e9cran RVA35HI de 3,5 pouces.<\/p>\n<p><strong>Aucune liaison ST-Link externe n&rsquo;est n\u00e9cessaire &#8211; toutes les<\/strong>cartes sont \u00e9quip\u00e9es d&rsquo;une liaison ST-Link V3 int\u00e9gr\u00e9e.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creer_votre_propre_exemple_a_partir_de_zero\"><\/span>Cr\u00e9er votre propre exemple \u00e0 partir de z\u00e9ro<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Connexion_du_materiel\"><\/span>Connexion du mat\u00e9riel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La connexion des \u00e9crans Riverdi aux cartes Nucleo ne prend que quelques instants :<\/p>\n<ol>\n<li>Branchez le FFC de l&rsquo;\u00e9cran dans l&rsquo;adaptateur ou le connecteur du Nucleo.<br \/>\nLe c\u00e2ble flexible est clavet\u00e9 et ne s&rsquo;adapte que dans un sens.<\/li>\n<li>Connectez la carte \u00e0 l&rsquo;aide du <strong>port USB-C ST-LINK<\/strong>.<br \/>\nLa LED verte confirme l&rsquo;alimentation et la disponibilit\u00e9 du d\u00e9bogueur.<\/li>\n<li>Aucun programmateur externe, cavalier ou adaptateur n&rsquo;est n\u00e9cessaire.<\/li>\n<\/ol>\n<p>Une fois connect\u00e9, nous passons directement au d\u00e9veloppement de l&rsquo;interface utilisateur.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creation_de_linterface_utilisateur_dans_TouchGFX_Designer\"><\/span>Cr\u00e9ation de l&rsquo;interface utilisateur dans TouchGFX Designer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ouvrez <strong>TouchGFX Designer<\/strong> et commencez avec un nouveau projet : <\/p>\n<p><strong>Pas \u00e0 pas<\/strong><\/p>\n<ol>\n<li>Cliquez sur <strong>Cr\u00e9er<\/strong> (le bouton plus sur l&rsquo;\u00e9cran de d\u00e9marrage).<\/li>\n<li>Dans le <strong>s\u00e9lecteur de cartes<\/strong>, recherchez votre carte (par exemple \u00ab\u00a0H563\u00a0\u00bb ou \u00ab\u00a0WBA65\u00a0\u00bb).<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-127952\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2.png\" alt=\"\" width=\"826\" height=\"380\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-300x138.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-768x353.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-600x276.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-64x29.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/li>\n<li>Choisissez le <strong>Nucleo<\/strong> appropri\u00e9 avec l&rsquo;<strong>\u00e9cran Riverdi<\/strong> (RVA)<\/li>\n<li>Donnez un nom \u00e0 votre projet et confirmez en cliquant sur <strong>CREATE<\/strong>.<\/li>\n<li>Designer s&rsquo;ouvre sur un canevas vierge correspondant \u00e0 la r\u00e9solution de votre \u00e9cran.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creation_de_linterface_utilisateur_de_demonstration\"><\/span>Cr\u00e9ation de l&rsquo;interface utilisateur de d\u00e9monstration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pour cr\u00e9er notre exemple simple de r\u00e9glage de la luminosit\u00e9 :<\/p>\n<ol>\n<li>Dans la barre d&rsquo;outils sup\u00e9rieure, faites glisser une <strong>bo\u00eete<\/strong> sur le canevas.<br \/>\nRedimensionnez-la pour qu&rsquo;elle couvre l&rsquo;ensemble de l&rsquo;\u00e9cran &#8211; elle servira d&rsquo;arri\u00e8re-plan blanc.<\/li>\n<li>Ajoutez un widget <strong>Slider<\/strong>.<br \/>\nD\u00e9placez-le au centre en le faisant glisser sur le canevas.<\/li>\n<li>Choisissez l&rsquo;un des pr\u00e9r\u00e9glages par d\u00e9faut de TouchGFX &#8211; dans la vid\u00e9o, nous utilisons le <strong>petit curseur jaune.<\/strong><br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-127957\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2.png\" alt=\"\" width=\"826\" height=\"480\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-300x174.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-768x446.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-600x349.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-64x37.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/li>\n<\/ol>\n<p><strong>Configuration du curseur<\/strong><\/p>\n<p>Dans le panneau <strong>Propri\u00e9t\u00e9s<\/strong>:<\/p>\n<ul>\n<li>R\u00e9gler le <strong>minimum = 0<\/strong><\/li>\n<li>R\u00e9gler le <strong>maximum = 200<\/strong><\/li>\n<li>(Facultatif) R\u00e9glez la <strong>valeur initiale = 200<\/strong> pour un \u00e9cran de d\u00e9part enti\u00e8rement lumineux.<\/li>\n<\/ul>\n<p>Tout ce qui a \u00e9t\u00e9 ajout\u00e9 est visible dans l&rsquo;arbre des widgets \u00e0 gauche.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ajouter_des_interactions_dans_TouchGFX\"><\/span>Ajouter des interactions dans TouchGFX<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Nous lions maintenant le curseur \u00e0 un appel de fonction :<\/p>\n<ol>\n<li>Ouvrez l&rsquo;onglet <strong>Interactions<\/strong>.<\/li>\n<li>Appuyez sur l&rsquo;ic\u00f4ne <strong>+<\/strong> pour ajouter une nouvelle interaction.<\/li>\n<li>Choisissez la <strong>modification de la valeur du curseur<\/strong> comme d\u00e9clencheur.<\/li>\n<li>S\u00e9lectionnez slider1 comme widget.<\/li>\n<li>Pour l&rsquo;action, choisissez <strong>Appeler une nouvelle fonction virtuelle.<\/strong><\/li>\n<li>Nom de la fonction : sliderChanged<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127962\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1.png\" alt=\"\" width=\"826\" height=\"420\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-300x153.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-768x391.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-600x305.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-64x33.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>TouchGFX g\u00e9n\u00e8re cette m\u00e9thode virtuelle dans Screen1ViewBase.<\/p>\n<p>Ensuite, nous g\u00e9n\u00e9rons le code.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Generer_le_code_et_ouvrir_le_projet_dans_CubeIDE\"><\/span>G\u00e9n\u00e9rer le code et ouvrir le projet dans CubeIDE<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Naviguez vers :<\/p>\n<p>Application \u2192 Utilisateur \u2192 gui \u2192 Screen1View.cpp<\/p>\n<p>&nbsp;<\/p>\n<p>TouchGFX a d\u00e9j\u00e0 g\u00e9n\u00e9r\u00e9 l&rsquo;appel de rappel dans la classe de base.<\/p>\n<p>Nous impl\u00e9mentons maintenant la logique dans Screen1View.cpp :<\/p>\n<pre>void Screen1View::sliderChange(int value)\n{\n\/\/ \u00c9chelle de la plage du curseur (0-200) \u00e0 la plage alpha (0-255)\nuint8_t alpha = (valeur * 255) \/ 200 ;\n\nbox1.setAlpha(alpha) ;\nbox1.invalidate() ;\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Veillez \u00e0 ajouter la d\u00e9claration dans Screen1View.hpp :<\/p>\n<p>virtual void sliderChange(int value) ;<\/p>\n<p>C&rsquo;est toute la logique n\u00e9cessaire &#8211; pas de pilotes mat\u00e9riels ni de code HAL.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Test_du_projet_simulateur_et_programmation_de_la_cible\"><\/span>Test du projet : simulateur et programmation de la cible<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Retour \u00e0 TouchGFX Designer :<\/p>\n<ul>\n<li>Cliquez sur <strong>Run Simulator<\/strong> (deuxi\u00e8me ic\u00f4ne rose)<br \/>\n\u2192 Vous pouvez tester votre curseur de luminosit\u00e9 instantan\u00e9ment sans mat\u00e9riel.<\/li>\n<li>Cliquez sur <strong>Program and Run Target<\/strong> (troisi\u00e8me ic\u00f4ne rose ou <strong>F6<\/strong>)<br \/>\n\u2192 Cela permet de construire, de flasher et d&rsquo;ex\u00e9cuter le micrologiciel directement sur votre carte Nucleo.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Resume\"><\/span>R\u00e9sum\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ce guide montre \u00e0 quelle vitesse vous pouvez le faire :<\/p>\n<ul>\n<li>Cr\u00e9ez un projet TouchGFX<\/li>\n<li>Ajouter des \u00e9l\u00e9ments d&rsquo;interface utilisateur<\/li>\n<li>Connecter les interactions des widgets<\/li>\n<li>Mettre en \u0153uvre une logique C++ simple<\/li>\n<li>G\u00e9n\u00e9rer et construire le code<\/li>\n<li>Flash directement \u00e0 partir de TouchGFX Designer<\/li>\n<li>Et le faire fonctionner sur n&rsquo;importe quelle carte Nucleo associ\u00e9e \u00e0 un \u00e9cran Riverdi.<\/li>\n<\/ul>\n<p>Gr\u00e2ce aux modules STM32 de Riverdi et \u00e0 l&rsquo;\u00e9cosyst\u00e8me Nucleo de ST, la cr\u00e9ation d&rsquo;interfaces graphiques interactives devient rapide, pr\u00e9visible et conviviale pour les d\u00e9veloppeurs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans ce guide, nous montrons comment construire une application GUI simple en utilisant TouchGFX et l&rsquo;ex\u00e9cuter sur trois cartes STM32 Nucleo diff\u00e9rentes associ\u00e9es \u00e0 des \u00e9crans Riverdi. Ce guide est enti\u00e8rement autonome, vous pouvez donc suivre chaque \u00e9tape sans regarder la vid\u00e9o d&rsquo;accompagnement. Que vous \u00e9valuiez les modules Riverdi ou que vous d\u00e9couvriez TouchGFX pour [&hellip;]<\/p>\n","protected":false},"author":2659,"featured_media":127942,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[1457],"tags":[],"class_list":["post-129652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-affichage-101"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l&#039;interface graphique TouchGFX - Riverdi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l&#039;interface graphique TouchGFX - Riverdi\" \/>\n<meta property=\"og:description\" content=\"Dans ce guide, nous montrons comment construire une application GUI simple en utilisant TouchGFX et l&rsquo;ex\u00e9cuter sur trois cartes STM32 Nucleo diff\u00e9rentes associ\u00e9es \u00e0 des \u00e9crans Riverdi. Ce guide est enti\u00e8rement autonome, vous pouvez donc suivre chaque \u00e9tape sans regarder la vid\u00e9o d&rsquo;accompagnement. Que vous \u00e9valuiez les modules Riverdi ou que vous d\u00e9couvriez TouchGFX pour [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\" \/>\n<meta property=\"og:site_name\" content=\"Riverdi\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/riverdi.displays\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-23T09:51:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kacper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@riverdidisplays\" \/>\n<meta name=\"twitter:site\" content=\"@riverdidisplays\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kacper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"},\"author\":{\"name\":\"Kacper\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"headline\":\"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l&rsquo;interface graphique TouchGFX\",\"datePublished\":\"2025-12-23T09:51:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"},\"wordCount\":906,\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"articleSection\":[\"Affichage 101\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\",\"url\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\",\"name\":\"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l'interface graphique TouchGFX - Riverdi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"datePublished\":\"2025-12-23T09:51:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\",\"url\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"contentUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"width\":1280,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Front Page\",\"item\":\"https:\\\/\\\/riverdi.com\\\/fr\\\/page-daccueil\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l&rsquo;interface graphique TouchGFX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr#website\",\"url\":\"https:\\\/\\\/riverdi.com\\\/fr\",\"name\":\"Riverdi\",\"description\":\"Global TFT LCD Manufacturer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/riverdi.com\\\/fr?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/fr#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\",\"name\":\"Kacper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g\",\"caption\":\"Kacper\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l'interface graphique TouchGFX - Riverdi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","og_locale":"fr_FR","og_type":"article","og_title":"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l'interface graphique TouchGFX - Riverdi","og_description":"Dans ce guide, nous montrons comment construire une application GUI simple en utilisant TouchGFX et l&rsquo;ex\u00e9cuter sur trois cartes STM32 Nucleo diff\u00e9rentes associ\u00e9es \u00e0 des \u00e9crans Riverdi. Ce guide est enti\u00e8rement autonome, vous pouvez donc suivre chaque \u00e9tape sans regarder la vid\u00e9o d&rsquo;accompagnement. Que vous \u00e9valuiez les modules Riverdi ou que vous d\u00e9couvriez TouchGFX pour [&hellip;]","og_url":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","og_site_name":"Riverdi","article_publisher":"https:\/\/www.facebook.com\/riverdi.displays\/","article_published_time":"2025-12-23T09:51:48+00:00","og_image":[{"width":1280,"height":600,"url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","type":"image\/jpeg"}],"author":"Kacper","twitter_card":"summary_large_image","twitter_creator":"@riverdidisplays","twitter_site":"@riverdidisplays","twitter_misc":{"\u00c9crit par":"Kacper","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#article","isPartOf":{"@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"author":{"name":"Kacper","@id":"https:\/\/riverdi.com\/fr#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"headline":"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l&rsquo;interface graphique TouchGFX","datePublished":"2025-12-23T09:51:48+00:00","mainEntityOfPage":{"@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"wordCount":906,"image":{"@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","articleSection":["Affichage 101"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","url":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","name":"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l'interface graphique TouchGFX - Riverdi","isPartOf":{"@id":"https:\/\/riverdi.com\/fr#website"},"primaryImageOfPage":{"@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage"},"image":{"@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","datePublished":"2025-12-23T09:51:48+00:00","author":{"@id":"https:\/\/riverdi.com\/fr#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"breadcrumb":{"@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage","url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","contentUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","width":1280,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/riverdi.com\/fr\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Front Page","item":"https:\/\/riverdi.com\/fr\/page-daccueil"},{"@type":"ListItem","position":2,"name":"Premiers pas avec les \u00e9crans STM32 Nucleo Riverdi avec l&rsquo;interface graphique TouchGFX"}]},{"@type":"WebSite","@id":"https:\/\/riverdi.com\/fr#website","url":"https:\/\/riverdi.com\/fr","name":"Riverdi","description":"Global TFT LCD Manufacturer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/riverdi.com\/fr?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/riverdi.com\/fr#\/schema\/person\/07605024d6619f9bd872665515d9bbfa","name":"Kacper","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g","caption":"Kacper"}}]}},"_links":{"self":[{"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/posts\/129652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/users\/2659"}],"replies":[{"embeddable":true,"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/comments?post=129652"}],"version-history":[{"count":0,"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/posts\/129652\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/media\/127942"}],"wp:attachment":[{"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/media?parent=129652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/categories?post=129652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/riverdi.com\/fr\/wp-json\/wp\/v2\/tags?post=129652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}