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

In this part of the review, I'm writing a first custom handler for a button click.


customer action photo


The scenario is simple: you click a button, and that makes a square show up and disappear again.

What we'll see:

  • create an event handler
  • control the attributes of another graphical object based on that.

I'm assuming that you can bring up a TouchGFX aplication. If not, check STM32H7B3I - Create a TouchGFX Project.


Create a Screen


First the background. Start with putting a Box shape on the empty screen. Same size as the screen. White.

(you can also use another colour - or no box, but I leave it up to you to see what happens if you provide no background)




Then put a toggle button and another - red -  box on the screen.

Name the button btnOnOff (not critical), name the box boxSignal (critical, because we'll use it in our code).

Then, make the box invisible, so that it doesn't show at startup. We'll make it appear in the code.


React on a Button Toggle


The next step is to make our code realise that the toggle button is flipped. So that we can act on that event.

In Designer, you select the interactions tab.

Take care to use the exact same settings as above and use the same Function name.


Writing the Event Handler


In the CubeIDE, navigate to the screen class. We'll add the virtual handler that we asked for in Designer.

First add the virtual event handler to your screen class: TouchGFX/gui/include/gui/screen_screen/screenView.hpp.


class screenView : public screenViewBase
    virtual ~screenView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void btnToggled();



Then implement it. Here we're acting on a button push, and decide what to do based on it's state.

Open TouchGFX/gui/src/screen_screen/screenView.cpp and add this function:


void screenView::btnToggled()
bool bVisible = this->btnOnOff.getState();



Build, start the debugger and test the effect.

A red square will show or hide ,depending on the button state.

The state is queried in line 03 above.

Then, the square's "visible" attribute is set on that in line 04.

Line 05 forces a redraw of the square.



Have fun!

(this also works without the board, if you just run it in the Designer's simulator)


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