Please enable JavaScript to view this site.

CWT User Interface Design Handbook

Navigation: TFT Controls

Label (TFT)

Scroll Prev Top Next More

<TFT:Label Name='ExampleLabel1'

Description

The Label control is used to display text on the screen. It can be static text defined by the creator of the user interface or dynamic text like the time and date in the terminal. All labels that shall display dynamic content must use a pre-defined name to allow the software to find and populate the label with the dynamic content. To define a label that display the current time in the terminal the Name property must be set to “TimeLabel”. The appearance of the text in a label can be controlled with a number of properties for each label control.

TFT labels can have Click events used in the same way as used in buttons. A label cannot display an image.

<TFT:Label MxStyle="{UntilMaxOrBlockedLabelStyle}" FormattedText="Max: @V1@  @S" Click="OnCloseCurrentPopup"/>

 

Properties

All properties that can be defined for a label are listed below.

Alignment

Value:Near, Center, Far

Description:The alignment property defines where the rendering of text inside the label shall start.

Near = Left justified.
Far = Right justified
Center = Centred.

BackColor

Type/Value: A string with a valid colour name

Description:Defines the label's background colour. The label will be filled with the colour specified as BackColor. See Colour names for a list of available colours.

Font

Type/Value: A font formatting string.

Description:The Font property defines the font used to render the text on the display as well as the size of the text and the text style (like normal, bold or italic). This can be set for each label. Format: “[Font name], [Font size], style=[Font style]”. A typical example is “Arial, 24pt, style=Regular”.
See Section 9.3 for available font names.
The available styles are:

Regular

Bold

Italic

Strikeout

Underline

NOTE: It is possible to use any custom True Type font by placing a font file in the folder “\Storage Card\Media\Fonts\” and using the font name for that particular font file.

ForeColor

Type/Value: A string with a valid colour name

Description:Defines the label's foreground colour. The text in the label will be rendered with this colour. See Colour names for a list of available colours.

FormattedText

Type/Value:A string of any length
Description:The FormattedText property defines the text to be rendered inside the label. Besides static text the FormattedText property can contain special formatting commands and variables. The special syntax of the FormattedText property is described in Dynamic label text.

If FormattedText="@X", the text will be translated from the 'Translation.xml'

FormattingInfo

Type/Value: A string of any length.

Description:The FormattingInfo property can be used to adapt labels used to display time and date information. If the time or date formatting of the selected language must be changed this can be solved with the FormattingInfo property. The formatting is controlled with special formatting characters, see Dynamic label text.

Height

Type/Value: Unsigned integer with value range: 0–480

Description:The Height property controls the height of the label when it is rendered to the display. Height is set in number of pixels.  

NOTE: If the text doesn’t fit in the specified height (the font size is to big for the height of the label) no text will be rendered to the label. Try to increase the height.

LineAlignment

Value:Near, Center, Far

Description:The LineAlignment property defines the vertical alignment of text inside the label.

Near = Top justified.
Far = Bottom justified
Center = Centred.

Location

Type/Value: String in format “X,Y” where X and Y are both unsigned integers. Value range for X is 0–640 and value range for Y is 0–480.

Description:The Location property specifies where the label shall be placed in relation to the parent control. If a label is defined in a panel the Location property will specify where inside the panel the label will be positioned. The physical position on the display will then depend on where the panel is placed (panels also have a Location property) and where the label is placed.

Name

Type/Value: A string of any length

Description:The identifier of the Label. Must match one of the defined label names (see Label names ) if the label shall be populated with any dynamic text. If the label shall display static text, like “Welcome”, the name can be anything as long as it is unique in the panel where the label is defined.

Always set the Name property when a label is defined and make it match a defined name or make it unique in the panel.

PartialErrorCheck

Type/Value: Boolean value. Available  values are “true” and “false”

Description:The PartialErrorCheck property activates a function to handle different states of a label depending on the terminal's state. This is supported for the label with the name “PaymentInstructionLabel”, see Payment instruction label.

Size

Type/Value: String in format “A,B” where A and B are both unsigned integers. Value range for A is 0–640 and value range for B is 0–480.

Description:Defines both the height and the width of the button in the same property. For example, the string “640,480” sets the width to 640 pixels and the height to 480 pixels.

Text

Type/Value: A string of any length

Description:The Text property can be used to present static text that does not require any formatting. If both the FormattedText and Text properties are defined the FormattedText property will be used.

Transparent

Type/Value: Boolean value, use “true” or “false”

Description:To make the label transparent set this property to “true”. This will display the parent panel background as background in the label as if the label background is transparent. Use "false" to render the label background in the solid colour specified in the BackColor property.

Width

Type/Value: Unsigned integer with value range 0–640

Description:The Width property defines the width of the label, in number of pixels, when the label is rendered to the display. If the value is set to 100 the label will occupy 100 pixels on the display. If the width is set to a too small value the software will render all parts that fit inside the label and then truncate the rest of the text. To fit all text in the label then you have to adjust the width or the font size, or both.

 

Control information

The terminal has a number of fixed label names that are used to display different information to the customer. One label with a fixed name is used to display the current date, another one is used to display the amount the customer has paid, etc. Label names contains a list of all label names and a description on the information presented in each label.

There are a few special labels that have a special function besides presenting text to the customer. The special labels are PaymentInstructionLabel, TariffDescriptionLabel and TariffDynamicDescriptionLabel. These labels are described in Payment instruction label and Tariff description.

 

Examples

Example label containing the static text “Example1” and the name “ExampleLabel1” that is positioned 50 pixels from the left border of the parent panel and 30 pixels from the top border. The text is rendered in black and the label's background is transparent to allow the background image of the parent panel to be visible through the label. The text is centred horizontally inside the label area and the label is 120 pixels wide and 17 pixels high.

<TFT:Label Name='ExampleLabel1'
  FormattedText='Example1'
  ForeColor='Black'
  Transparent='true'
  Alignment='Center'
  Location='50,30'
  Width='120'
  Height='17'/>

Example label that displays the current date of the terminal. The label's name is “DateLabel” and the software therefore fills the label with the current date. By using the FormattingInfo property and setting it to “yyyy-MM-dd” the date will be presented as  “2009-04-01”. The DateLabel is positioned at “50, 30” and is 120 pixels wide and 17 pixels high. See Label names regarding DateLabel.

<TFT:Label Name='DateLabel'
  ForeColor='Black'
  BackColor='White'
  Location='50,30'
  Width='120'
  ormattingInfo='yyyy-MMM-dd'
  Font='Arial, 10pt, style=Bold'
  Height='17'/>