roku-smart-label

0.2.1 • Public • Published

Roku Smart Label

BBEdit style label, allowing to mix different fonts and images. Reference implementation, looking for contributors

build NPM Version

Installation

Using ropm

Use the ropm package manager for roku

ropm install roku-smart-label

suggestion: use a shorter prefix:

ropm install sl@npm:roku-smart-label

Usage

Follow these steps:

  1. Declare a label component
  2. Set font settings
  3. Assign values
  4. Assign text

Note that updating any property causes a brute force reload of all the data

Declare a label component

In XML

without prefix:

  <rokusmartlabel_SmartLabel 
      id="label"
      width='900' />

using sl prefix:

  <sl_SmartLabel 
      id="label"
      width='900' />

In Brighterscript

without prefix:

  label = createObject("roSGNode", "rokusmartlabel_SmartLabel")
  label.width = 900

using sl prefix:

  label = createObject("roSGNode", "sl_SmartLabel")
  label.width = 900

Assign font styles

The following styles are supported

style name format
default text
italic text
bold text
header1 #text#
header2 ##text##
header3 ###text###

Setting individual styles

Assign font styles by setting label. style FontSettings (e.g. label.boldFontSettings), to an aa like:

{
      name: "font:MediumBoldSystemFont"
      size: 130
      color: "#ffffff"
    }

Setting all font styles

Set m.allFontSettings to an assocarray, with the styles you wish to set

  m.label.allFontSettings = {
    header1Font: {
      name: "font:MediumBoldSystemFont"
      size: 130
    }
    header2Font: {
      name: "font:MediumBoldSystemFont"
      size: 60
    }
    header3Font: {
      name: "font:MediumSystemFont"
      size: 50
    }
    font: {
      name: "font:MediumSystemFont"
      size: 30
    }
    italicFont: {
      name: "font:MediumBoldSystemFont"
      size: 32
    }
    boldFont: {
      name: "font:MediumSystemFont"
      size: 34
  } }

Assign values

Label supports template substitution, of values in the form text ${KEY} more text. To drive the template system, simply set the label.values to an assocarray, as follows:

{
  aKey: "value1"
  anotherKey: "value2"
}

Inline images

You can also include posters in your label. Provide an instance of a poster, configured how you wish it to appear in your values:

poster = createObject("roSGnode", "Poster")
poster.width =40
poster.height = 40
poster.uri= "http:/example.com/image.png"

{
  aKey: "value1"
  anotherKey: poster
}

Assign text

  ' create and configure your label
  ' set values
  ' then set text
  text = "\n#TITLE1:#"
  text += "\n##TITLE2:##"
  text += "\n###TITLE3:###"
  text += "\n*bold text here*"
  text += "\n_italic text here_"
  text += "\nregular text"
  text += "\nposter 1 ${so1} poster 2 ${so2} poster 3 ${so3}"

  m.label.text = text

Package Sidebar

Install

npm i roku-smart-label

Weekly Downloads

3

Version

0.2.1

License

MIT

Unpacked Size

14.1 kB

Total Files

6

Last publish

Collaborators

  • triwav
  • twitchbronbron