Html template with Google Web Designer

vimlesh1975 · November 15, 2018, 11:35am

I am learning Google Web Designer for making html template for casparcg. I want to share some working method and question here.

Add overflow:hidden in body style
Always test preview file as animation is not shown in server 2.07 and server 2.1. Server 2.2 shows but some event is not shown.
For the same template can be used in any video mode for example SD or HD.
A. Make body width and height 100%.
B. After placing anything to stage make sure x, y, h and w all are in % .
C. Define font size in vh in code view. It is same as height in %.
Send update command after play command.
in Server 2.07 1000ms
in Server 2.1 300ms
in Server 2.2 200ms
Otherwise it doesn’t update and there is error “can’t set property of null object.”

Question

How to clear all default data and update before template is shown on screen?
Second page data will get updated only when second page is loaded and update command is send. Workaround?
How to know exact time when template is initialized and ready to be updated?

I have used the following template to test.
https://goo.gl/xeg5hJ

vimlesh1975 · November 16, 2018, 6:19am

Got a function working for the first problem “How to clear all default data”
Add a onload event in body like below

    <body class="document-body" onload="clearall()">

And then add a function like below
We need to prefix our variables as “ccg”

 function clearall() 
{
  var ccg = document.querySelectorAll('[id^="ccg"]');
  var i;
  for (i = 0; i < ccg.length; i++)
 {
    document.getElementById(ccg[i].id).innerHTML = ""; 
  }
}

Modified file is here.
https://goo.gl/rrXrn9

vimlesh1975 · November 16, 2018, 11:53am

“DOMContentLoaded” event occurs before “onload”. So adding a script like below works better.

 <script>
 document.addEventListener("DOMContentLoaded", function(event) {
var ccg = document.querySelectorAll('[id^="ccg"]');
  var i;
  for (i = 0; i < ccg.length; i++) 
  {
    document.getElementById(ccg[i].id).innerHTML = "";
    document.getElementById(ccg[i].id).src = null;
  
  }
   });
</script>

timmalos · November 18, 2018, 12:28am

