Skip to main content

Text Progress

A Text Progress will display progress as a number with a given number of decimals. It shows the current progress by using a TextArea as the progress indicator on top of a background Image. The Color, the Alpha and the Text of the TextArea 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.

Text Progress running in the simulator

Widget Group

The Text Progress can be found in the Progress Indicators widget group.

Text Progress in TouchGFX Designer

Properties

The properties for a Text Progress in TouchGFX Designer.

Property GroupProperty Descriptions
NameName of the widget. Name is the unique identifier used in TouchGFX Designer and code.
LocationX 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 Text Progress 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.
StyleStyle specifies a predefined setup of the widget, that sets select properties to predefined values.
These styles contain images that are free to use.
ImageBackground specifies the background image.
TextID specifies the text that is used. If the widget uses an auto-generated text, the ID will display 'Auto-generated'.

Translation specifies the content of the text to be displayed. The text field is automatically set to use a wildcard "<\> %" which means that the wildcard created will be filled with a number that fits the progress configuration. This wildcard is mandatory for the Text Progress to work correctly but any other text can be set before and/or after the wildcard.

Typography specifies the format of the text.

Alignment specifies the horizontal alignment of the text.

For more details on text configuration, refer to the Using texts and fonts section.
Text Position & SizeX and Y specify the top left corner of the progress text relative to its Text Progress parent.

W and H specify the width and height of the progress text.
ValuesRange 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.

Number of Decimals specifies the precision required to show progress. The possible values are 0, 1 or 2.
AppearanceColor specifies the color of the displayed text.

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.
MixinsDraggable 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.

Interactions

The actions and triggers supported by the Text Progress are described in the following sections.

Actions

Widget specific actionsDescription
Set valueSet the value of the progress indicator.
Standard widget actionsDescription
Move widgetMove a widget to a new position over time.
Fade widgetModify alpha value of widget over time.
Hide widgetHides a widget (sets visibility to false).
Show widgetMake a hidden widget visible (sets visibility to true).

Triggers

TriggerDescription
Value update completeWill be triggered when an update animation is completed. If duration of the update is 0 the update will happen instantly but will still trigger this event.
Value updatedWill be triggered for both instant updates and intermediate steps during an update animation. Will only trigger when the new value differs from the current one.

Performance

A Text Progress consists of a TextArea and a background Image. Text drawing is very similar to general image drawing (though due to the nature of text characters, a significant amount of alpha blending takes place). Therefore, the Text Progress is considered a fast widget on most platforms.

For more details on text drawing performance, read the General UI Component Performance section.

Examples

Generated Code

In the generated code for the View base class we can see how TouchGFX Designer sets up a Text Progress.

Screen1ViewBase.cpp
textProgress.setXY(198, 119);
textProgress.setProgressIndicatorPosition(0, 0, 84, 34);
textProgress.setRange(0, 100);
textProgress.setColor(touchgfx::Color::getColorFromRGB(0, 0, 0));
textProgress.setNumberOfDecimals(0);
textProgress.setTypedText(touchgfx::TypedText(T_SINGLEUSEID1));
textProgress.setBackground(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_BG_MEDIUM_TEXT_PROGRESS_BG_SQUARE_ID));
textProgress.setValue(50);

User Code

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.

Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
virtual ~Screen1View() {}
virtual void setupScreen();
virtual void tearDownScreen();
virtual void handleTickEvent();
protected:
bool increase = true;
uint8_t counter;
};
Screen1View.cpp
void Screen1View::handleTickEvent()
{
counter++;
if(counter%15 == 0) // Every 0.25 seconds
{
int currentValue = textProgress.getValue();
int16_t max;
int16_t min;
textProgress.getRange(min, max);

if (currentValue == min)
{
increase = true;
}
else if (currentValue == max)
{
increase = false;
}

int nextValue = increase == true ? currentValue+1 : currentValue-1;

counter = 0;
textProgress.setValue(nextValue);
}
}
Tip
You can use these functions and the others available in the TextProgress class in user code. Remember to force a redraw by calling textProgress1.invalidate() if you change the appearance of the widget.

TouchGFX Designer Examples

To further explore the Text Progress, try creating a new application within TouchGFX Designer with the following UI template:

Progress Indicator Example UI template in TouchGFX Designer

API Reference