Scroll Wheel, "scrollWheel", created and configured in the TouchGFX Designer, this step will create the logic, via user code, that updates the items in "scrollWheel", so they display different graphics based on the position of the item in the wheel. This step will, therefore, work with integrating designer generated code with user code. A more detailes description of integrating designer code with user code can be und in article Designer Generated Code.
Change Image and Text in MenuElement
Since the items in the
Scroll Wheel are based on the
Custom Container "MenuElement", created in step 1, user code for changing the icon and updating the wildcard needs to be added to "MenuElement". When a
Custom Container is created in the TouchGFX Designer generates a .hpp and .cpp file with the same name as the
Custom Container which is where the user code should be integrated. The location of the files generated for "MenuElement" in the example application are:
Enabling the items in "scrollWheel" to change their text and icon is done by adding the function
setNumber(int no) to "MenuElement". The function uses the variable
no to decide which icon the Image widget should show and change the Wildcard in the Text Area widget to the value of
The declaration and implementation of
setNumber(int no) is done in the MenuElement.hpp which is shown below.
With the code added to update the content of the MenuElement, the next thing to do is to add code which updates the items in the Scroll Wheel.
Update the Items in the Scroll Wheel
When creating a Scroll Wheel, the TouchGFX Designer generates a virtual function which is called each time a new item in the Scroll Wheel becomes visible. Overriding this function in the user code enables the code to interact with the items in the Scroll Wheel.
The name of the function is the name of the Scroll Wheel appended with UpdatedItem. For the tutorial, the function is called
scrollWheelUpdateItem(MenuElement& item, int16_t itemIndex).
itemIndex is an index value informing which item is currently being updated and
item is a reference to an instance of MenuElement which is currently visible in the Scroll Wheel. With
itemIndex informing which item is being updated,
setNumber() is called for
item which will change the content of the item being updated based on the value of
itemIndex. The code used for updating the Scroll Wheel items is shown below.
Running the simulator for the application now shows that the text for the items contains the value of their index and the icons change based on which item is showing. The images below shows an example of the simulator running with the code implemented.
In the next step we will look at how to add custom behavior to the Scroll Wheel.