Countdowns Pack

This pack is a collection of various Clocks and Countdowns for live video or event production. The Countdowns Pack can be purchased from the SPX Store.

A collection of various templates from the Countdowns Template Pack.

Each template has a CSS file for customizing colors and fonts in addition to several built-in visual, layout, and functionality options. They can be used as-is or modified for the needs of the user.

The Countdown pack consists of multiple templates which are HTML graphics used via CasparCG or other HTML-capable playout systems, such as OBS, vMix, Ecamm, etc. The templates are easy to use and can be modified conveniently from the SPX user interface. 

SPX templates or extensions from the SPX Store are usually available as zip files for manual installation and as an executable installer for Windows machines. See knowledgebase articles on installing templates.

⚠ REMEMBER to make backup copies of the original files before making any changes.

The template can be used as-is for different purposes from the SPX UI. For advanced modifications or styling, the CSS and Javascript files can be modified.

Please see the HTML, CSS, and Javascript source code for options, comments, and additional developer information.

Color change

All templates uses a customize.css stylesheet file for a global color theme settings and this can be changed globally for all templates and they can be overwritten in each template's CSS styles. 

Font change

• place a new font file in the fonts subfolder
• link font file to the template by modifying CSS font file links

The Countdown pack comes with the following templates with varying designs and functionality.

• A realtime clock
• Countdown

The countdown can be shown in several ways (days, hours, minutes, seconds, and various combinations. This countdown also includes time offset (in +/- minutes).

The template comes with several example CSS themes and more can be created as needed for different layouts, fonts, and color schemes. The on-screen position can be customized to be top/middle/bottom/left/center/right using CSS properties. in the theme files.

Countdown with a background image (Countdown_BG_Image_SRC.html) is a template that is designed to display the countdown with a background image.

For easy customization, use your own images as a background. The template has the option to pick a background png-image from a folder and it can also have transparency for advanced effects and layer with video and other templates.

Countdown cartoony (Countdown_Cartoony_SRC.html) is a very basic quiz/question timeout graphic with cartoony animations. Once the time reaches 0 the graphic "drops" out of the frame. See the source code for changing styles and animations.

Speaker timer (Countdown_Speaker_SRC.html) is a professional speaker timer (countdown) for live corporate events.

The graphic is designed to be shown on an off-camera monitor to a speaker and has a progress bar and bright colors for notifying the speaker about the remaining time. Colors and timing rules can be modified in the files. The template comes with several example Theme files and more can be added by the user. The template also has a dropdown selector for picking a logo image from a folder.

See a separate KB article on this template

The countdown ring (Countdown_Ring_SRC.html) is a template with a round progress indicator. The graphic is shown on the screen with PLAY and the countdown can be started with the CONTINUE command.

Customize your own colors by changing the properties in the CSS file.

Top corner countdown (Countdown_Top_Corner_SRC.html) is a Minimalistic text strap with several running modes: time, date, time date, countdown, and additional information text. The template has built-in controls for left and right positioning.

Stopwatch has the option to change a background image or leave it transparent, so it can be used as an overlay over a video. 

Stopwatch is shown on the screen with SPX's PLAY command and the timer is started and paused with subsequent CONTINUE commands. Please note th stopwatch can also be triggered with external devices (such as the Stream Deck) or from an external application using control API commands. Read this article on using API commands for more information.

• setValue()
• changeValue()
  
  The current value can be set by sending the desired new integer value to the template; such as setValue(10).
  
  The current value can be changed by sending a modifier to the template; such as changeValue(-4) would decrement by 4, whereas invoking changeValue(100) would increment the value by 100.