Problem with passing parameters to html templates

html

#1

Hi all,

we have a problem with passing parameters to html templates.

Here is described, how you generally use HTML-Templates: https://github.com/CasparCG/help/wiki/Media:-HTML-Templates

So whenever you place a command triggering like:

CG 1-1 ADD 0 myhtmlfile 0 [data]

This automatically calls the JavaScript-Function update(templatedata) if that is defined in your html page or in a JS-file that is referenced via the html page.

Our problem is, that we can enter the method, however we do not know how to process “templatedata” or how to manipulate the dom-tree, which was our goal in the first place.

Currently we always get a pipe error.

[2018-10-08 16:48:24.75[1008/164824:ERROR:ipc_channel_win.cc(405)] pipe error: 2322] [12820] [info] Received message from 127.0.0.1: CG 1-1 ADD 0 basis 0 {‘test’}\r\n

So it seems our main problem is, how to escape the parameters to avoid the pipe error.

Any help would be highly appreciated.

Thank you.
Hinrich


#2

i don’t fully understand your issue here.
but when you send data to casparCG form a client to a template via AMPC comands.
the data is in an XML style

CG 1-20 ADD 1 “TopBar/TOPBAR” 1 “<componentData id=“TopText”><data id=“text” value=“Hello”/>”\r\n

here i have added an HTML template “topBar/TOPBAR” (folder/File)
then the XML:
indent preformatted text by 4 spaces
<templateData> <componentData id=\"TopText\"><data id=\"text\" value=\"Hello\"/></componentData> </templateData>

this XML alters the DOM
On my template sets a DIV with then ID of TopText to <data id=“text” value=“Hello”/>

hope this helps?


#3

Hi jyeomans,

this helps a lot. Since I do not have the testsystem with me, I have a further question:

  • You escaped the quotes for the command - fine
  • now the xml is arriving in the update(templatedata) function

Will caspar CG automatically check whether there are existing IDs in the DOM-tree to update? I would expect one has to parse the xml, find according nodes in the dom-tree in the method and update these manually?

Br
H.


#4

well you need to write some js functions to handle the data as well as the timeline commands are revived.

you need to have them for
update
play
stop
and next

there are some basic examples here.

i will say that the example uses an older jquery so i would use the newest one.

it is not to hard at all. but if you want to have an easy go at it
just look at it use edge animate 2014 and have a look at

Seppo Sormunen on youtube and his E2C stuff
http://jmp.sh/UaCoqg8

as far as testing, if you don’t have a windows computer to try them out in CasparCG you can do it in chrome. load your html hit f12 start the console and you can inter the command by hand
example: play();
i like adobe Brackets for a text editor it is free and it has a menu option to preview in a browser.

all so if you go the edge animate route there is a console that will let you send commands.


#5

Helllo Jyeomans,

thank you so much - I expect we are fine after we have looked into the video and tried some examples, which we will do latest next week.

The best explanation for my question above are the sample-files from Seppo Sormunen:

  • Yes, you have to parse XML and update the DOM-tree manually
  • This is done in the function function parseCaspar(str){} which can be reverse engineered in the library

Thanks again, I expect we are fine after some tests.

br
Hinrich


#6

Hello Jyeomans,

I still have the issue here unfortunately :frowning:

I have defined an HTML page with some java script, amount them the functions

function sayHello()
{
update(“Dies ist noch ein ganz anderer Text”);
}

// Call for a update of data from CasparCG client
function update(templatedata) {

var idTemplate = document.getElementById('onAirText');

// alert(idTemplate.innerText);
alert(templatedata.nodeType);
idTemplate.innerText = “New Text!”;
}

Now if I place a button inside my HTML.page (which loads and displays perfectly) and assign the sayHello() method to that button, everything is fine when I click the button:

sayHello() is called and then calls update and displays my text that is passed as parameter.

HOWEVER when I try this from Caspar CG via command line, the templatedata parameter arriving in the JavaScript is always undefined. THAT EXACTLY is my problem.

The CCG-notion I am using for this on the command line is:

CG 1-5 ADD 1 casparcg 0 “this is my other text”

Could this be related to encoding or sth similar?

Thanks + br
HB


#7

So to be precise:

  • update() is called
  • “New Text!” is correctly set to the onAirText-div-Element

The only problem is, that I cannot get to have the templatedata Parameter properly passed.


#8

Hello all,

It seems closely connected to the server version. So far we have used the 2.0.7 - when I am using the 2.1.0 beta, I can place a button on the screen, click the button and call update(templatedata) - the button does not work in 2.0.7.

So I am struggeling the “CG UPDATE”:

  • I do not want to display my html template newly (like “ADD”)
  • the onScreen-Button triggers update correctly. In fact it calls update via a function that is bound to the button:

