I am trying to change the color of the text on a label depending on the value of the tag. I am pulling in the tag from a PLC and applying a python script to it, the tag is either 1 or 0. Right now my python script is putting GOOD or BAD on the label depending on if the tag is 1 or 0. I would also like it to change the color of the text to green if GOOD (1) or red if BAD (0).
Is this possible to do through the python script?
Best way to do this is to make 2 custom style classes, one for good value and one for bad value. Set the text color in each class appropriately.
From there, put an expression binding on the label's props.style.classes
property that looks at the tag value, and returns the appropriate custom class style based on the tag value.
You can go simpler by just doing an expression on the label's props.style.color
property, but the style class is the best way to do this.
In general, you should be attempting to achieve simple things like this via expressions, as they are faster than scripts.
(I can hear the UI design complaints already)
Use expressions rather than scripts wherever possible. They are more efficient as they don't require starting the script engine.
Expression for GOOD / BAD on the label's PROPS.text
:
if({[default]MyBooleanTag}, "GOOD", "BAD")
Expression for label color:
- Add a color property to
PROPS.style
.
Expression:
if({[default]MyBooleanTag}, '--success', '--error')
This also introduces you to Perspective Built-In Themes | Ignition User Manual which is the way of the web. You should use built-in or your own theme colors rather than hard-coding colors in your application. That is fundamental to separation of content and style.
Ryan's encouragement to use style classes is good advice.
1 Like
Using a script for that is very inefficient. Expression bindings will execute much quicker, so I would create a custom property in the view that binds to the tag, then apply an expression binding on the text
property of the label:
if({view.custom.myProp},
'GOOD',
'BAD'
)
You can do the same to bind a style or color value as @ryan.white suggests.
1 Like
There's no significant performance benefit from this, but this is absolutely the way to go from a maintainability standpoint.
If you add a single custom property with the single 'driving' binding for your component, then if you ever need to update the path it's pointed to, it's very easy to do. If you reference the tag individually in multiple bindings, you'll have to update each of those bindings if you ever need to make a change.
3 Likes
And I would add that for that same reason, it’s important to place the custom property on the view, not on a particular component. That way you can reorganize view components and not break relative path references like those created with getChild()
and the like.
4 Likes
I think this is the best method for what I am trying to do. I have some questions still though.
- Am I able to apply both of these expressions at the same time? Im assuming I just add the color one on another line?
- When I try to do the color change expression you provided it just changes my label to ‘–success’ or ‘–error’ if({[default]LeakTesting-PLC/TestResults}, '--success', '--error')
You need two bindings (three, if you go the recommended way above).
One on the text property of the label, returning 'good' or 'bad'.
One on the style classes property, returning which style class or color to use (--success
or --error
)
Optionally, one on a custom property bound to the tag that just returns a boolean.
Bindings must return a value, they don't work by 'side effects'.
- Am I able to apply both of these expressions at the same time?
Yes, but not on the same property. One binding max on each property.
- When I try to do the color change expression you provided it just changes my label to ‘–success’ or ‘–error’ if({[default]LeakTesting-PLC/TestResults}, '--success', '--error')
You've applied the color binding to PROPS.text.
. You need to add it to PROPS.style.color
which you will have created if you used my instructions in post #3.
1 Like