Problem invoking javascript

#1
I made a very simple template for HTML producer with a single function inside it.

Code: Select all

function test(){
  console.log("Test called")
  document.getElementById("test").innerHTML="Test passed"
}

Code: Select all

<div id="test">Test</div>
When I try to invoke it,nothing happens.The server response is '202 CALL OK',but I can see neither changes on the screen nor error messages in the console. The function seems to be never called,because I can not even see console.log output in the server logs.
What can be the reason for the failure? How can I debug it?
Panem et circences!

Re: Problem invoking javascript

#3
I checked,semicolons are present. I'm using the following syntax 'CALL 1-1 test'. Here is the full test template:

Code: Select all

<!-- 
     Template for HTML based graphics in CasparCG Server with Berkelium

     This template was created for 1920x1090
		 For other resolutions please see the notes below
		 
		 Contrary to the reccomendations for running Flash based graphics
		 turning on 'ClearType' will result in better font-aliasing for
		 HTML based templates.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
				<style>
				* {
				  -webkit-box-sizing: border-box;
				  Box-Sizing:border-box;				 								 					 /* This sets all elements to be the actual set dimensions, disregarding padding and borders */
					-webkit-backface-visibility: hidden;					 				 	 /* Hide the backface of elements - usuefull for 3d effects */
					-webkit-transition: translate3d(0,0,0);				 		 			 /* Turns on hardware acceleration - not known to be of benefit in CCG, but won't hurt */
				}
				HTML, BODY {
				  Width:1920px;  												 				 					 /* Set to your channel's resolution */
					Height:1080px;																					 /* Set to your channel's resolution */
					Margin:0;																								 /* Use all available space */
					Padding:0;																							 /* Use all available space */
					Background:green;												 					 /* The HTML consumer actually makes your background transparent by default, unless a color or image is specified - but this might be usefull when debugging in browsers */
					Overflow:hidden;																				 /* Hide any overflowing elements - to disable scollbars */
					-webkit-font-smoothing:antialiased !important;	 				 /* Set aliasing of fonts - possible options: none, antialiased,  subpixel-antialiased */
				}

				BODY {
        	Font-Family: Calibri,Arial;
					Color: #FFF;
				}
				
				/* These are action safe grids - positions are approximate to EBU R95-2008 */
				#action-safe, #graphics-safe {
				  Display:none;							 	 	 					 		 						 /* Change none to visible to overlay action and graphics safe grids */
				  Position:fixed;
					Top:0; Left:0; Bottom:0; Right:0;
					Opacity:0.5;
				}
				#action-safe {
				  Border:2px solid green;
					Margin:3.7%;
					Margin-Top:2%;Margin-Bottom:2%;
					Z-Index:99999;
				}
				#graphics-safe {
				  Border:2px solid red;
					Margin:10%;
					Margin-Top:3.1%; Margin-Bottom:3.1%;
					Z-Index:99998;
				}
			
				</style>
				
				<script>
	
	            function test(){
				  console.log("Test called");
				  document.getElementById("test").innerHTML="Test passed";
				}
       
				// Send a log message to CasparCG
				console.log('This message will end up in CCG logs');
				//alert('Alerts do also');		 		 			 		 											 /* Alerts also end up in CCG logs */
				
				// Call a function in CCG through JS
				if(!window.AMCP) {AMCP = function(str){ console.log(str); };}			 /* This creates a dummy window.AMCP function so testing in regular browsers doesn't throw an error */
				window.AMCP('This is a AMCP log message from a HTML template');
				
				// Define onEnterFrame() to minimize errors in CCG logs
				function onEnterFrame() {}
				</script>
				
    </head>
    <body>
			<!-- SAFE AREA OVERLAY - SEE CSS ABOVE FOR INFORMATION -->
		  <div id="action-safe"></div>
		  <div id="graphics-safe"></div>
			<!-- //SAFE AREA OVERLAY -->
			
	       <div id="test">Test</div>
    </body>
</html>
and the server log at the moment of invoking is in the attachment.
Panem et circences!
Attachments
log.jpg
The server's log
log.jpg (182.43 KiB) Viewed 4830 times

Re: Problem invoking javascript

#5
Wow,it worked! Thank you for your help,balte,it's really invalueable! Seems the example I followed is pretty outdated. But If I want to pass several parameters to a function,for example:

Code: Select all

function setText(id,new_text){
   document.getElementById(id).innerHTML=new_text;
}
,

what's the right syntax for invoking it? Is it:

Code: Select all

 CALL 1-1 INVOKE setText("test","Test passed")
?
Panem et circences!

Re: Problem invoking javascript