Also, you should put all your JS code on function update(arg) {

Instead of function play(arg) {

Because on CasparCG even if you only press F2 to play, it will call update first, so your data will be updated before being displayed and you don’t need two calls.

Then you only press F6 (update) when you want to update your data.

vimlesh1975 · November 18, 2018, 1:36pm

Thank you for your reply.
I am using my own client and ‘update code inside template’. I am using following command to play and update-

play 1-101 [HTML] "c:/casparcg/gwd/16_2/gwd_preview_16_2/index.html"
call 1-101 updatestring('ccgf0','TodayyyysxxxEvents1')

My question

Is this ok to use the above command?
If I send both command at the same time I get error and data is not updated. Error is - "html[c:/casparcg/gwd/16_2/gwd_preview_16_2/index.html] 1024 576 50 Log: Uncaught TypeError: Cannot set property ‘innerHTML’ of null.
If I send call command after some time there is no error and data gets updated.

Today I noticed The above template attached is of two pages. In this I have to maintain gap between play and call command. But in Single page template I can update at the same time.

My question is if there is heavy template we may need to maintain gap between play and update command. How to determine that?

vimlesh1975 · November 20, 2018, 6:24am

In the process of learning google web designer i tried to make html cricket template same to flash cricket template in my “CMP” player.

HtmlCricket

vimlesh1975 · November 21, 2018, 3:56pm

There was default data momentarily in play and update command. So I added mixer opacity and delay command in between like below.

mixer 1-101 opacity 0 //so that nothing is visible
play 1-101 [HTML] "c:/casparcg/gwd/16_2/gwd_preview_16_2/index.html" //play the html file
threading.thread.sleep(300) //wait for 300 millisecond
call 1-101 updatestring('ccgf0','TodayyyysxxxEvents1')   // update command
threading.thread.sleep(300)   //wait for 300 millisecond
mixer 1-101 opacity 1 // Make everything visible, No flicker or default data.

Maurice78 · November 24, 2018, 10:11am

Hmm why not get rid off the default data in the first place when you deploy ?

vimlesh1975 · November 24, 2018, 10:17am

Good idea. And I got the above code to do it. But

Testing continues forever.
Sometimes we may forget to do it.
Viewing the design in chrome will not be possible.

hreinnbeck · November 24, 2018, 3:17pm

I’d like to recommend switching to using CG calls instead of PLAY/CALL.

If you are sending those commands at the same time there probably won’t be enough time for the HTML to be parsed, rendered and the JS not initialized.

I usually have the templates always running and do update, play, show, hide when needed.

Regarding test data you should just have a function like test() that sends an update with the data you use for testing and just call it from the console when you are developing (or call it from code and comment it out for production). Or you could just have an opacity:0 on the body in CSS and set it to 1 with JS in the update() function.

vimlesh1975 · November 24, 2018, 4:24pm

I tested and found the same flickering in cg command also.

Flicker comes at the first play with new data. After template is online update is without flicker.

I am referring test data as the data with which we design the template. Making these invisible after completion of design has a risk of forgetting sometimes. And we do not do this for flash template either.

vimlesh1975 · January 7, 2019, 7:45am

So I am putting here my version of workflow for HTML template in Google Web Designer.

1.Add overflow:hidden in body style

In casparcg always test index file from preview folder as from the main file animation is not shown in server 2.07 and server2.1. Server 2.2 shows but event is not shown.
For the same template can be used in any video mode for example SD or HD.
A. Make body width and height 100%
B. After placing anything to stage make sure x, y, h and w all are in %
C. Define font in vh in code view. It is same as height in %
Name the variables like
ccgf0
ccgf1
ccgimage1
ccgimage2

Add below script in template

<script type="text/javascript">
 function restorestring(str) {
 str = str.replace(/xxx/g, " ");
   str = str.replace(/yyy/g, "'");
 str = str.replace(/zzz/g, '"');
   return str
    }
   function updatestring(str1, str2) {
   document.getElementById(restorestring(str1)).innerHTML = restorestring(str2);
}
function updateimage(str1, str2) {
  document.getElementById(restorestring(str1)).src = restorestring(str2);
  }
 function next() {
 gwd.actions.timeline.play('document.body');
}
function pause() {
gwd.actions.timeline.pause('document.body');
}
 function gotoandplaylabel(label) {
 gwd.actions.timeline.gotoAndPlay('document.body', label);
}
 </script>

For template to play group of commands from vb.net client like below

 mixer 1-101 opacity 0 //so that nothing is visible
play 1-101 [HTML] "c:/casparcg/gwd/16_2/gwd_preview_16_2/index.html" //play the html file
threading.thread.sleep(300) //wait for 300 millisecond
call 1-101 updatestring('ccgf0','TodayyyysxxxEvents1')   // update text command
call 1-96 updateimage('ccgimage1','C:/casparcg/mydata/flag/Antigua.png')  // update image command
threading.thread.sleep(300)   //wait for 300 millisecond
mixer 1-101 opacity 1 // Make everything visible, No flicker or default data.

Here is a attached template file for casparcg which includes all the above described thngs. It works like FT generator in flash. Unzip and put the casparcg folder in “my documents/ google web designer/template folder”. Then in GWD file->new from template->my templates->casparcg
To generate a working file we need to click preview in GWD

Template for GWD for casparcg

Here is a look for HTML template module in CMP latest Casparcg Client.

hreinnbeck · January 7, 2019, 8:57am

You don’t need to use the MIXER commands. Rather have CSS opacity 0 on the body and then set/animate it to 1 on PLAY() in the template.

You should use the CG commands instead of PLAY. With them you can pass data to the template as soon as you start it.

There is no need for the custom javascript functions to use with CALL - you should have functions: load(), play(), pause(), stop() and update() which the HTML producers calls when a comparable CG command is sent (just like with Flash templates).

Using the CG commands along with standard functions in the template it should work out of the box with any client that support the CG commands.

vimlesh1975 · January 7, 2019, 9:14am

Putting opacity 0 in body will prevent to view “template design” in chrome.
When template is heavy immediate update will not occure.
But function is neccessary for update command to work, otherwise how the template know what are the variables and with what to change.

4.This client has extra feature of
a. Showing a preview of selected template.
b. Listing all variables with design time values.
c. Putting test data for all variables.

Julusian · January 7, 2019, 3:42pm

I think the html producer does queue any calls until the page is reported as loaded, and internally a cg play is really just a couple of calls done for you.

I havent ever tried google web designer, but when doing templates manually, I generally do something similar to this. I often do this to my root element directly inside of body though (so that I can bypass it for dev controls)
I will also execute some dev mode javascript when #dev is in the url hash, which will show some controls and populate the template with test data.
Im not sure if doing this will be possible here, but I find it works nicely so would be worth trying.

Example:
html: xplosion-html/public/lt.html at html · GuildTV/xplosion-html · GitHub
js: xplosion-html/src/lt/index.js at html · GuildTV/xplosion-html · GitHub

hreinnbeck · January 7, 2019, 4:23pm

I noticed this and your restorestring function. You are not quoting the AMCP command correctly, it should be:
call 1-101 “updatestring(‘ccgf0’,'Today\‘s Events1’);”

hreinnbeck · January 7, 2019, 4:31pm

You can use query parameters, user agent checks etc. to see if you are running in a browser or within Caspar
Are you saying the CALL’s are faster than CG UPDATE’s?
CG UPDATE works just like for Flash. You either send XML or JSON. You’r update() function needs to parse the data. Here is an example from the an update call from the standard CCG client:
CG 1-101 UPDATE 1 “{“ccgf0”:“test”,“ccgf1”:“test2”}”

didikunz · January 7, 2019, 5:08pm

By the way: That is neider XML nor JSON Happy new year also to the Iceland TV genius

hreinnbeck · January 7, 2019, 5:23pm

Same to you That is JSON object though (the forum seems to have removed the escapes for the inner quotes).

LateGreat · January 15, 2019, 3:42pm

do the different text lines need to use the f0,f1,f2 and so on or can you change them to thing like, line1, line2?