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.
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
{
public:
screenView();
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();
this->boxSignal.setVisible(bVisible);
this->boxSignal.invalidate();
}
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)
Top Comments