{"id":2874,"date":"2024-09-28T16:33:26","date_gmt":"2024-09-28T16:33:26","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=2874"},"modified":"2024-09-28T16:33:27","modified_gmt":"2024-09-28T16:33:27","slug":"getting-started-with-touchgfx-send-data-to-ui","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=2874","title":{"rendered":"Getting Started with TouchGFX: Send Data to 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-3.png\" alt=\"\" class=\"wp-image-2875\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-3.png 464w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-3-300x70.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-3-400x94.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-3-250x59.png 250w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/figure><\/div>\n\n\n<p>In this fourth part of TouchGFX guide, we shall use the communication to update the UI element. <\/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>Backend communication.<\/li>\n\n\n\n<li>UI setup.<\/li>\n\n\n\n<li>Firmware development.<\/li>\n\n\n\n<li>Results.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Backend Communication:<\/h2>\n\n\n\n<p>In most applications, the UI needs to be connected to the rest of your system somehow, and send and receive data. This could be interfacing with hardware peripherals (sensor data, A\/D conversions, serial communication, &#8230;) or interfacing with other software modules.<\/p>\n\n\n\n<p>This article describes the recommended solutions for implementing this connection.<\/p>\n\n\n\n<p>The first method is a\u00a0&#8220;quick-and-dirty<a href=\"https:\/\/support.touchgfx.com\/docs\/development\/ui-development\/touchgfx-engine-features\/backend-communication#sampling-from-gui-task\">&#8220;<\/a>\u00a0approach, primarily intended for prototyping, whereas the\u00a0second<a href=\"https:\/\/support.touchgfx.com\/docs\/development\/ui-development\/touchgfx-engine-features\/backend-communication#sampling-from-secondary-task\"> <\/a>method\u00a0is an architecturally sound way of properly connecting the UI with the remaining components in a real world application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sampling-from-gui-task\">Sampling from GUI Task<\/h3>\n\n\n\n<p>The best way of interfacing with surrounding system depends on how frequently you need to sample, how time consuming it is and how time critical it is.<\/p>\n\n\n\n<p>If your requirements in those regards are lenient, the simplest approach is to just sample the surrounding system directly in the&nbsp;<code>Model::tick<\/code>&nbsp;function.<\/p>\n\n\n\n<p>If the sampling occurs less frequently than your frame rate (typically around 60Hz), you can just add a counter and only do the sampling every Nth tick. When done this way, your sampling operation must be somewhat fast (typically 1ms or less), otherwise your frame rate will begin to suffer, since the sampling is done in the context of the GUI task and will delay drawing the frame.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sampling-from-secondary-task\">Sampling from Secondary Task<\/h3>\n\n\n\n<p>Alternatively, if it is not desirable to place the interaction with the surrounding system directly within the context of the GUI task, you can create a new OS task responsible for doing the sampling.<\/p>\n\n\n\n<p>You can configure this task to run at the exact time intervals you need for your specific scenario. Also depending on your needs this new task can have a lower or higher priority than the GUI task.<\/p>\n\n\n\n<p>If it has a higher priority, then you are guaranteed that it runs at exactly the times you have specified, regardless of what the GUI task is doing. This has the drawback that if it is a CPU consuming process it might impact the frame rate of the UI.<\/p>\n\n\n\n<p>If on the other hand the sampling is not time critical, you can assign the task a lower priority than the GUI task, such that the UI frame rate is never affected by the sampling of the surrounding system. The GUI task will sleep a lot while rendering (e.g. when waiting for a DMA-based pixel transfer to complete) so lower priority tasks will be allowed to run quite frequently and this is therefore sufficient for the vast majority of applications.<\/p>\n\n\n\n<p>If you use the secondary task approach, we recommend that you take advantage of the inter-task messaging system that is provided by your RTOS. Most, if not all, RTOSes have a queue\/mail mechanism which allows you to send data (typically user-defined C structs, byte arrays or simple integers) from one task to another. In order to communicate new data to the GUI task, set up a mailbox or message queue for the UI task, and send the data to the GUI task using this messaging system. You can then&nbsp;<code>Model::tick<\/code>&nbsp;poll the mailbox of the GUI task to check if any new data has arrived. In case, read the data and update the UI accordingly.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. UI Setup:<\/h2>\n\n\n\n<p>Open TouchGFX designer and create new project as following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><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-1-1024x257.jpg\" alt=\"\" class=\"wp-image-2826\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-1024x257.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-300x75.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-768x193.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-1536x386.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-2048x514.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-1150x289.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-750x188.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-400x100.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-10-07-1-250x63.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then select your board, give the project a name and click on create.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><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-1-1024x615.jpg\" alt=\"\" class=\"wp-image-2827\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-1024x615.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-300x180.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-768x461.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-1536x922.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-2048x1230.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-1150x690.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-750x450.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-400x240.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-08_08-11-33-1-250x150.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After the project has  been created, add gauge widget, set minimum to 0, maximum to 1000 and initial value to 0 as following.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-1024x622.jpg\" alt=\"\" class=\"wp-image-2876\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-1024x622.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-300x182.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-768x466.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-1536x933.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-2048x1244.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-1150x698.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-750x455.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-400x243.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-10-05-250x152.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Finally click on generate code or simply, press F3.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>That all for the UI.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Firmware Development:<\/h2>\n\n\n\n<p>Next, we shall go to the following 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\\STM32CubeIDE<\/pre><\/div>\n\n\n\n<p>Open the .project file and this will open the project within STM32CubeIDE as following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"388\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-1024x388.jpg\" alt=\"\" class=\"wp-image-2833\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-1024x388.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-300x114.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-768x291.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-1536x582.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-2048x775.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-1150x435.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-750x284.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-400x151.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-51-250x95.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, select the work space and click on Launch as following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"624\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-1024x624.jpg\" alt=\"\" class=\"wp-image-2834\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-1024x624.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-300x183.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-768x468.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-1150x701.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-750x457.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-400x244.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40-250x152.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-10-40.jpg 1188w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Wait until this window appears:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"286\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36-1024x286.jpg\" alt=\"\" class=\"wp-image-2835\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36-1024x286.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36-300x84.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36-768x215.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36-750x210.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36-400x112.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36-250x70.jpg 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-36.jpg 1030w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Open Model.cpp from Application, user, GUI, then open modelLister.hpp as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"195\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-1024x195.jpg\" alt=\"\" class=\"wp-image-2877\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-1024x195.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-300x57.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-768x146.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-1536x292.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-2048x389.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-1150x219.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-750x143.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-400x76.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-16-10-250x48.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once the hpp header has been opened, in public section of the class, add 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;}\">virtual void UpdateGauge(unsigned int value){}<\/pre><\/div>\n\n\n\n<p>Save the project since CubeIDE won&#8217;t save it.<\/p>\n\n\n\n<p>Add the same function in the screen1viewer and screen1presenter header file as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"189\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-1024x189.jpg\" alt=\"\" class=\"wp-image-2878\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-1024x189.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-300x55.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-768x142.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-1536x283.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-2048x378.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-1150x212.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-750x138.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-400x74.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-28_19-20-12-250x46.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In Model.cpp source file, declare the following two variables:<\/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;}\">unsigned int value;\nbool dir;<\/pre><\/div>\n\n\n\n<p>Value is the counter value.<\/p>\n\n\n\n<p>dir is direction, increment or decrement.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>In Model::tick function, add the following:<\/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;}\">\tif(dir==false)\/\/Increase\n\t{\n\t\tvalue++;\n\t\tif(value==1000)\n\t\t{\n\t\t\tvalue=1000;\n\t\t\tdir=true; \/\/change direction.\n\t\t}\n\t}\n\n\tif(dir==true)\/\/Decrease\n\t{\n\t\tvalue--;\n\t\tif(value==0)\n\t\t{\n\t\t\tvalue=0;\n\t\t\tdir=false; \/\/change direction.\n\t\t}\n\t}\n\tmodelListener-&gt;UpdateGauge(value);<\/pre><\/div>\n\n\n\n<p>This function shall be called every frame update (60Hz).<\/p>\n\n\n\n<p>The function shall increment or decrement the value according to the dir variable.<\/p>\n\n\n\n<p>After that, the modelListener shall send the data to update gauge function.<\/p>\n\n\n\n<p>Thats all for the model.cpp.<\/p>\n\n\n\n<p>Open Screen1Presenter.cpp source file then add 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 Screen1Presenter::UpdateGauge(unsigned int value)\n{\n\tview.UpdateGauge(value);\n}<\/pre><\/div>\n\n\n\n<p>This function shall be called when the modelListener call the update function, then this function shall call the same function but in the view file.<\/p>\n\n\n\n<p>In Screen1view.cpp source file:<\/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::UpdateGauge(unsigned int value)\n{\n\tgauge1.setValue(value);\n\tgauge1.invalidate();\n}<\/pre><\/div>\n\n\n\n<p>Here, the view shall update the gauge value.<\/p>\n\n\n\n<p>It is similar to the first part.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Save the project, build it and run it on your STM32H735G-DK board.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/07\/2024-07-12_15-03-3.jpg\" alt=\"\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. Results:<\/h2>\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-3-d35b54c6b3.gif\" alt=\"\" class=\"wp-image-2879\" \/><\/figure><\/div>\n\n\n<p>Happy coding \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this fourth part of TouchGFX guide, we shall use the communication to update the UI element. In this guide, we shall cover the following: 1. Backend Communication: In most applications, the UI needs to be connected to the rest of your system somehow, and send and receive data. This could be interfacing with hardware [&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,12],"tags":[],"class_list":["post-2874","post","type-post","status-publish","format-standard","hentry","category-embedded-systems","category-lcd","category-stm32"],"_links":{"self":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2874"}],"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=2874"}],"version-history":[{"count":1,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2874\/revisions"}],"predecessor-version":[{"id":2880,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2874\/revisions\/2880"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}