SuperDash

Real-time playout monitoring for broadcast environments.

Overview

SuperDash is a unified monitoring system for professional broadcast facilities. It aggregates state from multiple playout devices (CasparCG, vMix, HyperDeck) and distributes normalised status information via WebSocket, Ember+, and TSL UMD protocols.

Designed for live television production where reliability and timing precision are non-negotiable.

Features

Multi-source aggregation — CasparCG (OSC), vMix (HTTP XML), HyperDeck (TCP)
Broadcast protocol output — Ember+ provider (TCP 9000), TSL UMD v5.0 sender (UDP)
Real-time dashboard — Responsive grid layout for up to 12 devices
Frame-accurate timing — Drift-free scheduling with monotonic timestamps
Health endpoint — /health for operational monitoring
Single-process deployment — HTTP, WebSocket, and protocols from one server

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        SuperDash Server                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │  CasparCG   │  │    vMix     │  │  HyperDeck  │  ← Inputs   │
│  │  OSC/UDP    │  │  HTTP/XML   │  │    TCP      │             │
│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘             │
│         │                │                │                     │
│         └────────────────┼────────────────┘                     │
│                          ▼                                      │
│                 ┌─────────────────┐                             │
│                 │  State Manager  │                             │
│                 └────────┬────────┘                             │
│                          │                                      │
│         ┌────────────────┼────────────────┐                     │
│         ▼                ▼                ▼                     │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │  WebSocket  │  │   Ember+    │  │  TSL UMD    │  ← Outputs  │
│  │    :3050    │  │  TCP :9000  │  │  UDP :4003  │             │
│  └─────────────┘  └─────────────┘  └─────────────┘             │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Quick Start

# Clone and install
git clone https://github.com/FiLORUX/superdash.git
cd superdash
npm install

# Configure devices
cp config.example.json config.json
# Edit config.json with your device IPs

# Start server
npm start

Open http://localhost:3050/ in a browser for the navigation page.

Configuration

Copy config.example.json to config.json and adjust for your environment:

{
  "settings": {
    "defaultFramerate": 50,
    "updateIntervalMs": 100,
    "webSocketPort": 3050,
    "defaultPorts": {
      "hyperdeck": 9993,
      "vmix": 8088,
      "casparcg": 6250
    },
    "emberPlusPort": 9000,
    "tslUmdDestinations": [
      { "host": "10.13.37.100", "port": 4003 }
    ],
    "tslUmdScreen": 0
  },
  "servers": [
    {
      "id": 1,
      "name": "CasparCG LTS",
      "type": "casparcg",
      "ip": "10.13.37.10"
    }
  ]
}

Device Types

Type	Protocol	Default Port	Notes
`casparcg`	OSC over UDP	6250	Requires OSC output enabled in CasparCG
`vmix`	HTTP XML API	8088	Polls `/api` endpoint
`hyperdeck`	TCP (Telnet-style)	9993	Persistent connection with keepalive

Display Modes

Index (`/`)

Navigation page with links to all display modes and live health status.

Dashboard (`/dashboard.html`)

Multi-device monitoring grid for control room displays. Shows all configured playout and recording devices on a single screen with live state, timecode, and filename. Scales dynamically from 1 to 12 devices.

Use case: Dedicated control room monitor for unified playout visibility.

Fullscreen Display (`/gui.html`)

Large-format single-device display with prominent timecode, filename, progress bar, and state indicator. Keyboard navigation (arrow keys) to switch between devices. Designed for high visibility at a distance.

Use case: Confidence monitors, prompter screens, operator displays.

URL parameters:

device — Device index (default: 0)

Example: /gui.html?device=2

Multiviewer Overlay (`/overlay.html`)

Transparent overlay for SDI keying and multiviewer compositing. Superimpose timecode and state information on VB/VT playout sources in your multiviewer. Configurable corner position, background opacity, and stale-data fade timeout.

Use case: Timecode burn-in on multiviewer tiles showing playout sources.

URL parameters:

device — Device index (default: 0)
position — Corner placement: bottom-left, bottom-right, top-left, top-right (default: bottom-left)
opacity — Background opacity 0–1 (default: 0.85)
fadeTimeout — Seconds until fade on stale data, 0 to disable (default: 3)

Example: /overlay.html?device=1&position=top-right&opacity=0.7

Control Panel (`/control.html`)

Configuration interface for device management. Add, modify, and test device connections. Simulate states for integration testing.

Broadcast Protocol Integration

Ember+ Provider

Exposes device state via Ember+ tree structure on TCP port 9000. Compatible with VSM, Lawo, and other broadcast control systems.

Tree Structure:

SuperDash
├── Info
│   └── Version: "1.0.0"
└── Devices
    ├── Device_1
    │   ├── State: "play"
    │   ├── Timecode: "01:23:45:12"
    │   ├── Filename: "clip.mov"
    │   ├── Connected: true
    │   └── Type: "casparcg"
    └── Device_2
        └── ...

TSL UMD v5.0 Sender

Sends tally state to TSL UMD displays over UDP. State mapping:

Device State	TSL Tally
`play`	Red (Brightness 3)
`rec`	Amber (Brightness 3)
`stop`	Off
`offline`	Off (Dimmed)

Health Monitoring

The /health endpoint provides operational status:

curl http://localhost:3050/health

{
  "status": "healthy",
  "uptime": 3600.5,
  "version": "1.0.0",
  "devices": {
    "total": 5,
    "connected": 4,
    "list": [...]
  },
  "protocols": {
    "websocket": { "clients": 2 },
    "emberPlus": { "enabled": true, "running": true },
    "tslUmd": { "enabled": true, "running": true }
  },
  "memory": { "heapUsed": 12, "heapTotal": 14, "unit": "MB" }
}

Status values:

healthy — At least one device connected
degraded — No devices connected

Development

# Development mode with auto-reload
npm run dev

# Run tests
npm test

# Format code
npx prettier --write .

Project Structure

superdash/
├── server/
│   ├── server.js              # Main entry point
│   ├── hyperdeck-client.js    # HyperDeck TCP client
│   ├── vmix-client.js         # vMix HTTP poller
│   ├── osc-casparcg.js        # CasparCG OSC listener
│   ├── emberplus-provider.js  # Ember+ tree provider
│   ├── tsl-umd-sender.js      # TSL UMD v5.0 sender
│   └── __tests__/             # Jest test suites
├── public/
│   ├── index.html             # Navigation page
│   ├── dashboard.html         # Multi-device control room grid
│   ├── gui.html               # Fullscreen confidence monitor
│   ├── overlay.html           # Transparent multiviewer overlay
│   └── control.html           # Configuration panel
├── research/                  # Protocol documentation
├── config.example.json        # Configuration template
└── package.json

Production Deployment

For systemd-based Linux servers, see deploy/README.md for:

Service user setup
systemd unit installation
Firewall configuration
Update procedures

Requirements

Node.js 20 LTS or later
Network access to playout devices
UDP port 6250 open for CasparCG OSC (if used)
TCP port 9000 available for Ember+ provider

Licence

MIT Licence — see LICENSE for details.

Acknowledgements

Built for broadcast environments where downtime is not an option.

Protocol documentation sourced from Lawo (Ember+) and TSL Products (UMD).

David Thåst · thåst.se · FiLORUX