Setting up the JS File

Here we will define the required functions in a CasparCG HTML Template JavaScript file.

Let's begin by taking a look at the current JS file lower-third.1.js in the js folder.

'use strict';

// lower-third.1.js

const _graphic = (function() {

    function handleError(e) {console.error(e)}
    function handleWarning(w) {console.log(w)}

    return { }

})();

We setup a global variable called _graphic and assign it to an IIFE. For now, all you need to know is IIFE's run as soon as they are parsed. So, in our script, _graphic will resolve to an empty object.

Graphic Properties

To start, we are going to add a few variables that help us control our graphic.

const _graphic = (function() {
    let state = 0;
    let activeStep = 0;
    let currentStep = 0;
    let data = [];
    let style;
    
    /* Error and warning functions */
}

The state property defines where the graphic is in the play out process. 0 for loading, 1 for ready to be played, 2 for has been played and can be stopped. currentStep will track which title is going to be shown after all the animations play out. While activeStep is the title currently being show. data is an array of titles and subtitles. Finally, style contains the primary color and text color data.

AMCP Commands in JS

Every HTML template's JS file is required to define an update, play, next, and stop function on the global scope so the CasparCG Server can call it. We can optionally define a remove function and any other function thanks to the Invoke command.

Let's begin by defining our own version of the AMCP commands.

const _graphic = (function() {
    /* Graphic Varaible Definitions */

    function update(raw) { }
    function play() { }
    function next() { }
    function stop() { }
    function remove() { }

    function handleError(e) {console.error(e)}
    function handleWarning(w) {console.log(w)}
    return { }

})();

A property of IIFE's is that any function defined within them cannot be executable outside of the function definition. If you attempt to run any of the play out commands from CasparCG or the console, you will get a Reference Error. To fix this, we will define a second IIFE that will run inside of our main function. If you have some Object Oriented Programming experience, this will be similar to a constructor method.

const _graphic = (function() {

    (function() {
        // Runs after the rest of the parent function parses
        window['update'] = (raw) => update(raw);
        window['play'] = play;
        window['next'] = next;
        window['stop'] = stop;
        window['remove'] = remove;
    })();

    function update(raw) { }
    function play() { }
    function next() { }
    function stop() { }
    function remove() { }

    function handleError(e) {console.error(e)}
    function handleWarning(w) {console.log(w)}
    return { }

})();

Adding a reference to each required functions on the window object allows us and CasparCG to execute them. We also had to wrap the update function in an Arrow Function with the raw parameter passed to it. We will go into more detail later about why this must happen. Try running update() from your web browsers developer console. No more Reference Error!

Resources

• Arrow Functions on W3 Schools Website