Example

LED Ticker

A jQuery-based LED matrix ticker display component. Renders scrollable text on a simulated dot-matrix board with configurable colors, scroll direction, and timing.

Requirements

  • jQuery 3.x or later
  • alphabet.js — provides the FONT_5x7_BITS bitmap font used by the encoder

Both must be loaded before Ticker.js:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="Components/alphabet.js"></script>
<script src="Components/Ticker.js"></script>

Configuration

Pass a config object to Ticker(). All fields are required unless noted. The constructor throws if the container element is not found in the DOM.

Option Type Description
container string ID of the DOM element to render into
height number Display height in pixels
width number Display width in pixels per panel
colors object Map of color name → CSS color value. The first entry is the default color for text with no color tag.
scrollDirection string 'left', 'right', 'up', 'down', or 'none'
scrollDelay number Milliseconds to display each element before scrolling
scrollSpeed number Milliseconds per pixel step during scroll (lower = faster)
font object Optional. Font geometry settings (see below). Defaults to { height: 7, width: 5, padding: 1, negative: false }
id string Optional. HTML id applied to the rendered <table>

Colors are defined as a name→value map. Names are used inside text strings with {colorname} tags and must be valid CSS color strings. The first entry in the map is used as the default color when no tag is active:

colors: { "red": "#f00", "green": "#0f0", "amber": "#fa0" }

The font object controls character geometry and rendering mode:

Property Type Default Description
height number 7 Character height in pixels
width number 5 Character max width in pixels, characters can be narrower
padding number 1 Pixels of space between characters and between lines
negative boolean false Inverts the display — lit pixels become dark and dark pixels become lit

API

All methods return this for chaining.

setData( input )

Sets the text content. Accepts a single string or an array of strings for multi-panel rotation. Resets scrollOffset to 0 — call before render() or startScroll(). Characters not found in the font render as a checkered error pattern.

ticker.setData("Hello World");

ticker.setData([
    "Panel one content",
    "Panel two content"
]);
setFont( font )

Replaces the active font data object at runtime and re-encodes the current content. Useful for switching between character sets without reconstructing the ticker. Call before render() or startScroll().

ticker.setFont(MY_CUSTOM_FONT).render();
render()

Renders the current frame to the DOM. Call once after setData() to show the initial display without starting a scroll.

ticker.setData("Hello").render();
startScroll()

Starts the scroll/rotation loop. Each element is displayed for scrollDelay ms, then scrolled at scrollSpeed ms/step. Cycles continuously. Has no effect if scrollDirection is 'none'.

stopScroll()

Stops scrolling immediately, cancelling any pending scroll or delay timer.

resize( height, width )

Updates the display dimensions and reinitializes the data buffer. Call setData() again after resizing to re-encode content at the new size.

ticker.resize(16, 128).setData(myData).render();

Text Formatting

Text strings support inline color tags and newlines.

  • Color tag: {colorname} — switches the current color for all following characters. Must match a key in colors.
  • Newline: \n — moves rendering down font.height + font.padding pixels (one font row).
ticker.setData("{red}NEC-91234\nDPT 5:30 PM\n{amber}5{red}min Walk\n{green}On Time");

Full Example

const ticker = Ticker({
    container:       "container",
    height:          32,
    width:           64,
    colors:          { "red": "#f00", "green": "#0f0", "amber": "#fa0" },
    scrollDirection: 'left',
    scrollDelay:     10000,
    scrollSpeed:     50,
    font:            { height: 7, width: 5, padding: 1, negative: false }
});

ticker
    .setData([
        "{red}NEC-91234\nDPT 5:30 PM\n{amber}5{red}min Walk\n{green}On Time",
        "{red}NEC-95432\nDPT 5:45 PM\n{amber}5{red}min Walk\n{amber}Delayed"
    ])
    .render()
    .startScroll();