Text Components Guide
chevron down
 

Text Components Guide

Marquee Text

The marquee-text allows developers to easily create text that continuously scrolls horizontally from right to left, like a ticker tape.

Configuration

  • value: Controls the speed of the scroll. Default speed 120. Lower values are slower, higher are faster.
  • mode: Automatically start scrolling on load, or manually trigger the scrolling with the enable event. 1 Auto (default), 0 Manual.

The component is composed of the following SVG sub elements:

  • group/text: A <text> field for the scrolling text.
  • group/separator: A <rect> used to control the spacing width between each scroll loop.

Imports

In addition to any existing imports, you must include the following imports within your widgets.gui file:

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <!-- Additional Imports -->
    <link rel="import" href="/mnt/sysassets/widgets/marquee_text_widget.gui" />
  </defs>
</svg>

Usage

The following example will create a marquee which begins scrolling after a 2 second delay.

Include the following SVG in your index.gui file:

<svg viewport-fill="fb-red">
  <use id="marquee" href="#marquee-text" font-size="32" y="50%-40" width="100%"
    height="80" fill="white" mode="1" value="50">
    <rect width="100%" height="100%" fill="black" opacity="0.2" />
    <set href="group/text" attributeName="text-buffer"
         to="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
    <set href="group/separator" attributeName="width" to="150" />
  </use>
</svg>

Use the following JavaScript in your index.js file to trigger the enable event by setting the element state to enabled in JavaScript:

import document from "document";

let marquee = document.getElementById("marquee");

setTimeout(function() {
  marquee.state = "enabled";
}, 2000);

Mixed Text

The mixed-text component allows developers to easily recreate frequently used text layouts, which includes vertically centered text. The layout includes a heading and body text, both are optional. Padding and margins are calculated automatically based upon its contents.

Configuration

Change the <use href="#" to one of the following:

  • #mixed-text-left-top: Aligned horizontally left, vertically top.
  • #mixed-text-left-mid: Aligned horizontally left, vertically middle.
  • #mixed-text-left-bottom: Aligned horizontally left, vertically bottom.
  • #mixed-text-center-top: Aligned horizontally center, vertically top.
  • #mixed-text-center-mid: Aligned horizontally center, vertically middle.
  • #mixed-text-center-bottom: Aligned horizontally center, vertically bottom.
  • #mixed-text-right-top: Aligned horizontally right, vertically top.
  • #mixed-text-right-mid: Aligned horizontally right, vertically middle.
  • #mixed-text-right-bottom: Aligned horizontally right, vertically bottom.

The component is composed of the following SVG sub elements:

  • #header/text: Textarea field with a heading style.
  • #copy/text: Textarea field with a body copy style.

Imports

In addition to any existing imports, you must include the following imports within your widgets.gui file:

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <!-- Additional Imports -->
    <link rel="stylesheet" href="/mnt/sysassets/widgets/dynamic_textarea.css"/>
    <link rel="import" href="/mnt/sysassets/widgets/dynamic_textarea.gui"/>
    <link rel="import" href="/mnt/sysassets/widgets/mixed_text_widget.gui"/>
  </defs>
</svg>

Usage

The following example will create a center-middle aligned layout, with a header and body text.

Include the following SVG in your index.gui file:

<svg viewport-fill="black">
  <use href="#mixed-text-center-mid" height="100%" fill="fb-yellow">
    <set href="#header/text" attributeName="text-buffer" to="Header Text"/>
    <set href="#copy/text" attributeName="text-buffer"
         to="This is the center and middle-aligned body text."/>
  </use>
</svg>