From fdb9ff8992a716da2d1c73057ba6bec2f4b436a7 Mon Sep 17 00:00:00 2001 From: Mark Rapson Date: Wed, 24 Feb 2021 00:29:38 +0000 Subject: [PATCH] Re-organised and migrated id to class Instead of IDs being used this has been changed to HTML classes to allow for multiple items to arise from the same property. Along side this CasparCG.js now checks if the entity is an img tag and replace src as opposed to innerHTML. --- .../Project => Example Project}/CasparCG.js | 53 ++++++----- Example Project/CasparCG0.js | 87 +++++++++++++++++++ .../GWD_CCG_example.html | 6 +- .../GWD_CCG_example_groups_archive | 0 .../gwd-events-support.1.0.js | 0 .../gwd_workspace.json | 0 {Basic/template => template}/CasparCG.js | 53 ++++++----- .../gwd-events-support.1.0.js | 0 {Basic/template => template}/index.html | 4 +- 9 files changed, 144 insertions(+), 59 deletions(-) rename {Basic/Project => Example Project}/CasparCG.js (62%) create mode 100644 Example Project/CasparCG0.js rename {Basic/Project => Example Project}/GWD_CCG_example.html (97%) rename {Basic/Project => Example Project}/GWD_CCG_example_groups_archive (100%) rename {Basic/Project => Example Project}/gwd-events-support.1.0.js (100%) rename {Basic/Project => Example Project}/gwd_workspace.json (100%) rename {Basic/template => template}/CasparCG.js (62%) rename {Basic/template => template}/gwd-events-support.1.0.js (100%) rename {Basic/template => template}/index.html (99%) diff --git a/Basic/Project/CasparCG.js b/Example Project/CasparCG.js similarity index 62% rename from Basic/Project/CasparCG.js rename to Example Project/CasparCG.js index bfbf0ce..b84c0e6 100644 --- a/Basic/Project/CasparCG.js +++ b/Example Project/CasparCG.js @@ -1,28 +1,17 @@ /* -* Data sent from CasparCG Client as templateData -* is pushed into corresponding HTML id element -* -* Usage: -* insert a script reference in the HTML template header. -* ex: -* Make sure that the id that you refer to is the innermost tag. -* Everything within that tag id will be replaced by the value sent from CasparCG -* -* put together by Tomas Linden -* modified by Øjvind Søgaard Andersen -* - Structure of data sent from CasparCG: - - - - - : - : - - - - -*/ + * Usage: + * insert a script reference in the HTML header. + * ex: + * Make sure that the class that you refer to is the innermost tag. + * Either the item will have it's content replace or src updated if an image + * + * Items with classes 'CasparCG-XXX' will be replaced + * So f0 would have the class 'CasparCG-f0' + * + * put together by Tomas Linden + * modified by Mark Rapson + */ + // Global variable for data from CasparCG var dataCaspar = {}; @@ -58,9 +47,19 @@ function XML2JSON(node) { // Main function to insert data function dataInsert(dataCaspar) { for (var idCaspar in dataCaspar) { - var idTemplate = document.getElementById(idCaspar); - if (idTemplate != undefined) { - idTemplate.innerHTML = escapeHtml(dataCaspar[idCaspar]); + var applicableElements = document.getElementsByClassName('CasparCG-' + idCaspar); + if (applicableElements) { + // Loop through Applicable DIVs + [].slice.call(applicableElements).forEach(function(currentElement) { + console.log(currentElement.tagName); + if (currentElement.tagName == 'img') { + //Set Image if img item + currentElement.src = dataCaspar[idCaspar]; + } else { + //Set InnerHTML otherwise + currentElement.innerHTML = escapeHtml(dataCaspar[idCaspar]); + } + }) } } } diff --git a/Example Project/CasparCG0.js b/Example Project/CasparCG0.js new file mode 100644 index 0000000..b84c0e6 --- /dev/null +++ b/Example Project/CasparCG0.js @@ -0,0 +1,87 @@ +/* + * Usage: + * insert a script reference in the HTML header. + * ex: + * Make sure that the class that you refer to is the innermost tag. + * Either the item will have it's content replace or src updated if an image + * + * Items with classes 'CasparCG-XXX' will be replaced + * So f0 would have the class 'CasparCG-f0' + * + * put together by Tomas Linden + * modified by Mark Rapson + */ + +// Global variable for data from CasparCG +var dataCaspar = {}; + +// Replace characters that could become a problem if left as is +function escapeHtml(unsafe) { + return unsafe.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'"); +} + +// Parse templateData into an XML object +function parseCaspar(str) { + var xmlDoc; + if (window.DOMParser) { + parser = new DOMParser(); + xmlDoc = parser.parseFromString(str, "text/xml"); + } + dataCaspar = XML2JSON(xmlDoc.documentElement.childNodes); +} + + +// Make the XML templateData message into a more simple key:value object +function XML2JSON(node) { + var data = {}; // resulting object + for (k = 0; k < node.length; k++) { + var idCaspar = node[k].getAttribute("id"); + var valCaspar = node[k].childNodes[0].getAttribute("value"); + if (idCaspar != undefined && valCaspar != undefined) { + data[idCaspar] = valCaspar; + }; + } + return data; +} + +// Main function to insert data +function dataInsert(dataCaspar) { + for (var idCaspar in dataCaspar) { + var applicableElements = document.getElementsByClassName('CasparCG-' + idCaspar); + if (applicableElements) { + // Loop through Applicable DIVs + [].slice.call(applicableElements).forEach(function(currentElement) { + console.log(currentElement.tagName); + if (currentElement.tagName == 'img') { + //Set Image if img item + currentElement.src = dataCaspar[idCaspar]; + } else { + //Set InnerHTML otherwise + currentElement.innerHTML = escapeHtml(dataCaspar[idCaspar]); + } + }) + } + } +} + +// Call for a update of data from CasparCG client +function update(str) { + parseCaspar(str); // Parse templateData into an XML object + dataInsert(dataCaspar); // Insert data +} + +// insert data from CasparCg client when activated +function play(str) { + parseCaspar(str); // Parse templateData into an XML object + dataInsert(dataCaspar); // Insert data +} + +// Call for a next from CasparCG client +function next() { + gwd.actions.timeline.play('document.body'); +} + +// Call for a stop from CasparCG client +function stop() { + gwd.actions.timeline.gotoAndPlay('document.body', 'stop'); +} diff --git a/Basic/Project/GWD_CCG_example.html b/Example Project/GWD_CCG_example.html similarity index 97% rename from Basic/Project/GWD_CCG_example.html rename to Example Project/GWD_CCG_example.html index b24874d..ee78ca2 100644 --- a/Basic/Project/GWD_CCG_example.html +++ b/Example Project/GWD_CCG_example.html @@ -276,12 +276,12 @@ -

