Expression Help with Fill Colors

Ignition
1

Hello Everyone,

I am struggling with trying to select a fill color based off of an expression.

Ultimately, I want a Numeric Label’s “Background Fill” to change color based off conditions. The tags that I need are a part of my Motor UDT.
I was able to accomplish this easily in FactoryTalk but haven’t been able to in Ignition.

image
image764×438 43.9 KB

Here’s the actual expression from FA:
IF {[PLC_100_1_1]C_113_20.Running} AND {[PLC_100_1_1]C_113_20.Alarm}
THEN 3
ELSE IF {[PLC_100_1_1]C_113_20.Running} AND {[PLC_100_1_1]C_113_20_Current_Alarm}
THEN 3
ELSE If {[PLC_100_1_1]C_113_20.Running} AND NOT {[PLC_100_1_1]C_113_20.Alarm} AND NOT {[PLC_100_1_1]C_113_20_Current_Alarm}
THEN 1
ELSE 0

If someone could give me some guidance, it would be appreciated.
Thank you

2

We do something similar with out object.

The code is fairly easy. You will be using the toColor expression function so go read up on that.

Basically the code looks like this:

if(
    {Running} && {Alarm},
    toColor('red'), (Number 3 Color Selection from FTView)
    if(
        {Running} && {CurrentAlarm},
        toColor('red'), (Number 3 Color Selection from FTView)
        if(
            {Running} && ! ({Alarm} || {CurrentAlarm}),
            toColor('green'), (Number 1 Color Selection from FTView)
            toColor('gray') (Number 0 Color Selection from FTView)
        )
    )
)

Basically it’s a series of if then statements to determine the color.

3

Thank you for the help bschroeder; it worked perfectly. I still find this statement structure confusing… Do you have any recommendations for sources that can help me?

Also, would it possible to add blinking animations in conjuncture with the colors?

4

Another option, that I find a bit easier to reason about (and extend, down the road) is to pair the binEnum expression function with the style customizer (which also lets you add blinking and easily change colors).

  • Make a custom property that’s an integer type.

  • Add an expression to it; adopting from @bschroeder, it’d look like this:

    binEnum(
    {Running} && {Alarm},
    {Running} && {CurrentAlarm},
    {Running} && !({Alarm} || {CurrentAlarm})
)

    The binEnum function will return the index of the first parameter that evaluates to true - so, if {Running} && {Alarm} evaluates to true, it’ll return 1; if {Running} && {CurrentAlarm} it’ll return 2, etc. If nothing evaluates true, it’ll return 0.

  • Open the Style Customizer on your component. Select your newly created custom property as the ‘driving property’, and choose whatever aspects of the component (foreground color, background color, font, etc) you want to change based on the driving property.

  • Set up your different colors for the different states in the rows below.

  • If you need dynamic colors, you can separately add a ‘Cell Update Binding’ to the ‘Styles’ dataset property on the component.

An advantage to this approach is ‘separation of concerns’ - the logic for which color to use is separate from the logic of what ‘state’ the component should be in.

1 Like
5

Thank you for the help, it worked great!