Cover photo
107 followers|90,690 views


Version 0.14.7

> Added an optional callback function as a second parameter to all set value animation functions .setXxxAnimated(value, callback)
  The callback will be executed on completion on the gauge value animation.

I'm using this to set the threshold indicators (particularly the minIndicator) after the gauge has finished its animation. On first displaying the gauge I animate the pointer up from the min scale value to the required value. This means that the minInd cannot be pre-set to a desired value when the gauge is first drawn as it always takes the pointers lowest value - the min scale value in this case.

So my code looks something like this:

gauge.setValueAnimated(newValue, function () {
Luke Latham's profile photoSteelSeries Gauges - Canvas's profile photo
Sorry, I forget to look at this page sometimes.

Yes the font size is fixed - sort of. Generally the labels have a fixed font size AND a fixed width, so if they are particularly long (e.g. 10,000) then the font size will be scaled back by the browser to fit in the allocated width.
Add a comment...
Version 0.14.3 is available...

> Updated a number of Canvas drawing routines that were using an 'illegal' .clip() call with a parameter.
  These were throwing exceptions in FireFox version 21+
SteelSeries Gauges - Canvas's profile photoMichael Yeager's profile photo
I'm slowly figuring out how to get things working. It's harder to decode what someone else has done and figure out how to rework it but that's the way it is. Haven't found a site using GLOW yet...
Add a comment...
Version 0.14.0 is available.

In summary...

For gauges that support a 'threshold' (Radial, RadialBargraph, RadialVertical, Linear, LinearBargraph) the threshold now has a new initialisation parameter 'thresholdRising'. The default is true, set to false to change the threshold to activate when the gauge value falls below the threshold value. There is a corresponding method .setThresholdRising(bool) to set this dynamically.

Radial, RadialBargraph, RadialVertical, Linear, and LinearBargraph have a new method to set the threshold LED visibility .setLedVisible(bool)

Radial and RadialBargraph have new methods to set the user LED visibility:  .setUserLedVisible(bool)

Please see the readme on github for details.

Demo pages:

github link for the files:
SteelSeries Gauges - Canvas's profile photoDarren Mowbray's profile photo
I'm just leaving for a long week-end, not back until Tuesday, I'll see if I still have it then..
Add a comment...
Version 0.13.0 is available. Lots of changes this time!

In summary...

The gauges now no longer have default sizes, if you omit the size (or width/height depending on the gauge) when creating the gauge, it will take its size from the <canvas> tag on the page (or any CSS applied to that tag obviously) . This is very useful if you want to resize page on load for say mobile devices using CSS.

I have added an optional 'user' LED to Radial and RadialBargraph, this can be controlled with teh standard Led methods .setUserLedColor(), .toggleUserLed(), .setUserLedOnOff(), .blinkUserLed()

The WindDirection and Compass gauges can now optionally be used for -180 to +180 ranges as well as 0-359(360). Useful for apparent wind indication.

The Compass and Level now have the option of keeping the pointer fixed and rotating the 'card'.

DisplaySingle and DisplayMulti can now have an header added, multi can also now have the 'secondary' value unlinked from the main value and be independently set.

Some bug fixes, particular to tweening, which wasn't working right if you updated the gauges faster than the tween time.

Thanks to Rob Huitema for supplying the basis for these updates.

Please see the readme on github for details.

The demoRadial and demoExtras pages some some of the new features.

Demo pages:

github link for the files:
Yuval Peress's profile photoSteelSeries Gauges - Canvas's profile photo
Thanks, I'm working on building a small 3 wheel car running on a Raspberry pi platform and hoping to use HTML5/Javascript for the dashboard. These gauges are slick!
Add a comment...
Question: Should the elapsed time for a gauge movement be proportional to the percentage of full scale movement?

For example if the needle/bar takes 3 seconds to move from min to max, should it take 1.5 seconds to move from min to half scale etc.

I'm thinking that this would reduce the overall compute requirements a little for pages with lots of gauges.
SteelSeries Gauges - Canvas's profile photo
No interest? OK I will make the following changes:

Add an initialisation parameter 'fullScaleDeflectionTime', defaulting to 2.5 seconds

Make the deflection time proportional to the percentage of full scale deflection time  but with a minimum movement time of fullScaleDeflectionTime/5.
Add a comment...
Have them in circles
107 people
Vincent Planchenault's profile photo
Tim Daish's profile photo
浮生若梦's profile photo
Eduardo Felippone's profile photo
Version 0.14.5 is available...

> All gauges will now accept the canvas parameter as both an ID string as before, and now also as a canvas object.

This will make the gauges much easier to use with frameworks such as JQuery.
Michael Yeager's profile photo
Can you possibly help me figure out how to get a few of the gauge features to work?
Add a comment...
And version 0.14.2 includes the same scaling fix for horizontal linearbargraphs that got missed in 0.14.1 - and I've remembered to update the minimised version this time too ;-)
Add a comment...
Version 0.14.1 is available. It fixes some issues with scaling in RadialBargraph and LinearBargraph when minValue is non-zero.
Add a comment...
Playing around with ideas - White Gauges: sunken and raised variants
Add a comment...
Version 0.12.1 has been uploaded. Two changes for this release:

> Radial, radialBargraph, RadialVertical, linear, linearBargraph, windDirection
  * Added initialisation parameter 'fullScaleDeflectionTime' default 2.5 seconds
  * Change deflection time to be a proportion of fullScaleDeflectionTime, with a minimum value of fullScaleDeflectionTime/5
> WindDirection
  * Fixed cut'n'paste error in setValueAnimatedAverage which affected value=360

Demo pages:

github link for the files:
Add a comment...
HTML5 Canvas based gauges
The JavaScript port of Gerrit Grunwald's SteelSeries library. Take a look at Gerrit's Blog - Harmonic Code to keep up to date with everything SteelSeries.

Use the github link below to find the latest version of the JavaScript port.