function sayHello()
{
update(“my update data”);
}

  • However I do not manage to get text to the update function via “CG UPDATE”

In the documentation I can find hints towards xml (" Data is either inline XML or a reference to a saved dataset."), however a real example is missing.

I am sure it will be damn easy once it works, for now I am stuck though…

Thanks for help.


#9

When following functions are defined in html template-
function font(str)
{
document.getElementById(“marqueedata”).style.fontFamily = str;
}
function fontcolor(str)
{
document.getElementById(“marqueedata”).style.color = str;
}

I normally use function call to update the properties like this-

call 1-61 font(‘DVOT-Bhima’)

call 1-61 fontcolor(‘Yellow’)


#10

j[quote=“hboo, post:8, topic:903”]
In the documentation I can find hints towards xml (" Data is either inline XML or a reference to a saved dataset."), however a real example is missing.
[/quote]

It‘s exactly the same way for UPDATE than for ADD. So the XML is formated the same. So refer to ADD for the example. Also ADD and UPDATE call the same method to update the data. Only UPDATE does not trigger the intro animation.


#11

Hi Folks,

Thank you so much - caspar tells me what is wrong, I however do not know what to change.

My Command-Line expression is:

CG 1-5 UPDATE 1 casparcg 0 “this is my other text”

The answer from the server is:

[2018-10-16 08:52:21.756] [3192] [info] ffmpeg[clf2.mov|720x576i50.00|368/369] Destroyed.
[2018-10-16 08:52:42.441] [10796] [info] Received message from 127.0.0.1: CG 1-5 UPDATE 1 casparcg 0 this is my other text\r\n
[2018-10-16 08:52:42.478] [9760] [info] No CG proxy running on layer. Check syntax. Turn on log level debug for stacktrace.
[2018-10-16 08:52:42.478] [9760] [info] Sent message to 127.0.0.1:403 CG UPDATE FAILED\r\n

Hints?


#12

The AMCP formatting of CG update is like this:
CG [video_channel:int]{-[layer:int]|-9999} UPDATE [cg_layer:int] [data:string]

However you are sending:
CG 1-5 UPDATE 1 casparcg 0 this is my other text

Which probably should be more like:
CG 1-5 UPDATE 1 “this is my other text”


#13

Hello hreinnbeck,

Thanks, but that is not the point. I tried different variations, including quotes, however the log on the shell omits the quotes.

If I use just one parameter, I get the same:

[2018-10-16 13:57:49.869] [10300] [info] Received message from 127.0.0.1: CG 1-5 UPDATE 1 casparcg 0 this_is_my_other_text\r\n
[2018-10-16 13:57:49.873] [12628] [info] No CG proxy running on layer. Check syntax. Turn on log level debug for stacktrace.
[2018-10-16 13:57:49.873] [12628] [info] Sent message to 127.0.0.1:403 CG UPDATE FAILED\r\n


#14

You are still sending “casparcg 0”


#15

My mistake, didn’t change anything however:

[2018-10-16 14:21:17.016] [11176] [info] Received message from 127.0.0.1: CG 1-5 UPDATE 1 “this text”\r\n
[2018-10-16 14:21:17.022] [12516] [info] No CG proxy running on layer. Check syntax. Turn on log level debug for stacktrace.
[2018-10-16 14:21:17.022] [12516] [info] Sent message to 127.0.0.1:403 CG UPDATE FAILED\r\n


#16

Is the template running? You’ve done a CG ADD before you tried the update?


#17

are you willing to share your template?
you can send me a personal message with a dropbox link if you would like, and i can try to look at it in the next day or two. as long as the work stays calm.


#18

Hi John,

Two links:

1.) The HTML Layer: https://www.dropbox.com/s/w351isp1096rimm/casparcg.html?dl=0

2.) The JS-File: https://www.dropbox.com/s/tne68ks5zbb4e15/casparcg.js?dl=0

The function update(templatedata) {} function is called, however I cannot read “templatedata” when triggering from the command line.

Many Thx.
Hinrich


#19

Hi John,

We had a good talk with some other folks today - obviously we will switch to version 2.2. first and look into the issue again.

They told us, that this release solved some bugs.

Br
H.


#20

ok i did have some luck
this is what i did.
i have sent the commands form the command line
same as you did and got nothing.
CG 1-20 UPDATE 1 “Hello World”\r\n
how ever i sent the command form the Client and looked at the message revived. that did work, the text changed.

so i noticed that there comand sent was in <>

so i sent this command
CG 1-20 UPDATE 1 "<Hello World>"\r\n
and bam it worked.

hope this helped