Support for the legacy Fitbit Web API ends on September 30, 2026
Important: Support for the legacy Fitbit Web API ends on September 30, 2026. After this date the API will continue to operate, but Google will no longer fix bugs or provide API support. On October 30, 2026, the Fitbit Web API will be turned off and will no longer function or sync data to or from Fitbit users. To continue accessing data for your users after this date, migrate to the Google Health API.
Text Components Guide
chevron down
back search icon cancel search
 
 

Text Components Guide

Overview

In addition to the standard <text> and <textarea> elements, there are some extra components that can be used for rendering text on the device.

Dynamic Textarea

The dynamic-textarea component behaves like a standard <textarea> except that it's height is automatically adjusted to fill its contents. Elements placed directly below and positioned with the y="$" value will automatically position themselves below dynamic-textarea, regardless of the size of the contents.

<svg>
  <svg class="horizontal-pad">
    <use href="#dynamic-textarea" class="p2 foreground-fill" y="50">
      <set href="#text" attributeName="text-buffer" to="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus tristique nibh id sollicitudin." />
    </use>
    <rect width="100%" height="2" fill="fb-cyan" y="$+6" />
  </svg>
</svg>

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 widget.defs file:

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/system_widget.defs" />
    <!-- Additional Imports -->
    <link rel="import" href="/mnt/sysassets/widgets/marquee_text_widget.defs" />
  </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.view 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 * as document from "document";

const marquee = document.getElementById("marquee");
marquee.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

setTimeout(() => {
  marquee.state = "enabled";
}, 2000);
previous
Button Components Guide
View Components Guide
next