Dynamically change element fill color property

info

If you are not familiar with the concept of middleware, make sure to check the middlewares explanation. Also, make sure that you are familiar with the Actions concept.

Dynamically changing Rectangle or Path elements fill color is quite simple. All you need to do is:

1. Add new update middleware that will be executed when the template receives color data
2. Change the element's fill color property to the one received

Prerequisites

For this example, we will need a composition with one Rectangle or Path element. Both of those elements have fill property that is used for changing the fill color of the shape. Note that the key for the fill color is not color but it's fill - it's a very common mistake to mix those two (color property is used for changing the color of the Text element). You can find an entire list of all available properties on the list of all properties.

Feel free to draw and stylize Rectangle or Path elements however you want. You can also animate all properties except the fill color. The reason why you should not animate the fill color is that animating will create keyframes, and dynamically changing keyframes is a bit more complex than just changing the static value, which is out of the scope of this example.

Once you got your element ready, assign a unique key to it. The key is important because we will look for that specific element by its key. The key can be anything you want, but it is recommended that all keys start with an underscore and be written in camel case notation. For this example, we'll pick _homeTeamColor.

Now, let's get to some coding.

Adding new update middleware

In your Composition action, add new update middleware. Set the key you want to be used for updating the color. For example, if you are creating a scorebug template and both of your teams have color shapes, calling them _t1color and _t2color makes sense. In this exaple, we will cover the case for _t1color - the same code, just with a different key, applies to the other team.

info

Don't mix the key we are setting in our middleware and the key that is assigned to the element. They can be the same, but they don't have to. The key used in the middleware is the key that will trigger our middleware to execute, and the key of the element is used for looking for that specific element. When relying on default middleware, your middleware key should be the same as the one set for the element, but in this case, we are not relying on the default middlewares.

Now the empty middleware should look like this.

loopic.useOnUpdate("_t1color", (key, value, next) => {
  // Middleware code
});

Setting the color of an element to a dynamic value

Now when we feed our template with _t1color key and with color data, we need to tell Loopic to change the fill color of our element to whatever was sent in the middleware's value variable. Make sure that the fill color value is valid - it needs to be of <color>, <hex-color> or <named-color> CSS data types.

Firstly, let's find our element.

const element = this.findElementByKey("_homeTeamColor");

Secondly, let's change element's color value.

element.style.fill.value = value;

At this point, Loopic will be aware of the change and it will automatically trigger recomputing and refreshing of the render.

Final middleware

In the end, the middleware method should now look like this:

loopic.useOnUpdate("_t1color", (key, value, next) => {
  const element = this.findElementByKey("_homeTeamColor");
  element.style.fill.value = value;
});

Now export your template or preview it directly in Loopic. Try sending some data and playing the template.

{
  "_t1color": "blue"
}

And voila! It works! You can now reuse this technique to change any other style properties. If you have any questions or if any part of the tutorial is not clear, feel free to contact support.