TouchGFX with STM32 (PART 1) | Toggle LED Using Button UI - video Dailymotion

ControllersTech

Learn how to **toggle an LED using TouchGFX** on STM32 with a simple button interface. This tutorial is perfect for beginners and embedded system developers.  📥 Download: - Project files → [https://controllerstech.com/getting-started-with-touchgfx-stm32f750/]  ▶️ Related Videos: - TouchGFX with SPI Displays (ILI9341) → https://youtu.be/suMytEyQTP4 - TouchGFX PART 2 → https://youtu.be/vy1c1LbypuM  TouchGFX Playlist → https://www.youtube.com/playlist?list=PLfIJKC1ud8giOsk-C4BCOwSHtbXqTNb1W  #STM32 #TouchGFX #EmbeddedSystems #STM32Tutorial #LEDControl #STM32CubeIDE #Microcontroller #ControllerTech    ________________________________________________________________________________________  Facebook Page : https://www.facebook.com/controllerstech  Telegram Group : https://t.me/controllerstechdiscuss  Instagram : https://www.instagram.com/controllerstech/  For more info, visit https://controllerstech.com

Transcript

00:00Hello, and welcome to Controllers Tech. A lot of you guys requested this, so today I am starting

00:17the Touch GFX series for STM32. I guess you have already tried some experiments with the Touch GFX,

00:25and you already know how to create a project for your board. So I will just keep this video to the

00:31point, where I will connect the GFX to our own code. This is the first video in the series,

00:38and today we will see how to toggle the LED, using the button on the display. So let's start the Touch

00:45GFX Designer. Click Create, and choose your board. If you are doing this first time, you will need an

00:57internet connection, or else it won't show anything. I am using STM32F750 Discovery Board.

01:06Give the name to the project, and click Create.

01:09Alright we got our blank project. There are a lot of things here, which we will cover in the future

01:21videos. Today we will start with the simple image. Let's add the image to our display.

01:30If you click on the image, you will get its properties on the right. Like, the name,

01:36its location, etc. To add the image, click this image, and select from here.

01:46If you don't have any image, you can choose from the preloaded backgrounds.

01:53They are available for pretty much every size. Or else, click Add and choose the image.

02:00The image should be in the ping format. I already have one created for backgrounds.

02:07So this will be our background image, and now we will add a button on the display.

02:15I am adding this toggle button, as we are going to toggle the LED.

02:19Here are the properties for this button. You can choose the style here.

02:32Or how will it look if pressed, or released.

02:35Let's keep the default state to pressed. So it will be in on state by default.

02:42Alright the button has been created. Now what will happen, when we press this button?

02:49Well we need to define that, and to do that, we will add the interaction.

02:53This interaction will trigger, when the button is clicked. The button is this one, that we created just now.

03:06In the action, you can choose whatever action you want, but for toggling the LED,

03:11we will call a new virtual function, which we will define later in the code.

03:17The name for the function, let's keep it toggle LED.

03:21Interaction name, let's keep it same.

03:25So that's it for the design part.

03:27Click here to generate the code.

03:40Let's open the files.

03:42This is the touch GFX folder, we will go back to project, and open the cube IDE.

03:48Inside the application, user, we have our main file.

04:11Here the generated folder is generated based on our setup, and we can't modify these.

04:16The GUI folder is where we can write our code for the application.

04:22We will check these in a while, let's open the cube MX setup first.

04:32This setup is configured for QSB AirFlash, SDRAM, display library, and other things.

04:40Here we will just add the things we need.

04:43For example, here in this project, I want to control the LED, so set the LED pin as output.

04:51There is no onboard LED on this board, but here you can see, pin PK3 is the display backlight control pin.

05:00So I will control this with the button I just created.

05:03This pin is already set as output, so I don't need to configure anything.

05:09Let's go back to our project.

05:14Screen 1 view base is where the code is generated for the elements on the screen.

05:20Here is the image, and this is the button we created.

05:23The button calls the button callback, which further calls the toggle LED function.

05:33Like I said earlier, we can't do any modification in these files, so we will copy this function,

05:40and we will modify this in other file.

05:47Open the screen 1 view.

05:49Now open the header file.

05:54Here we have to add the function first.

05:57So add the virtual void, toggle LED.

06:00Save it, and go back to the source file.

06:04Here we will write the code for the function.

06:07This is defined in class, screen 1 view.

06:11Before we write the code to toggle the LED, let's run the project once.

06:26You can see the toggle button, and the default state is on.

06:34So the toggle button is working well, let's go back to the project.

06:41Here first we will get the state of the toggle button.

06:44If the state is true, we will turn on the LED.

06:59Else, the LED will be off.

07:04Let's build it once.

07:06We got some error about the whole functions.

07:09Include the whole library according to your board.

07:14And now everything is fine.

07:21Let's flash it to the board again.

07:37You can see, the display is turning off, and it only turns on when I tap the button again.

07:43So we were able to toggle the LED using the button on the display.

07:50There is one more thing I want to confirm here.

07:53Let's try to run the simulator.

07:55Well, we can't.

08:00Well, we can't.

08:01The reason is that we are using some code which depends on external factors, like the whole code.

08:07So let's exclude all the whole related code from the file, and now try to run the simulator.

08:20It runs OK now.

08:21If you write a code, that depends on any other variable, which is external to the generated files, the simulator can not run.

08:39We will see more to this in the near future.

08:43This is it for the video.

08:45I hope you understood the process for controlling the LED using the button.

08:50The next video will cover the counter on the display, and how to change the value of this counter using various methods.

08:57The code is very big, so I will only upload the necessary files.

09:02You can download it from the description.

09:06Leave comments in case of any doubt.

09:08Keep watching, and have a nice day ahead.

TouchGFX with STM32 (PART 1) | Toggle LED Using Button UI

Category

Transcript

Be the first to comment

Recommended