Skip to content

Design a Label Widget


The Label widget is a static widget that allows you to place a label anywhere on the screen in any color, any supported font and of varying sizes.

Select Widget

The Label widget is useful for adding a name to another widget or an indication (ex. unit) of the values the widget is displaying.

This tutorial requires basic knowledge about using the graphics editor. This includes adding widgets and modifying widget properties during design time. For more information regarding this, refer to the Graphics Editor manual.


Static widgets can only be modified during design time

Widget Properties

Size and Position

Left and Top

Position of a widgets can be changed by entering values for the Left and Top properties.

Change Left Top

Alternatively, the widgets can be positioned by simply clicking and dragging into the desired position.

Drag Label

Width and Height

For the label widget, the size properties, Width and Height, are read-only and only shown for reference. These are updated when the Text or Font is changed.


The display text can be changed by setting the value of the Text property.
Label Text
Clicking outside of the Text Property will finalize the changes.



The font style used by the label can be changed by setting this property.

Font Select

Here's an example of multiple labels using different fonts.



The size of the printed text can be changed by setting the Font Size property.

Font Size


The Label widget has a Foreground Color and Background Color properties.
Foreground refers to the text itself while the background is the pixels not covered by the text.
Colour Selector
When editing color properties, a color picker tool is provided. The tool can be use to select a base color
RGB Color
and the appropriate shade of that color.
Alternatively, the color value can be manually inputted in Hex or RGB form.
Color Format2

Background Type

Background Type allows you to choose if the background color for the individual characters of the text is drawn.
Background Type
By setting this to Opaque, the background color can be used to highlight the whole text area making it distinguishable.
Setting the property to Transparent will prevent the background color from being drawn.


For this demonstration, we will be adding 4 labels to a page. For instructions on how to add a widget, refer to this discussion.

Add a Label widget to the project and set its properties as shown.

Label 1 Preview

Add a second label and set its proporties as shown.

Label 2 Preview

You can also copy and paste a widget by selecting the widget and clicking Copy Widget and Paste Widget from graphics tool bar. You will notice that the Name property automatically changes for each additional label added.

Set the third label's properties as shown.

Label 3 Preview

Add the last Label widget and set the properties as shown.

Label 4 Preview


Hover above the graphics tool bar buttons to learn what the button is for and to see the linked shortcut key

Tips & Tricks

By setting background type to transparent, we can draw labels on top of other widgets. This is useful when adding additional identification to the values being displayed by widgets or adding text rendering effects.

To extend the demonstration, transparent versions of the Label widgets can be added on top of the existing Labels and offsetting the position by a few pixels. This provides a simple raised effect.

Transparent Preview


When adding labels on top of other widgets, ensure that it is not covering the moving part of the widgets below. Otherwise, some parts of the label may be erased when widget value updates.