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.

Implementation of the new setY() 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.

Simulator running the Scroll Wheel with the added code

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 a Custom Container.

A summary along with suggestions for articles to read from the ToucGFX documentation is found in the Tutorials Summary.