{"id":2803,"date":"2024-09-08T05:58:09","date_gmt":"2024-09-08T05:58:09","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=2803"},"modified":"2024-09-08T05:58:52","modified_gmt":"2024-09-08T05:58:52","slug":"getting-started-with-touchgfx-creating-your-first-ui","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=2803","title":{"rendered":"Getting Started with TouchGFX: Creating Your First UI"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"109\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images.png\" alt=\"\" class=\"wp-image-2804\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images.png 464w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-300x70.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-400x94.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-250x59.png 250w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>In this guide series, we shall use ST TouchGFX with supported hardware to create UI, control peripheral from UI and control the UI from peripheral.<\/p>\n\n\n\n<p>In this guide, we shall cover the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is TocuhGFX.<\/li>\n\n\n\n<li>Installing TouchGFX.<\/li>\n\n\n\n<li>Create First UI.<\/li>\n\n\n\n<li>Control UI element.<\/li>\n\n\n\n<li>Results.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. What is TocuhGFX:<\/h2>\n\n\n\n<p><strong>ouchGFX<\/strong>&nbsp;is a software framework developed by STMicroelectronics for creating advanced graphical user interfaces (GUIs) on embedded systems, particularly on STM32 microcontrollers. It provides a high-performance environment to design, develop, and deploy sophisticated UIs on resource-constrained devices like microcontrollers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Features:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Graphical Design Tools<\/strong>: TouchGFX Designer is an intuitive, drag-and-drop graphical design tool that allows developers to create UI layouts and animations without deep knowledge of coding.<\/li>\n\n\n\n<li><strong>Performance Optimization<\/strong>: It is optimized for low-power, resource-limited microcontrollers, ensuring smooth performance even with complex graphics.<\/li>\n\n\n\n<li><strong>Extensive Widget Library<\/strong>: The framework includes a rich set of pre-designed widgets like buttons, sliders, graphs, and animations, which can be easily customized.<\/li>\n\n\n\n<li><strong>Integration with STM32 Ecosystem<\/strong>: TouchGFX integrates seamlessly with STM32CubeMX, a configuration tool for STM32 microcontrollers, allowing easy setup and initialization of peripherals.<\/li>\n\n\n\n<li><strong>Hardware Acceleration Support<\/strong>: It leverages the hardware acceleration features available on STM32 microcontrollers, like Chrom-ART and DMA2D, to enhance graphic rendering performance.<\/li>\n\n\n\n<li><strong>Multilanguage Support<\/strong>: TouchGFX supports multiple languages, making it easier to create multilingual applications.<\/li>\n\n\n\n<li><strong>Scalability<\/strong>: Suitable for various display sizes and types, from simple monochrome displays to full-color TFT displays with high resolutions.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Applications:<\/h3>\n\n\n\n<p>TouchGFX is used in a wide range of applications, including home appliances, industrial control panels, medical devices, automotive displays, and consumer electronics, where an intuitive and visually appealing user interface is crucial.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Install TouchGFX:<\/h2>\n\n\n\n<p>ST made youtube video for how to install TouchGFX:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to TouchGFX: Installing TouchGFX Designer for STM32 GUI applications\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/OMeiG9jS-yk?start=276&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Create Your First UI:<\/h2>\n\n\n\n<p>Open TouchGFX then click on Create New as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"257\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1024x257.jpg\" alt=\"\" class=\"wp-image-2805\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1024x257.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-300x75.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-768x193.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1536x386.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-2048x514.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1150x289.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-750x188.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-400x100.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-250x63.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Then Select your board, in this case, STM32H735G-DK, give the project a name and click on create as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"615\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1024x615.jpg\" alt=\"\" class=\"wp-image-2806\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1024x615.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-300x180.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-768x461.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1536x922.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-2048x1230.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1150x690.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-750x450.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-400x240.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-250x150.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, window where you can put the UI element window appears.<\/p>\n\n\n\n<p>Create the following simple UI with slider and gauge as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-1024x624.jpg\" alt=\"\" class=\"wp-image-2807\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-1024x624.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-300x183.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-768x468.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-1536x936.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-2048x1248.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-1150x701.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-750x457.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-400x244.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-15-47-250x152.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Keep everything to default for now.<\/p>\n\n\n\n<p>Note: if the gauge seems big, click on it, from the right menu, select present and change the size from medium to small.<\/p>\n\n\n\n<p>Next create new interaction with the following parameters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Trigger: Slider value changed.<\/li>\n\n\n\n<li>Choose slider: slider1<\/li>\n\n\n\n<li>Action: Call virtual function.<\/li>\n\n\n\n<li>Function name: silderChanged.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-1024x604.jpg\" alt=\"\" class=\"wp-image-2808\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-1024x604.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-300x177.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-768x453.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-1536x906.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-2048x1208.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-1150x678.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-750x442.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-400x236.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-16-54-250x147.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next click on generate code then click on files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Control UI element:<\/h2>\n\n\n\n<p>After the folder of project has been opened, go to this folder first:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">ProjectLocation\\ProjectName\\TouchGFX\\gui\\include\\gui\\screen1_screen<\/pre><\/div>\n\n\n\n<p>Then open the Screen1View.hpp file with your favourite text editor (NotePad++ in this case):<\/p>\n\n\n\n<p>Within the header file declare the following function as virtual:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">virtual void silderChanged(int value);<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"305\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-1024x305.jpg\" alt=\"\" class=\"wp-image-2809\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-1024x305.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-300x89.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-768x229.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-1536x458.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-2048x610.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-1150x343.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-750x223.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-400x119.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-45-40-250x74.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, go to this folder:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">ProjectLocation\\ProjectName\\TouchGFX\\gui\\src\\screen1_screen<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Open Screen1View.cpp file with the text editor you prefer<\/p>\n\n\n\n<p>At the end of the source file, include the following function:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">void Screen1View::silderChanged(int value)\n{\n\tgauge1.setValue(value);\n\tgauge1.invalidate();\n}<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"260\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-1024x260.jpg\" alt=\"\" class=\"wp-image-2810\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-1024x260.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-300x76.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-768x195.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-1536x389.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-2048x519.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-1150x292.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-750x190.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-400x101.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-50-39-250x63.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Don&#8217;t forget to save changes.<\/p>\n\n\n\n<p>Next, TouchGFX editor, click on Program and Run Target as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-1024x624.jpg\" alt=\"\" class=\"wp-image-2811\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-1024x624.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-300x183.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-768x468.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-1536x936.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-2048x1249.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-1150x701.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-750x457.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-400x244.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-23-05_new-250x152.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Results:<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>You should get the following results.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"338\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/ezgif-5-aaf31881f6.gif\" alt=\"\" class=\"wp-image-2812\" \/><\/figure><\/div>\n\n\n<p>Happy coding \ud83d\ude09<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide series, we shall use ST TouchGFX with supported hardware to create UI, control peripheral from UI and control the UI from peripheral. In this guide, we shall cover the following: 1. What is TocuhGFX: ouchGFX&nbsp;is a software framework developed by STMicroelectronics for creating advanced graphical user interfaces (GUIs) on embedded systems, particularly [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,19,11,12],"tags":[],"class_list":["post-2803","post","type-post","status-publish","format-standard","hentry","category-embedded-systems","category-lcd","category-peripheral-drivers","category-stm32"],"_links":{"self":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2803"}],"collection":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2803"}],"version-history":[{"count":2,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2803\/revisions"}],"predecessor-version":[{"id":2814,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2803\/revisions\/2814"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}