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.
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.
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.
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.
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
Last updated