A stream overlay for roller derby, built for CRG Scoreboard. Displays live score, jam clock, team names, penalties, rosters, and more — designed for use with OBS or any browser-source capture tool.
Supports connecting to a CRG instance running on a separate computer on the same network, with a built-in admin panel to configure the connection and a graceful offline error screen if the scoreboard can't be reached.
- Live scoreboard: score, jam clock, period clock, timeout tracking
- Animated score change flash and jam-score delta float
- Jam urgency indicator (last 10 seconds)
- Period urgency indicator (last 60 seconds, in-jam only)
- Timeout type styling: Official Timeout, Team Timeout, Official Review
- Lower Third panel with skater name generator and store
- Roster panels (Team 1 / Team 2)
- Penalty panels (Team 1 / Team 2)
- Points-per-Jam graph panel
- Upcoming game panel
- Configurable team name overrides and colours
- Scaling control (50–200%)
- Green screen / transparent background toggle
- Remote CRG connection — configure IP, port, and timeout from the admin panel, stored in localStorage
config.js— pre-configure a deployment so the admin panel isn't needed on every start- Offline error screen — clear warning on initial load failure, distinguishing "host unreachable" from "CRG not running"
- Reconnection badge — small on-screen indicator when the scoreboard connection drops mid-bout
- Connection test page —
test-connection.htmlfor pre-bout verification with response timing - Cache-busted
core.js— CRG updates are picked up automatically on next page load
- CRG Scoreboard running on your network (only one machine needs it)
- A modern web browser on the overlay machine (Chrome recommended for OBS)
- Network access between the two machines (same LAN, port 8000 open)
- Copy the
tmsbfolder into your CRG installation directory:<crg-root>/html/custom/overlay/tmsb/ - Open CRG Scoreboard and navigate to:
The overlay is live. Open
http://localhost:8000/custom/overlay/tmsb/admin/in a separate tab to control it. - (Optional) Edit
config.jsto setCRG_IP,CRG_PORT, orTIMEOUT_MSas permanent defaults.
Use this when the machine running OBS is different from the machine running CRG.
- Copy the overlay files to any location on the overlay computer (a folder or USB drive — no web server needed).
- Set the CRG machine's IP address in
config.jsbefore doing anything else — this ensures OBS picks it up correctly on every launch without any manual steps (see Configuration File). - Add
index.htmlas a Browser Source in OBS. - Add
admin/index.htmlas a second Browser Source in OBS (can be in a utility scene or hidden scene — it does not need to be visible on stream). - To configure the connection or control the overlay from within OBS, right-click the admin Browser Source and choose Interact. This opens a live mini-browser where you can use the admin panel normally.
- When done, hide or switch away from the admin source — it has no effect on the overlay when not visible.
Important: OBS Browser Sources have their own isolated localStorage, separate from any external browser. Settings entered in Chrome or Firefox will not carry over to OBS. Always use the Interact method or
config.jsto configure the connection within OBS.
To switch back to local mode: open the admin via Interact, clear the IP field, and click Connect (or use Reset to Default).
Open admin/index.html alongside the overlay to control it in real time.
| Control | Description |
|---|---|
| Clock | Toggle the clock display |
| Score | Toggle the score display |
| Show Jammers | Toggle jammer indicators |
| Panels | Switch between roster, penalty, PPJ, lower third, and upcoming panels |
| Lower Third | Set custom text lines and style; includes a skater name generator |
| Team Display | Override team names and colours |
| Scaling | Resize the overlay (50–200%) |
| Background | Transparent or green screen |
| Clock After Timeout | Choose whether to show Lineup or Timeout clock post-timeout |
| Preview Size | Resize the admin's preview iframe |
| CRG Connection | Set the IP, port, and timeout for a remote CRG instance |
config.js |
File-based defaults for the above — edit once per deployment |
| Key | Action |
|---|---|
C |
Toggle clock |
S |
Toggle score |
J |
Toggle jammers |
0 |
Points per Jam panel |
1 |
Roster Team 1 |
2 |
Roster Team 2 |
3 |
Penalty Team 1 |
4 |
Penalty Team 2 |
9 |
Lower Third |
U |
Upcoming |
Space |
Clear panel |
CRG serves two key scripts (jquery.js and core.js) that the overlay depends on. Normally these load from the same machine serving the HTML. When a remote IP is configured:
- jQuery always loads from the local serving host (fast, reliable).
core.jsloads from the configured remote CRG machine with a 5-second timeout.- A WebSocket intercept redirects CRG's socket connection to the configured host, since CRG normally connects back to
window.location.host. - A WS stub absorbs any
WS.Register()calls made beforecore.jsarrives and replays them once it loads.
If the remote host is unreachable, the overlay shows a clear error screen after 5 seconds and the admin panel's Connection section highlights the failure — without displaying the configured IP address on screen.
- Add a Browser Source and set the URL to your
index.htmlpath — either afile://path on the overlay computer orhttp://<crg-host>:8000/custom/overlay/tmsb/index.htmlif served by CRG. - Set width/height to match your stream resolution (typically 1920×1080).
- Check Shutdown source when not visible to free resources between scenes.
- Add a second Browser Source for
admin/index.html— this can live in a hidden scene or a utility scene that never goes to output. Set the browser source size to 1280×1280 so the full admin panel is visible and usable in the Interact window. - To use the admin panel from within OBS, right-click the admin source and choose Interact. A mini-browser opens where you can control all overlay settings live.
- Changes made via Interact are stored in OBS's localStorage and persist across relaunches of that Browser Source.
Note: Do not use an external browser (Chrome, Firefox, etc.) to configure the overlay when running it through OBS — OBS Browser Sources have isolated localStorage and will not see settings entered elsewhere. Use Interact or
config.jsinstead.
Open test-connection.html in a browser before going live. It reads the same configuration as the overlay and reports:
- Whether CRG is reachable at the configured host and port
- Response time (useful for diagnosing a slow network)
- A plain-language explanation if the connection fails
If the WebSocket drops mid-bout (CRG crash, network glitch), a small ⟳ Reconnecting… badge appears at the bottom of the overlay and disappears automatically when the connection comes back. It does not appear during the initial load — that is handled by the offline error screen.
To hide it from the broadcast stream entirely, add the following to the Custom CSS field in your OBS Browser Source:
#crg-reconnecting { display: none !important; }config.js at the root lets you pre-configure a deployment without opening the Admin panel:
window.TMSB_CONFIG = {
CRG_IP: '192.168.1.50', // blank = same host as the overlay
CRG_PORT: '8000',
TIMEOUT_MS: 5000 // ms before showing the offline screen
};Values set through the Admin panel (stored in localStorage) take precedence over config.js.
Pull requests are welcome. For major changes, please open an issue first to discuss what you'd like to change.
Haley "Thin Mint" Stelly
GPL v3 — free to use, modify, and distribute under the same license. See LICENSE for full terms.
This project is a derivative work of the CRG Scoreboard overlay, which is also distributed under the GPL v3.
See CHANGELOG.md for a full history of releases.
Built on top of CRG Scoreboard by the CRG project contributors.