Change color of progress bar by range (perspective view)

Ignition
21

I confirm you that in this way it works as expected, as you said if we could play with HSL color everything should be better.

Thanks for the help

22

Couldn't you use an expression that returns an hsl color string to be evaluated on by the browser?

23

Thanks, Paul. I had been trying various combinations of that and couldn't get it to work in designer or browser. I copied the same format from that website and it just worked!

HSL demo

Figure 1. The result.

HSL demo binding
HSL demo binding839×462 53.4 KB

Figure 2. Label background binding.

Expression transform code 
// HSL color generator based on 360 degree color range.
// hue, hueMax and hueMin should be scaled to 0 to 360.
// 0       60      120     180     240     300       360
// red     yellow  green   cyan    blue    purple    red
// Use y = mx + c to convert 0 to 360 to range between hueMin and hueMax.
// Saturation and lightness can be fixed values (and probably works best).
// https://forum.inductiveautomation.com/t/change-color-of-progress-bar-by-range-perspective-view/57334/19
"hsl(" 
	+ round(
		({value}['hueMax'] - {value}['hueMin']) / 360	// m
		* {value}['hue'] 							// x
		+ {value}['hueMin'], 							// c
		0
	) 
    + " " + {value}['saturation'] + "%"		// 0 - 100 input value.
    + " " + {value}['lightness'] + "%"		// 0 - 100 input value.
+ ")"

@Aiasa21, this may be what you're looking for.
@nminchin, you have several posts from some years ago lamenting the lack of HSL color setting. It looks like it works. Had you figured it out already?

If you're wondering, the rainbow is a label with,
props.style.backgroundImage : "linear-gradient(to right, red, yellow, green, cyan, blue, purple, red)"
There is color banding visible due to the 256 color palette limit of the GIF file format. In Designer it looks smooth.

3 Likes
24

HSL always worked since CSS supports it, but the designer doesn't like it and doesn't give you a colour preview nor the option to pick using HSL which was my issue

2 Likes