Developer Portal
Quick StartsComposition scriptingAPIs and SDKsSupport
  • Portal overview
  • Quick start
  • REST API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Get a control app's API token
      • Get a composition's sub-composition IDs and names and their payload structures
      • Get a control app's model
      • Get a control app's metadata
      • Update a sub-composition's content
      • Update a sub-composition's animation state
      • Update a sub-composition's content and animation state in one call
      • Update multiple sub-compositions in one call
    • API reference
      • Get control app details
        • Get a control app's metadata
        • Get a control app's model
        • Get a control app's control data
      • Send data to a control app
        • Update a control app's content
        • Update a control app's animation state
      • Take out all of an app's output
  • Data stream API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Create a data stream
      • Link a data stream to a composition
      • Send data to an app using the data stream API
    • API reference
  • Composition scripting
    • Introduction
    • Overview
    • Quick start
      • Find sub-compositions and widgets
      • Read and update control nodes
      • Set text widget text properties
      • Read and update widget properties
      • Read control nodes and update widget properties
      • Set image widget URL property
      • Set table widget content property
    • Cheat sheets
      • Fundamentals
      • Interactive overlays
      • Best practices
    • Use cases
      • Read control nodes and generate HTML text
      • Read control nodes, generate HTML text with background
      • Text Ticker - Start ticker on "In" animation
    • Composition script editor reference
  • Software development kits
    • Graphics SDK
      • Getting started
      • Reference
        • SDK functions
        • Composition object
        • Sequencer object
      • Guides and examples
        • Load a composition with its token
        • Load a composition with its URL
        • Get the composition URL of an app instance
        • Sequencer VOD example
        • Control local preview of app
        • Load app instance output
    • Overlay SDK
      • Getting started
      • SDK functions
      • Use case examples
    • Widget SDK
      • Preparing your environment
      • Getting started
      • Reference
        • Widget UI definition
        • Widget callback functions
        • Time control object
        • Composition instance
      • Guides and examples
        • Widget example: CSS patterns
    • App SDK
  • Singular Basics
    • Overview of Singular
    • Managing overlays in the Dashboard
      • How to create a new composition
      • How to open a new app template
      • How to create an app for a composition
      • How to extract a composition from an app
      • How to find an app's shared app token and shared API URL
      • Dashboard reference
    • Building overlays in Composer
      • How to build a composition
      • How to set up layer logic to automate overlay transitions
      • How to set up control nodes to make widget properties available to a control app
      • Animating overlays
        • How to create timeline animations
        • How to create behavior animations
        • How to create update animations
      • How to make overlays interactive
      • How to adapt overlays to various screen sizes
      • Composer reference
    • Controlling overlays in Studio and UNO
      • How to use Studio
      • Studio reference
      • UNO reference
  • Support
    • Singular status
    • Support resources
    • Singular terminology
    • Performance Testing
Powered by GitBook
On this page
  • Widget used
  • Functions covered
  • Composition structure
  • Composition script
  • Singular control app

Was this helpful?

  1. Composition scripting
  2. Use cases

Read control nodes, generate HTML text with background

PreviousRead control nodes and generate HTML textNextText Ticker - Start ticker on "In" animation

Last updated 3 months ago

Was this helpful?

This example explains how to read control nodes and use the text widget’s HTML feature to style text with auto-sizing background.

Widget used

Functions covered

Composition structure

The composition has one sub-composition called Lower, as you can see in the composition tree.

To see this sub-composition's widgets:

  1. In the composition navigator, select the Widget Explorer tab.

This composition contains three widgets, but for this quick start, you'll look at the text widget, which in the composition is called lowerText.

Composition script

Now that you have located the composition's text widget, learn how to use the text widget’s HTML feature to style text and set a background color in the Lower composition script.

You can also copy and paste the composition script below into your own compositions.

Lower script
(function() {

  const HTML_TEMPLATE = '<html><span style="background:{{background-color}}; padding: 0px {{padding-right}}px 0px {{padding-left}}px">{{firstname}} <b>{{secondname}}</b></span></html>';

  // convert color JSON to CSS rgba()
  const parseColor = function(color) {
    const colorRgba = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
    // console.log("colorRgba =", colorRgba);
    return colorRgba;
  }

  return {

    init: function(comp, context) {

      // get reference to the fullname widget
      const wiLowerText = comp.findWidget("lowerText")[0];

      /**********************************************************************/

      // we define a function to update the composition
      function updateComposition() {
        // get control node payload as JSON object
        const p = comp.getPayload2();
        console.log(p);

        const colorRgba = parseColor(p["Background Color"]);

        // build HTML text.
        let htmlText = HTML_TEMPLATE.replace(/{{background-color}}/gi, colorRgba);
        htmlText = htmlText.replace(/{{padding-right}}/gi, p["Padding Right"]);
        htmlText = htmlText.replace(/{{padding-left}}/gi, p["Padding Left"]);
        htmlText = htmlText.replace(/{{firstname}}/gi, p["Firstname"]);
        htmlText = htmlText.replace(/{{secondname}}/gi, p["Lastname"]);

        // update fullname text
        wiLowerText.setPayload({
          "text": htmlText
        });

      }

      /**********************************************************************/

      // we listen to payload_changed events
      comp.addListener('payload_changed', (event, msg, e) => {
        updateComposition();
        e.stopPropagation();
      });

      /**********************************************************************/

      // update the composition when loading the output URL
      updateComposition();

    },

    close: function(comp, context) {}
  };
})();

Singular control app

Load this to follow along in a real composition

within the same as above and select the Lower composition script.

comp.findWidget()
comp.getPayload2()
widget.setPayload()
example composition
Text widget
example composition
Singular.live Control App
Read control nodes, generate HTML text with background app
Logo
Open the composition script editor
Screenshot
The Lower sub-composition with control nodes
Lower sub-composition payload JSON