Pages

▼

Thursday, July 28, 2011

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

3 comments:

  1. AnonymousNovember 1, 2011 at 3:26 PM

    This is very cool! Could you post the node.js code etc.. for this. It is exactly what I am looking for!!

    Thank you,
    Mike

    ReplyDelete
  2. Han SoloNovember 8, 2011 at 9:47 PM

    Hi Anonymous,
    not sure if this will really help you but here is the node.js code that i used for the demo:

    // Outgoing socket
    var Buffer = require("buffer").Buffer;
    var dgramOut = require("dgram");
    var socketOut = dgramOut.createSocket("udp4");

    // Incoming socket
    var dgramIn = require("dgram");
    var server = dgramIn.createSocket("udp4");

    server.on("message", function(msg, rinfo) {
    //console.log("got: " + msg + " from " + rinfo.address + ":" + rinfo.port);
    var data = (msg.toString().substring(msg.toString().lastIndexOf(' '))).replace(',','.');
    broadcastMsg(data);
    });

    server.on("listening", function() {
    console.log("server listening " + server.address().address + ":" + server.address().port);
    });

    function broadcastMsg(msg) {
    var buf = new Buffer(msg);
    // Send data to localhost:55555 where Kaazing is waiting
    socketOut.send(buf, 0, buf.length, 55555, "127.0.0.1");
    socketOut.send(buf, 0, buf.length, 55555, "169.254.70.83");
    socketOut.send(buf, 0, buf.length, 54321, "127.0.0.1");
    //console.log('Sent ' + buf + ' to the browser...');
    }

    // Listen to IP of DataSource:169.254.70.83 on port:12345 for incoming udp packages
    server.bind(12345, '169.254.70.83');

    ReplyDelete
  3. AnonymousNovember 11, 2011 at 3:34 PM

    thank you!

    ReplyDelete