Change color of value in perspective

I am using ignition 8.1 perspective module and trying to get values to change color with the following expression:
if ({this.props.value}>92, color(0,217,0), if ({this.props.value}<87, color(255,0,0),color(255,140,0)))
I am getting an error like this:
image

Please advise, Thank you

The color expression returns a Java color, not a web-useful color (for now). What we'll probably eventually do is make the function smarter. In the meantime, you can use a transform to manipulate the color into the right format:

if ({this.props.value}>92, {background-color:rgb(255,0,0);} /* red /, if ({this.props.value}<87, {background-color:rgb(0,255,0);} / green /,{background-color:rgb(0,0,255);} / blue */))

is this what it would look like using the css?

You’re binding on the style key directly. What you probably want to do is add an additional key for background-color below it, then add a binding to that:
image
image
Then for your expression, return a string that describes the color; what this does is tell the browser to use the rgb function in CSS to render the color:

if(
	{../Slider.props.value} > 92,
	"rgb(0,217,0)",
	if(
		{../Slider.props.value} < 87,
		"rgb(255,0,0)",
		"rgb(255,140,0)"
	)
)

(I indented the function purely for readability, whitespace doesn’t mean anything to expressions).
screenshotBVbeMp

Another option that’s potentially a bit more ‘future-proof’ is to use three different style classes (say, error, warning, and good, and add the background-colors there. Then you would bind the classes node in the property tree - but instead of your expression directly returning a color, you would return the name of a style class:

if(
	{../Slider.props.value} > 92,
	"good",
	if(
		{../Slider.props.value} < 87,
		"error",
		"warning"
	)
)
1 Like

Sweet my man thanks! Im getting it!

Or better yet, define Perspective Styles for each colour and switch between these in the styles.classes binding. Then you can reuse them while having a single source of their values.
Extending that, you can then also define a custom CSS theme that stores these colours as css variables which you then reference in the Perspective Styles with var(--your-colour). Then you have ultimate flexibility to create new themes.
Also, HSL colours are also your friend in css :slight_smile:. Don’t make friends with rgb unless you’re a robot

1 Like

:robot: Why you keep bullying my friends? Rgb is a cool! :robot:

thanks for this knowledge. using this code on the powerchart's stroke color:

if(
	 {[Sample_Tags]Realistic/Realistic0} > {[Sample_Tags]High_SP},
	"rgb(255,0,0)",
	if(
		{[Sample_Tags]Realistic/Realistic0} < {[Sample_Tags]Low_SP},
		"rgb(0,0,217)",
		"rgb(0,127,0)"
	)

May I return color of default(or any dynamic color) stroke if 'realistic0' between the border?

No, you can't vary the color of portions of a Power Chart trend.