#8
I believe that forum is based on the Berkelium implementation of the HTML producer, CEF3 is used nowadays.

Of course you can save data to an XML file and have the HTML template read from there but otherwise this is your only option I believe.
CasparCG enthusiast and broadcast geek

Re: Problem invoking javascript

#10
The update function is not part of the html producer, but a function I defined inside the template.

So if you like to have it working, you need to implement it.

Just have a look at the source code to get an example.

cheers
mcdikki
sublan.tv - Wir teilen Begeisterung

Re: Problem invoking javascript

#11
mcdikki wrote:The update function is not part of the html producer, but a function I defined inside the template.

So if you like to have it working, you need to implement it.

Just have a look at the source code to get an example.

cheers
mcdikki
As I wrote above, I defined my own function (test) and then called it via 'CALL 1-1 test' - that doesn't work.
Panem et circences!

Re: Problem invoking javascript

#12
Yes, I know.

But if you define a function called update and call it with

Code: Select all

call 1-1 update "data"
it will work.

It is one of the special functions that are routed to the template by the html producer.
See the source of the producer and you will find it ;-)
https://github.com/CasparCG/Server/blob ... r.cpp#L500

Code: Select all

call 1-1 play
call 1-1 stop
call 1-1 remove
call 1-1 next
call 1-1 update
call 1-1 invoke
are possible.

cheers
mcdikki
sublan.tv - Wir teilen Begeisterung

Re: Problem invoking javascript

#14
Well, I'm not the developer,
but I guess this is mainly to keep the compatibility to the way flash templates work.

And it is a good idea to have a generic way to give data to your template. That makes it much easier to use standard clients.

cheers
mcdikki
sublan.tv - Wir teilen Begeisterung

Re: Problem invoking javascript

#15
Ah,you're right,the function must have been left for the sake of capability,i.e. for supporting old clients.
Thank you,mcdikki,for sharing the information of HTML producer's internals. Now I have deeper understanding of how it works.
Panem et circences!

Re: Problem invoking javascript

#16
Is it true that the "CALL" commands no longer work as previously with HTML templates on the new 2.1.0 versions (as of beta1)?

CALL 1-1 PLAY
does not do anything, but CG 1-1 PLAY 1 does the trick.
Just as
CALL 1-1 INVOKE "otherFunction('testing');" no longer works
but
CG 1-1 INVOKE 1 "otherFunction('testing')" does work.
Note that I had to omit the ; at the end of the function call

Is there some kind of secret manual for the new HTML template syntax? All examples I found use the old "CALL" syntax.
Chris Van den Bossche
ELAN graphics software developer
VRT television

Re: Problem invoking javascript

#17
Chris, there's no secret manual, just trial and error. ;)

I found that if you are using local html files, you can place those in the templates folder and then you can use the same AMCP commands as you use for flash, so long as you manually create the functions in javascript (e.g. play(), update(data), next(), stop() etc.). I'm assuming this still works the same in 201 as it did in 207.

I really don't know what happens when you load an external html page. (as in, loading it via PLAY 1-10 [html] http://example.com)
CasparCG enthusiast and broadcast geek

Re: Problem invoking javascript

#18
Thanks, balte.

I got the commands for this little project going now. I always placed html in the templates folder and load using CG ADD

There are some other things I want to mention:

-the "alert" popup is kinda screwed. Top part of the window is non-refreshing and the "OK" button is just barely reachable on the bottom.

-More important: How to invoke an AMCP command from within the javascript?

The "berkelium" example template shows this:

if(!window.AMCP) {AMCP = function(str){ console.log(str); };}
window.AMCP('This is a AMCP log message from a HTML template');

After removing the dummy AMCP function, CCG throws this, in any version from 2.0.7 to the latest 2.1.0 build:

INFO:CONSOLE(61): "Uncaught TypeError: Object [object global] has no method "AMCP"

Looks like the "window.AMCP" method no longer exists, or was never implemented. Is there any other way to send AMCP commands from within HTML template? Or some js code that implements the AMCP method?

p.s. this appeared in the CCG console, but not in the log file, could not copy-paste either, so I had to type it over.
Chris Van den Bossche
ELAN graphics software developer
VRT television

Re: Problem invoking javascript

#19
Sorry for taking so long to respond. the email alerts really only work half of the times and I don't always see the posts pop up in unread.

The window.AMCP function has been removed for a long time now. I believe this was done when Berkelium was replaced with CEF. This makes sense considering security and XSS attacks.

In order to send AMCP commands from a webserver you will need a proxy (e.g. a websocket server) that speaks both web protocols and TCP. NodeJS with socket.io is a good starting point.
CasparCG enthusiast and broadcast geek