Introduction

The Label widget is a simple widget that allows you to place a label anywhere on the screen in any colour and any system font of varying size. The Label widget is useful for adding a name to another widget or in some cases on top as an indication of the values the widget is displaying. The widget is static so it can only be modified at design time.

How it works

The area that the label occupies is derived from the total size of the text entered located at the Left and Top co-ordinates. If the label is drawn Opaque the background is drawn along with the text in the selected background and foreground colours. If the Transparent option is selected, only the text is drawn ignoring the background colour.

Implementation

To select the Label when using the Architect or Genius envrinoments simply click on Graphics and then click on Add Widget.

The Label widget is the top widget under the Static tab. Click on Label then click on Confirm.

The label will be placed on the graphic representation of the TIMI display at the default co-ordinates with default Text, Font, Colours and Background Type

You can now change the Property Values to get the desired look of the Label widget.

Left and Top Property

The Left and Top property can be changed by entering the value of a known Left and Top coordinate.

Or the Label can be positioned by simply clicking on it and dragging it into the desired position.

The Width and Height properties are shown for reference only and updated when the Text, Font or Font size are altered.

Text Property

The Text property can be changed by clicking on the area of the text in the Property Value or double click the Value to highlight the entire text and then type in the new text.

Clicking outside of the Text Property will set the new text.

Font Style Property

The TIMI display has 3 system fonts to choose from and can be selected from the drop-down box.

Font Size

Each font can have its size changed by altering the multiplier Value in the Font Size Property.

Foreground Colour

The Foreground Colour property will set the colour of the text part of the label only. This can be altered by simply clicking on the Foreground Colour Property value and the Colour selector will appear.

There are many ways to choose the right colour by simply clicking the RGB colour.

And then clicking on a shade.

Or, alternatively, you can enter the values directly in various ways by selecting the required format.

Background Type

Background type allows you to choose if the background for the individual characters of the text is drawn. By selecting a background colour and choosing Background Type OPAQUE, it can be used to highlight the whole text area and to separate it from whatever the label may be placed on top of. Setting the property to TRANSPARENT will draw just the text element only and the background colour will be ignored.

Background Colour

The Background colour can be altered in the same way as the Foreground Colour by using the Colour Selector.

Demonstration

For this demonstration we will be adding 4 labels to a page.
Select the Label Widget by clicking on Add Widget from the Graphics menu followed by CONFIRM and set the properties as shown on the right.

Add another Label and set the properties as shown on the right.

You can also copy and paste a widget by clicking on the image you want to copy by either pressing ALT C to copy then ALT V to paste or by selecting Copy Widget and Paste Widget from the Graphics menu. You will notice that the Name property automatically changes for each additional label added, Label0, Label1.
Next, add another Label widget and set the properties shown on the right.

And finally add another Label widget and set the properties shown on the right.

Tips & Tricks

By using the TRANSPARENT Background Type, we can draw labels on top of labels or on top of other widgets. Some widgets such as the Media Gauge have areas where the needle will not sweep over and it is possible to place a Label widget on top to give it a name or additional information about values shown by the gauge.

By adding 3 more TRANSPARENT Label widgets on top of the existing Labels and altering the colours, a simple raised effect can be created.

Back to Resource Centre

Share this article on socials

Introduction

The Label widget is a simple widget that allows you to place a label anywhere on the screen in any colour and any system font of varying size. The Label widget is useful for adding a name to another widget or in some cases on top as an indication of the values the widget is displaying. The widget is static so it can only be modified at design time.

How it works

The area that the label occupies is derived from the total size of the text entered located at the Left and Top co-ordinates. If the label is drawn Opaque the background is drawn along with the text in the selected background and foreground colours. If the Transparent option is selected, only the text is drawn ignoring the background colour.

Implementation

To select the Label when using the Architect or Genius envrinoments simply click on Graphics and then click on Add Widget.

The Label widget is the top widget under the Static tab. Click on Label then click on Confirm.

The label will be placed on the graphic representation of the TIMI display at the default co-ordinates with default Text, Font, Colours and Background Type

You can now change the Property Values to get the desired look of the Label widget.

Left and Top Property

The Left and Top property can be changed by entering the value of a known Left and Top coordinate.

Or the Label can be positioned by simply clicking on it and dragging it into the desired position.

The Width and Height properties are shown for reference only and updated when the Text, Font or Font size are altered.

Text Property

The Text property can be changed by clicking on the area of the text in the Property Value or double click the Value to highlight the entire text and then type in the new text.

Clicking outside of the Text Property will set the new text.

Font Style Property

The TIMI display has 3 system fonts to choose from and can be selected from the drop-down box.

Font Size

Each font can have its size changed by altering the multiplier Value in the Font Size Property.

Foreground Colour

The Foreground Colour property will set the colour of the text part of the label only. This can be altered by simply clicking on the Foreground Colour Property value and the Colour selector will appear.

There are many ways to choose the right colour by simply clicking the RGB colour.

And then clicking on a shade.

Or, alternatively, you can enter the values directly in various ways by selecting the required format.

Background Type

Background type allows you to choose if the background for the individual characters of the text is drawn. By selecting a background colour and choosing Background Type OPAQUE, it can be used to highlight the whole text area and to separate it from whatever the label may be placed on top of. Setting the property to TRANSPARENT will draw just the text element only and the background colour will be ignored.

Background Colour

The Background colour can be altered in the same way as the Foreground Colour by using the Colour Selector.

Demonstration

For this demonstration we will be adding 4 labels to a page.
Select the Label Widget by clicking on Add Widget from the Graphics menu followed by CONFIRM and set the properties as shown on the right.

Add another Label and set the properties as shown on the right.

You can also copy and paste a widget by clicking on the image you want to copy by either pressing ALT C to copy then ALT V to paste or by selecting Copy Widget and Paste Widget from the Graphics menu. You will notice that the Name property automatically changes for each additional label added, Label0, Label1.
Next, add another Label widget and set the properties shown on the right.

And finally add another Label widget and set the properties shown on the right.

Tips & Tricks

By using the TRANSPARENT Background Type, we can draw labels on top of labels or on top of other widgets. Some widgets such as the Media Gauge have areas where the needle will not sweep over and it is possible to place a Label widget on top to give it a name or additional information about values shown by the gauge.

By adding 3 more TRANSPARENT Label widgets on top of the existing Labels and altering the colours, a simple raised effect can be created.

Back to Resource Centre

Share this article on socials