mikhus/canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1

• Installation
• Documentation
• Add-Ons
• Special Thanks
• License

This is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

Installation

Canvas gauges can be simply installed using npm package manager. Depending on your needs there is possibility to install whole gauge library or only that part you really need for your project. To install the whole library, run:

$ npm install canvas-gauges

If you only need the exact type of the gauge it can be installed using the appropriate npm tag. Currently the following gauges are supported: linear, radial.

To install only linear gauge, run:

$ npm install canvas-gauges@linear

To install only radial gauge, run:

$ npm install canvas-gauges@radial

This strategy useful only if you need to minimize your code base and plan to use ONLY a specific gauge type. If you need to use various gauge types in your project it is recommended to use whole gauge package.

More...

Documentation

You can find complete docs on the canvas gauges web-site:

• User Guide
• Developer's Docs
• Examples

Add-Ons

Here are some third-party libraries which are developed and delivered to use canvas-gauges as components for a different popular frameworks:

• Angular gauge components
• VueJs gauge components
• React gauge component

Special Thanks

For supporting development!

For testing support!

And to all contributors!

License

This code is subject to MIT license.

canvas-gauges's Issues

"copy" gauge

Hello,

is it possible in javascript to copy a gauge?
I will try to display 100 gauges ... but will not write for all the same code, to optimize loading time.

gaugeCurrent1.draw();
gaugeCurrent2 = jQuery.extend(true, {}, gaugeCurrent1);
gaugeCurrent2.renderTo = "gauge-Current2";
gaugeCurrent2.draw();

This will not work ... all the gauges should has same layout .. only title and renderTo are different.

Thank you!

Compass 180 degrees off.

First let me say great work on this gauge.

I was using your compass JavaScript example. In the code it has a random number set to demostrate the compass.

For example: If you set the range between 84 and 94 (East) the compass points West. It is 180 degrees off in all test cases.

Make jamjs packaging

Update Readme file, use markdown syntax.
Add packaging stuff to make possibility publish Canv-Gauge via jamjs.org

Links in README do not work

For example, http://smart-ip.net/gauge.html, fails to to show the guage because guage.min.js is missing (404 error).

strip the font

I like the tiny implementation. But is there a way not to reference to the fonts. That just kills the 'tiny' part.

No animation on $(document).ready()

I have an issue where i'd like the gauges to build right when the DOM is loaded and ready. sadly,
no animation takes place and sometimes I get a strange gauge output. See the attached image for that.

however, if i bind an event to click, it works perfectly.

this fails to work correctly:

$(document).ready(function() {
drawGauges();
});

This works correctly:
$(document).ready(function() {
$('someElement').click(function() {
drawGauges();
});
});

i should add that the drawGauges() function is just a function made to help loop through all my gauges. it does in fact call the necessary methods to build gauges as you can tell. i can send you my code maybe outside of this post simply because the formatting here is awful.

It would be useful to have version number in minified files.

It is hard to find out if the version is more or less actual If used only minified file.

needle animation problem with webpack (or rollup)

Hi

I have a problem animating the gauge with web pack. In the animate function, when calculating the start time ns.Performance.now() returns a value that is way too big compared to the Date.now() and using that value makes the animation weird (the needle jumps from one value to another and sometime disappears completely). Patching the code to use window.performance.now() fix the problem... Is there something that I am missing?

Needle spins crazy on first change

I update the value with onclick="gaugePS.value=200", onclick="gaugePS.value=250" etc.

On first click the value goes like 541245 and after animation to 200
On second click everthing is ok

Needle in wrong position when data-min-value greater than zero

If the data-min-value is anything other than zero, the needle draws in the wrong position.

In the drawNeedle() function you need to change this line:

ctx.rotate( radians( 45 + fromValue / ((config.maxValue - config.minValue) / 270)));

To:

ctx.rotate( radians( 45 + (fromValue - config.minValue) / ((config.maxValue - config.minValue) / 270)));

Title size doesn't work in minified version

Setting titleFont.size does not appear to work in the minified version of the gauge. Using the non-minified version works as expected.

