Binding background color on perspective label

#1

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!!!

0 Likes

#2

The same process very much applies, there’s just a few small changes to make:

  • Before you set up the binding, you’ll need to add a 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.
  • Just like Vision, you can then add a binding to the component. An expression binding works just like it does in Vision:
  • The other caveat to be aware of is that, since we’re emitting this directly to a webpage, the ‘color’ can’t just be "<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:
    A. Wrap the color in the CSS 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.

0 Likes

#3

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???
image

0 Likes

#4

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:

2 Likes

#5

Thank you, both suggestions worked like a champ!

0 Likes