{"id":2823,"date":"2024-09-15T05:13:30","date_gmt":"2024-09-15T05:13:30","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=2823"},"modified":"2024-09-15T05:13:33","modified_gmt":"2024-09-15T05:13:33","slug":"getting-started-with-touchgfx-led-control","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=2823","title":{"rendered":"Getting Started with TouchGFX: LED Control"},"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-1.png\" alt=\"\" class=\"wp-image-2824\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-1.png 464w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-1-300x70.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-1-400x94.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/images-1-250x59.png 250w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/figure><\/div>\n\n\n<p>In part 2 of the touchGFX guide, we shall control the on board LED on STM32H735GI-DK using the touch screen. This will provide a method to send the data from UI to MCU to do something specific.<\/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>Creating the UI.<\/li>\n\n\n\n<li>Developing the firmware.<\/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. Creating the UI:<\/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 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-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><\/p>\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 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-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>When the project is created, add a toggle button as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"603\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-1024x603.jpg\" alt=\"\" class=\"wp-image-2828\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-1024x603.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-300x177.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-768x452.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-1536x904.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-2048x1205.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-1150x677.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-750x441.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-400x235.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-07-55-250x147.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, chose the appropriate button depending on your choice as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-1024x595.jpg\" alt=\"\" class=\"wp-image-2829\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-1024x595.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-300x174.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-768x446.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-1536x892.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-2048x1190.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-1150x668.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-750x436.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-400x232.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-04-250x145.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Next, we need to add the interaction as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-1024x595.jpg\" alt=\"\" class=\"wp-image-2831\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-1024x595.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-300x174.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-768x446.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-1536x892.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-2048x1190.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-1150x668.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-750x436.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-400x232.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-09-45-250x145.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Create new interaction with the following parameters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Trigger: When a button is click.<\/li>\n\n\n\n<li>Source: ToggleButton1.<\/li>\n\n\n\n<li>Action: Call new virtual function.<\/li>\n\n\n\n<li>Function name: LEDControl (You can use different name if you want).<\/li>\n<\/ul>\n\n\n\n<p>Next, click on generate code as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"621\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-1024x621.jpg\" alt=\"\" class=\"wp-image-2832\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-1024x621.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-300x182.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-768x466.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-1536x931.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-2048x1242.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-1150x697.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-750x455.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-400x243.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-40-31-250x152.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Thats all for the TouchGFX part.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. 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 size-large\"><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><\/p>\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 size-large\"><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><\/p>\n\n\n\n<p>Wait until this window appears:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><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><\/p>\n\n\n\n<p>From Project Explorer, open STM32H735G-DK.ioc as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"294\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-1024x294.jpg\" alt=\"\" class=\"wp-image-2836\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-1024x294.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-300x86.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-768x221.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-1536x441.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-2048x588.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-1150x330.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-750x215.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-400x115.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-13-01-250x72.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Before we configure the pins, we need to know which pins are connected to the onboards LED of STM32H735G-DK.<\/p>\n\n\n\n<p>From the schematic of this board, we can find the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"794\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-1024x794.jpg\" alt=\"\" class=\"wp-image-2837\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-1024x794.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-300x233.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-768x596.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-1536x1191.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-2048x1588.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-1150x892.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-750x582.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-400x310.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-12-04-250x194.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The green LED is connected to PC3 and red LED is connected to PC2. In this guide, we shall use the green LED which is connected to PC3.<\/p>\n\n\n\n<p>We shall configure PC3 as output as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-1024x640.jpg\" alt=\"\" class=\"wp-image-2838\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-1024x640.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-300x187.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-768x480.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-1536x960.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-2048x1280.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-1150x719.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-750x469.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-400x250.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-52-57-250x156.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Since the cathode of the LED is connected to the pin, at the startup, we need to set it to high, after configuring the pin, set the level to high and the speed as very high.<\/p>\n\n\n\n<p>Click on generate the code as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-1024x572.jpg\" alt=\"\" class=\"wp-image-2839\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-1024x572.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-300x167.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-768x429.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-1536x857.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-2048x1143.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-1150x642.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-750x419.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-400x223.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-06_08-36-48-1-250x141.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, open the following source file from project explorer as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"245\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-1024x245.jpg\" alt=\"\" class=\"wp-image-2840\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-1024x245.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-300x72.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-768x183.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-1536x367.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-2048x489.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-1150x275.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-750x179.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-400x96.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-14_17-16-07-250x60.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>After opening the source file, open the screen1view header file as following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"708\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-1024x708.jpg\" alt=\"\" class=\"wp-image-2841\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-1024x708.jpg 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-300x207.jpg 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-768x531.jpg 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-1536x1062.jpg 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-2048x1416.jpg 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-1150x795.jpg 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-750x519.jpg 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-400x277.jpg 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2024\/09\/2024-09-15_07-59-25-250x173.jpg 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Within the public section of the header file, add the following the virtual 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 LEDControl();<\/pre><\/div>\n\n\n\n<p>Note: the function name should be the same as the one in your TouchGFX interaction setup.<\/p>\n\n\n\n<p>Save the header file (CubeIDE has a bug that won&#8217;t save the hpp file automatically nor during the building).<\/p>\n\n\n\n<p>In the source file, include the following header 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;}\">#include &quot;main.h&quot;<\/pre><\/div>\n\n\n\n<p>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 Screen1View::LEDControl(void)\n{\n\tif (toggleButton1.getState()==1) \/*When the toggle switch is off*\/\n\t{\n\t\tHAL_GPIO_WritePin(GPIOC, GPIO_PIN_3, GPIO_PIN_SET);\n\t}\n\n\telse \/*When toggle switch is on*\/\n\t{\n\t\tHAL_GPIO_WritePin(GPIOC, GPIO_PIN_3, GPIO_PIN_RESET);\n\t}\n\n}\n<\/pre><\/div>\n\n\n\n<p>This function will control the LED state according the state of the button.<\/p>\n\n\n\n<p>The getState function will return the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1 when the button is at off state.<\/li>\n\n\n\n<li>0 when the button is at on state.<\/li>\n<\/ul>\n\n\n\n<p>Save the source file.<\/p>\n\n\n\n<p>hat all for the guide.<\/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<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. 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-5-c1ca50c4c5.gif\" alt=\"\" class=\"wp-image-2842\" \/><\/figure><\/div>\n\n\n<p>Happy coding \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In part 2 of the touchGFX guide, we shall control the on board LED on STM32H735GI-DK using the touch screen. This will provide a method to send the data from UI to MCU to do something specific. In this guide, we shall cover the following: 1. Creating the UI: Open TouchGFX designer and create new [&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-2823","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\/2823"}],"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=2823"}],"version-history":[{"count":1,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2823\/revisions"}],"predecessor-version":[{"id":2843,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/2823\/revisions\/2843"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}