In our previous article, we introduced TouchGFX and how it helps developers create GUIs on STM32 microcontrollers. Now, let’s take it a step further.

In this tutorial, you'll learn how to set up TouchGFX using STM32CubeMX, generate the project, and design a simple GUI that runs on an actual STM32 board.

By the end of this post, you’ll be able to run your first GUI application with just a few clicks using TouchGFX Designer and STM32 tools.

Hardware & Tools Required

 





 



 



 

 

Component	Description
STM32 Board	STM32F746G-DISCO, STM32H7, Nucleo + external display
Display	TFT LCD with RGB or SPI interface
Software	STM32CubeMX, STM32CubeIDE, TouchGFX Designer

Step 1: Open STM32CubeMX and Configure the MCU

1. 
   

   Select your STM32 microcontroller or board (e.g. STM32F746ZG).

   
    


2. 
   

   Enable LTDC (LCD-TFT Display Controller).

   
    


3. 
   

   Enable DMA2D for hardware acceleration.

   
    


4. 
   

   Set up the system clock (e.g., 180 MHz for STM32F7).

   
    


5. 
   

   Configure display pins (data lines, HSYNC, VSYNC, DE, CLK, etc.).

   
    


6. 
   

   Save and generate the code for STM32CubeIDE.

   
    

 

⚠️ Tip: Be sure to configure the framebuffer in external SDRAM if your display requires more memory.

 

Step 2: Open TouchGFX Designer

1. 
   

   Open here TouchGFX Designer

   
    


2. 
   

   Create a new project and choose your board or MCU

   
    


3. 
   

   Select the generated CubeMX project directory

   
    


4. 
   

   Choose the UI resolution based on your display (e.g., 480x272 or 800x480)

   
    

 

Step 3: Design the UI

Here’s a simple first UI you can create:

• 
  

  One screen

  
   


• 
  

  A label (e.g., "Hello from TouchGFX!")

  
   


• 
  

  A button that updates the label when pressed

  
   

 

Steps:

1. 
   

   Drag a Text Area and Button from the widgets panel

   
    


2. 
   

   Add an interaction: "When Button Pressed → Change Text"

   
    


3. 
   

   Save the project and generate code

   
    

 

???? All interactions are written in C++, try this out so you can manually extend them in FrontendApplication.cpp.

 

Step 4: Build and Flash with STM32CubeIDE

1. 
   

   Open the generated project in STM32CubeIDE

   
    


2. 
   

   Add your application logic if needed

   
    


3. 
   

   Compile the project

   
    


4. 
   

   Flash it to your STM32 board

   
    

 

✅ You should now see your GUI running on the display!

 

Troubleshooting Common Errors

 





 



 



 

 

Issue	Solution
Blank screen	Check LTDC, clock config, and RGB pin mappings
Build fails	Ensure CubeMX and TouchGFX versions are compatible
Touch not working	Confirm I2C/SPI config and include touch controller drivers

What’s Next?

Now that you’ve successfully run your useful link first STM32 GUI application, you can:

• 
  

  Add touchgfx stm32 step by step real-time data (e.g., display temperature or sensor values)

  
   


• 
  

  Learn how to use animations, sliders, and custom fonts

  
   


• 
  

  Interface TouchGFX with FreeRTOS tasks for real-world apps

  
   

 

Conclusion

Using more here TouchGFX with STM32CubeMX allows you to create efficient, real-time GUIs with minimal effort. Whether you're working on a consumer device or an industrial display, this framework is robust and developer-friendly.

Stay tuned — in the next part, we’ll show you how to interface real sensor data with TouchGFX and update the display in real time.