Multiple layered graphics or expressions to change color

I am working on a big project that I have somewhat inherited and I am trying to increase the performance of.

On many of the screens there are motors, fans, and many other graphics. Most of them are composed of 3 layered graphics. A grey graphic is used when the fan/motor/etc. is not running, a green graphic when running, and a red graphic when faulted. The grey graphic is visible at all times and the red/green graphics have tags and expressions used on the “visible” property, which will appear over the grey graphic if activated.

To me, this seems unnecessary and I have been slowly going through and using an expression to change the color on one graphic rather than having three.

Here is an example of what most of them look like. This expression is used on either “background color” or “fill paint”.

if({fan is faulted}, color(255,0,0), if({fan is running}, color(0,255,0), color(213,213,213)))

I am curious to whether my approach is any better than the three graphics. My thought process was that the several hundred extra graphics could slow the project down, which is why I started doing the expressions. I would like to note that I try to use direct tag bindings when I can, but that is not possible with most of the motors/fans/etc.

Is my approach any better than the three graphic approach? If not, is there a better alternative?

Much better. Those graphics even when hidden will still be processed, so manipulating a single graphic will be much more performant than the alternative.

I’m not certain there would be a noticeable performance gain between expressions and bindings. I would definitely opt for expressions or bindings over scripting where possible.

Appreciate the response. I definitely try to use expressions and bindings over scripting. I remember reading on another forum post that direct bindings are the fastest, expressions second, and scripting last in terms of performance.

1 Like

Don’t forget that you can wrap text in expressions to improve legibility.

if({fan is faulted}, 
    color(255,0,0),            // Red
    if({fan is running}, 
        color(0,255,0),        // Green
        color(213,213,213)     // Grey

You could also use the switch function.

//The following would return "Running".
  fanStatus,            // value being tested
  0, 1, 2,              // cases 1-3
  color(255, 0, 0),     // return 0
  color(0, 255, 0),     // return 1
  color(213, 213, 213), // return 2
  color(0, 0, 255)      // default

I will usually use a custom property called ‘state’, with a binEnc() expression, then use the style customizer to affect colors, driven by the ‘state’ property.

       {fan is running}, 
       {fan is faulted}

I do use custom properties/style customizer often, but I was not aware of binEnc(). Thanks.