Thursday, June 30, 2011

HTML5 Canvas update...

This is just a really short post to let you know about the modifications i made to the javascript version of the steelseries library.
Thanx to Mark Crossley who pushed me to add more features from the java version of the lib the current version of the javascript lib contains the following gauges.

Radials and RadialBargraphs...

Linears and LinearBargraphs...

DisplaySingle and DisplayMulti...

The Level component...

The compass component...

The horizon component...

And last but not least the LED component...

The following features from the java version are available for the gauges too:

  • FrameDesign
  • BackgroundColor
  • PointerColor / ValueColor
  • PointerType
  • ForegroundType
  • KnobStyle
  • KnobType
  • Areas
  • Sections
  • LedColor
  • LcdColor
  • DigitalFont
And there's more to come...just stay tuned... :-)

You could find the latest version version of the lib always on the upper right part of the sidebar in this blog. At the same position you will find a link to the demo page that i'll update from time to time. Here's a current screenshot, click on the link below the image to start the demo.

Click to see it in action...
Due to some improvements this demo will also work on a mobile like a HTC Desire or iPhone (even if it is a bit slow)...

So keep coding...


  1. Gerrit,

    Your Javascript library looks really nice. I was wondering is it released under any license?

  2. Hi there,
    The lib is available under bsd license, so feel free to use it wherever you like...
    Cheers, Gerrit

  3. Hi Gerrit,

    Via an other meteo website I stumbled on your library. Great, great work. I used it already on my own meteo site.

    Keep up the good work.

    Regards Marco

  4. Hi Gerrit,

    The library looks great. I have noticed that the RadialBargraphs don't look nearly as good in a mobile browser (iphone and android) - the bars look jagged. Any ideas why that might be?



  5. Hi Gerrit,

    Very wonderful work. I use it for my own app mobile (Android) create with JQUERY Mobile to display meteo informations from Oregon sensors, electrical and water consumption, etc
    There is one thing I don't really understood, it's the purpose of sections and areas !!
    Else using Firefox for mobile, the display of all the gauges are degraded (they are not smooth) whereas it is not the case with the Firefox desktop version ! any idea ?

    Thanks again for this good work


  6. Hi Trevor and David,
    It seems that the mobile browsers do have problems with antialiasing. I have also seen these artifacts you mentioned but have no idea why this happens. I will keep an eye on this and do whatever i can to make it better.
    Thanx for the comments and cheers,

  7. Hi Gerrit

    I downloaded the last version of Firefox for mobile and everything seems to be correct now. No more problem with antialiasing.
    As an evolution, I was thinking about a gauge as the multi one but it is the user that give the 2 values and the 2 units. To display speed in km/h and knots, temperature in °C and °F for example


  8. Wow your widgets look really grea! Nice to see that other people are still building Swing apps as well.

    For the HTML5 Version, any hints on how to create an Android app reading from a Bluetooth/Serial connection and displaying data with your lib?
    Is it possible to embedd an HTML5 Widget in a native Android app?

  9. Hi Gerrit,

    This is an incredible library, thank you so much for building it. Have you considered hosting this with GitHub or another public repository so others can contribute as well?


    1. Hi Steve,
      It is on GitHub and you should be able to find it if you search for "SteelSeries-Canvas" or simply check my repos (HanSolo).

  10. This library looks fantastic. Is there anyway of getting the gauges to work on IE 8?
    I have been trying with excanvas.js but no luck.

    1. Hi Mikael,
      To be honest I have no idea but I guess it won't be easy to due to the lack of canvas support.

  11. HI Gerrit,

    I only write to say thanks for your great job and to inform you that I am using your widget for my project

    Thanks again
    Nacho Mas ( mas.ignacio at

  12. Nice library, just a question ¿how can I manage de trend values?

    1. Hi Javier,
      Sorry for the late reply, you can set the trend by calling the setTrend() method with the appropriate trendIndicator as parameter. The available trendIndicators could be found in the uncompressed js file. Keep in mind that you have to take care about the trend logic by yourself because the gauge is only for visualizing it.
      I hope that answered your question...

  13. Gerrit,
    These gauges are beautiful! Thanks for all the hard work.