- Install Node.js
- Install Gulp
npm install --global gulp
- Install required packages
- Run gulp to list available comments
- Run gulp build the build using the provided theme
gulp build --theme mediary
- Copy the contents of this folder onto the CasparCG server
- This is where the source to the CasparCG template lives. If you want to make changes to the Countdown Timer, this is where you should do it
Theme support is available. To make a new theme, duplicate an existing theme (e.g. "base") from the
./src/themes directory and then make any required adjustments. Most likely you'll be wanting to edit
./src/themes/<theme_name>/css/styles.less to edit the font size, add a background image etc.
any css/less files in this directory will be merged into ./casparcg_output/css/main.css
the main styles for the theme
any files in this directory will be copied into ./casparcg_output/images
any js files in this directory will be merged into ./casparcg_output/js/main.js
Use this file to list any additional third-party libraries that you want to include. They will be copied as is into the appropriate build directory.
any other folder will be copied into ./casparcg_output
CasparCG Client Settings
Times should be passed through using either the
time key as number of seconds, or using the "HH:MM:SS" or "MM:SS" format.
By default the template will hide itself at the end of the countdown, you can pass through
false to the
hideOnEnd key to keep the template visible.
By default the timer counts down. You can pass through
true to the
countUp key to have it count up instead. In this mode it will keep counting forever until you take it offline.
Debugging and Creating a New Theme
While the primary purpose of the countdown-timer is for use with CasparCG, you don't need to copy the changes to a CasparCG server each time you adjust a theme. You can view your changes by simply opening the compiled source (
./casparcg_output/countdown_timer.html) in a modern browser (e.g. Chrome - since CasparCG is built on an old Chrome version).