Design a Label Widget

Introduction

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.

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.

Note

Static widgets can only be modified during design time

Size and Position

Left and Top: Position of a widgets can be changed by entering values for the Left and Top properties.; Alternatively, the widgets can be positioned by simply clicking and dragging into the desired position.
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.

Text

The display text can be changed by setting the value of the Text property.

Clicking outside of the Text Property will finalize the changes.

Font

Style: The font style used by the label can be changed by setting this property.; Here's an example of multiple labels using different fonts.
Size: The size of the printed text can be changed by setting the Font Size property.

Colors

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.

When editing color properties, a color picker tool is provided. The tool can be use to select a base color

and the appropriate shade of that color.

Alternatively, the color value can be manually inputted in Hex or RGB form.

Background Type

Background Type allows you to choose if the background color for the individual characters of the text is drawn.

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.

Demonstration

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.

Add a second label and set its proporties as shown.

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.

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

Tip

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.