This is f0

-

This is f1

+

This is f0

+

This is f1

- \ No newline at end of file + diff --git a/Basic/Project/GWD_CCG_example_groups_archive b/Example Project/GWD_CCG_example_groups_archive similarity index 100% rename from Basic/Project/GWD_CCG_example_groups_archive rename to Example Project/GWD_CCG_example_groups_archive diff --git a/Basic/Project/gwd-events-support.1.0.js b/Example Project/gwd-events-support.1.0.js similarity index 100% rename from Basic/Project/gwd-events-support.1.0.js rename to Example Project/gwd-events-support.1.0.js diff --git a/Basic/Project/gwd_workspace.json b/Example Project/gwd_workspace.json similarity index 100% rename from Basic/Project/gwd_workspace.json rename to Example Project/gwd_workspace.json diff --git a/Basic/template/CasparCG.js b/template/CasparCG.js similarity index 62% rename from Basic/template/CasparCG.js rename to template/CasparCG.js index bfbf0ce..b84c0e6 100644 --- a/Basic/template/CasparCG.js +++ b/template/CasparCG.js @@ -1,28 +1,17 @@ /* -* Data sent from CasparCG Client as templateData -* is pushed into corresponding HTML id element -* -* Usage: -* insert a script reference in the HTML template header. -* ex: -* Make sure that the id that you refer to is the innermost tag. -* Everything within that tag id will be replaced by the value sent from CasparCG -* -* put together by Tomas Linden -* modified by Øjvind Søgaard Andersen -* - Structure of data sent from CasparCG: - - - - - : - : - - - - -*/ + * Usage: + * insert a script reference in the HTML header. + * ex: + * Make sure that the class that you refer to is the innermost tag. + * Either the item will have it's content replace or src updated if an image + * + * Items with classes 'CasparCG-XXX' will be replaced + * So f0 would have the class 'CasparCG-f0' + * + * put together by Tomas Linden + * modified by Mark Rapson + */ + // Global variable for data from CasparCG var dataCaspar = {}; @@ -58,9 +47,19 @@ function XML2JSON(node) { // Main function to insert data function dataInsert(dataCaspar) { for (var idCaspar in dataCaspar) { - var idTemplate = document.getElementById(idCaspar); - if (idTemplate != undefined) { - idTemplate.innerHTML = escapeHtml(dataCaspar[idCaspar]); + var applicableElements = document.getElementsByClassName('CasparCG-' + idCaspar); + if (applicableElements) { + // Loop through Applicable DIVs + [].slice.call(applicableElements).forEach(function(currentElement) { + console.log(currentElement.tagName); + if (currentElement.tagName == 'img') { + //Set Image if img item + currentElement.src = dataCaspar[idCaspar]; + } else { + //Set InnerHTML otherwise + currentElement.innerHTML = escapeHtml(dataCaspar[idCaspar]); + } + }) } } } diff --git a/Basic/template/gwd-events-support.1.0.js b/template/gwd-events-support.1.0.js similarity index 100% rename from Basic/template/gwd-events-support.1.0.js rename to template/gwd-events-support.1.0.js diff --git a/Basic/template/index.html b/template/index.html similarity index 99% rename from Basic/template/index.html rename to template/index.html index 22467f8..77f87f2 100644 --- a/Basic/template/index.html +++ b/template/index.html @@ -1250,8 +1250,8 @@ body { -

This is f0

-

This is f1

+

This is f0

+

This is f1