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?
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.
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?
this is my tag binding
and this is what i get when i edit the property
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.