Monday, January 17, 2011

Canvas Steel...

And another one...

You know i'm not a JavaScript developer but as a user of mobile devices like Android or iOS based phones i did not like the fact that i could not use my SteelSeries library to visualize data on those kind of devices.
My first idea was to create an Android version of the library but in this case no iOS user would be able to use the library...bad idea...

Then after one of our JUG roundups i decided to take a look at HTML5 and in specific at the Canvas 2d api...what should i say...it's not so different from Java Swing as i first thought.

During a business trip to Paris at the end of last year i started to convert the swing drawing code to canvas drawing code and i was surprised that it tooks me around 6 hours only to convert the basic graphics of a radial gauge from swing to canvas.

Because i have to play with this things only in my spare time it tooks me some very early mornings and late nights to further improve the canvas version of the radial gauge and at the end of last week i decided it's time to show you the result of my work.

See this page in action...

I tried to implement all the features from the Java Swing version but right now it's still missing some parts (like min- and max measured value, lcd unit string etc.)

Because there's no conical gradient paint (that i used for the black-metal frame) in canvas i had to create the frame with a different technique, where i rotate a line which is changing it's color dependend on the rotation angle. The component is scalable and uses the same approach as the latest version of the steelseries (3.5.3) to visualize the four supported types of gauges.

Here is a list of the properties of the radial.js class:

String gaugeType : "type1", "type2", "type3", "type4"
Float minValue : 
Float maxValue :
Float threshold : 
Section section[] : Array of Sections (e.g.  new Section(30, 50, 'rgba(0, 220, 0, 0.3)'))
Section area[] : Array of Sections(e.g. new Section(75, 100, 'rgba(220, 0, 0, 0.3)'))
String title :
String unit :
String frameDesign : "metal", "brass", "steel", "blackMetal", "shinyMetal"
BackgroundColor backgroundColor : DARK_GRAY, SATIN_GRAY, LIGHT_GRAY, WHITE, BLACK, BEIGE
String pointerType : "type1", "type2"
Color pointerColor : RED, GREEN, BLUE, YELLOW, ORANGE, CYAN, MAGENTA
LcdColor lcdColor : BEIGE, BLUE, ORANGE, RED, YELLOW, WHITE, GRAY, BLACK, GREEN, BLUE_BLACK, BLUE_DARKBLUE, BLUE_GRAY, STANDARD, BLUE_BLUE
Boolean lcdVisible : true, false
LedColor ledColor : RED_LED, GREEN_LED, BLUE_LED, ORANGE_LED, YELLOW_LED, CYAN_LED, MAGENTA_LED
Boolean ledVisible : true, false

To realize a radial gauge you need two files, the radial.js for the gauge itself and the tools.js, where helper objects are defined like:

Section, BackgroundColor, Color, LcdColor and LedColor

To create a radial gauge you have to call it's constructor in your html file which looks like this:

var radial = new Radial('canvas', gaugeType, minValue, maxValue, threshold, section, area, title, unit, frameDesign, backgroundColor, pointerType, pointerColor, lcdColor, lcdVisible, ledColor, ledVisible);  

The 'canvas' string is the name of the canvas element in your html file that should be used to draw the gauge into.
After you created the radial gauge with it's constructor you could draw it using it's paintComponent() method (ups...looks a bit like swing...).

radial.paintComponent();

Well, i mentioned that i'm not a JavaScript programmer which means that i'm sure there's a lot of potential to improve the code (right now it might look a little bit java like).

To get a better impression on how to use the radial.js component you just have to take a look to the sourcecode of the Radial.html file.

There's one other file needed to make things work and that the trident.js which is a javascript version of the trident animation library from Kirill Grouchnikov.

Please find all the needed files here:

    radial.js
    tools.js
    trident.js


I will also port other gauges from the steelseries library to html5 canvas but it will take some time to realize it, so stay tuned, i'll anounce any news on twitter...

Update:
Now there's also a radialbargraph available as you can see here...

See this page in action...

I hope you enjoy the possibilities of the canvas as much as i do...

Keep coding...


6 comments:

  1. Very nice. I hope to have real reason to use your gauge libraries some day. Be it in Java, HTML5, or both. This HTML5 port is truly impressive. Keep up the great work.

    ReplyDelete
  2. As always an annoying work done!
    Congrats...

    ReplyDelete
  3. Looks great, but the download links for the scripts are no longer working?

    ReplyDelete
  4. Hi Anonymous,
    Oh...you are right, but i combined all the components into the steelseries.js file which you could download from the sidebar of this page. If you check the latest blogpost of this blog ("brothers from other mothers") you will find another demo where you could take a look at the source of the page to get an idea of how to use the lib.
    Thx for the info, i'll try to fix the links today.
    Cheers,
    Gerrit

    ReplyDelete
  5. Those are looking great. Under what licence can I use (and redistribute) them? GPL?

    If licence permits I'd love to add them to the http://cometvisu.org/ ...

    ReplyDelete
  6. Hi Anaonymius,
    It's under BSD license so it should not be a problem. Feel free to use it...
    Cheers,
    Gerrit

    ReplyDelete