It is currently 22 Jun 2017, 19:24



Problem invoking javascript

CasparCG Server, Client and development

Moderators: Macey, Jonas Hummelstrand, didikunz

Problem invoking javascript

Postby aak » 28 Feb 2015, 06:06

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!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby balte » 28 Feb 2015, 06:55

There should be a semicolon behind each JavaScript statement..

What command are you using to invoke?
CasparCG enthusiast and broadcast geek - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 264
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee

Re: Problem invoking javascript

Postby aak » 28 Feb 2015, 07:44

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.
Attachments
log.jpg
The server's log
log.jpg (182.43 KiB) Viewed 2813 times
Panem et circences!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby balte » 28 Feb 2015, 07:51

Try the following command:

CALL 1-1 INVOKE test()
CasparCG enthusiast and broadcast geek - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 264
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee

Re: Problem invoking javascript

Postby aak » 28 Feb 2015, 08:03

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!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby balte » 28 Feb 2015, 08:09

As far as I know, that should be it
CasparCG enthusiast and broadcast geek - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 264
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee

Re: Problem invoking javascript

Postby aak » 28 Feb 2015, 08:43

Just checked,that doesn't work. The right syntax is:

Code: Select all
CALL 1-1 INVOKE "setText('test','Test passed')"


So is it the only way to call a function with several args? Does an earlier one like 'CALL 1-1 update "Your text"' mentioned here (http://www.casparcg.com/forum/viewtopic.php?t=2022&p=13676) seem to be no longer supported?
Panem et circences!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby balte » 28 Feb 2015, 08:49

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 - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 264
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee

Re: Problem invoking javascript

Postby aak » 28 Feb 2015, 08:56

Ok,I'll stick to the less complicated one. Thank you.
Panem et circences!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby mcdikki » 28 Feb 2015, 16:27

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
User avatar
mcdikki
 
Posts: 1059
Joined: 11 Dec 2012, 15:48
Location: Germany

Re: Problem invoking javascript

Postby aak » 28 Feb 2015, 16:51

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!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby mcdikki » 28 Feb 2015, 17:16

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
User avatar
mcdikki
 
Posts: 1059
Joined: 11 Dec 2012, 15:48
Location: Germany

Re: Problem invoking javascript

Postby aak » 28 Feb 2015, 17:38

Then, is 'update' a reserved function's name,a hardcoded function that accepts a single argument? Am I correct? If it is,then I can hardly realize the benefit of having it.
Panem et circences!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby mcdikki » 28 Feb 2015, 18:27

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
User avatar
mcdikki
 
Posts: 1059
Joined: 11 Dec 2012, 15:48
Location: Germany

Re: Problem invoking javascript

Postby aak » 01 Mar 2015, 07:02

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!
User avatar
aak
 
Posts: 45
Joined: 13 Sep 2014, 15:45

Re: Problem invoking javascript

Postby elanvrt » 12 Apr 2017, 16:49

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
User avatar
elanvrt
 
Posts: 61
Joined: 22 Apr 2013, 11:50
Location: Brussels, Belgium

Re: Problem invoking javascript

Postby balte » 13 Apr 2017, 08:13

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 - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 264
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee

Re: Problem invoking javascript

Postby elanvrt » 13 Apr 2017, 10:48

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
User avatar
elanvrt
 
Posts: 61
Joined: 22 Apr 2013, 11:50
Location: Brussels, Belgium

Re: Problem invoking javascript

Postby balte » 26 Apr 2017, 07:40

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 - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 264
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee


Return to Tech and Development

Who is online

Users browsing this forum: No registered users and 7 guests