In this step of tutorial 2 we will add code to change the number when the user presses the Buttons.
With the TouchGFX Designer it is easy to link actions to a Button through an Interaction. An Interaction links a trigger, e.g. a button press, to an action, e.g. running code or moving an element.
Select the Interactions tab in the upper right corner and click the "Add Interaction" button to create a new Interaction:
We will create two Interactions. One for each of the Buttons. We will setup both Interactions to call a C++ method on the current Screen.
Change the "Trigger" field to "Button is clicked". Set the "Choose clicked source" to "buttonUp". Change the "Action" field to "Call new virtual function". For "Function Name" type "buttonUpClicked". Give the Interaction a good name.
Create a similar Interaction with "buttonDown" as "clicked source".
When you use an Interaction with the "Call new virtual function" action, the TouchGFX Designer generates a virtual function in your view. Click the "Browse Code" button in the bottom bar. Navigate to the folder
and open the file MainViewBase.hpp. If you like you can also open one of the project files and find the file here:
|IDE||Path to project file|
|IAR Embedded Workbench 7||target/IAR/application.eww|
|IAR Embedded Workbench 8||target/IAR8.x/application.eww|
|KEIL uVision v5||target/Keil/application.uvprojx|
The new virtual methods are found in the public part of the MainViewBase class. The generated methods have empty implementations. The intention is that the programmer implements these methods in the subclass.
Implementing the virtual methods
The remaining task is now to implement these two methods to change the counter value when the user presses the buttons. To do that, declare the methods again in the "MainView" class. This class can be found in
Open this file and insert the two function declarations in the class:
The next task is to implement the two methods by adding the implementation in the .cpp-file. This file is located in
In the implementation below we have added calls to "touchgfx_printf". This function is useful to print out lines of text when running the simulator. When running on target, the line will have no effect.
Click "Run Simulator" in TouchGFX Designer again to run the new code. Click the Buttons a couple of times to see that the Interactions and methods are working as expected:
Updating the counter value
The last task to write C++ code in the new methods to update the counter value when the user presses the button. To do that we first add a new integer variable, "counter", in the MainView class:
In the "buttonUpClicked" method we increment the counter value. The new value is then converted to a string and copied to the 10 characters buffer we configured for the text in the previous step:
We need one more thing before the application is finished. TouchGFX only included the characters needed from the used fonts, so we need to tell TouchGFX Designer to include the characters 0-9 in the Default typography. To do that, go back to TouchGFX Designer and click the "Texts" tab, then the "Typographies" tab. In the "Wildcard Ranges" column for the Default typography, add the range "0-9".
Now click "Run Simulator" again and click the up button a few times:
As the program is now, it will crash if it should display a negative number. This can be fixed, either by inserting a guard in the buttonDownClicked() function to ensure the counter does not go below 0. To allow negative numbers, TouchGFX needs to know that it should include "-" in the Default typography. This can be accomplished simply by adding a minus ("-") in the Wildcard Characters cell for the Default typography.
This step concludes tutorial 2.
Read more about texts here: Using texts and fonts.
Read more about TouchGFX application development here: Basic Application Development.
With tutorial 2 concluded, the next tutorial will teach you about using multiple screens in an application and share data between the two screens. Go on to Tutorial 3.