Template with color

Templates with colors will introduce us to the concept of middlewares. Our goal of this mini-tutorial will be to read the color from the template data and set is as a background color of a shape. Color elements are not yet supported out of the box in Loopic, so the procedure will invole a little bit of Javascript coding.

Let's imagine our template data will contain a HEX color value (for example, #BAE67E) under the key "_color".

Our goal will be to write a piece of code that will set the background color of a shape to the value under the "_color" key. This piece of code must be executed every time we get a new update command from the CasparCG - ideal usecase for using middlewares and loopic.useOnUpdate method.

Custom function

Below you can see an example of useOnUpdate function in service of setting the background color of a shape. It's just a few lines of code.

This code should be set as the composition action, since the update command is the first thing that gets executed on CasparCG playout.

loopic.useOnUpdate("_color", (dynamicId, value, next) => {
  const teamColorElement = loopic.getElement("_teamColorElement");
  teamColorElement.domNode.style.backgroundColor = value;
});

Irregular shapes

But what if our graphic does not have a rectangular color shape but some custom, irregular? What if it is an a shirt, an arrow, or just some decorative element? This is where SVGs come to the rescue.

In this case, you should create an SVG element (in a software of your choice) and import it in composition. Once it is imported, you can access all SVG sub-elements.

For example, this is what an SVG looks like for a basic circle shape.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30">
  <defs>
    <clipPath id="clip-circle">
      <rect width="30" height="30"/>
    </clipPath>
  </defs>
  <g id="circle" clip-path="url(#clip-circle)">
    <circle id="circle" cx="15" cy="15" r="15" fill="#fff"/>
  </g>
</svg>

Now if we want to change the color of the circle, we can do it simply by writing a code similar to the next one.

loopic.useOnUpdate("_color", (dynamicId, value, next) => {
  const foundCricle = element.querySelector("#circle");
  foundCricle.setAttribute("fill", value)
});

This method works in Loopic Beta but it will be improved in the future versions of Loopic.