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.