Custom Commands ( Optional )

Here we will add some more functionality to our graphic. Primarily reset and previous title functions.

Our graphic is looking pretty good so far. We can handle loading in some data, animating in and out, as well as advancing between titles. But, broadcasting is never as simple as load, play, next, and stop. There are usually situations where going to the first title or backwards by one title is needed. To handle those, we will add a reset and previous function to our graphic.

Resetting to the Beginning

It is typically easier to reset a graphic than it is to remove and reload a graphic. With something as simple as the one created in this guide, you may not notice any lag. But, in a more complex graphic that requires downloading videos or images before running, keeping those assets loaded will save a lot of network and CPU overhead. Let's add our reset function right after our stop function and then break it down.

function stop() { /* Stop function script */ }

function reset() {
    if(currentStep === 0) { // Graphic needs to be loaded
        handleError('The graphic is already on its first item.');
        return;
    }
    let animation;
    if(state === 1) { // Graphic is not visible
        currentStep = 0;
        animation = () => new Promise((resolve, reject) => {
            activeStep = 0;
            applyData();
            resolve();
        });
    } else if(state === 2) { // Graphic is visible 
        currentStep = -1;
        animation = () => new Promise((resolve, reject) => {
            activeStep = -1;
            resolve();
        }).then(next);
    } else {
        handleError('Cannot reset a graphic that has not been loaded.');
        return;
    }
    addPlayOutCommand(animation);
}

async function remove() { /* Remove function script */ }

The first thing we want to do is make sure the graphic has been loaded. If it is, we can check the state again to determine if the graphic is visible. A state of 1 tells us the graphic is hidden while a state of 2 is visible. We will need to increment our currentState and activeState differently according to the current state. When the graphic is not visible, we can skip any animations and change the data immediately. Since the next function is never called, the currentState and activeState variables are never incremented. Which means we can set them both to the first item in the array, or 0. When the graphic is visible, we will call next function which will increment currentState and activeState. So, we set them both to -1 to offset this.

Going Backwards

Going to the previous title requires a little bit more work than resetting but, it is still very straight forward.

function previous() {
    if(currentStep > 0) { // Check that we can go backwards
        let animation;
        if(state === 2) { // If the graphic is visible, animate backwards
            currentStep -= 2;
            // Create the promise that will eventually update 
            // the activeState and call next
            animation = () => new Promise((resolve, reject) => {
                activeStep -= 2;
                resolve();
            }).then(next);
        } else if(state === 1) { // If the graphic is hidden, just change the data
            currentStep -= 1;
            animation = () => new Promise((resolve, reject) => {
                activeStep -= 1;
                applyData();
                resolve();
            });
        } else {
            handleError('Graphic can not go back one title in the current state.')
            return;
        }
        addPlayOutCommand(animation);
    } else {
        handleError('There is no graphic to go backwards to.');
    }
}

To begin, let's ensure that we are not on this first title. If we are not then, we check the graphic's state is correct. But, this time the graphic can be in a few different states. If the graphic has been played, state 2, then we will make sure we are not on the first title. If we are not, then we will remove 2 from the currentStep and activeStep variable, since next is going to increment it by 1, and then call next. If the graphic is in state 1, loaded but not yet played, we will remove 1 from currentStep and activeStep variables and apply the text data.

That will finish up our reset and previous functions.