Is there a way to use a gradient on the arc of a simple gauge? I’d like it to go from blue to red (cold to hot).
I tried setting the background but that caused an error.
linear-gradient(to right, #1d66ff, #ff5858)
2 Likes
Following. I’m not finding a lot of useful info about how to use gradients for dynamic page elements and not just backgrounds and things like that. The one good example I found was of a tank, but it was an SVG graphic where they did the fill as a gradient. That isn’t an approach that is workable with the built-in components like the simple gauge. But clients always ask for the gradient.
1 Like
I created a feature request for this as it seems currently this is not possible: https://inductiveautomation.canny.io/ignition-features-and-ideas/p/ability-to-add-gradients-to-components
1 Like
Adding a gradient feature is unlikely, as you can bind the color value to be whatever you want.
This is a simplistic mapping approach:
You could generate your own gradient function as a project script which expects a “low” color, a “high” color, a “low” value, a “high” value, and the “current” value, and then return an appropriate color based on those values.
Changing colors of the whole gauge color is good, but from a visual/design perspective, the ability to have gradients is something that would be a great feature. It is something that is possible with css and SVGs - but just, it seems, not possible in Perspective for components.
EDIT: Info on how to do this with css and SVGs: https://stackoverflow.com/questions/37328302/fill-an-svg-shape-with-a-gradient
2 Likes
Yea a lot of what I’ve done to style the elements I’m using has relied on that type of mapping/scripting but being able to do this systematically would be more efficient and allow for a more consistent visual style. Esp on mobile/tablet there seems to be higher expectations there than there may have been with just a website
2 Likes
Thank You, sungkhum!