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 @@
-