{"id":129675,"date":"2025-11-25T13:54:31","date_gmt":"2025-11-25T12:54:31","guid":{"rendered":"https:\/\/riverdi.com\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"modified":"2026-05-11T15:24:39","modified_gmt":"2026-05-11T13:24:39","slug":"getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","status":"publish","type":"post","link":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","title":{"rendered":"Erste Schritte mit LVGL auf Riverdi STM32 Display &#8211; vollst\u00e4ndige Anleitung"},"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-lvgl-on-riverdi-stm32-display-full-guide\/#Hardware\" >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-lvgl-on-riverdi-stm32-display-full-guide\/#Verbindungen\" >Verbindungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Software\" >Software<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Klonen_Sie_das_Projekt\" >Klonen Sie das Projekt<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Optional_Klonen_Sie_die_neueste_LVGL-Bibliothek\" >Optional: Klonen Sie die neueste LVGL-Bibliothek<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Importieren_des_Projekts_in_STM32CubeIDE\" >Importieren des Projekts in STM32CubeIDE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#LVGL-Beispiel_erstellen_und_ausfuehren\" >LVGL-Beispiel erstellen und ausf\u00fchren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Unser_eigenes_Beispiel_erstellen\" >Unser eigenes Beispiel erstellen<\/a><\/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-lvgl-on-riverdi-stm32-display-full-guide\/#Analyse_unseres_Codes\" >Analyse unseres Codes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Naechste_Schritte\" >N\u00e4chste Schritte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Zusammenfassung\" >Zusammenfassung<\/a><\/li><\/ul><\/nav><\/div>\n<p>Diese Anleitung zeigt Ihnen, wie Sie ein Riverdi STM32H7-Display mit <strong>LVGL<\/strong> zum Leben erwecken &#8211; vom Klonen des Repositorys bis zum Ausf\u00fchren Ihrer ersten benutzerdefinierten Oberfl\u00e4che mit einem Bild und einer Schaltfl\u00e4che.<br \/>\nSie werden lernen, wie man:<\/p>\n<ul>\n<li>die Hardware anschlie\u00dfen,<\/li>\n<li>\u00f6ffnen und erstellen Sie das Projekt in <strong>STM32CubeIDE<\/strong>,<\/li>\n<li>f\u00fchren Sie die LVGL-Demo aus,<\/li>\n<li>und erstellen Sie eine einfache benutzerdefinierte Oberfl\u00e4che mit dem Riverdi-Logo und einer interaktiven Schaltfl\u00e4che.<\/li>\n<\/ul>\n<p>Am Ende werden Sie eine funktionierende Grundlage f\u00fcr Ihr eigenes LVGL-basiertes GUI-Projekt auf den STM32 Embedded Displays von Riverdi haben.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Hardware\"><\/span>Hardware<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"table-wrapper\">\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: left;\">Riverdi Display<\/td>\n<td style=\"text-align: left;\"><strong>RVT101HVLNWC00-B<\/strong><\/td>\n<td style=\"text-align: left;\">10,1&#8243; IPS, STM32H7-basiertes Embedded-Display<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Programmierger\u00e4t<\/td>\n<td style=\"text-align: left;\"><strong>ST-Link V3<\/strong><\/td>\n<td style=\"text-align: left;\">Angeschlossen an SWD Molex auf der R\u00fcckseite des Displays<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Stromversorgung<\/td>\n<td style=\"text-align: left;\">12 V GLEICHSTROM<\/td>\n<td style=\"text-align: left;\">Angeschlossen an den Molex Stromeingang<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Kabel<\/td>\n<td style=\"text-align: left;\">Micro-USB \u00d72<\/td>\n<td style=\"text-align: left;\">Eines f\u00fcr ST-Link, eines f\u00fcr die Stromversorgung (bei Stromversorgung \u00fcber USB)<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">PC<\/td>\n<td style=\"text-align: left;\">Windows\/Linux\/macOS<\/td>\n<td style=\"text-align: left;\">Mit installiertem STM32CubeIDE<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Verbindungen\"><\/span>Verbindungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das STM32H7-Display verwendet zwei Molex-Anschl\u00fcsse:<\/p>\n<ul>\n<li><strong>SWD (Programmierung)<\/strong> &#8211; schlie\u00dfen Sie hier Ihren ST-Link an.<\/li>\n<li><strong>Power (12 V)<\/strong> &#8211; f\u00fcr externe Stromversorgung.<\/li>\n<\/ul>\n<p>\u26a0\ufe0f Schalten Sie das Display nicht zum ersten Mal ein und schlie\u00dfen Sie ST-Link nicht gleichzeitig an, ohne die richtige Polarit\u00e4t zu \u00fcberpr\u00fcfen.<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127562\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware.jpg\" alt=\"\" width=\"826\" height=\"400\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware.jpg 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-300x145.jpg 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-768x372.jpg 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-600x291.jpg 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-64x31.jpg 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Software\"><\/span>Software<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"table-wrapper\">\n<table>\n<thead>\n<tr>\n<td style=\"text-align: left;\"><strong>Werkzeug<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Zweck<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Herunterladen<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>STM32CubeIDE<\/strong><\/td>\n<td style=\"text-align: left;\">Entwicklung, Build &amp; Flash<\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.st.com\/en\/development-tools\/stm32cubeide.html\">STMicroelectronics<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>LVGL Project Creator<\/strong><\/td>\n<td style=\"text-align: left;\">Projektvorlagen f\u00fcr Riverdi-Displays<\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/lvgl.io\">LVGL.io<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Git<\/strong> (optional)<\/td>\n<td style=\"text-align: left;\">Repositories klonen<\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/git-scm.com\">Git SCM<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Klonen_Sie_das_Projekt\"><\/span>Klonen Sie das Projekt<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mit dem LVGL Project Creator k\u00f6nnen Sie das Projekt f\u00fcr die von Ihnen verwendete Bildschirmgr\u00f6\u00dfe herunterladen. Geben Sie einfach Riverdi in die Suchleiste auf der linken Seite ein, w\u00e4hlen Sie das entsprechende Projekt aus und dr\u00fccken Sie auf Download, wie Sie auf dem Bild unten sehen k\u00f6nnen. <\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127567\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator.png\" alt=\"\" width=\"940\" height=\"508\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator.png 940w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-300x162.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-768x415.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-600x324.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-64x35.png 64w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Optional_Klonen_Sie_die_neueste_LVGL-Bibliothek\"><\/span>Optional: Klonen Sie die neueste LVGL-Bibliothek<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn Sie sich nicht sicher sind, ob die LVGL-Bibliothek, die Sie in Ihrem Projekt haben, die neueste ist oder Sie sie einfach nur aktualisieren m\u00f6chten, k\u00f6nnen Sie einfach den Inhalt des Verzeichnisses l\u00f6schen und die Bibliothek manuell herunterladen. Geben Sie dazu einfach Folgendes in Ihr CLI ein: <\/p>\n<p><em>cd riverdi-lvgl-101\/Middlewares\/Dritte\/Partei\/  <\/em><\/p>\n<p><em>git clone https:\/\/github.com\/lvgl\/lvgl.git lvgl<\/em><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Importieren_des_Projekts_in_STM32CubeIDE\"><\/span>Importieren des Projekts in STM32CubeIDE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\u00d6ffnen Sie <strong>STM32CubeIDE<\/strong>.<\/li>\n<li>Gehen Sie zu <strong>Datei \u2192 Projekte aus dem Dateisystem \u00f6ffnen&#8230;<\/strong><\/li>\n<li>Klicken Sie auf <strong>Verzeichnis&#8230;,<\/strong> w\u00e4hlen Sie das Unterverzeichnis STM32CubeIDE Ihres geklonten Ordners riverdi-lvgl-101.<\/li>\n<li>Klicken Sie auf <strong>Fertig stellen<\/strong>.<\/li>\n<\/ol>\n<p>Das Projekt wird nun im <strong>Projekt-Explorer<\/strong> angezeigt <strong>.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127575\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube.png\" alt=\"\" width=\"938\" height=\"622\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube.png 938w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-300x199.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-768x509.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-600x398.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-64x42.png 64w\" sizes=\"(max-width: 938px) 100vw, 938px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"LVGL-Beispiel_erstellen_und_ausfuehren\"><\/span>LVGL-Beispiel erstellen und ausf\u00fchren<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u00d6ffnen Sie die Datei main.c, die sich in CM7\/Application\/User\/Core befindet. Nach allen Initialisierungen sollte es eine Funktion<em> lv_demo_widgets()<\/em> geben, die vor PWM und Kernel aufgerufen wird. <\/p>\n<p>Sie k\u00f6nnen das Projekt erstellen, indem Sie Strg+B oder das Hammersymbol oben links auf dem Bildschirm dr\u00fccken. Der Erstellungsprozess sollte einige Zeit in Anspruch nehmen, bis zu ein paar Minuten. Wenn Sie irgendwelche Warnungen sehen, sollte alles in Ordnung sein. Dies kann durch neue Versionen der LVGL-Bibliothek oder von CubeIDE verursacht werden.  <\/p>\n<p>Wenn Sie sich weitere LVGL-Beispiele ansehen und deren Code analysieren m\u00f6chten, m\u00fcssen Sie nur Middlewares\/LVGL\/lvgl\/examples \u00f6ffnen und eines der Beispiele Ihrer Wahl an der Stelle aufrufen, an der <em>lv_demo_widgets()<\/em> aufgerufen wird.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Unser_eigenes_Beispiel_erstellen\"><\/span>Unser eigenes Beispiel erstellen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wir werden unser eigenes Beispiel mit einem Bild und einer Schaltfl\u00e4che erstellen, die die Farbe des Bildschirms in eine unserer Riverdi-Farben \u00e4ndert.<\/p>\n<p><strong>Schritt 1 &#8211; Bereiten Sie das Riverdi-Logo vor<\/strong><\/p>\n<ol>\n<li>Laden Sie das<strong> Riverdi-Logo<\/strong> von der <a href=\"https:\/\/riverdi.com\/de\/mediathek\">Riverdi-Website<\/a> herunter.<\/li>\n<li>\u00d6ffnen Sie den <a href=\"https:\/\/lvgl.io\/tools\/imageconverter\">LVGL Image Converter<\/a>.<\/li>\n<li>W\u00e4hlen Sie das Farbformat: <strong>RGB565<\/strong><\/li>\n<li>Klicken Sie auf &#8222;Konvertieren&#8220; und laden Sie die generierte .c-Datei herunter.<\/li>\n<li>Legen Sie sie neben Ihre Datei main.c.<\/li>\n<li>F\u00fcgen Sie diese Zeile am Anfang von main.c ein:\n<ul>\n<li><em>extern const lv_image_dsc_t riverdi_logo;<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>Hinweis<\/strong>: Wenn Ihr Bild einen schwarzen Hintergrund hat, liegt das am .png Format &#8211; kein Hintergrund wird vom Image Converter in 0x00 &#8211; schwarze Farbe &#8211; \u00fcbersetzt. Wenn Sie ihn wei\u00df machen wollen, tauschen Sie in Ihrer IDE oder Ihrem Texteditor einfach alle 0x00 in 0xff aus. <\/p>\n<p><strong>Schritt 2 &#8211; Hinzuf\u00fcgen einer neuen Quelldatei<\/strong><\/p>\n<p>Erstellen Sie in STM32CubeIDE eine neue Datei:<\/p>\n<p>Anwendung\/Benutzer\/Core\/ui_riverdi_logo.c<\/p>\n<pre>#include \"lvgl.h\"\nextern const lv_image_dsc_t riverdi_logo;\n\nstatic lv_color_t colors[3];\nstatic uint8_t color_index = 0;\nstatic lv_obj_t * scr;\n\nstatic void color_btn_event_cb(lv_event_t * e)\n{\ncolor_index = (color_index + 1) % 3;\nlv_obj_set_style_bg_color(scr, farben[color_index], LV_PART_MAIN);\n}\n\nvoid ui_riverdi_logo_create(void)\n{\nfarben[0] = lv_color_make(0, 0, 255); \/\/ Blau\ncolors[1] = lv_color_make(0, 255, 0); \/\/ Gr\u00fcn\ncolors[2] = lv_color_make(255, 0, 0); \/\/ Rot\n\nscr = lv_obj_create(NULL);\nlv_obj_set_style_bg_color(scr, farben[color_index], LV_PART_MAIN);\nlv_screen_load(scr);\n\nlv_obj_t * img = lv_image_create(scr);\nlv_image_set_src(img, &amp;riverdi_logo);\nlv_obj_align(img, LV_ALIGN_CENTER, 0, -40);\n\nlv_obj_t * btn = lv_button_create(scr);\nlv_obj_align(btn, LV_ALIGN_CENTER, 0, 100);\nlv_obj_add_event_cb(btn, color_btn_event_cb, LV_EVENT_CLICKED, NULL);\n\nlv_obj_t * label = lv_label_create(btn);\nlv_label_set_text(label, \"Farbe \u00e4ndern\");\nlv_obj_center(label);\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Schritt 3 &#8211; Aufruf der Funktion<\/strong><\/p>\n<p>\u00d6ffnen Sie main.c erneut und ersetzen Sie <em>lv_demo_widgets();<\/em> durch <em>ui_riverdi_logo_create();<\/em><\/p>\n<p>Erstellen Sie dann das Projekt und flashen Sie es.<\/p>\n<p><strong>Hinweis<\/strong>: Wenn ein Build-Fehler auftritt, bauen Sie neu auf &#8211; CubeIDE indiziert neue Dateien manchmal falsch.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Analyse_unseres_Codes\"><\/span>Analyse unseres Codes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><em>void color_btn_event_cb()<\/em> &#8211; diese Funktion ist eine Ereignisfunktion, die aufgerufen wird, wenn die Schaltfl\u00e4che gedr\u00fcckt wird. In ihrem Body \u00e4ndern wir die Hintergrundfarbe (bg) in eine der Farben aus dem Array colors[]. <\/p>\n<p><em>void ui_riverdi_logo_create()<\/em> &#8211; diese Funktion ist unsere gesamte Benutzeroberfl\u00e4che. Von oben nach unten: <\/p>\n<ul>\n<li>Wir erstellen den Bildschirm mit einer der Hintergrundfarben.<\/li>\n<li>Wir legen das Bild auf den Bildschirm und richten es an der Mitte aus. Die folgenden Zahlen sind X- und Y-Koordinaten von der Ausrichtungsposition. In diesem Beispiel bedeutet -40, dass wir das Bild 40 Pixel \u00fcber der Mitte des Bildschirms platzieren.  <\/li>\n<li>Dann erstellen wir die Schaltfl\u00e4che &#8211; indem wir ihr keinen Stil geben, beh\u00e4lt sie ihr Standardaussehen und -verhalten bei. Wir platzieren sie 100px unterhalb der Mitte, damit sie sich nicht mit dem Bild \u00fcberschneidet. <\/li>\n<li>Als letztes erstellen wir die Beschriftung der Schaltfl\u00e4che &#8211; &#8222;Farbe \u00e4ndern&#8220;. Um sie auf der Schaltfl\u00e4che anzubringen, \u00fcbergeben wir einfach die Schaltfl\u00e4che als Parameter in lv_label_create. <\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Naechste_Schritte\"><\/span>N\u00e4chste Schritte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sie haben jetzt eine funktionierende LVGL-Umgebung auf der STM32H7-Plattform von Riverdi.<br \/>\nVon hier aus k\u00f6nnen Sie:<\/p>\n<ul>\n<li>Weitere Widgets hinzuf\u00fcgen (Etiketten, Schieberegler, Diagramme)<\/li>\n<li>Touch-Gesten einbinden<\/li>\n<li>Erkunden Sie Animationen und Themen<\/li>\n<\/ul>\n<div class=\"table-wrapper\">\n<table>\n<thead>\n<tr>\n<td style=\"text-align: left;\"><strong>Ressource<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Link<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>LVGL-Dokumentation<\/strong><\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/docs.lvgl.io\">https:\/\/docs.lvgl.io<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Riverdi GitHub<\/strong><\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/github.com\/riverdi\">https:\/\/github.com\/riverdi<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>LVGL Projekt Sch\u00f6pfer<\/strong><\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/lvgl.io\/tools\/project-creator\">https:\/\/lvgl.io\/tools\/project-creator<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\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>Sie haben gerade:<\/p>\n<ol>\n<li>Klonen und \u00f6ffnen Sie das LVGL-Projekt f\u00fcr das Riverdi STM32H7-Display,<\/li>\n<li>F\u00fchren Sie die LVGL-Demo-Anwendung aus,<\/li>\n<li>Erstellen Sie Ihren eigenen benutzerdefinierten Bildschirm mit einem Bild und einer Schaltfl\u00e4che.<\/li>\n<\/ol>\n<p>Dieser Workflow ist die perfekte Grundlage f\u00fcr die Entwicklung <strong>professioneller GUIs<\/strong> auf den eingebetteten Displays von Riverdi unter Verwendung von LVGL.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe style=\"aspect-ratio: 16\/9;\" title=\"\" src=\"https:\/\/www.youtube.com\/embed\/IE_kVkU9eMQ\" width=\"100%\" height=\"auto\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\">&lt;\/ifram<\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diese Anleitung zeigt Ihnen, wie Sie ein Riverdi STM32H7-Display mit LVGL zum Leben erwecken &#8211; vom Klonen des Repositorys bis zum Ausf\u00fchren Ihrer ersten benutzerdefinierten Oberfl\u00e4che mit einem Bild und einer Schaltfl\u00e4che. Sie werden lernen, wie man: die Hardware anschlie\u00dfen, \u00f6ffnen und erstellen Sie das Projekt in STM32CubeIDE, f\u00fchren Sie die LVGL-Demo aus, und erstellen [&hellip;]<\/p>\n","protected":false},"author":2659,"featured_media":127559,"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-129675","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 LVGL auf Riverdi STM32 Display - vollst\u00e4ndige Anleitung - 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-lvgl-on-riverdi-stm32-display-full-guide\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erste Schritte mit LVGL auf Riverdi STM32 Display - vollst\u00e4ndige Anleitung - Riverdi\" \/>\n<meta property=\"og:description\" content=\"Diese Anleitung zeigt Ihnen, wie Sie ein Riverdi STM32H7-Display mit LVGL zum Leben erwecken &#8211; vom Klonen des Repositorys bis zum Ausf\u00fchren Ihrer ersten benutzerdefinierten Oberfl\u00e4che mit einem Bild und einer Schaltfl\u00e4che. Sie werden lernen, wie man: die Hardware anschlie\u00dfen, \u00f6ffnen und erstellen Sie das Projekt in STM32CubeIDE, f\u00fchren Sie die LVGL-Demo aus, und erstellen [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\" \/>\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-11-25T12:54:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-11T13:24:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.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=\"6\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-lvgl-on-riverdi-stm32-display-full-guide#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"},\"author\":{\"name\":\"Kacper\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"headline\":\"Erste Schritte mit LVGL auf Riverdi STM32 Display &#8211; vollst\u00e4ndige Anleitung\",\"datePublished\":\"2025-11-25T12:54:31+00:00\",\"dateModified\":\"2026-05-11T13:24:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"},\"wordCount\":1059,\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"articleSection\":[\"Anzeige 101\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\",\"url\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\",\"name\":\"Erste Schritte mit LVGL auf Riverdi STM32 Display - vollst\u00e4ndige Anleitung - Riverdi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"datePublished\":\"2025-11-25T12:54:31+00:00\",\"dateModified\":\"2026-05-11T13:24:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\",\"url\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"contentUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"width\":1280,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/de\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Front Page\",\"item\":\"https:\\\/\\\/riverdi.com\\\/de\\\/titelblatt\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erste Schritte mit LVGL auf Riverdi STM32 Display &#8211; vollst\u00e4ndige Anleitung\"}]},{\"@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 LVGL auf Riverdi STM32 Display - vollst\u00e4ndige Anleitung - 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-lvgl-on-riverdi-stm32-display-full-guide","og_locale":"de_DE","og_type":"article","og_title":"Erste Schritte mit LVGL auf Riverdi STM32 Display - vollst\u00e4ndige Anleitung - Riverdi","og_description":"Diese Anleitung zeigt Ihnen, wie Sie ein Riverdi STM32H7-Display mit LVGL zum Leben erwecken &#8211; vom Klonen des Repositorys bis zum Ausf\u00fchren Ihrer ersten benutzerdefinierten Oberfl\u00e4che mit einem Bild und einer Schaltfl\u00e4che. Sie werden lernen, wie man: die Hardware anschlie\u00dfen, \u00f6ffnen und erstellen Sie das Projekt in STM32CubeIDE, f\u00fchren Sie die LVGL-Demo aus, und erstellen [&hellip;]","og_url":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","og_site_name":"Riverdi","article_publisher":"https:\/\/www.facebook.com\/riverdi.displays\/","article_published_time":"2025-11-25T12:54:31+00:00","article_modified_time":"2026-05-11T13:24:39+00:00","og_image":[{"width":1280,"height":600,"url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.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":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#article","isPartOf":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"author":{"name":"Kacper","@id":"https:\/\/riverdi.com\/de#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"headline":"Erste Schritte mit LVGL auf Riverdi STM32 Display &#8211; vollst\u00e4ndige Anleitung","datePublished":"2025-11-25T12:54:31+00:00","dateModified":"2026-05-11T13:24:39+00:00","mainEntityOfPage":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"wordCount":1059,"image":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","articleSection":["Anzeige 101"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","url":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","name":"Erste Schritte mit LVGL auf Riverdi STM32 Display - vollst\u00e4ndige Anleitung - Riverdi","isPartOf":{"@id":"https:\/\/riverdi.com\/de#website"},"primaryImageOfPage":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage"},"image":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","datePublished":"2025-11-25T12:54:31+00:00","dateModified":"2026-05-11T13:24:39+00:00","author":{"@id":"https:\/\/riverdi.com\/de#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"breadcrumb":{"@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage","url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","contentUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","width":1280,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/riverdi.com\/de\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Front Page","item":"https:\/\/riverdi.com\/de\/titelblatt"},{"@type":"ListItem","position":2,"name":"Erste Schritte mit LVGL auf Riverdi STM32 Display &#8211; vollst\u00e4ndige Anleitung"}]},{"@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\/129675","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=129675"}],"version-history":[{"count":1,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/posts\/129675\/revisions"}],"predecessor-version":[{"id":129678,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/posts\/129675\/revisions\/129678"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/media\/127559"}],"wp:attachment":[{"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/media?parent=129675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/categories?post=129675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/riverdi.com\/de\/wp-json\/wp\/v2\/tags?post=129675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}