Change color of value in perspective

[mjohnson0238]

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:

Please advise, Thank you

[PGriffith]

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:

[IGN-1566] Perspective - Color function not returning a usable value

As a workaround, you can add a transform if you need to use color(): colorIn = value hexVal = '#' + hex(colorIn.getRed()*65536 + colorIn.getGreen()*256 + colorIn.getBlue())[2:] return hexVal

[mjohnson0238]

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?

[PGriffith]

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:


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).

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"
	)
)

[mjohnson0238]

Sweet my man thanks! Im getting it!

[nminchin]

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 . Don’t make friends with rgb unless you’re a robot

[victordcq]

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

[furkan_yuce]

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?

[Transistor]

@furkan_yuce

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

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