STM32 + TouchGFX: Build a Modern GUI

How to Build a Responsive TouchGFX GUI for STM32: Full Tutorial

Learn how to create stunning graphical interfaces for STM32 microcontrollers using TouchGFX Designer and STM32CubeIDE.

Introduction

TouchGFX is an advanced GUI tool offering everything you need to create cutting-edge GUIs. TouchGFX is an advanced, free-of-charge GUI optimized for STM32 microcontrollers. TouchGFX accelerates the HMI-of-Things revolution through the creation of stunning smartphone user interfaces on embedded devices ranging from simple low-color UI applications up to high-resolution and high-color UI applications. TouchGFX is optimized for STM32 microcontrollers, needing only a limited amount of memory for running smooth GUIs.

In this tutorial, we’ll explore how to get started with TouchGFX and STM32 using TouchGFX Designer and STM32CubeIDE. You’ll learn how to set up your project, design your first screen, connect UI elements with backend code, and run your GUI directly on STM32 hardware.By the end, you’ll understand how to combine TouchGFX design flexibility with STM32’s performance to create professional embedded HMIs.

TouchGFX is distributed as an X-CUBE-TOUCHGFX zip file which has the following components inside:

• TouchGFX Designer - Build a UI through a Windows-based GUI Builder
• TouchGFX Generator - Create a custom TouchGFX HAL through CubeMX
• Jumper Wires (Male-to-Female)
• TouchGFX Engine - The TouchGFX C++ framework that drives the UI application

TouchGFX Overview

First of all, you need to download X-CUBE-TOUCHGFX from the ST.com official website .After you follow following link to installation process.

First Screen after installing, you see like below

We are using STM32F429I-Discovery Board so select it from Template as shown below pic.

First this is introduction screen for creating project is as below.

1screens

screen panel show you created screens, and widgets nest added to that screen. from ➕ you can add screen as per your requirement.

2Widgets

From this menu you can create button, text area , different type of control for screen, you just have to drags and drop control. its properties you can change it.

3Interaction

This is tool work for interaction with widgets for any action like click, drag, touch...and trigger event..

Create Projects

Now We are creating one Simple Project using STM32F429I - Discovery Board As shown as below.

Create simple project as drag and drop facility available on TouchGFX as show below

After creating the screen, we need to define interaction events to handle actions such as Button and Toggle Button clicks. To do this, add a new interaction in TouchGFX Designer.

First, select the appropriate Trigger from the dropdown — in this case, choose “Button is clicked.” Next, pick the Source Widget from the Choose Clicked Source dropdown for which you want to create the event.

Then, from the Action dropdown, select “Virtual Function Call.”

In the Action Text field, enter a virtual function name of your choice, which will be linked to your code later. Finally, set the Interaction Name — you can rename it as desired for better clarity and organization.

Model-View-Presenter Design Pattern

TouchGFX follows the Model-View-Presenter (MVP) design pattern as described in Model-View-Presenter Design Pattern. The TouchGFX screen concept ties into the overall Model-View-Presenter architecture by classes that inherit from the View and Presenter classes in TouchGFX. So when adding a new screen to your application in TouchGFX Designer it creates both a new specific View class and a Presenter class to represent that particular screen.

The content and responsibility of the MVP classes in a TouchGFX application are as follows.

1Model:

The Model class is a singleton class which is always alive and has two purposes:

1. Store state information for the UI. The Views and Presenters are deallocated when switching screen, so they cannot be used to store information which should be kept across screen transitions. Use the Model for this instead.
2. Act as an interface towards the backend system, relaying events to and from the currently active

screen. The Model class is automatically setup to have a pointer to the currently active presenter. When changes occur in the Model the current active Presenter is notified of the change. This is done via methods in the ModelListener interface in the application. New applications generated by the Designer will automatically have a Model class ready to be used by the UI.

2View:

The View class (or more specifically, a class that derives from the TouchGFX View class) contains the widgets that are shown in this view as member objects. It also contains a setupScreen and a tearDownScreen function, which gets automatically called when this screen is entered/exited. Typically you would configure your widgets in the setupScreen function.

Your View will also contain a pointer to the associated Presenter. This pointer is set up automatically by the framework. Using this pointer you can communicate UI events like button clicks to the Presenter.

3Presenter:

Your Presenter class (again, a class that derives from the TouchGFX Presenter class) is responsible for the business logic of the currently active screen. It will receive "backend" events from the Model, and UI events from the View and decide which action to take. For instance, if an alarm event is received from the Model, the Presenter might decide to tell the View that an alarm popup dialog should be displayed.

Now Its time to Run simulator to preview than after run generate generate code button to create code.

After it open brows folder for hierarchies structure to show as shown in below.

After that open STM32CubeIDE Folder -> Open .Project file to STM32CubeIDE. As Shown below.

As shown in project Hierarchy we have to implement virtual function for interaction which we have created BackcolorChange() and ONOFFLED();

we need to do it in sceen1View files. In gui folder ----> Screen1View.cpp file .

we have declare function in Screen1View.hpp file as shown below.

virtual void BackcolorChange();

virtual void ONOFFLED();

After that define both function in Screen1View.cpp file.

   void Screen1View::BackcolorChange()
{

   boxWithBorder1.setColor(boxWithBorder1.getColor()+1234);
   boxWithBorder1.invalidate();

}

void Screen1View::ONOFFLED()
{

   HAL_GPIO_TogglePin(GPIOG,GPIO_PIN_13);
   HAL_Delay(200);
}
   

Conclusion

In this tutorial, we explored how to build a graphical user interface on an STM32 microcontroller using TouchGFX Designer and STM32CubeIDE. From setting up the project and designing screens to adding interaction events and generating code, we’ve covered the complete workflow needed to bring your GUI ideas to life.

TouchGFX makes it easy to design smooth, professional, and responsive interfaces for embedded systems, even with limited hardware resources. With STM32’s high performance and TouchGFX’s flexibility, you can develop everything from simple display dashboards to advanced touch-based HMI applications.

Now that you understand the basics, you can continue experimenting with animations, multiple screens, and real-time data updates to create even more dynamic and interactive interfaces for your STM32 projects.