I'm selected for the STM32H7B3I-DK -  DISCOVERY KIT road test.

I'm working with the STMicroelectronics software that was in release version at the time I received the kit.


  • STM32CubeIDE Version: 1.4.1
  • GNU for STM32, 7-2018 -q2 update
  • TouchGFX Designer 4.14.0
  • (HAL 1.6.0 and) 1.8.0
  • STMCubeProgrammer  2.5.0


1. Create a .ioc file with TouchGFX Designer


.ioc files are the heart of the CubeIDE MX HAL configurator. You can start a project from 0 and configure all peripherals.

But there's an easier way. You can create a throwaway project in TouchGFX Designer for this kit, and it'll put the good settings for the LCD screen right away.

To do this, start the Designer, then give this temp project a name and location.

Select the development kit as template, then click create.


Then click Generate Code top right. That's it. You now have a .ioc file ready in the subfolder where you created your project.

(If you forgot where: there's a Browse Code button right lower corner. It opens a window explorer. Navigate one directory up and you'll see the .ioc file.

Copy it to a place where you can find it back. It's a good starting point for future projects.

You can close TouchGFX Designer and delete the TouchFX project now. It's done its job.


2. Create a CubeIDE project based on your .ioc file


Start CubeIDE, and open menu File -> New -> Project ...

Then select ST -> STM32 Prooject from an existing Stm32CubeMx Configuration File (.ioc)

Next, and select your freshly created .ioc file.



Finish, don't migrate if asked (unless you know how to do that. In that case please write a blog about it ).

Let Mx generate the project.

If you're curious, click on the items marked with the green arrows and appreciate what's done for us. A lot is preconfigured by the .ioc file.


Open the TouchGFX folder of the new project, and double-click the link called ApplicationTemplate.touchgfx.part.

The Designer opens, with your project loaded.


3. First Screen and Project Completion in TouchGFX Designer


Draw a white box on the empty screen.


Add a toggle button (why: because it's easy to test the touch screen with it later).

Click Generate Code in the right upper corner.

If you want to follow along, click the Detailed Mog button in the right lower corner.

When finished, the status bar in the left lower corner says: Generate code | Done.

Close TouchGFX Designer. We've finished our design.


4. First Compilation and Run


Back to CubeIDE. Right-click on your project and select Refresh.

The Designer generated the remainder of the code for you. And also a new link. From now on, if you want to alter the design, select that link.


Right-click on the project and select Build Project.

If that's successful, let's do a first debug session.

Attention: your graphic design will not show yet. We are successful if at the end of this step, we have a black screen: no backlight, no image.


Plug in your development kit.

Right-click on the project and select Debug As -> STM32 Cortex-M C/C++ Application

Navigate to the Debugger tap and unselect Enable live expressions.

Press OK. The debugger loads the firmware to the controller and stops the session at the first line of the main() function.

This is a good opportunity to try out the debugger. You can step through the code, resume, ...

Don't be disappointed that you won't see anything, and that even if the backlight was on when starting, it will be dimmed when this line is executed:

  /* Start scheduler */


We'll fix that in the next section.

When you're finished plaing, press the red stop button in the IDE to return to the edit view.


5. Fix the Display Initialisation


The CubeIDE + Designer combination doesn't implement a virtual function needed to initialise the display.

Funny enough, when you create a project with the Designer itself, this function is generated. But then you can't use the Mx HAL configurator in your IDE. Can't have it all.


Navigate to TouchGFX -> target. We'll edit two files there and add the missing virtual function.


First in TouchGFXHAL.hpp, add this as the last function in the public section:


virtual void taskEntry();




Then in TouchGFXHAL.cpp, add the implementation:


#include <touchgfx/hal/OSWrappers.hpp>


void TouchGFXHAL::taskEntry()


    // Turning on display after first frame is rendered
    /* Assert display enable LCD_DISP_CTRL pin */
    /* Assert back light LCD_BL_CTRL pin */

    for (;;)


Build and Debug again

When you execute the program, the backlight switches on and your home screen appears. The touch screen doesn't work yet, so the button doesn't toggle.


Fixing the toggle button is for Part 2.

Project in the current state is attached to this post. Enjoy.


Related Posts
First Experience with CubeIDE
Create a TouchGFX Project with support for the Designer, CubeIDE and Debugger - Pt 1: Screen Works
Create a TouchGFX Project with support for the Designer, CubeIDE and Debugger - Pt 2: Touch Works
TouchGFX Simple Example: react on a button click
USB, freeRTOS ,Task Notifications and Interrupts
the Development Kit STMod+ Connector and Using UART2
TouchGFX Application Framework: Model, View, Presentation, Message Queue
TouchGFX Application Framework: A Mock GUI - Show Statuses, Switch Screens
TouchGFX Application Framework: MVP and the ModelListener
Write a CubeIDE MX application: Hardware Cryptography with DMA