Html template with Google Web Designer

html

#21

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


#22

okay thanks


#23

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


#24

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


#25

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?


#26

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


#27

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


#28

The font would need to be in Caspars font folder.


#29

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.