Friday Fun (Canvas) Component VI

Back from JFokus (which was great by the way) i have some more fun to share with you today. This time it's related to HTML5 canvas (what else ;-)).

Sitting in a talk at JFokus i've got the idea to convert the compass component of the SteelSeries Swing library to canvas to use it in conjunction with the HTML5 geolocation api (e.g. position.coordinates.heading). 

It tooks me several talks and coffee breaks to complete the conversion and here is the result...

Because it's part of the steelseries canvas version one could define things like frameDesign, backgroundColor and pointerColor.

Unfortunately the geolocation api did not work out as well which was the reason to convert another component from the SteelSeries Swing library.

I'm talking about the level component. I read that there is a deviceorientation api in the html5 spec (draft) which i might use also on my macbook pro so here is the result of the level component...

And again you could set the frameDesign, backgroundColor and pointerColor of the component in the constructor of the component.

Well looking at a static image is fine...but better is to see it in action. To get there, please click at the link below the following image...

Click to see it in action...

Well that's better right...? But only driven by some setInterval() calls to a method that creates random values. Would it not be nice to get a direct response of an inbuild sensor...YES !!!

So for all running on windows, linux, android....sorry guys, the following link will only show you a static components. But if you are running a device like a Macbook, Macbook Pro, iPad (iOS 4.2), iPhone4 (iOS 4.2) or iPhone 3Gs (iOS 4.2) you should see  the level component rotating if you rotate your device. I only had the chance to test it on my Macbook Pro and it works if you tilt the Macbook Pro to the left or right.

Just test it by clicking on the link below the following image...

Click to see it in action...

That's it for today and even if it's not Java related i hope it will be fun for one or the other...

Cheers and keep coding...


Update:
As i learned today, the device needs a gyroscope to fire onDeviceOrientation events which excludes iPads and iPhones 3Gs from the list. That means you could only see the level component on an Macbook, Macbook Pro and iPhone4. I extended the page by a compass and a speed gauge that will show the direction and the speed when you move with your device (e.g. in a car). In this case it will work also on Android devices with os version >= 2.2.