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...
Eingestellt von Han Solo um 11:42 PM
Labels: , ,

16 comments:

  1. AnonymousJuly 6, 2011 at 4:07 AM

    Gerrit,

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

    ReplyDelete
  2. Han SoloJuly 6, 2011 at 10:07 AM

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

    ReplyDelete
  3. MarcoAugust 27, 2011 at 4:46 PM

    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

    ReplyDelete
  4. TrevorSeptember 16, 2011 at 2:52 PM

    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?

    Thanks,

    Trevor

    ReplyDelete
  5. QuikdavSeptember 21, 2011 at 1:56 PM

    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

    David

    ReplyDelete
  6. Han SoloSeptember 22, 2011 at 11:45 AM

    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,
    Gerrit

    ReplyDelete
  7. QuikdavSeptember 26, 2011 at 10:28 PM

    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

    Thanks

    ReplyDelete
  8. johannesDecember 2, 2011 at 3:56 PM

    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?

    ReplyDelete
  9. AnonymousDecember 6, 2011 at 3:32 AM

    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?

    Cheers,
    Steve

    ReplyDelete
    Replies
    1. Han SoloDecember 30, 2012 at 4:03 PM

      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).
      Cheers,
      Gerrit

      Delete
  10. UnknownDecember 30, 2012 at 1:38 PM

    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.

    ReplyDelete
    Replies
    1. Han SoloDecember 30, 2012 at 4:01 PM

      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.
      Cheers,
      Gerrit

      Delete
  11. n+February 3, 2013 at 12:03 PM

    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 http://indiduino.wordpress.com/2013/02/03/meteostation-web-interface/

    Thanks again
    Nacho Mas ( mas.ignacio at gmail.com)

    ReplyDelete
  12. JavierFebruary 22, 2013 at 9:31 AM

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

    ReplyDelete
    Replies
    1. Han SoloMarch 3, 2013 at 9:10 AM

      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...
      Cheers,
      Gerrit

      Delete
  13. RayApril 4, 2018 at 5:06 AM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)