HTML5...the web strikes back...

Last week i was in Berlin at GameDuell, where i gave a little talk about HTML5 and some of it's features. Because HTML5 has so many nice features i had to focus on some of them. I have added links to the presentation and the demo at the end of this post. Because i do not have much time this post will be about a combination of three HTML5 features...

• Offline
• WebSocket
• Canvas

I created a little website that only contains one of the steelseries gauges and a textfield...so nothing special...but the trick here is that i add a HTML5 manifest file to the page so that it will be stored locally on the machine once you opened it. This means the page will also be available if there's no internet access.
That's really amazing because you could define which parts of your page should be available offline/cached (incl. scripts and css of course).
The manifest file of my demo page was really simple and looked like this...


    CACHE MANIFEST
    # rev 5
    /demo/canvas.html
    /demo/js/steelseries-min.js
    /demo/js/tween-min.js

Important to know is that the manifest file has to start with the words "CACHE MANIFEST" and if you would like to refresh the cache you have to modify the manifest file. Because it's versioned by it's bytes you could also add a simple comment (like i did "# rev 5") and change the comment which leads to a refresh of the cached parts of your page.


Ok, that's easy but why did i create this page...?


To explain this i need to explain the whole idea of the demo first. So i would like to be able to demonstrate a websocket connection and i would like to use the gauges of my steelseries library. So the library was meant to be used to visualize sensor data...so i only need a sensor right...? 
Why not use the sensors of my htc desire smartphone and use the gauge to visualize it...? 
To make this possible i need to put the computer with the browser (where the gauge is running) in the same network as the Android cellphone which is possible using an adhoc network. 


So these are the steps i need for the setup of the demo:

1. Create a AdHoc network on my Macbook Pro
2. Connect the HTC Desire to the AdHoc network
3. Start a node.js server on the Macbook Pro that listens on the UDP port where the data will come in and forward the data via websocket
4. Start a Kaazing Gateway that makes it possible to forward the websocket to specified addresses

After this setup is running i could start the software on the HTC Desire that sends the sensor data of the orientation sensor via udp to the IP address of the Macbook Pro and because they are in the same network, the node.js instance will receive the udp packages and forward them to a websocket that will be made available to localhost and another ip address by the Kaazing Gateway.
Now the real fun part of the demo was that i could add more computers to the AdHoc network of the Macbook Pro and visualize the sensor data of the cellphone on them too.
If you could follow so far you might now know why i had to cache the website with the gauge...yes...because in the moment i connect the other computers to the AdHoc network of the Macbook Pro they won't be able to load the page from the internet anymore...but from their cache they could... :-)
I created a little video to give you an idea of the functionality...





It's not the very best video but i was not sure how to give you an impression about the setup. So on the video you will see the following devices...

• Macbook Pro (running node.js, Kaazing Gateway and Chrome)
• iPad2 (running the demo on Safari mobile)
• Win7 Netbook (running the demo on Chrome)
• G5 Powermac (running the demo on Safari)

All devices running the same canvas.html website that was cached on the devices before i connected them to the AdHoc network of the Macbook Pro.


If you ask yourself how you could connect node.js to udp and forward the websocket via Kaazing Gateway i would strongly recommend to take a look at the blog of Matthias Wessendorfs blog (twitter: @mwessendorf), where he described how get this up and running.


The presentation was splitted into two parts, a pdf and a html5 page. Please find the links to the documents here...


    PDF presentation


    HTML5 presentation


Please keep that the WebSocket part of the html5 presentation won't work without the setup i described above. For the DeviceOrienation part i recommend a Macbook (Pro) in combination with Chrome to see something in motion.
In addition i have to mention that the webworker part will work best in Firefox5, in Chrome it seems to have problems (don't ask me why).


That's it so far for today...

Friday Fun Component IX

Time for some progress...
I know it's a long time ago since i wrote the last blogpost but i really was busy the last weeks. Also today i do not have much time to create this little blogpost but you know it's friday and so it's time for some fun again...yay
I remembered a little app that i wrote nearly 3 years ago where i implemented some kind of an animated progress bar and so i decided to extract this component from the app and share it with you.
It's not derived from JProgressBar but from JComponent and is really only a bar that could be used as a progressbar. Here's a little screenshot and webstart demo to give you an impression about the component...

Click here to see it live...

It's really not a big deal but it was fun to create it and so it's worth to share it with you. You could adjust parameters like...

• the colors of the bar
• the color of the value/percentage text
• the color of the fading infinite text
• if it has rounded corners and the corner radius
• the value and a max value

Like i said the component is a little bit older and might not be optimized but as always you will get the source and you might want to optimize it (if you have the time)...


So here we go:


    AnimatedProgress.jar        (the component as binary)
   
    AnimatedProgress.zip        (the source as a Netbeans project)


As you can see i'm a little bit in a hurry so enjoy the upcoming weekend and keep coding...