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"); = 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. Importing SVG

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

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

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.