A CircleProgress shows the current progress by using a Circle as the progress indicator on top of a background Image. The Color, the Alpha and overall parameters regarding the Circle can be configured. It is possible to create a custom background image and change the different parameters of the progress indicator such as the position and the size to fit the custom background image.
The CircleProgress can be found in the Progress Indicators widget group in TouchGFX Designer.
The properties for a CircleProgress in TouchGFX Designer.
|Property Group||Property Descriptions|
|Name||Name of the widget. Name is the unique identifier used in TouchGFX Designer and code.|
|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.
The size of a CircleProgress is determined by the size of the selected background image.
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.
|Style||Style specifies a predefined setup of the widget, that sets select properties to predefined values.|
These styles contain images that are free to use.
|Image & Color||Background specifies background image.|
Progress specifies either a color or an image to use as fill for the Circle.
|Values||Range Min and Range Max specify the minimum and maximum integer values of the indicator.|
Initial specifies the initial value of the progress indicator.Steps Total specifies at what granularity the progress indicator reports new values. For instance, if the progress needs to be reported as 0%, 10%, 20%, ..., 100%, the total value should be set to 10.
Steps Min specifies the minimum steps the progress indicator shows.
|Appearance||Center Position X and Center Position Y specify the center position of the progress circle relative to its CircleProgress parent.|
Start & End Angle specify the start and end angle of the drawn Circle.
Radius specifies the size of the progress cirlce.
Line Width specifies the width of the progress circle. If the value is 0, the progress circle is as large as the radius. Otherwise, the width specified will configure the width of the progress circle starting outside and moving inwards.
Cap Style specifies line ending style.
Alpha specifies the transparency of the widget. The alpha value ranges between 0 and 255 for the widget. 0 is fully transparent and 255 is solid.
|Mixins||Draggable specifies if the widget is draggable at runtime.|
ClickListener specifies if the widget emits a callback when clicked.
FadeAnimator specifies if the widget can animate changes to its Alpha value.
MoveAnimator specifies if the widget can animate changes to X and Y values.
The actions and triggers supported by the CircleProgress are described in the following sections.
|Widget specific actions||Description|
|Set value||Set the value of the progress indicator.|
|Standard widget actions||Description|
|Move widget||Move a widget to a new position over time.|
|Fade widget||Modify alpha value of widget over time.|
|Hide widget||Hides a widget (sets visibility to false).|
|Show widget||Make a hidden widget visible (sets visibility to true).|
A CircleProgress does not emit any triggers.
A CircleProgress consists of a Circle and a background Image. The Circle is based on the CanvasWidget and is heavily dependent on the MCU for rendering. Therefore, the CircleProgress is considered a demanding widget on most platforms.
For more details on CanvasWidget 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 CircleProgress.
The following example illustrates how to implement the
handleTickEvent() function to simulate progress. Running this code creates the application shown at the beginning of this article.
circleProgress1.invalidate()if you change the appearance of the widget.
To further explore the CircleProgress, try creating a new application within TouchGFX Designer with the following UI template: