In the last step of tutorial 4, we will add a custom behavior for the Scroll Wheel, by making it move in a circular pattern when scrolling through the items, thereby moving in a pattern similar to a dial.
Add Custom Behavior to MenuElement
Getting the Scroll Wheel
to move in a dial pattern, is done by shifting the horizontal position of the Image and Text widget for each item that is visible in the Scroll Wheel. To do this the function setY()
for "MenuElement" is overridden in MenuElement.hpp. The setY()
function is called for a Custom Container
each time it is moved in the vertical direction and is used for redrawing the Custom Container
in its new position. By overriding setY()
, are we able to rearrange the Image and Text widget each time the Scroll Wheel is moved. The image below describes how to implement the new setY()
function and shift the the two widgets in MenuElement.hpp.
With the new setY()
function implemented, running the simulator shows that the Scroll Wheel
is now moving in a dial pattern aligning with the curve from the overlay.
This concludes tutorial 4. To learn more about the concepts that have been used throughout the tutorial the articles below discuss some concepts that you have worked with:
- Scroll Wheel: Describes how to create and configure the
Scroll Wheel
in the TouchGFX Designer and how to create the logic in user code. - Containers and Custom Containers discuss the widgets container and
Custom Container
and provide an example for how too create and use aCustom Container
.
A summary along with suggestions for articles to read from the ToucGFX documentation is found in the Tutorials Summary.