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

    All_Files.zip

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...