The ScrollWheel is a scrollable menu containing multiple items, which are dynamically updated when scrolling through the items in the wheel, and the item which is selected is moved into focus. Enabling the code to react to interactions with the ScrollWheel, different callbacks can be invoked based on the interaction with the items in the wheel.
The ScrollWheel can be found in the Containers widget group in TouchGFX Designer.
The properties for a ScrollWheel in TouchGFX Designer.
|Property Group||Property Descriptions|
|Name||Name of the widget. Name is the unique identifier used in TouchGFX Designer and code.|
|Type||Type specifies whether the ScrollWheel is oriented vertically or horizontally.|
|Location||X and Y specify the top left corner of the widget relative to its parent.|
W and H specify the width and height of the widget.
Lock specifies if the widget should be locked in its current X, Y, W and H.
Locking the widget also disables interacting with the widget through the screen.
Visible specifies the visibility of the widget.
Making the widget invisible also disables interacting with the widget through the screen.
|Item Template||Item Template specifies which CustomContainer to use as template.|
Number of Items specifies the number of items present in the ScrollWheel.
Initial Selected Item specifies which item is selected first.
Use Selected Style Template specifies whether to use a separate template for the selected item.
Selected Style Template specifies which CustomContainer to use as selected template.
|List Appearance||Circular specifies if the items in the ScrollWheel will loop when reaching the end.|
Selected Item Offset specifies the location of the selected item.
Item Margin specifies the spacing between items.
Extra Size Before and Extra Size After specify the size of the area in which Selected Style Template is shown.
Margin Before and Margin After specify the size of the margin before and after the area in which Selected Style Template is shown.
|Animation||Easing and Easing Option specify which easing equation to use for animations.|
Swipe Acc. and Drag Acc. specify the acceleration when scrolling.
|Mixins||Draggable specifies if the widget is draggable at runtime.|
ClickListener specifies if the widget emits a callback when clicked.
MoveAnimator specifies if the widget can animate changes to X and Y values.
The items in a ScrollList are based on a concept called Item Template which is a CustomContainer that serves as a base for the graphical elements for the items in the ScrollWheel. To highlight the selected item, the ScrollWheel has the option to select an Item Template called Selected Style Template, which is only used for the selected item. Before creating a ScrollWheel, a CustomContainer for the Item Template, along with a Selected Style Template if enabled, should be created.
After the ScrollWheel is created, the CustomContainer can be selected under the property Item Template. When selecting the Custom Container for the Item Template, the ScrollWheel resizes to fit with the size property that is not in the scrollable direction (width for vertical orientation and height for horizontal orientation) of the selected Custom Container. Changing the other size property (height for vertical orientation and width for horizontal orientation) determines the number of items visible.
The actions and triggers supported by the ScrollWheel are described in the following sections.
|Standard widget action||Description|
|Move widget||Move a widget to a new position over time.|
|Hide widget||Hides a widget (sets visibility to false).|
|Show widget||Make a hidden widget visible (sets visibility to true).|
A ScrollWheel does not emit any triggers.
A ScrollWheel is a Container type, and does not per default appear in the draw chain. Therefore, the performance is wholly dependent on the drawing performance of the children.
For more details on drawing performance, read the General UI Component Performance section.
In the generated code for the View base class we can see how TouchGFX Designer sets up a ScrollWheel.
scrollWheel.invalidate()if you change the appearance of the widget.
After the graphical elements for the ScrollWheel and its properties are set, user code can be written to update the items in the ScrollWheel. The header file for the Screen1ViewBase class which is generated by the TouchGFX Designer is shown below:
When the TouchGFX Designer generates the code for ScrollWheel, the functions
scrollWheel1UpdateCenterItem, highlighted above, is created for the user to override and update the items in the ScrollWheel.
UpdateItem function is always generated for a ScrollWheel and can be implemented to updated the contained items, while the
UpdateCenterItem function updates the item based on the Selected Style Template and is therefore only generated if the usage of a Selected Style Template is selected. Other than updating different items, the two functions contain the same parameters used for updating the items in the the ScrollWheel.
itemIndex contains the index value of the item, which is used to identify which item is being updated. The parameter
item is a reference to a visible item in the ScrollWheel. Updating the appearance for the parameter
item results in an update to the render for a visible item in the ScrollWheel.
An example implementation of
scrollWheel1UpdateCenterItem in the user code files
Screen1View.cpp is shown below:
In the header file
scrollWheel1UpdateCenterItem functions are overridden and are then implemented in
The goal of this example is to update the text in the Item Template with the index value of the items which are visible, like the example shown in the beginning of this section. Since both the Item Template and the Selected Style Template are based on CustomContainer, a
setIndex function is created for both CustomContainers. The
setIndex function is able to take the
itemIndex parameter and update the text in the Item Template and the Selected Style Template.
setIndex for an item results in an update to the appearance of the visible items thereby showing their index value.
To further explore the ScrollWheel, try creating a new application within TouchGFX Designer with one of the following UI templates: