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
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 Wheelin the TouchGFX Designer and how to create the logic in user code.
- Containers and Custom Containers discuss the widgets container and
Custom Containerand provide an example for how too create and use a
A summary along with suggestions for articles to read from the ToucGFX documentation is found in the Tutorials Summary.