I like very much this circular meters/gauges which you can see almost every where…
I would very much like to have something like this in Ignition.
I was trying to do something with the canvas, but I’m not java ‘person’ and it’s a ‘little’ too much for me.
Is there any ‘brave’ soul who would try to do something like this in Ignition:
http://thecodeplayer.com/walkthrough/make-gauge-charts-using-canvas-and-javascript
I think everybody would like and use this…
zxcslo
Take a look in the Cloud Template Browser, there is a template called Dial in the IA folder that you could modify to suit.
I know about Dial… it’s made from Pie Chart component…
But it’s not what I want/need…
I think it can be done better in canvas… and with animation…
Animation is quite easy to add.
You can add a timer object to the template with a small delay, and create an intermediate “actual” value. If the actual value is different from the requested value, start the timer to go towards the requested value.
I quickly added such an animation timer to the dial, and it works pretty fine: per 100ms, there’s a jump of 1%,
Dial_2017-07-15_1729.proj (25.2 KB)
Thank you. It really looks good.
But I would really like something like this with animation:
Almost there, just bumping into problems with the shadow and separator bars, see Customize Pie Chart - #7 by Sanderd17
There’s now a separate button that fixes the shadow, but I can’t find a way to keep that persistent.
Dial_2017-07-16_1105.proj (25.2 KB)
Thank you for your effort…
This is what I’ve done with paintable canvas. Everything is working and looking good.
But I can’t figure it out, how to implement animation like you did…
circularGauge2 (2017-07-16).proj (57.1 KB)
HA, when I was taking my beauty nap after lunch, it came to me… 
Thank you @Sanderd17 for stimulating my brain cells.
This is what I did:
circularGauge3 (2017-07-16).proj (89.1 KB)
(I’m using tags generic simulator device for testing).
Here is the updated version with selectable shape (arc/donut) and animation (off/on)… as requested by @nader.chinichian…
circularGauge4_2018-11-09_0920.proj (144.1 KB)
Thank you very much. I’m really love this object. I hope some day ignitin make it native object so we can see the shape of object t in design mode.
I make some modern good looking slider with mouseDragged event. Do you think is it possible to make this circular gauge to circular slider like the ones in the web?
adding a shape as handlers on on your gauge and use mouseDragged event to change value of gauge and position of shape handler. The only problem is how fix user movement on the circular line?
Hi @zxcslo,
I was looking for something just like this, so thanks!
One question though, I have some values that alternate between -10 and 10. I tried modifying your templates to account for negative numbers and it doesn't seem to behave well, the point of "zero" seems fixed. I'm not great at scripting, any chance you could point me in the right direction to fix that? or is it impossible?
Thanks!
You can play with minValue and maxValue properties...
If you set minValue to 10 and maxValue to 120, you'll get a range from -10 to 100.
Thanks! I actually modified the internal code for scaling and it works for negative numbers now. Again, great work on these arcs!