Erratic rendering

Multiple needles are rendered. Any tips on how we might debug this?

MajorTicks Update

Thanks for your continuous effort and kind help. Kindly find the code I am trying, and it gives a problem with the majorTicks, after updating gauge to the latest, the behavior is different, no more sending error to console but still doesn't update correctly.

cgng1.rar.zip

Re-organize code layout

I guess we need some structure now. Would be good to split source files, compiler and resources.

rgb[a] format for colours does not work in html

Specifying colors in the html attribute data-highlights using rgb or rgba does not work because comma is used as the delimiter for multiple highlights as well as the delimiter inside the rgb[a]. The string is simply split on comma when parsing the attribute for the config.

Instead, may I suggest splitting on a regex:
{number[int/float], number[int/float], color[#hex/rgb string}

If min is not 0 => wrong highlights

I can fix the issue when I subtract the minValue from highlights "from/to".

How to setup a gauge value with an input element

Hi everybody

This code is not working and I don't understand why. I want to update a gauge value with an input element like this

in the <script></script> element I have the function called when the document is loaded

<script> function showGauge() { var mygauge = new Gauge( { gauge definition } ); mygauge.draw(); } </script>

The gauge is displayed but nothing change when the input change.

I think that I have not onready event elsewhere, but after many test I have not find some solution.

Looking forward to reading you.

Best regards.

Bernard.

Rendering Gauge in backbonejs view

Thanks for the great work.
We use backbone and jQueryMobile (JQM)

I managed to add a gauge quickly using javascript.

But when I tried with the example of specifying the gauge in HTML directly using data-type="canv-gauge"

The gauge is not rendered. Looking at the source code, it seem like it only renders when DomReady is fired. But in the single-page-app, DomReady is not useful.

Has anyone made it work with Backbone and JQM?

Suggestion

Is it possible to add a feature making it possible to configure linear gauges as sliders?

Thanks.

Add the possibility to define font of valueText

By default valueText uses /fonts/digital-7-mono.{eot,ttf}. I think that would be interesting define what font you what to use and were is the fonts. Some like:

valueText: {
    visible: true,
    fontDir: '/fonts'
    font: 'digital-7-mono'
}

Multiple values on same gauge

Is there a way to display more than one value on a single gauge, for example on a temperature gauge to have a mark to indicate the min and max temperature of the day.

ValueBox text

Hi
I want to set the value to some value, but show a text message in the value box.
How can this be done?

Option to skip the constrain to the needle

It's just a tip to improve the very nice library.
I'm facing the problem to reproduce a compass gauge, and I wanted to make an attempt with your library, first.
Well, I quickly came to a pretty decent result, although there's a problem related to the needle: the constraints. If you were adding an option to skip the needle angle checking (only for the needle angle), you'll have another possibility to offer.
At the moment, I made a modification of the library by myself, by touching the "setValue" and the "drawNeedle" functions.
Here is my result:

License in minified file

Please add a license to the minified build.

According to the license:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

Accessible for the download compiled minified file doesn't contain this info.
Thanks in advance.

Render imperfections

The colors are rendered with imperfections under google chrome (current version: 29.0). There are white lines that pass through arches. You can see it in http://smart-ip.net/gauge-html.html , first gauge, darker gray. This is more clear if you maximize the gauge size (as I need). Safari isn't affect by this issue.

Best regards and thanks for your amazing widget!

Gauge needle goes to wrong possition when setValue called a second time when animation=true

When I have a gauge set up with animation=true the first call to setValue works correctly.
When value is set again with setValue the needle goes to the wrong position.
If animation=false the needle goes to the correct position.

Move digital font from Internet and place it locally

Need to put font for digital screen of the gauge in local resources.

paramètres - parameters

Bonjour,
je voudrais faire afficher dans la gauge le chiffre saisie dans une page internet mais je ne sais pas faire.
Merci
hello,
I would like to display in the gauge the number entered in a web page but I do not know how.
thank you

Question value box frame

In the forerunner it was possible to suppress the frame around the value box. How can I do it for the current version.

360 degree Radial Gauge - Value change long way around

If you have a radial gauge with values between 0 and 360 like a compass, when you change the value from say 5 to 355 the needle animation takes the long way around the circle not the shortest distance. In certain situations like showing a heading it would make sense for the needle to take the shortest route to the new value.

Is there a config option to make the animation take the shortest distance around the circle?

Thanks,

Update docs!

We have new changes which should be covered into docs, like new config option for majorTicks format, possibility to suppress majorTicks definition in config, using Closure compiler, etc.

Bower package

Good work !

can i suggest you to register a bower package ?

MORE HERE

Draw second gauge not possible

I tried to create two gauges.

In the first gauge only ValueBox and Needle are drawn, in the second one, everything is fine. Also tried with more then one, every time only the last one is good.

Seems to be a problem with the cached canvas, the value "cctx" is not defined as "var", only used, so maybe every gauge uses the same? Adding "cctx," after "ctx = canvas.getContext( '2d')," solved the problem a bit, but i did not really understand ;)

Sometimes, for milliseconds, it looks like their are two Needles in one gauge, maybe images are still overdrawn?

This all happens only when gauges are all first created with new and drawn afterwards.
Thx for helping.

Greetings Udo

Library is broken in environment using CommonJS modules

Library is broken in CommonJS environment. Module is wrapped into anonymous function to provide something close to UMD module format:

(function(ns) {'use strict';
    // code
}(typeof module !== "undefined" ? module.exports : window));

It works perfectly in non-CommonJS environment, since it sets ns to Window. In CommonJS environment ns will be module exports object. But code of the library extensively uses ns variable to access Window's properties: 1, 2, 3, etc. Obviously in CommonJS environment these properties are undefined, so it fails/behaves very weird (in my case animation went insane, because ns.performance was undefined and it used Date.now() to get animation start time (and they are completely different things).

The simple solution would be just removing ns. prefix from all the global variables. If you think we should go with this solution, I can prepare PR.

Check out updated example to get simple reproduction of the issue in CommonJS environment.

---

As a side note. I find the Regex based build process a bit speculative. Any reason why you use that instead something like this babel plugin for example? Maybe we can improve build process as well?

half dial (0-180)

Hello sir, very nice work and nice graphs. we really appreciate you works.
One request is that possible you will add one half dial 0-180 degree with these full 360 dials.
Thanks

Retina support

Just realised that canv-gauge does not seem to support retina screens. Anyone have a fix for this? thanks

May be it will be interesting for you to test all parameters in GUI

I implemented here all 125 parameters and people can easily play with it:
http://iobroker.net:8082/vis/edit.html?CanvasGauges#Gauges
Or just static visualization:
https://iobroker.net:8080/vis/index.html?CanvasGauges#Gauges

The translation will last a bit. But it will be definitely done.

Migration Documentation Issue

On page "https://canvas-gauges.com/migration/". There are no "valueFormatInt" or "valueFormatDec" options... instead they are "valueInt" and "valueDec".

double needle

Hello,
When I use multiple gauge at the same time, all except the first one get double needle

These gauges are generated by the same code and should not difer

Thank you.

Edit
double neelde ocur pretty randomly

non-linear range/scale for say 20 to 2MM

Hi,

Great job on the gauge package, it's awesome, thanks for putting it out here.

Have you thought about non-linear range/scale for say 20 to 2MM?

Might be a stupid question but didn't see anything about it in the docs.

Adding an extra highlight colour rotates gauge by 90 degrees

I noticed that when I added a fourth highlight colour to the highlight array the gauges were drawing the new highlight colour but they were rotating clockwise by 90 degrees. Any extra highlight added to the highlight array rotates the gauge by another 90 degrees.

I hacked a fix by forcing the gauge to rotate back 90 degrees after the final highlight is drawn by adding the following line of code to line 500 of gauge.js

ctx.rotate( radians( -90));

but this is not an ideal solution. I just thought I would flag it here so that you are aware of it.

V2.xx doesn't work very well for me ...

I just had a try at upgrading from 1.0.5 to 2.x.x and found that none of the examples in 2.10, 2.0.1 and "master" (I assume this is the "trunk") do not work for me.

Either they don't display a gauge at all or the needle is missing (or disappears after a second or so)

This was under "Pale Moon" v26.4.0

Under Firefox 47.0.1 it seemed better in that "scripted.html" and "linear-component.html" seemed to work OK but "radial-component.html" and "radial.html" didn't display any guages.

Is 2.x.x a release?? or is it "work in progress"??

1.0.5 works fine :-)

