{"id":129650,"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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","title":{"rendered":"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI"},"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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Verwendete_Hardware\" >Verwendete Hardware<\/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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Erstellen_Sie_Ihr_eigenes_Beispiel_von_Grund_auf\" >Erstellen Sie Ihr eigenes Beispiel von Grund auf<\/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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Anschliessen_der_Hardware\" >Anschlie\u00dfen der Hardware<\/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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Erstellen_der_Benutzeroberflaeche_in_TouchGFX_Designer\" >Erstellen der Benutzeroberfl\u00e4che in 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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Aufbau_der_Demo_UI\" >Aufbau der Demo UI<\/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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Hinzufuegen_von_Interaktionen_in_TouchGFX\" >Hinzuf\u00fcgen von Interaktionen in 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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Erzeugen_von_Code_und_Oeffnen_des_Projekts_in_CubeIDE\" >Erzeugen von Code und \u00d6ffnen des Projekts in 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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Testen_des_Projekts_Simulator_Zielprogrammierung\" >Testen des Projekts: Simulator &amp; Zielprogrammierung<\/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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Zusammenfassung\" >Zusammenfassung<\/a><\/li><\/ul><\/nav><\/div>\n<p>In dieser Anleitung zeigen wir Ihnen, wie Sie mit TouchGFX eine einfache GUI-Anwendung erstellen und diese auf drei verschiedenen STM32 Nucleo-Boards mit Riverdi-Displays ausf\u00fchren. Die Anleitung ist vollst\u00e4ndig in sich abgeschlossen, so dass Sie jeden Schritt nachvollziehen k\u00f6nnen, ohne sich das dazugeh\u00f6rige Video ansehen zu m\u00fcssen. <\/p>\n<p>Ganz gleich, ob Sie Riverdi-Module evaluieren oder TouchGFX zum ersten Mal ausprobieren, dieses Einsteigerprojekt zeigt Ihnen, wie schnell Sie interaktive Benutzeroberfl\u00e4chenlogik erstellen, Code generieren, in STM32CubeIDE integrieren und auf der Hardware ausf\u00fchren k\u00f6nnen.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Verwendete_Hardware\"><\/span>Verwendete Hardware<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>Wir verwenden drei STM32 Nucleo Boards, jedes gepaart mit einem Riverdi Display:<\/p>\n<p><strong>1. Nucleo-C092RC + Riverdi RVA15MD<br \/>\n<\/strong>Ein kompaktes, kosteng\u00fcnstiges STM32 Board, das sich hervorragend f\u00fcr einfache TouchGFX-Demos und einfache UX-Logik eignet. Zusammen mit dem runden 1,54-Zoll-Display RVA15MD ist es ein ideales Einstiegsger\u00e4t. <\/p>\n<p><strong>2. Nucleo-WBA65RI + Riverdi RVA15MD<br \/>\n<\/strong>Eine leistungsst\u00e4rkere, brandneue drahtlose Nucleo-Plattform, die moderne Konnektivit\u00e4t und eine st\u00e4rkere GUI-Leistung bietet &#8211; hervorragend geeignet f\u00fcr fortgeschrittene Riverdi-Anwendungen mit runden Displays.<\/p>\n<p><strong>3. Nucleo-H563ZI + Riverdi RVA35HI<br \/>\n<\/strong>Ein High-End-Hochleistungs-Nucleo-Board mit reichlich Speicher f\u00fcr reichhaltige TouchGFX-Grafiken, das hier ein 3,5&#8243;-RVA35HI-Display ansteuert.<\/p>\n<p><strong>Es wird kein externer ST-Link ben\u00f6tigt &#8211; alle<\/strong>Boards verf\u00fcgen \u00fcber einen integrierten ST-Link V3.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Erstellen_Sie_Ihr_eigenes_Beispiel_von_Grund_auf\"><\/span>Erstellen Sie Ihr eigenes Beispiel von Grund auf<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Anschliessen_der_Hardware\"><\/span>Anschlie\u00dfen der Hardware<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Der Anschluss von Riverdi-Displays an Nucleo-Boards dauert nur einen Augenblick:<\/p>\n<ol>\n<li>Stecken Sie den FFC des Displays in den Nucleo-Adapter oder -Anschluss.<br \/>\nDas Flexkabel ist kodiert und passt nur in eine Richtung.<\/li>\n<li>Schlie\u00dfen Sie das Board \u00fcber den <strong>USB-C ST-LINK-Anschluss<\/strong> an.<br \/>\nDie gr\u00fcne LED best\u00e4tigt die Stromversorgung und die Bereitschaft des Debuggers.<\/li>\n<li>Keine externen Programmierer, Jumper oder Adapter erforderlich.<\/li>\n<\/ol>\n<p>Sobald die Verbindung hergestellt ist, k\u00f6nnen wir direkt mit der Entwicklung der Benutzeroberfl\u00e4che beginnen.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Erstellen_der_Benutzeroberflaeche_in_TouchGFX_Designer\"><\/span>Erstellen der Benutzeroberfl\u00e4che in TouchGFX Designer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00d6ffnen Sie <strong>TouchGFX Designer<\/strong> und beginnen Sie mit einem neuen Projekt: <\/p>\n<p><strong>Schritt f\u00fcr Schritt<\/strong><\/p>\n<ol>\n<li>Klicken Sie auf <strong>Erstellen<\/strong> (die Plus-Schaltfl\u00e4che auf dem Startbildschirm).<\/li>\n<li>Suchen Sie im <strong>Board Selector<\/strong> nach Ihrem Board (z.B. &#8222;H563&#8220; oder &#8222;WBA65&#8220;).<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>W\u00e4hlen Sie den richtigen <strong>Nucleo<\/strong> mit <strong>Riverdi Display<\/strong> (RVA)<\/li>\n<li>Benennen Sie Ihr Projekt und best\u00e4tigen Sie mit <strong>CREATE<\/strong>.<\/li>\n<li>Designer \u00f6ffnet sich mit einer leeren Leinwand, die Ihrer Bildschirmaufl\u00f6sung entspricht.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Aufbau_der_Demo_UI\"><\/span>Aufbau der Demo UI<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Um unser einfaches Beispiel f\u00fcr die Helligkeitsanpassung zu erstellen:<\/p>\n<ol>\n<li>Ziehen Sie in der oberen Symbolleiste einen <strong>Rahmen<\/strong> auf die Leinwand.<br \/>\nVergr\u00f6\u00dfern Sie ihn so, dass er den gesamten Bildschirm bedeckt &#8211; er dient dann als wei\u00dfer Hintergrund.<\/li>\n<li>F\u00fcgen Sie ein <strong>Slider-Widget<\/strong> hinzu.<br \/>\nVerschieben Sie es in die Mitte, indem Sie es auf der Leinwand ziehen.<\/li>\n<li>W\u00e4hlen Sie eine der TouchGFX-Standardvorgaben &#8211; im Video verwenden wir den <strong>kleinen gelben Schieberegler<\/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>Schieberegler Konfiguration<\/strong><\/p>\n<p>Im Fenster <strong>Eigenschaften<\/strong>:<\/p>\n<ul>\n<li><strong>Minimum = 0<\/strong> setzen<\/li>\n<li><strong>Maximum = 200<\/strong> einstellen<\/li>\n<li>(Optional) Stellen Sie <strong>Anfangswert = 200<\/strong> ein, um einen vollst\u00e4ndig hellen Startbildschirm zu erhalten.<\/li>\n<\/ul>\n<p>Alles, was Sie hinzugef\u00fcgt haben, ist in der Widget-Struktur auf der linken Seite sichtbar.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Hinzufuegen_von_Interaktionen_in_TouchGFX\"><\/span>Hinzuf\u00fcgen von Interaktionen in TouchGFX<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Jetzt verkn\u00fcpfen wir den Schieberegler mit einem Funktionsaufruf:<\/p>\n<ol>\n<li>\u00d6ffnen Sie die Registerkarte <strong>Interaktionen<\/strong>.<\/li>\n<li>Dr\u00fccken Sie das <strong>+<\/strong> Symbol, um eine neue Interaktion hinzuzuf\u00fcgen.<\/li>\n<li>W\u00e4hlen Sie <strong>Schiebereglerwert ge\u00e4ndert<\/strong> als Ausl\u00f6ser.<\/li>\n<li>W\u00e4hlen Sie Schieberegler1 als Widget.<\/li>\n<li>F\u00fcr Aktion w\u00e4hlen Sie <strong>Neue virtuelle Funktion aufrufen<\/strong>.<\/li>\n<li>Benennen Sie die Funktion: 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 wird dies als virtuelle Methode in Screen1ViewBase generieren.<\/p>\n<p>Als n\u00e4chstes generieren wir den Code.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Erzeugen_von_Code_und_Oeffnen_des_Projekts_in_CubeIDE\"><\/span>Erzeugen von Code und \u00d6ffnen des Projekts in CubeIDE<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Navigieren Sie zu:<\/p>\n<p>Anwendung \u2192 Benutzer \u2192 gui \u2192 Screen1View.cpp<\/p>\n<p>&nbsp;<\/p>\n<p>TouchGFX hat den Callback-Aufruf bereits in der Basisklasse erzeugt.<\/p>\n<p>Wir implementieren nun die Logik in Screen1View.cpp:<\/p>\n<pre>void Screen1View::sliderChange(int wert)\n{\n\/\/ Schiebereglerbereich (0-200) auf Alpha-Bereich (0-255) skalieren\nuint8_t alpha = (Wert * 255) \/ 200;\n\nbox1.setAlpha(alpha);\nbox1.invalidate();\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>F\u00fcgen Sie die Deklaration unbedingt in Screen1View.hpp hinzu:<\/p>\n<p>virtual void sliderChange(int value);<\/p>\n<p>Das ist die gesamte ben\u00f6tigte Logik &#8211; keine Hardware-Treiber und kein HAL-Code.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Testen_des_Projekts_Simulator_Zielprogrammierung\"><\/span>Testen des Projekts: Simulator &amp; Zielprogrammierung<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Zur\u00fcck in TouchGFX Designer:<\/p>\n<ul>\n<li>Klicken Sie auf <strong>Simulator ausf\u00fchren<\/strong> (zweites rosa Symbol)<br \/>\n\u2192 Sie k\u00f6nnen Ihren Helligkeitsregler sofort ohne Hardware testen.<\/li>\n<li>Klicken Sie auf <strong>Program and Run Target<\/strong> (drittes rosa Symbol oder <strong>F6<\/strong>)<br \/>\n\u2192 Dadurch wird die Firmware direkt auf Ihrem Nucleo-Board erstellt, geflasht und ausgef\u00fchrt.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Zusammenfassung\"><\/span>Zusammenfassung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dieser Leitfaden zeigt Ihnen, wie schnell Sie das tun k\u00f6nnen:<\/p>\n<ul>\n<li>Erstellen Sie ein TouchGFX-Projekt<\/li>\n<li>UI-Elemente hinzuf\u00fcgen<\/li>\n<li>Widget-Interaktionen verbinden<\/li>\n<li>Einfache C++ Logik implementieren<\/li>\n<li>Code generieren und erstellen<\/li>\n<li>Flashen Sie direkt aus TouchGFX Designer<\/li>\n<li>Und lassen Sie es auf einem beliebigen Nucleo-Board in Verbindung mit einem Riverdi-Display laufen<\/li>\n<\/ul>\n<p>Mit den STM32-basierten Modulen von Riverdi und dem Nucleo-\u00d6kosystem von ST wird die Erstellung interaktiver GUIs schnell, vorhersehbar und entwicklerfreundlich.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In dieser Anleitung zeigen wir Ihnen, wie Sie mit TouchGFX eine einfache GUI-Anwendung erstellen und diese auf drei verschiedenen STM32 Nucleo-Boards mit Riverdi-Displays ausf\u00fchren. Die Anleitung ist vollst\u00e4ndig in sich abgeschlossen, so dass Sie jeden Schritt nachvollziehen k\u00f6nnen, ohne sich das dazugeh\u00f6rige Video ansehen zu m\u00fcssen. Ganz gleich, ob Sie Riverdi-Module evaluieren oder TouchGFX zum [&hellip;]<\/p>\n","protected":false},"author":2659,"featured_media":127943,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[1452],"tags":[],"class_list":["post-129650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-anzeige-101"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI - 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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI - Riverdi\" \/>\n<meta property=\"og:description\" content=\"In dieser Anleitung zeigen wir Ihnen, wie Sie mit TouchGFX eine einfache GUI-Anwendung erstellen und diese auf drei verschiedenen STM32 Nucleo-Boards mit Riverdi-Displays ausf\u00fchren. Die Anleitung ist vollst\u00e4ndig in sich abgeschlossen, so dass Sie jeden Schritt nachvollziehen k\u00f6nnen, ohne sich das dazugeh\u00f6rige Video ansehen zu m\u00fcssen. Ganz gleich, ob Sie Riverdi-Module evaluieren oder TouchGFX zum [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/riverdi.com\/de\/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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kacper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"},\"author\":{\"name\":\"Kacper\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"headline\":\"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI\",\"datePublished\":\"2025-12-23T09:51:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"},\"wordCount\":774,\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/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\":[\"Anzeige 101\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\",\"url\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\",\"name\":\"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI - Riverdi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/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\\\/de#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/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\\\/de\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Front Page\",\"item\":\"https:\\\/\\\/riverdi.com\\\/de\\\/titelblatt\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de#website\",\"url\":\"https:\\\/\\\/riverdi.com\\\/de\",\"name\":\"Riverdi\",\"description\":\"Global TFT LCD Manufacturer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/riverdi.com\\\/de?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\",\"name\":\"Kacper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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":"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI - 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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","og_locale":"de_DE","og_type":"article","og_title":"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI - Riverdi","og_description":"In dieser Anleitung zeigen wir Ihnen, wie Sie mit TouchGFX eine einfache GUI-Anwendung erstellen und diese auf drei verschiedenen STM32 Nucleo-Boards mit Riverdi-Displays ausf\u00fchren. Die Anleitung ist vollst\u00e4ndig in sich abgeschlossen, so dass Sie jeden Schritt nachvollziehen k\u00f6nnen, ohne sich das dazugeh\u00f6rige Video ansehen zu m\u00fcssen. Ganz gleich, ob Sie Riverdi-Module evaluieren oder TouchGFX zum [&hellip;]","og_url":"https:\/\/riverdi.com\/de\/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":{"Verfasst von":"Kacper","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#article","isPartOf":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"author":{"name":"Kacper","@id":"https:\/\/riverdi.com\/de#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"headline":"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI","datePublished":"2025-12-23T09:51:48+00:00","mainEntityOfPage":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"wordCount":774,"image":{"@id":"https:\/\/riverdi.com\/de\/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":["Anzeige 101"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","url":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","name":"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI - Riverdi","isPartOf":{"@id":"https:\/\/riverdi.com\/de#website"},"primaryImageOfPage":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage"},"image":{"@id":"https:\/\/riverdi.com\/de\/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\/de#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"breadcrumb":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/riverdi.com\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/riverdi.com\/de\/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\/de\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Front Page","item":"https:\/\/riverdi.com\/de\/titelblatt"},{"@type":"ListItem","position":2,"name":"Erste Schritte mit STM32 Nucleo Riverdi Displays mit TouchGFX GUI"}]},{"@type":"WebSite","@id":"https:\/\/riverdi.com\/de#website","url":"https:\/\/riverdi.com\/de","name":"Riverdi","description":"Global TFT LCD Manufacturer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/riverdi.com\/de?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/riverdi.com\/de#\/schema\/person\/07605024d6619f9bd872665515d9bbfa","name":"Kacper","image":{"@type":"ImageObject","inLanguage":"de","@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\/de\/wp-json\/wp\/v2\/posts\/129650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/users\/2659"}],"replies":[{"embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/comments?post=129650"}],"version-history":[{"count":0,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/posts\/129650\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/media\/127943"}],"wp:attachment":[{"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/media?parent=129650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/categories?post=129650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/tags?post=129650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}