StreamVue Widget Library 45 widgets

Config-driven channel overlays. Every widget is a self-contained page that reads its settings from URL query parameters and renders on a transparent background over the channel video. Host this widgets/ folder on a public https host; put a widget's URL (with its params) into a channel's Webpage widget, or use it as its own channel. Every widget takes chrome=glass|solid|shadow|brand and accent=%23RRGGBB.

Airgapped time (the TIME group on time widgets): they never trust the renderer's own clock zone. Set base=2026-06-01T20:45 to feed the time manually (the box clock is ignored and ticks on from there), or offset=%2B1:00 to shift the box clock by ±H:MM. A clock zone can be a fixed offset (London|%2B1) so no timezone database is needed at all — everything works with no network.

Live data & keys. Weather and FX need no key. The travel / sport / news / ops widgets take their API key and endpoint as params (apikey=, station=, data=…) and show a realistic sample until a key is entered — so every widget can be uploaded and channelled now and simply goes live once its key arrives.

Time & Countdown 5

World Clocks

clock.html

Params — face=digital|stack|analogue|roman|minimal|flip · zones=London,New York,Tokyo (also Label|Area/Zone or Label|±H:MM fixed offset) · h12 · secs · TIME · chrome · accent

Example — clock.html?face=analogue&zones=London,New York,Tokyo

Event Countdown

countdown.html

Params — title · to=ISO datetime (venue time) · zero=label at 0 · TIME · chrome · accent

Example — countdown.html?title=KICK-OFF&to=2026-12-31T20:00

Kitchen & Last Orders

kitchen.html

Params — label · close=HH:MM · open=HH:MM · warn=mins (amber, def 15) · closed=text · TIME · chrome

Example — kitchen.html?label=Kitchen&close=21:00&base=2026-06-01T20:50

Now & Next Programme

now-next.html

Params — now, next as HH:MM|Title · or items= JSON · heading · TIME · chrome

Example — now-next.html?chrome=solid

Date & Greeting

datebar.html

Params — title (override greeting) · TIME (tz/base/offset) · chrome · accent

Example — datebar.html?chrome=glass

Weather & Environment 4

Local Weather

weather.html

Params — place · lat · lon · f (°F) · variant=chip|panel · stale=stamp|fade|hide · chrome

Example — weather.html?place=Birmingham&lat=52.48&lon=-1.9

Matchday Forecast

matchday-forecast.html

Params — lat · lon · place · kickoff=HH:MM · hours=6 · f (°F) · chrome — live Open-Meteo (no key)

Example — matchday-forecast.html?place=Birmingham&lat=52.48&lon=-1.9&kickoff=15:00&chrome=solid

UV · Pollen · Air Quality

air-quality.html

Params — lat · lon · place · chrome — live Open-Meteo air-quality (no key)

Example — air-quality.html?place=Birmingham&lat=52.48&lon=-1.9&chrome=glass

Pitch & Track Conditions

pitch-conditions.html

Params — lat · lon · title · surface= JSON [{k,v,tone}] · chrome — live Open-Meteo (no key)

Example — pitch-conditions.html?title=Pitch%20conditions&lat=52.48&lon=-1.9&chrome=solid

Travel & Egress 5

UK Rail Departures

rail-departures.html

Params — station=CRS (e.g. BHM) · rows=6 · apikey= (National Rail Darwin) · title · chrome

Example — rail-departures.html?station=BHM&title=New%20Street%20departures&chrome=solid

Flight Departures

flight-departures.html

Params — airport=IATA (e.g. BHX) · rows=6 · apikey= (AeroDataBox) · title · chrome

Example — flight-departures.html?airport=BHX&title=Birmingham%20departures&chrome=solid

Tube & Metro Status

line-status.html

Params — lines=victoria,central,… (TfL ids) · title · apikey= (optional TfL app key) · chrome

Example — line-status.html?title=Tube%20status&chrome=glass

Road Travel Times

road-times.html

Params — routes= JSON [{name,mins,delta,tone}] · title · apikey= (TomTom) · chrome

Example — road-times.html?title=Egress%20routes&routes=%5B%7B%22name%22%3A%22M6%20J6%20north%22%2C%22mins%22%3A14%2C%22delta%22%3A6%7D%5D&chrome=solid

Getting Home Board

getting-home.html

Params — title · trains= JSON [{time,dest,note,tone}] · trams=text · roads= JSON · apikey= · chrome

Example — getting-home.html?title=Getting%20home&chrome=brand

Live Sport 7

Score Bug

score-bug.html

Params — home=ARS · away=CHE · hs · as · hc=#hex · ac=#hex · clock=67min · comp · apikey= · chrome

Example — score-bug.html?home=ARS&away=CHE&hs=2&as=1&hc=%23EF0107&ac=%23034694&clock=67'&chrome=solid

Vidiprinter Ticker

vidiprinter.html

Params — items= JSON [{min,text}] · speed=55 · apikey= (football-data) · chrome

Example — vidiprinter.html?chrome=solid

League Table Window

league-table.html

Params — rows= JSON [{pos,team,pl,gd,pts,home}] · title · comp=PL · apikey= (football-data) · chrome

Example — league-table.html?title=Premier%20League&chrome=solid

Starting XI Card

starting-xi.html

Params — formation=4-3-3 · players= JSON [11 names] · color=#hex · title · apikey= (API-Football) · chrome

Example — starting-xi.html?title=Arsenal%20XI&formation=4-3-3&color=%23EF0107&chrome=solid

Next Race Card

next-race.html

Params — course · off=HH:MM · runners= JSON [{no,name,jockey,price}] · apikey= (Racing API) · chrome

Example — next-race.html?course=Ascot&off=15:40&chrome=solid

Match Odds Board

