Html template with Google Web Designer

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?

didikunz · January 15, 2019, 4:47pm

It depends on what names you want to give your variables. You then need to call the variable “line1” in the client and not “f0”.

LateGreat · January 15, 2019, 5:27pm

okay thanks

vimlesh1975 · January 21, 2019, 10:24am

Here is a simple html template with animation made in Google Web Designer.
https://goo.gl/aHt5NQ

vimlesh1975 · February 27, 2019, 8:09am

Has anybody tested what parameter may be different in browser and casparcg server?

vimlesh1975 · February 27, 2019, 11:45am

I tested and found that
screen.colorDepth parameter for server 2.07, 2.1 and 2.2 are 0

And for chrome, inernet explorer and edge is 24

Can I use this property to distinguish between casparcg server and normal browser?

vimlesh1975 · March 8, 2019, 10:37am

So this script helps to distinguish between casparcg and normal browser.

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  if (screen.colorDepth == 0) {
    var ccg = document.querySelectorAll('[id^="ccg"]');
    var i;
    for (i = 0; i < ccg.length; i++) {
      document.getElementById(ccg[i].id).style.display = "none";
    }
  }
});
</script>

When we play below template in normal browser it shows all elements , and hide all elements in casparcg which have name prefix with ccg.

https://goo.gl/VdjkYc

tue · March 8, 2019, 11:58am

If you want to use own fonts, is that possible also, or is it only the standard google web fonts that works?

didikunz · March 8, 2019, 1:30pm

The font would need to be in Caspars font folder.

vimlesh1975 · March 8, 2019, 5:08pm

Yes We can use custom font in Google web Designer. See the examle here.
https://goo.gl/zZYdAf

You need to put the font file in assets folder and define a font in code view like below

@font-face {
  font-family: "orange juice";
  src: url("assets/orange juice 2.0.ttf");
}

And then put the name of font family in font name in css pannel like below.

dtweek · October 15, 2019, 9:03am

Hi I was just going to download this as I’m making some GWD Templates and this looks like it would save me a load of time, but the download link is broken. Any chance you could send a new link?

vimlesh1975 · October 15, 2019, 12:31pm

Html template made with this method will require a compatible client to test and play.
Here is that client. It is same simple video playout client known as Caspar media playback. [CMP]

http://bit.ly/2z5xXae