TIA
Dave

Use of Gauge

I have a problem when instantiating a repeated instances of the gauge, using something like that in the ID field is not working:
<canvas canvas-gauge id="gauge-{{$index}}" .......></canvas>

probleme pour passer des valeurs

bonsoir,
je voudrais afficher dans une gauge une valeur issue d'un programme python. Je ne sais pas comment faire.
pouvez vous m'aider ?

Make value box size parametrized

Now the width of value box is defined as follows:
let tw = context.measureText(options.valueText ? text : ('-' + padValue(0, options))).width;

So the width is defined according to initial value length.

F.e. I don't need leading zeroes and decimals (000.00)-> I specify component as follows:

valueDec: 0,                                     
valueInt: 1,

Initial value is 0, the width of the value box is appropriate. Now I load value 1000 and it looks ugly.
So I propose to move out dimensional config of the value box and make it configurable in px and % (from the total dimensions).

On updateConfig gauge with negative values spins like crazy

Imagine that you have:

var tempGauge = new Gauge({
        renderTo: 'temp-gauge',
        width: 380,
        height: 380,
        glow: true,
        units: '°C',
        title: 'Temperature',
        minValue: -10,
        maxValue: 50,
        majorTicks: [ -10, 0, 10, 20, 30, 40, 50 ],
        minorTicks: 10,
        strokeTicks: false,
        highlights: [
          { from: -10, to: 0, color: 'rgba(0, 0, 255, .3)' },
          { from: 0, to: 10, color: 'rgba(0, 0, 255, .1)' },
          { from: 30, to: 35, color: 'rgba(255, 255, 0, .3)' },
          { from: 35, to: 50, color: 'rgba(255, 0, 0, .3)' }
        ],
        colors: {
          plate: '#f5f5f5',
          majorTicks: '#666',
          minorTicks: '#888',
          title: '#444',
          units: '#000',
          numbers: '#222',
          needle: {
            start: 'rgba(240, 128, 128, 2)',
            end: 'rgba(255, 160, 122, .9)'
          }
        },
        animation: {
          delay : 25,
          duration: 500,
          fn : 'linear'
        },
        valueFormat: {
          int: 2,
          dec: 1
        }
});

Then initialize and draw (note that the value not is important):

tempGauge.onready = function() {tempGauge.setValue(0);}
tempGauge.draw();

If you put some like this:

$(window).resize(function() {
      if ($(window).width() < 1200) {
        tempGauge.updateConfig({ width: 300, height: 300 });
      } else {
        tempGauge.updateConfig({ width: 380, height: 380 });
      }
    });

The gauge spins crazy on window resize!!

Remove the clock design

Hi guys, thanks for this gauge...it's the one that have multiple range that i found on the internet.

The Clock design didn't match with my system, is there any way that i can change that?

Thank's

Cannot handle negative values

I tried using the gauge as a temperature gauge, but it does not work with negative values.

Can I hide specific majorTicks on a gauge, so that only a few are visible?

I have a gauge that I am working on and my client wants to only show a few of the majorTicks on the gauge. I know that I will need entries x10 to 100 to make a gauge that functions appropriately. can I use something like a CSS call to hide the specific majorTick? ie. '10'{this.css('visibility, 'transparent')}? Any hint would be nice!

Customization

I was working with the gauge.I wanted to remove the small gray color display with more visible custom display of numbers.Apart from this looking to change the needle to custom custom pointer.
Can you please advise how can i achieve IT.