Getting started with TouchGFX || STM32F750

TouchGFX is a very powerful and easy to use GUI designing software by ST. Specially if you are using a STM32 controller, it is very convenient to use the TouchGFX for designing the GUI.

This tutorial series will cover different components in the TouchGFX, and how do we use them with our MCU.

This particular tutorial is going to be very basic, and today we will see how to use the button on the display to control the LED on the MCU.

We will create the project from the TouchGFX and later modify it in the IDE.

TouchGFX Setup

Create a new Project in TouchGFX

1. Click on the create tab to create the project
2. Search for the controller board
3. Out of the results shown, choose your board
4. Give the name to the project
5. click create to create the project

Add the background Image

First thing we will do is, add the background image to our project. Make sure the image is in the PNG format and is of same resolution the display supports.

• Here we will hover on the Image tab and select the Image from the options. Once we do that an image icon will be added to the display.
• Click on the image icon to edit the properties of this image.
• In the properties, under the image section, click on no image.
• Now click on the ‘+’ button to choose the image.
• Once the image is visible in the image Picker, click on the image.
• The image will automatically be added to the display.

You can see below how the image is going to look.

Add the Toggle Button

Now we have added the background image to our display, the next element we add is the toggle button. This button will be used to toggle the LED on the controller.

Here we will again hover on the button tab, and choose the Toggle Button from the list of buttons.

You can adjust the positioning on the button by dragging it on the display. If you click on the button, you can see the properties on the right side of the screen.

Here you can choose the type of button you need. For example, if the button is going to be round, or rectangle, etc.

Add the Interaction to the screen

Now we have the button on our screen, but what exactly will happen when we click this button ?

Well we can define this in the interaction part.

Interactions are basically limited to the screens on which you are adding them. So for example, if you have 2 screens, the all the interactions added on screen 1 will only work on screen 1.

The image above adds the interaction to screen 1.

• Click on the Interaction tab
• click on the ‘+’ button to add the interaction
• Once the interaction is added, click on it to modify it
• Now we have to choose what kind of interaction we need on the screen.

Here the Trigger is set when the button is clicked, and the button is the toggleButton1.

So when the toggle button is clicked, we will call a new virtual function, ToggleLED, which we will write later in our IDE.

Inside this function we will write a code to toggle the LED connected to the controller.

Generate the Project

This is all the setup we need to do in the touchGFX. Now we will generate the project.

The following options can be seen on the bottom right corner of the software.

Here we have the options to Generate the code, or Run the simulator, or Flash the project to the board.

Since we still need to write the code in the IDE, we will simply generate the code for now.

Once the code is generated, we can open the project folder by clicking the Files button on the bottom left corner of the software.

Open the cubeIDE

Clicking on the Files button will take you to the TouchGFX folder of the project.

We will navigate to the main project folder, and then enter inside the STM32cubeIDE folder.

Now double click on the .project file to open the project in the cubeIDE.

The images below shows the Project structure in the cubeIDE.

Here all the assets are placed in the generated folder. All the files in the generated folder are not modifiable, so we can only view them for reference. We will mainly work with the gui folder in all of our touchGFX projects.

CubeMX Setup

Since we need to add a LED to our project, we have to open the cubeMX and set the pin output from there.

Here in the cubeMX I have set the pin PA0 as the output pin. I will connect the LED to this pin.

Click save to generate the project.

The code

As I mentioned earlier, we will be mainly working with the gui folder.

Open the file Screen1View.cpp in the gui folder.

Here we need to first define the function we created in the interaction i.e ToggleLED ().
So right click on the Screen1View.hpp definition on the top and click “open declaration”.

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();

    virtual void ToggleLED();  // from the interaction
protected:
};

#endif // SCREEN1VIEW_HPP

Above the code shows the entire Screen1View.hpp file. Here I have added the function virtual void ToggleLED();, which we defined in the interaction.

Now we will write the source code for this function in the Screen1View.cpp file.

#include "stm32f7xx_hal.h"

// LED Toggle function
void Screen1View::ToggleLED()
{
	if (toggleButton1.getState()) HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_SET);
	else HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_RESET);
}

Before writing the function make sure you include the header file for your controller, or else the HAL functions will be undefined.

We will first read the state of the toggle button (getState()). If the state is true, we will turn the LED ON, or else turn the LED OFF.
Here toggleButton1 is the name of the toggle button and is defined in the touchGFX designer when we added the button.

That is all the code we need to write. Now you can either flash the project using the touchGFX, or the cubeIDE itself.

If you are flashing using the IDE, you need to select the respective loader in the debugger (If it is not selected by default). This is shown in the image below.

Result

Below are the images showing the toggle button and the LED attached to pin PA0.

The first image shows when the button is in the OFF state, the LED is also OFF. The button state has been changed to ON in the second image, and so does the LED.