match-odds.html

Params — title · sel= JSON [{name,price,drift}] · book= · aware=1 (18+ line) · apikey= (Odds API) · chrome

Example — match-odds.html?title=Arsenal%20v%20Chelsea&book=Sky%20Bet&chrome=solid

Fixtures Tower

fixtures-tower.html

Params — title · items= JSON [{time,name}] · now= index of current · chrome

Example — fixtures-tower.html?title=Today&now=2&chrome=glass

Hospitality & Venue 11

Chef's Board / Menu

menuboard.html

Params — title · menu= JSON [{section,name,desc,price,was,out}] · hh= happy-hour · chrome

Example — menuboard.html?chrome=solid

Welcome Signage

welcome.html

Params — title · name · sub · logo= image URL · chrome

Example — welcome.html?name=Acme%20Ltd&sub=Boardroom%202%20%C2%B7%2014:00&chrome=brand

Sponsor Moments

sponsor-rotator.html

Params — logos= JSON [image URLs] · dwell=6 · prefix= caption · chrome

Example — sponsor-rotator.html?chrome=glass

Announcement Strap

announce.html

Params — kick=flag label · msg=message · chrome · accent

Example — announce.html?kick=Travel&msg=Last%20train%20New%20Street%2023:42&chrome=solid

Notices Bulletin

ops-notices.html

Params — heading · items= JSON [{text,level}] (info|warn|alert) · or line1..line4 · chrome

Example — ops-notices.html?chrome=solid

Tap List

tap-list.html

Params — title · items= JSON [{tap,beer,brewery,abv,out}] · fresh= index just-tapped · chrome

Example — tap-list.html?title=On%20tap&chrome=solid

Meeting-Room Strip

meeting-room.html

Params — room · now= JSON {title,until} · next= JSON {title,at} · apikey= (M365/Google) · chrome

Example — meeting-room.html?room=Boardroom%202&chrome=brand

QR Call-to-Action Bug

qr-cta.html

Params — label (≤5 words) · sub · img= (QR image URL/data) · chrome — QR image supplied by the app

Example — qr-cta.html?label=Order%20to%20seat&sub=Scan%20to%20order&chrome=glass

Next at This Venue

next-event.html

Params — name · when=ISO · sub · art=#hex duotone · apikey= (Ticketmaster) · chrome

Example — next-event.html?name=The%20National&when=2026-09-14T19:30&sub=Doors%2018:00&art=%237B4BF0&chrome=solid

Concourse Queue Times

queue-times.html

Params — title · items= JSON [{name,mins}] · warnAt=5 · badAt=12 · feed= · chrome

Example — queue-times.html?title=Queue%20times&chrome=solid

Guest Reviews Bug

reviews.html

Params — items= JSON [{stars,text,name}] · dwell=7 · apikey= (Google Places) · chrome

Example — reviews.html?chrome=glass

News & Markets 4

Markets & FX Strip

markets.html

Params — base=GBP · symbols=USD,EUR,JPY · label · speed · refresh · chrome — live Frankfurter (no key)

Example — markets.html?base=GBP&symbols=USD,EUR,JPY&chrome=solid

Venue Ticker

ticker.html

Params — src= flag label · items= JSON · or text= · chrome

Example — ticker.html?src=VENUE&chrome=solid

Headlines Lower-Third

headlines.html

Params — source=BBC · items= JSON [texts] · dwell=6 · feed= (RSS→JSON url) · apikey= · chrome

Example — headlines.html?source=BBC%20News&chrome=solid

News Crawl

news-crawl.html

Params — items= JSON [texts] · sep=• · speed=60 (px/s) · feed= (RSS→JSON) · source= chip · chrome

Example — news-crawl.html?source=NEWS&chrome=solid

Ops & Diagnostics 9

Server Stats

server-stats.html

Params — data= JSON {cpu,mem,temp,playouts,uptime} (Jaff maestro-appliances-request) · title · chrome

Example — server-stats.html?title=Core%20server&chrome=solid

STB Network Monitor

net-monitor.html

Params — data= JSON [{name,down,up,hist:[…]}] (needs server net counters) · title · chrome

Example — net-monitor.html?title=STB%20network&chrome=solid

Fleet Status Board

fleet-status.html

Params — data= JSON {ok,warn,bad,on,total,worst:[…]} (Jaff conductor-assets-request) · title · chrome

Example — fleet-status.html?title=Fleet%20status&chrome=solid

Zone Health Ribbon

zone-health.html

Params — data= JSON [{name,tone}] (Jaff conductor-locations-request) · title · chrome

Example — zone-health.html?title=Zone%20health&chrome=glass

Encoder Load Strip

encoder-load.html

Params — data= JSON [{host,in,out,head}] (Jaff vivo-portals-request) · title · chrome

Example — encoder-load.html?title=Encoder%20load&chrome=solid

Stream Bitrate Gauge

bitrate-gauge.html

Params — data= JSON {mbps,max,hist:[…]} (Jaff vivo-outputs stats) · channel= · chrome

Example — bitrate-gauge.html?channel=Ch%20233&chrome=solid

Device Diagnostic Card

device-card.html

Params — data= JSON {name,model,firmware,ip,mac,uptime,seen} (Jaff conductor-assets-request) · chrome

Example — device-card.html?chrome=solid

Input Signal Monitor

input-monitor.html

Params — data= JSON [{name,health,sync,queue}] (Jaff vivo-inputs-request) · title · chrome

Example — input-monitor.html?title=Head-end%20inputs&chrome=solid

Automation Ticker

automation-ticker.html

Params — data= JSON {next:{name,at},last:{name,ok}} (Jaff maestro-manuscript-request) · chrome

Example — automation-ticker.html?chrome=solid