CanvGauge - measuring device using canvas for HTML5

Good afternoon, habrovchane!



Today I want to share my small development, which I did for one of my projects. In fact, there are many gauge implementations in the network, both paid and free. But I did not manage to find at least one solution using canvas, therefore it was decided to write my own.

Why canvas?

Firstly, it works in all modern browsers. Secondly, it still works on Android and iOS mobile platforms without limitations. The same SVG, for example, does not work by default on Android 2.x, and Flash does not work in iOS.

')

CanvGauge code can be picked up here . You can also find a small description of the API here . And here to see an example of work .



When used, you do not need any third-party libraries. The code is distributed under the MIT license, you can safely pick up, modify, improve / worsen, share your additions and best practices. I will gladly accept good commits to my repository. I would be grateful for any bugs and interesting suggestions. Unfortunately, I am not an artist, so appearance may not be perfect. If someone can help with the guidance of "beauty" - welcome!

Features out of the box

Gauge is relatively easy to customize. You can set parametrically the colors of the instrument elements, its size, gradation scales, title and units of measurement. Various functions of the arrow animation are available, and it is also possible to implement its animation function on the fly.