HTML Template redirecting to remote server - is there a better way?

#1
Template HTML file passes all XML arguments via GET to remote page on server.
Remote page parses passed arguments on load, rest is pretty typical.

It works but I have a feeling that it's not the best solution. Any ideas?
(sorry for a messy code, but this is only a test)


Template:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Cache-Control" content="no-store" />
	<script type="text/javascript">
		function update(arguments) {
			var argumentsEncoded = encodeURIComponent(arguments); 
			window.location.replace("http://localhost/event/views/View.php?update=" + argumentsEncoded); 
		};
        </script>
</head>
</html>

PHP page on server View.php

Code: Select all

<?php
    echo "PHP DEUBUG View page loaded.<br>";
?>

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>TEST Template</title>
		<meta http-equiv="Cache-Control" content="no-store" />
		
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/casparcg.js"></script>	

		
		<script type="text/javascript">
			window.onload = function() {
				// pass arguments on Play 
				load(window.location.search.substr(1).replace("update=",""));

				if (window.jQuery) {  
					// jQuery is loaded  
					document.getElementById("jq").innerHTML = "<b>jQuery is loaded</b>";
					$( "#jq" ).effect( "pulsate", {times: 2}, 2000);
				} else {
					// jQuery is not loaded
					document.getElementById("jq").innerHTML = "jQuery is not loaded";
				};
			};
        </script>
	</head>
	<body>
		<div>XML </div>
		<div id="f0" name="f0">f0: This text will be replaced.</div>
		<div id="f1" name="f1">f1: This text will be replaced.</div>
		<div id="status" name="status">none</div>
		<div id="debug" name="debug">debug</div>
		<div id="jq" name="jq">jquery test</div>
	</body>
</html>

javascript casparcg.js

Code: Select all

// Global variable for data from CasparCG
var dataCaspar = {};

// Replace characters that could become a problem if left as is
function escapeHtml(unsafe) {
	return unsafe;
	//return unsafe.replace("<","").replace(">","");
};

// 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]); }
	};
};

// insert data from CasparCg client when activated
function play() {
	console.log("Play sent"); document.getElementById("status").innerHTML = document.getElementById("status").innerHTML + "<br>Play"; 
}

// Call for a stop from CasparCG client
function stop() {
  // insert here
  console.log("Play sent"); document.getElementById("status").innerHTML = document.getElementById("status").innerHTML + "<br>Stop"; 
};

// Call for a next from CasparCG client
function next() {
  // insert here
  console.log("Next sent"); document.getElementById("status").innerHTML = document.getElementById("status").innerHTML + "<br>Next"; 
};

// Call for a update of data from CasparCG client
function update(arguments) {
	console.log("Update sent"); document.getElementById("status").innerHTML = document.getElementById("status").innerHTML + "<br>Update"; 
	parseCaspar(arguments);	// Parse templateData into an XML object
	dataInsert(dataCaspar);	// Insert data
};

// on redirect pass arguments to update function
function load(arguments){
	if ( arguments != "" ){
		//alert(arguments);
		arguments=decodeURIComponent(arguments);
		update(arguments);
		play();
	};
};

Re: HTML Template redirecting to remote server - is there a better way?

#3
If you are happy to run a dev build of 2.1, this PR might be what you are after. https://github.com/CasparCG/Server/pull/644
It allows for treating http://localhost/event/views/View.php as your template file in the client, meaning it would get all of the play, update, stop functions be called at the right points without any messy workarounds like you have had to do.
I think the urls or local files must currently end in .html, but that could definitely be expanded to allow more (eg .php .htm).

Re: HTML Template redirecting to remote server - is there a better way?

#4
balte wrote:
12 Dec 2017, 08:59
You could use the following syntax for AMCP command:

Code: Select all

PLAY 1-20 [html] http://localhost/event/views/View.php?update=<your data> 
The whole idea is to keep it as simple as possible for the end user. Just instert template and it must work out of the box.

And it kinnda does, but with redirection to external server, first run (play) does not pass arguments, because they are sent to redirection page, not target one, so i need to pass them on load. After that you can use stop, next etc as normal.

BTW: play command does not pass arguments, only update does (at least in 2.0.7 server). just FYI to save some time debugging.