Cover photo
141 followers|175,290 views


Version 0.14.12 has been released.

Fixes a bug in displayMulti.setAltValue()
Add a comment...
Version 0.14.11 has been released.

Fixes to the appearance of the linear gauge backgrounds (0.14.10 was a partial fix)
Add a comment...
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.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:
Darren Mowbray's profile photoSteelSeries Gauges - Canvas's profile photoMark Crossley'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:
SteelSeries Gauges - Canvas's profile photoYuval Peress's profile photoMark Crossley'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...
Have them in circles
141 people
Robert Chalmers's profile photo
Mark Crossley's profile photo
Lluís Algueró's profile photo
Rémi Duchet's profile photo
Stephan Valkær's profile photo's profile photo
anoosha dixit's profile photo
John Nellestein's profile photo
Jason Brickner's profile photo
v0.14.9 has been released, one minor fix..
> RadialBargraph & LinearBargraph
  * Fixed gradient drawing when gauge min value <> 0
Add a comment...
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.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...
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.