Html template with Google Web Designer

html

#1

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

  1. Add overflow:hidden in body style

  2. 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.

  3. 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 %.

  4. 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

  1. How to clear all default data and update before template is shown on screen?
  2. Second page data will get updated only when second page is loaded and update command is send. Workaround?
  3. 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


#2

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


#3

“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>

#4

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.


#5

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

  1. Is this ok to use the above command?

  2. 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?


#6

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


#7

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.

#8

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


#9

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

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

#10

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.


#11

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.