I’m trying to figure out how to bind the background color of a perspective label to a tag value. In Vision it is straightforward to do (with a text field). I see where I can set it to a static value in the modify style link. I want to set up an expression such as:
if ({[default]tag_name.value} = 0, “0,217,0”,
if ({[default]tag_name.value} = 1, “255,255,0”,
if ({[default]tag_name.value} = 2, “255,0,0”, “170,170,170”)))
Can anyone add insight? Thanks!!!
The same process very much applies, there’s just a few small changes to make:
backgroundColor property to the styles object. The easiest way to do this (so you don’t have to remember the name of every property) is just to open the style customizer on the specific component and enter some value for the property(ies) that you want to bind.
"<red>, <green>, <blue>" - that was a convenience we offered in Vision (and have plans to make better in Perspective) but, for now, you’ll need to either:rgb function - so a property with "backgroundColor": "rgb(<red>, <green>, <blue>)" would work fine. Keep in mind that rgb(r, g, b) has to be the literal string your expression returns; so something like this:stringFormat("rgb(%s)", switch({[default]tag_name.value},
0, "0,217,0",
1, "255,255,0",
2, "255,0,0",
"170,170,170"))
B. Return a ‘web-style’ hex color code. This is still the RGB you’re used to, but encoded in hexadecimal, so 255 becomes FF:
"#" + switch({[default]tag_name.value},
0, "00D900",
1, "FFFF00",
2, "FF0000",
"AAAAAA")
Note that in both cases I used the switch operator - there’s no real reason for that (the nested if statements in your example would also work); I just find the switch operator a bit easier to read and operate with.
I assigned a color to the background color and then was able to add binding…so far so good
Although the backgroundColor label in the props drop down changes color correctly when I change the tag value, the label itself does not change color.
Here is my binding expression:
if ({[default]P3 Conveyor Status Tags/Fault Value} = 0, “00D900”,
if ({[default]P3 Conveyor Status Tags/Fault Value} = 1, “FFFF00”,
if ({[default]P3 Conveyor Status Tags/Fault Value} = 2, “FF0000”, “AAAAAA”)))
Here is a screen print. The label with “Running” is the one in question. You can see on the right that backgroundColor is green. In the designer the label stays the purple color I assigned it. In the url launch it has no color at all. Next steps???
The issue you are encountering is that the "color" you're supplying is missing the required pound sign (#) prefix which Paul recommended here:
There is a much better way to accomplish this same task which eliminates the need to format a hex color or even maintain logical conditions, and that is the Map transform. COnsider binding against the value of your tag and using the Map transform, like so:
Thank you, both suggestions worked like a champ!
Hi
Is there a way this binding can be made indirect based on a particular value from a table?
For example, I have a table that shows multiple numbers of equipment. From that table, I would like to use the value in column x to complete my tag path.
Thanks.
Of course you can make the binding indirect, but how are you determining which row you will receive the column value from?
Hi,
I am trying simple label background color.
In designer I am getting like this:
but after launching, I am getting extra space with background color.
Can you please guide Where I am wrong
Is your coordinate container mode set to percent? Try change it to fixed.
yes, I got It. Thank you.
