How to dynamically change component color in Total.js Flow

Question

I am using Total.js Flow and I am trying to modify the existing code to be able to change the component color dynamically. For example, using the "Light" component from the devices section, when the light is on, I want the color of the component to change color to, let's say light blue, when the light is off, I want the color to change to light red. This is just to help visually see when the light is on/off.

By doing trial and error, I successfully managed to know when the light is either on or off. From there, using a simple if/else statement, I was able to find out how to change the color but it only works when I reload the whole page. I noticed reading through various SO posts, there was a hot reload function (FLOW.reload()), but that doesn't seem to work as expected. How would I change the color of the component dynamically when the light is either on/off?

var status = () => 
{
        instance.status('Light is: ' + (device.on ? 'On' : 'Off'));
    instance.dashboard('status', device);
    instance.flowboard('status', device);

    // if device is on change label and block color
    if (device.on.toString() == 'true')
    {
        this.state.color = 'blue';   // changes the label color
        instance.color = '#FFFFFF';  // changes color of block              

    }
    else    // if device is off
    {
        this.state.color = 'red';   // changes the label color
        instance.color = '#BB0000'; // changes color of block           
    }
};

Answer 1

Your code is OK, but you need to perform instance.reconfig() method, the method notifies all clients / Flow designers about the change. We don't recommend to call the instance.reconfig() function in short times, it's too much expensive.