SimpleLabel

Extends Group

The SimpleLabel node class is used to display a single line of text. SimpleLabel is a lightweight complement to the Label node. It supports simplified font style specification and is more memory efficient than the Label node.

The SimpleLabel node class supports:

• Specifying either a built-in system font or a TrueType/OpenType font file
• Specifying the color of the font
• Customizable Horizontal and Vertical origin

The following shows a text layout derived from the SimpleLabel node:

With ui_resolutions=hd specified in the manifest, the following displays the text string "Application Development Made Easy!" using the medium bold system font, centered horizontally on display, and with the baseline of the text at the vertical center of the display.

<?xml version="1.0" encoding="utf-8" ?>

<!--********** Copyright 2018 Roku Corp.  All Rights Reserved. **********-->

<component name="simpleLabeltest" extends="Group" >

<script type="text/brightscript" >
<![CDATA[

  sub init()
    m.top.setFocus(true)
  end sub

]]>
</script>

<SimpleLabel
  id="testLabel"
  font="fontUri:MediumBoldSystemFont"
  text = "Application Development Made Easy!"
  horizOrigin = "left"
  vertOrigin = "baseline"
  translation="[640,360]" />

</component>

Text Origin

The SimpleLabel node uses the horizOrigin and vertOrigin fields to control the origin of the coordinate system for the node.

Horizontal Origin

The horizOrigin field allows controlling the x=0 position of the SimpleLabel node's local coordinate system.

There are three possible values for the horizOrigin field:

• left The left edge of the text is located at the 0 x-coordinate position of the SimpleLabel node's local coordinate system

• center The horizontal center of the text is positioned at the 0 x-coordinate position of the SimpleLabel node's local coordinate system

• right The right edge of the text is positioned at the 0 x-coordinate position of the SimpleLabel node's local coordinate system

Vertical Origin

The vertOrigin field allows controlling the y=0 position of the SimpleLabel node's local coordinate system.

There are four possible values for the vertOrigin field:

• top The top edge of the text is located at the 0 y-coordinate position of the SimpleLabel node's local coordinate system

• center The vertical center of the text is located at the 0 y-coordinate position of the SimpleLabel node's local coordinate system

• baseline The baseline of the text is located at the 0 y-coordinate position of the SimpleLabel node's local coordinate system

• bottom The bottom edge of the text is located at the 0 y-coordinate position of the SimpleLabel node's local coordinate system

SimpleLabel Origin Example

The following image illustrates the horizontal and vertical origin options supported by the SimpleLabel node. The manifest includes ui_resolutions=fhd, so all coordinate values are in the range 1920x1080.

• On the top left, in the image below, a Group node is displayed that has a 1-pixel wide Rectangle node and three SimpleLabel nodes as children. The Group node's x-translation is set to 200, and the x translation of the Rectangle and all three SimpleLabel nodes is set to 0.
  • The Rectangle serves as a visual reference of where x=0 is located in its parent Group's local coordinate system.
  • The three SimpleLabel nodes illustrate each option for the horizOrigin field (i.e., SimpleLabel horizontal origin at the left edge, center, and right edge of the text).
• In the bottom of the image, a Group node is displayed that has a 1-pixel tall Rectangle node and four SimpleLabel nodes as children.
  • The Group node's y-translation is set to 480, and the y translation of the Rectangle and all four SimpleLabel nodes is set to 0.
  • The Rectangle serves as a visual reference of where y=0 is located in its parent Group's local coordinate system.
  • The four SimpleLabel nodes illustrate each option for the vertOrigin field (i.e., SimpleLabel vertical origin at the top edge, center, baseline, and bottom edge of the text).

Rotation

Rotation of SimpleLabel nodes is supported. The center of rotation is determined by the origin point as determined by the horizOrigin and vertOrigin fields. On platforms that do not support OpenGL, only rotations divisible by 90 are supported (e.g., 0, 90, 180, and 270 degrees). For those platforms, other values are rendered using the nearest 90-degree value (e.g., 103 degrees is rendered as a 90-degree rotation, -262 degrees is rendered as a -270 rotation).

Fields

The following Fields derived from the Group base class can also be used:

Sample app

LabelExample is a sample app demonstrating Label in action.