HTML5 templates and control application for CasparCG for association football
Switch branches/tags
Clone or download
Pull request Compare This branch is 1 commit ahead of xtv-online:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
graphics-control
html-templates
screenshots
stats-tracker
.gitignore
LICENSE
README.md

README.md

XTV Football Graphics

Prerequisites

  • Node.js (tested with version 4)
  • CasparCG Server (tested with 2.0.7)
  • CasparCG Client to load the templates (tested with 2.0.7)
  • Tested with a Blackmagic Decklink HD Extreme 3D+ for SDI Key & Fill Out

Install Control

  • Inside the graphics-control folder:
  • npm install
  • bower install

Run Control

  • gulp

Set Up Caspar Templates

  • Copy the html-templates folder into your CasparCG Server templates directory
  • Load all the templates in Caspar using the CasparCG client on separate video layers on the correct channel and 'play' them.

Use Control

http://localhost:3000 (or the IP of the machine you have the controls running on)

Operation

Control

Team Settings

Screenshot

Set Name, Colour, Short name and players. Settings are applied immediately to the template.

The 'Picture URI' is currently not being used by any of the templates. Future development could see it integrated into the lower thirds, or additional templates for a teamsheet with photos or similar.git p

Player Control

Screenshot

All relevant match controls to show relevant lower thirds. 'Goal' also updates the Score.

Substitution Modal

Screenshot

Select an inactive player to substitute with.

Manual and Time Control

Screenshot

Set clock, stoppage time and adjust the score.

Look

Main Clock and Score

Screenshot

Score and clock, including over time and stoppage time, on display.

Yellow Card

Screenshot

Yellow Card lower third. By default all lower thids are displayed for 5 seconds, and are animated with animoJS animations.