Sample Composition Script: Auto-sequence Table Widget Pages

The following script, when added to your Composition Script and assigned to your appropriate overlay, will allow you to auto-sequence through your Table Widget's pages.

1 - Paste Script into Script Editor

In the Script Editor, make sure to add a new script that is assigned to your appropriate overlay. In the image below, we have selected our Lower Third overlay that is using a Table Widget.

Screen_Shot_2020-10-09_at_2.15.31_PM.png

Then paste in the following script:

Auto sequence table rows script

(function() {

let intervalHandler;
let currentPage = 1;
let maxNumberOfPages = 1;

return {
init: function(comp, context) {

// start the interval, but clear the old one
let restartInterval = function(duration) {
if (intervalHandler) {
clearInterval(intervalHandler);
intervalHandler = undefined;
}

if (duration > 0) {
intervalHandler = setInterval(function() {
currentPage++;
if (currentPage > maxNumberOfPages) {
currentPage = 1;
}
comp.setPayload({
currentPage: currentPage
});
}, duration * 1000);
}
};

// set the new number of pages and set the current page to 0 so it will be 1
// the next time the interval changes
let setMaxNumberOfPages = function(num) {
if (num > 0) {
maxNumberOfPages = num;
if (currentPage > maxNumberOfPages) {
currentPage = 0;
}
}
};

// when the control nodes of this comp or a sub comp changes
comp.addListener('payload_changed', (event, msg, e) => {
// we handle only payload changes of this comp
if (msg.compName == comp.name && msg.payload) {
if (msg.payload.advanceEveryXSecond !== undefined) {
restartInterval(parseFloat(msg.payload.advanceEveryXSecond));
}
if (msg.payload.maxNumberOfPages !== undefined) {
setMaxNumberOfPages(parseInt(msg.payload.maxNumberOfPages));
}
}
});

// initialize the max number of pages and the interval using the current payload of the sub comp
let payload = comp.getPayload2();

if (payload.currentPage !== undefined) {
currentPage = parseInt(payload.currentPage);
} else {
console.log("Sub Comp must have control node field called currentPage");
}

if (payload.maxNumberOfPages !== undefined) {
setMaxNumberOfPages(parseInt(payload.maxNumberOfPages));
} else {
console.log("Sub Comp must have control node field called maxNumberOfPages");
}

if (payload.advanceEveryXSecond !== undefined) {
restartInterval(parseFloat(payload.advanceEveryXSecond));
} else {
console.log("Sub Comp must have control node field called advanceEveryXSecond");
}

},

// the close function will be called when the script will be unloaded.
// use this function to cleanup timeouts, intervals, XHR request and so on
close: function(comp, context) {
if (intervalHandler) {
clearInterval(intervalHandler);
}
}
};
})();

2 - Add Necessary Control Nodes

After pasting the script into your Composition Script, make sure to add the following three Control Nodes into your overlay that has the table:

Screen_Shot_2020-10-09_at_2.11.26_PM.png

  • advanceEveryXSecond
  • maxNumberOfPages
  • currentPage
    • Make sure to hide this node in form (in the settings menu). Your operator does not need to select the page now as the script will auto sequence the pages. This is only needed inside Composer for the Composition Script to function.
Was this article helpful?
1 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.