{"id":132842,"date":"2025-12-23T10:51:48","date_gmt":"2025-12-23T09:51:48","guid":{"rendered":"https:\/\/riverdi.com\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui"},"modified":"2026-09-08T15:41:40","modified_gmt":"2026-09-08T13:41:40","slug":"pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui","status":"publish","type":"post","link":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui","title":{"rendered":"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_87 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=\"Prze\u0142\u0105cznik Spisu Tre\u015bci\"><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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Uzywany_sprzet\" >U\u017cywany sprz\u0119t<\/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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Tworzenie_wlasnego_przykladu_od_podstaw\" >Tworzenie w\u0142asnego przyk\u0142adu od podstaw<\/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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Podlaczanie_sprzetu\" >Pod\u0142\u0105czanie sprz\u0119tu<\/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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Tworzenie_interfejsu_uzytkownika_w_programie_TouchGFX_Designer\" >Tworzenie interfejsu u\u017cytkownika w programie 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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Tworzenie_interfejsu_uzytkownika_wersji_demonstracyjnej\" >Tworzenie interfejsu u\u017cytkownika wersji demonstracyjnej<\/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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Dodawanie_interakcji_w_TouchGFX\" >Dodawanie interakcji w 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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Generowanie_kodu_i_otwarcie_projektu_w_CubeIDE\" >Generowanie kodu i otwarcie projektu w 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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Testowanie_projektu_symulator_i_programowanie_ukladu_docelowego\" >Testowanie projektu: symulator i programowanie uk\u0142adu docelowego<\/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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\/#Podsumowanie\" >Podsumowanie<\/a><\/li><\/ul><\/nav><\/div>\n<p>W tym poradniku poka\u017cemy, jak stworzy\u0107 prost\u0105 aplikacj\u0119 z GUI przy u\u017cyciu TouchGFX i uruchomi\u0107 j\u0105 na trzech r\u00f3\u017cnych p\u0142ytkach STM32 Nucleo po\u0142\u0105czonych z wy\u015bwietlaczami Riverdi. Ten przewodnik jest w pe\u0142ni samowystarczalny, wi\u0119c mo\u017cesz wykona\u0107 ka\u017cdy krok bez ogl\u0105dania do\u0142\u0105czonego filmiku. <\/p>\n<p>Niezale\u017cnie od tego, czy sprawdzasz modu\u0142y Riverdi, czy dopiero zaczynasz przygod\u0119 z TouchGFX, ten projekt startowy pokazuje, jak szybko mo\u017cesz stworzy\u0107 interaktywn\u0105 logik\u0119 interfejsu u\u017cytkownika, wygenerowa\u0107 kod, zintegrowa\u0107 go z STM32CubeIDE i uruchomi\u0107 na sprz\u0119cie.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Uzywany_sprzet\"><\/span>U\u017cywany sprz\u0119t<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>U\u017cywamy trzech p\u0142ytek STM32 Nucleo, z kt\u00f3rych ka\u017cda jest po\u0142\u0105czona z wy\u015bwietlaczem Riverdi:<\/p>\n<p><strong>1. Nucleo-C092RC + Riverdi RVA15MD<br \/>\n<\/strong>Kompaktowa, niedroga p\u0142ytka STM32, \u015bwietna do podstawowych prezentacji TouchGFX i prostej logiki UX. W po\u0142\u0105czeniu z okr\u0105g\u0142ym wy\u015bwietlaczem RVA15MD o przek\u0105tnej 1,54\u201d to idealny zestaw dla pocz\u0105tkuj\u0105cych. <\/p>\n<p><strong>2. Nucleo-WBA65RI + Riverdi RVA15MD<br \/>\n<\/strong>Nowa, jeszcze wydajniejsza bezprzewodowa platforma Nucleo, kt\u00f3ra zapewnia nowoczesn\u0105 \u0142\u0105czno\u015b\u0107 i lepsz\u0105 wydajno\u015b\u0107 GUI \u2014 idealna do bardziej zaawansowanych zastosowa\u0144 z okr\u0105g\u0142ymi wy\u015bwietlaczami Riverdi.<\/p>\n<p><strong>3. Nucleo-H563ZI + Riverdi RVA35HI<br \/>\n<\/strong>Wysokiej klasy, wydajna p\u0142ytka Nucleo z du\u017c\u0105 ilo\u015bci\u0105 pami\u0119ci, kt\u00f3ra pozwala na wy\u015bwietlanie bogatszej grafiki TouchGFX \u2013 w tym przypadku steruje 3,5-calowym wy\u015bwietlaczem RVA35HI.<\/p>\n<p><strong>Nie potrzebujesz zewn\u0119trznego modu\u0142u ST-Link<\/strong>\u2013 wszystkie p\u0142ytki maj\u0105 wbudowany ST-Link V3.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tworzenie_wlasnego_przykladu_od_podstaw\"><\/span>Tworzenie w\u0142asnego przyk\u0142adu od podstaw<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Podlaczanie_sprzetu\"><\/span>Pod\u0142\u0105czanie sprz\u0119tu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pod\u0142\u0105czenie wy\u015bwietlaczy Riverdi do p\u0142ytek Nucleo zajmuje tylko chwil\u0119:<\/p>\n<ol>\n<li>Pod\u0142\u0105cz kabel FFC wy\u015bwietlacza do adaptera lub z\u0142\u0105cza Nucleo.<br \/>\nKabel elastyczny ma wyprofilowany profil i pasuje tylko w jednym kierunku.<\/li>\n<li>Pod\u0142\u0105cz p\u0142ytk\u0119 przez <strong>port USB-C ST-LINK<\/strong>.<br \/>\nZielona dioda LED sygnalizuje zasilanie i gotowo\u015b\u0107 debuggera do pracy.<\/li>\n<li>Nie potrzebujesz \u017cadnego zewn\u0119trznego programatora, zworek ani adapter\u00f3w.<\/li>\n<\/ol>\n<p>Jak tylko si\u0119 po\u0142\u0105czymy, od razu zabieramy si\u0119 za tworzenie interfejsu u\u017cytkownika.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Tworzenie_interfejsu_uzytkownika_w_programie_TouchGFX_Designer\"><\/span>Tworzenie interfejsu u\u017cytkownika w programie TouchGFX Designer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Otw\u00f3rz <strong>program TouchGFX Designer<\/strong> i zacznij od nowego projektu: <\/p>\n<p><strong>Krok po kroku<\/strong><\/p>\n<ol>\n<li>Kliknij <strong>\u201eUtw\u00f3rz\u201d<\/strong> (przycisk z plusem na ekranie startowym).<\/li>\n<li>W <strong>selektorze p\u0142yt<\/strong> poszukaj swojej p\u0142yty (np. \u201eH563\u201d lub \u201eWBA65\u201d).<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>Wybierz odpowiedni <strong>model Nucleo<\/strong> z <strong>wy\u015bwietlaczem Riverdi<\/strong> (RVA)<\/li>\n<li>Nadaj nazw\u0119 projektowi i zatwierd\u017a, naciskaj\u0105c <strong>CREATE<\/strong>.<\/li>\n<li>Program Designer otwiera si\u0119, wy\u015bwietlaj\u0105c puste pole o rozmiarze dopasowanym do rozdzielczo\u015bci twojego wy\u015bwietlacza.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Tworzenie_interfejsu_uzytkownika_wersji_demonstracyjnej\"><\/span>Tworzenie interfejsu u\u017cytkownika wersji demonstracyjnej<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Aby stworzy\u0107 nasz prosty przyk\u0142ad regulacji jasno\u015bci:<\/p>\n<ol>\n<li>Z g\u00f3rnego paska narz\u0119dzi przeci\u0105gnij <strong>prostok\u0105t<\/strong> na obszar roboczy.<br \/>\nZmieniaj jego rozmiar tak, \u017ceby zajmowa\u0142 ca\u0142y ekran \u2014 b\u0119dzie to bia\u0142e t\u0142o.<\/li>\n<li>Dodaj wid\u017cet <strong>\u201eSlider<\/strong> \u201d.<br \/>\nPrzesu\u0144 go na \u015brodek, przeci\u0105gaj\u0105c go po obszarze roboczym.<\/li>\n<li>Wybierz jedno z domy\u015blnych ustawie\u0144 TouchGFX \u2014 w filmiku u\u017cywamy <strong>ma\u0142ego \u017c\u00f3\u0142tego suwaka<\/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>Konfiguracja suwaka<\/strong><\/p>\n<p>W panelu <strong>\u201eW\u0142a\u015bciwo\u015bci<\/strong> \u201d:<\/p>\n<ul>\n<li>Ustaw <strong>minimaln\u0105 warto\u015b\u0107 na 0<\/strong><\/li>\n<li>Ustaw <strong>warto\u015b\u0107 maksymaln\u0105 na 200<\/strong><\/li>\n<li>(Opcjonalnie) Ustaw <strong>warto\u015b\u0107 pocz\u0105tkow\u0105 na 200<\/strong>, \u017ceby ekran startowy by\u0142 w pe\u0142ni jasny.<\/li>\n<\/ul>\n<p>Wszystko, co dodasz, b\u0119dzie widoczne w drzewie wid\u017cet\u00f3w po lewej stronie.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Dodawanie_interakcji_w_TouchGFX\"><\/span>Dodawanie interakcji w TouchGFX<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Teraz po\u0142\u0105czymy suwak z wywo\u0142aniem funkcji:<\/p>\n<ol>\n<li>Otw\u00f3rz zak\u0142adk\u0119 <strong>\u201eInterakcje<\/strong> \u201d.<\/li>\n<li>Naci\u015bnij ikon\u0119 <strong>+<\/strong>, aby doda\u0107 now\u0105 interakcj\u0119.<\/li>\n<li>Wybierz jako wyzwalacz opcj\u0119 <strong>\u201eZmiana warto\u015bci suwaka<\/strong> \u201d.<\/li>\n<li>Wybierz \u201eslider1\u201d jako wid\u017cet.<\/li>\n<li>Jako akcj\u0119 wybierz opcj\u0119 <strong>\u201eWywo\u0142aj now\u0105 funkcj\u0119 wirtualn\u0105<\/strong>\u201d.<\/li>\n<li>Nazwij t\u0119 funkcj\u0119: 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 wygeneruje to jako metod\u0119 wirtualn\u0105 w klasie Screen1ViewBase.<\/p>\n<p>Nast\u0119pnie generujemy kod.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Generowanie_kodu_i_otwarcie_projektu_w_CubeIDE\"><\/span>Generowanie kodu i otwarcie projektu w CubeIDE<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Przejd\u017a do:<\/p>\n<p>Aplikacja \u2192 U\u017cytkownik \u2192 GUI \u2192 Screen1View.cpp<\/p>\n<p>&nbsp;<\/p>\n<p>TouchGFX ju\u017c wygenerowa\u0142o wywo\u0142anie funkcji zwrotnej w klasie bazowej.<\/p>\n<p>Teraz zaimplementujemy t\u0119 logik\u0119 w pliku Screen1View.cpp:<\/p>\n<pre>void Screen1View::sliderChange(int value)\n{\n\/\/ Przekszta\u0142\u0107 zakres suwaka (0\u2013200) na zakres warto\u015bci alfa (0\u2013255)\nuint8_t alpha = (value * 255) \/ 200;\n\nbox1.setAlpha(alpha);\nbox1.invalidate();\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Pami\u0119taj, \u017ceby doda\u0107 t\u0119 deklaracj\u0119 w pliku Screen1View.hpp:<\/p>\n<p>virtual void sliderChange(int value);<\/p>\n<p>To ca\u0142a potrzebna logika \u2013 \u017cadnych sterownik\u00f3w sprz\u0119towych ani kodu HAL.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Testowanie_projektu_symulator_i_programowanie_ukladu_docelowego\"><\/span>Testowanie projektu: symulator i programowanie uk\u0142adu docelowego<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Powr\u00f3t do TouchGFX Designer:<\/p>\n<ul>\n<li>Kliknij <strong>\u201eUruchom symulator\u201d<\/strong> (druga r\u00f3\u017cowa ikona)<br \/>\n\u2192 Mo\u017cesz od razu przetestowa\u0107 suwak jasno\u015bci bez u\u017cycia sprz\u0119tu.<\/li>\n<li>Kliknij <strong>\u201eProgram\u201d i \u201eRun Target\u201d<\/strong> (trzecia r\u00f3\u017cowa ikona lub <strong>klawisz F6<\/strong>)<br \/>\n\u2192 Spowoduje to skompilowanie, wgranie i uruchomienie firmware bezpo\u015brednio na twojej p\u0142ytce Nucleo.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Podsumowanie\"><\/span>Podsumowanie<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>W tym poradniku poka\u017cemy, jak szybko mo\u017cesz:<\/p>\n<ul>\n<li>Utw\u00f3rz projekt TouchGFX<\/li>\n<li>Dodaj elementy interfejsu u\u017cytkownika<\/li>\n<li>Po\u0142\u0105cz interakcje z wid\u017cetami<\/li>\n<li>Zaimplementuj prost\u0105 logik\u0119 w C++<\/li>\n<li>Generuj i kompiluj kod<\/li>\n<li>Wpisuj kod bezpo\u015brednio z programu TouchGFX Designer<\/li>\n<li>I uruchom to na dowolnej p\u0142ytce Nucleo po\u0142\u0105czonej z wy\u015bwietlaczem Riverdi<\/li>\n<\/ul>\n<p>Dzi\u0119ki modu\u0142om firmy Riverdi opartym na STM32 oraz ekosystemowi Nucleo firmy ST tworzenie interaktywnych GUI staje si\u0119 szybkie, przewidywalne i przyjazne dla programist\u00f3w.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym poradniku poka\u017cemy, jak stworzy\u0107 prost\u0105 aplikacj\u0119 z GUI przy u\u017cyciu TouchGFX i uruchomi\u0107 j\u0105 na trzech r\u00f3\u017cnych p\u0142ytkach STM32 Nucleo po\u0142\u0105czonych z wy\u015bwietlaczami Riverdi. Ten przewodnik jest w pe\u0142ni samowystarczalny, wi\u0119c mo\u017cesz wykona\u0107 ka\u017cdy krok bez ogl\u0105dania do\u0142\u0105czonego filmiku. Niezale\u017cnie od tego, czy sprawdzasz modu\u0142y Riverdi, czy dopiero zaczynasz przygod\u0119 z TouchGFX, ten [&hellip;]<\/p>\n","protected":false},"author":2659,"featured_media":132843,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[5043],"tags":[],"class_list":["post-132842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wyswietlacz-101"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI 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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX - Riverdi\" \/>\n<meta property=\"og:description\" content=\"W tym poradniku poka\u017cemy, jak stworzy\u0107 prost\u0105 aplikacj\u0119 z GUI przy u\u017cyciu TouchGFX i uruchomi\u0107 j\u0105 na trzech r\u00f3\u017cnych p\u0142ytkach STM32 Nucleo po\u0142\u0105czonych z wy\u015bwietlaczami Riverdi. Ten przewodnik jest w pe\u0142ni samowystarczalny, wi\u0119c mo\u017cesz wykona\u0107 ka\u017cdy krok bez ogl\u0105dania do\u0142\u0105czonego filmiku. Niezale\u017cnie od tego, czy sprawdzasz modu\u0142y Riverdi, czy dopiero zaczynasz przygod\u0119 z TouchGFX, ten [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-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=\"article:modified_time\" content=\"2026-09-08T13:41:40+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=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kacper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\"},\"author\":{\"name\":\"Kacper\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"headline\":\"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX\",\"datePublished\":\"2025-12-23T09:51:48+00:00\",\"dateModified\":\"2026-09-08T13:41:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\"},\"wordCount\":813,\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"articleSection\":[\"Wy\u015bwietlacz 101\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\",\"url\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\",\"name\":\"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX - Riverdi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-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\",\"dateModified\":\"2026-09-08T13:41:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-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\\\/pl\\\/blog\\\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Front Page\",\"item\":\"https:\\\/\\\/riverdi.com\\\/pl\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl#website\",\"url\":\"https:\\\/\\\/riverdi.com\\\/pl\",\"name\":\"Riverdi\",\"description\":\"Global TFT LCD Manufacturer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/riverdi.com\\\/pl?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/pl#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\",\"name\":\"Kacper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@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":"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI 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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui","og_locale":"pl_PL","og_type":"article","og_title":"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX - Riverdi","og_description":"W tym poradniku poka\u017cemy, jak stworzy\u0107 prost\u0105 aplikacj\u0119 z GUI przy u\u017cyciu TouchGFX i uruchomi\u0107 j\u0105 na trzech r\u00f3\u017cnych p\u0142ytkach STM32 Nucleo po\u0142\u0105czonych z wy\u015bwietlaczami Riverdi. Ten przewodnik jest w pe\u0142ni samowystarczalny, wi\u0119c mo\u017cesz wykona\u0107 ka\u017cdy krok bez ogl\u0105dania do\u0142\u0105czonego filmiku. Niezale\u017cnie od tego, czy sprawdzasz modu\u0142y Riverdi, czy dopiero zaczynasz przygod\u0119 z TouchGFX, ten [&hellip;]","og_url":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui","og_site_name":"Riverdi","article_publisher":"https:\/\/www.facebook.com\/riverdi.displays\/","article_published_time":"2025-12-23T09:51:48+00:00","article_modified_time":"2026-09-08T13:41:40+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":{"Napisane przez":"Kacper","Szacowany czas czytania":"4 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#article","isPartOf":{"@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui"},"author":{"name":"Kacper","@id":"https:\/\/riverdi.com\/pl#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"headline":"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX","datePublished":"2025-12-23T09:51:48+00:00","dateModified":"2026-09-08T13:41:40+00:00","mainEntityOfPage":{"@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui"},"wordCount":813,"image":{"@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","articleSection":["Wy\u015bwietlacz 101"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui","url":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui","name":"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX - Riverdi","isPartOf":{"@id":"https:\/\/riverdi.com\/pl#website"},"primaryImageOfPage":{"@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#primaryimage"},"image":{"@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-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","dateModified":"2026-09-08T13:41:40+00:00","author":{"@id":"https:\/\/riverdi.com\/pl#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"breadcrumb":{"@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/riverdi.com\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-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\/pl\/blog\/pierwsze-kroki-ze-stm32-nucleo-riverdi-wyswietlacze-z-interfejsem-touchgfx-gui#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Front Page","item":"https:\/\/riverdi.com\/pl"},{"@type":"ListItem","position":2,"name":"Pierwsze kroki z wy\u015bwietlaczami STM32 Nucleo Riverdi z GUI TouchGFX"}]},{"@type":"WebSite","@id":"https:\/\/riverdi.com\/pl#website","url":"https:\/\/riverdi.com\/pl","name":"Riverdi","description":"Global TFT LCD Manufacturer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/riverdi.com\/pl?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/riverdi.com\/pl#\/schema\/person\/07605024d6619f9bd872665515d9bbfa","name":"Kacper","image":{"@type":"ImageObject","inLanguage":"pl-PL","@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\/pl\/wp-json\/wp\/v2\/posts\/132842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/users\/2659"}],"replies":[{"embeddable":true,"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/comments?post=132842"}],"version-history":[{"count":1,"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/posts\/132842\/revisions"}],"predecessor-version":[{"id":132882,"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/posts\/132842\/revisions\/132882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/media\/132843"}],"wp:attachment":[{"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/media?parent=132842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/categories?post=132842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/riverdi.com\/pl\/wp-json\/wp\/v2\/tags?post=132842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}