Skip to main content

Line Progress

A Line Progress shows the current progress by using a Line as the progress indicator on top of a background Image. The line does not need to be either horizontal or vertical, but can start at any coordinate and finish at any coordinate.

Line Progress running in the simulator

Widget Group

The Line Progress can be found in the Progress Indicators widget group in TouchGFX Designer.

Line Progress in TouchGFX Designer


The properties for a Line 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 Line 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.
Image & ColorBackground specifies background image.

Image specifies which image to use as fill for the line.
The image selected will be placed in top left corner of the widget.

Color specifies which color to use as fill for the line.
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.
AppearanceStart Position X and Start Position Y specify the coordinate where the line should start.

End Position X and End Position Yspecify the coordinate where the line should end.

Line Width specifies the width of the line.

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


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


Widget specific actionsDescription
Set valueSets the value of a progress indicator to a desired value
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).


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.


A Line Progress consists of an Image and a Line. A Line is a CanvasWidget and is heavily dependent on the MCU for rendering. Therefore, the Line Progress is considered a demanding widget on most platforms.

For more details on CanvasWidget drawing performance, read the UI Component Performance Overview.


Generated Code

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

#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <touchgfx/Color.hpp>

touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);

lineProgress.setXY(45, 71);
lineProgress.setProgressIndicatorPosition(0, 0, 391, 130);
lineProgress.setRange(0, 100);
lineProgressPainter.setColor(touchgfx::Color::getColorFromRGB(0, 151, 255));
lineProgress.setStart(17, 17);
lineProgress.setEnd(374, 113);


void Screen1ViewBase::setupScreen()

  • You can use these functions and the others available in the LineProgress class in user code. Remember to force a redraw by calling lineProgress.invalidate() if you change the appearance of the widget.
  • 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.

    class Screen1View : public Screen1ViewBase
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();
    bool increase = true;
    void Screen1View::handleTickEvent()
    int currentValue = lineProgress.getValue();
    int16_t max;
    int16_t min;
    lineProgress.getRange(min, max);

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

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


    TouchGFX Designer Examples

    To further explore the Line Progress, try creating a new application within TouchGFX Designer with one of the following UI templates:

    Progress Indicator Example UI template in TouchGFX Designer

    API Reference