Hi everyone;
I would like to change the color of a progress bar by range. for example, from 0% to 30% the color is green, from 31% to 75% the color of the progress bar changes to yellow and then from 76% to 100% the color has to be red.
What properti would work for this?
Best regards
I mocked this up with props.bar.color. I used a binding that references the props.value and uses a map transform to set the ranges.
If you want to be really cool then add some CSS transition settings. (The animated GIF below doesn't quite do it justice.)
Figure 1. The transition effect.
Figure 2. The settings. This might not work. See the update on post #15.
transform 0.5s linear gives the smooth, slightly delayed motion.
background-color 2s ease gives the fade from one color to another.
Adjust the timings to suit.
These are CSS properties and there are many tutorials on the web. You can start at W3Schools.
my progress bar is binded to a PLC timer tag and I get an error
Can you post the error?
What property of the progress bar is bound to the tag?
What are the upper and lower bounds of the tag?
I was doing it wrong, but now i Fixed it, Thanks a lot!!!
It’s seems issue in the tag itself.as per shared screen value not appears. Check tag value in tag browser
Yes, you can have either a tag binding or a property binding. Selecting one disables the other.
As you have probably discovered, you needed to apply the map transform to the tag binding.
Hi @Transistor,
I'm trying to implement your smoothing color change but I can't. The colors change according to the value but without the transiction.
Could you tell me where is my mistake please?
Everything looks fine on your screengrab.
Copy the progress bar and paste it in here so we can have a look. (See https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831.)
Here you are, I cannot open your link but I just copy the bar and I paste here the structure
[
{
"type": "ia.display.progress",
"version": 0,
"props": {
"bar": {
"transition": "transform 0.5s linear, background-color 2s ease"
},
"style": {
"marginBottom": "15px"
}
},
"meta": {
"name": "Progress"
},
"position": {
"basis": "20px"
},
"custom": {},
"propConfig": {
"props.value": {
"binding": {
"type": "property",
"config": {
"path": ".../Slider.props.value"
}
}
},
"props.bar.color": {
"binding": {
"type": "property",
"config": {
"path": ".../Slider.props.value"
},
"transforms": [
{
"inputType": "range",
"outputType": "scalar",
"mappings": [
{
"input": {
"min": 0,
"max": 85
},
"output": "#FF0000"
},
{
"input": {
"min": 85,
"max": 90
},
"output": "#FFFF00"
},
{
"input": {
"min": 90,
"max": 100
},
"output": "#00AA00"
}
],
"fallback": "#000000",
"type": "map"
}
]
}
}
}
}
]
That's interesting. It doesn't work for me and neither does the original that I used for the screengrab above. Let me have a think.
I console myself, I thought I could be able to copy anymore 
Try this:
This works for me now and it looks like the right place to add the style. I've no idea how I got it to work previously.
Yes you're right, under the style it works, thanks for the help.
I wonder if should be possible to change the color in a different way, I mean now it actually changes smooth but from a color to another one (for example from red to yellow..
How can I make the color transition linearly, for example, during the change from green to yellow with all the shades between?
I think you mean having the color property change linearly with value? (This is different to a CSS transition between two distinct states.) Is that correct?
Yes I'm sorry for the bad explanation.. I should rappresent a production percentage, 100% green, 90% red.. In the middle should be nice that the color changes dynamically with all the small variation of the percentage.
As you said is not only an on/off change when the value is reached.
You can do that easily enough with the Map Transform. You'll need a line for 0 - 90, 90 - 91, 91 - 92, etc. Pay particular attention to how the ( ) and [ ] and ( ] and [ ) works.
You'll need to get the hex values for each of the colors. (It would be very handy if Perspective supported HSL color formats as you could bind the hue to your value and run with a fixed saturation and lightness.) There are many, many tools on the web for this. Here's one: WorkWithColor color blender although it only gives eight steps.
Thank you @Transistor, this is a great point to start, I'll update you!
