Html template with Google Web Designer

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

okay thanks

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

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

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?

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

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

The font would need to be in Caspars font folder.

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.

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?

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