commit da774da7b55f261bcc54d66d3687619ba8c05ae7 Author: o3jvind Date: Sat Jul 21 15:27:40 2018 +0200 Initail diff --git a/GWD_CCG_project/CasparCG.js b/GWD_CCG_project/CasparCG.js new file mode 100644 index 0000000..bfbf0ce --- /dev/null +++ b/GWD_CCG_project/CasparCG.js @@ -0,0 +1,88 @@ +/* +* 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: + + + + + : + : + + + + +*/ +// 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 idTemplate = document.getElementById(idCaspar); + if (idTemplate != undefined) { + idTemplate.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/GWD_CCG_project/GWD_CCG_example.html b/GWD_CCG_project/GWD_CCG_example.html new file mode 100644 index 0000000..1db4ccd --- /dev/null +++ b/GWD_CCG_project/GWD_CCG_example.html @@ -0,0 +1,284 @@ + + + + + + nytest + + + + + + + + + + + +

This is f0

+

This is f1

+
+ +
+
+
+ + + \ No newline at end of file diff --git a/GWD_CCG_project/GWD_CCG_example_groups_archive b/GWD_CCG_project/GWD_CCG_example_groups_archive new file mode 100644 index 0000000..d9a5737 --- /dev/null +++ b/GWD_CCG_project/GWD_CCG_example_groups_archive @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/GWD_CCG_project/gwd-events-support.1.0.js b/GWD_CCG_project/gwd-events-support.1.0.js new file mode 100644 index 0000000..869beee --- /dev/null +++ b/GWD_CCG_project/gwd-events-support.1.0.js @@ -0,0 +1 @@ +var gwd=gwd||{};gwd.actions=gwd.actions||{};gwd.actions.events=gwd.actions.events||{};gwd.actions.events.getElementById=function(id){var element=document.getElementById(id);if(!element){var pageDeck=document.querySelector("gwd-pagedeck")||document.querySelector("[is=gwd-pagedeck]");if(pageDeck){if(typeof pageDeck.getElementById==="function"){element=pageDeck.getElementById(id)}}}if(!element){switch(id){case"document.body":element=document.body;break;case"document":element=document;break;case"window":element=window;break;default:break}}return element};gwd.actions.events.addHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.addEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.removeHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.removeEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.setInlineStyle=function(id,styles){var element=gwd.actions.events.getElementById(id);if(!element||!styles){return}var transitionProperty=element.style.transition!==undefined?"transition":"-webkit-transition";var prevTransition=element.style[transitionProperty];var splitStyles=styles.split(/\s*;\s*/);var nameValue;splitStyles.forEach(function(splitStyle){if(splitStyle){var regex=new RegExp("[:](?![/]{2})");nameValue=splitStyle.split(regex);nameValue[1]=nameValue[1]?nameValue[1].trim():null;if(!(nameValue[0]&&nameValue[1])){return}element.style.setProperty(nameValue[0],nameValue[1])}});function restoreTransition(event){var el=event.target;el.style.transition=prevTransition;el.removeEventListener(event.type,restoreTransition,false)}element.addEventListener("transitionend",restoreTransition,false);element.addEventListener("webkitTransitionEnd",restoreTransition,false)};gwd.actions.timeline=gwd.actions.timeline||{};gwd.actions.timeline.dispatchTimedEvent=function(event){var customEventTarget=event.target;if(customEventTarget){var customEventName=customEventTarget.getAttribute("data-event-name");if(customEventName){event.stopPropagation();var event=document.createEvent("CustomEvent");event.initCustomEvent(customEventName,true,true,null);customEventTarget.dispatchEvent(event)}}};gwd.actions.timeline.captureAnimationEnd=function(element){if(!element){return}var animationEndEvents=["animationend","webkitAnimationEnd"];for(var i=0;i +* 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: + + + + + : + : + + + + +*/ +// 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 idTemplate = document.getElementById(idCaspar); + if (idTemplate != undefined) { + idTemplate.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/GWD_CCG_template/gwd-events-support.1.0.js b/GWD_CCG_template/gwd-events-support.1.0.js new file mode 100644 index 0000000..869beee --- /dev/null +++ b/GWD_CCG_template/gwd-events-support.1.0.js @@ -0,0 +1 @@ +var gwd=gwd||{};gwd.actions=gwd.actions||{};gwd.actions.events=gwd.actions.events||{};gwd.actions.events.getElementById=function(id){var element=document.getElementById(id);if(!element){var pageDeck=document.querySelector("gwd-pagedeck")||document.querySelector("[is=gwd-pagedeck]");if(pageDeck){if(typeof pageDeck.getElementById==="function"){element=pageDeck.getElementById(id)}}}if(!element){switch(id){case"document.body":element=document.body;break;case"document":element=document;break;case"window":element=window;break;default:break}}return element};gwd.actions.events.addHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.addEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.removeHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.removeEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.setInlineStyle=function(id,styles){var element=gwd.actions.events.getElementById(id);if(!element||!styles){return}var transitionProperty=element.style.transition!==undefined?"transition":"-webkit-transition";var prevTransition=element.style[transitionProperty];var splitStyles=styles.split(/\s*;\s*/);var nameValue;splitStyles.forEach(function(splitStyle){if(splitStyle){var regex=new RegExp("[:](?![/]{2})");nameValue=splitStyle.split(regex);nameValue[1]=nameValue[1]?nameValue[1].trim():null;if(!(nameValue[0]&&nameValue[1])){return}element.style.setProperty(nameValue[0],nameValue[1])}});function restoreTransition(event){var el=event.target;el.style.transition=prevTransition;el.removeEventListener(event.type,restoreTransition,false)}element.addEventListener("transitionend",restoreTransition,false);element.addEventListener("webkitTransitionEnd",restoreTransition,false)};gwd.actions.timeline=gwd.actions.timeline||{};gwd.actions.timeline.dispatchTimedEvent=function(event){var customEventTarget=event.target;if(customEventTarget){var customEventName=customEventTarget.getAttribute("data-event-name");if(customEventName){event.stopPropagation();var event=document.createEvent("CustomEvent");event.initCustomEvent(customEventName,true,true,null);customEventTarget.dispatchEvent(event)}}};gwd.actions.timeline.captureAnimationEnd=function(element){if(!element){return}var animationEndEvents=["animationend","webkitAnimationEnd"];for(var i=0;i + + + nytest + + + + + + + + + + + +

This is f0

+

This is f1

+
+ +
+
+
+ + +