Adding Ultrabook Sensor Control To HTML5 Apps

Ultrabooks running Windows 8 with touch and sensor capabilities are soon to hit the market and for those of you developing HTML5 applications, you will be able to add these features to your applications.  Currently we are waiting for these sensor features to be added to the HTML5 standard, but in the meantime you can start to build and test your HTML5 apps for touch and sensor capabilities with a Google extension.  Intel’s Dmitry Rizshkov has created a  Google plug-in that will pass C++ access to sensor to javascript.  This will allow you to start building and testing apps now.  Current it supports the inclinometer, which will let you know what degree/angle the device is being held.  He is soon to add more sensors. 

(Note if you code in javascript/html5 and need to get a Windows 8 sensor app in market look at this post. http://software.intel.com/en-us/blogs/2012/09/28/html5-to-winrt-with-sensor-input)

Video
See the examples code below in this video

Try it yourself:

Install this HTML in Google Chrome Extension:  https://chrome.google.com/webstore/detail/bnoopapopgglfeecfncmjbdcjafpkoai For this to work you must use Google Chrome and your HTML must be hosted, it will not work locally.

With the extension added, you can expose the sensor data to Javascript by simply adding this Event Listener function to your code.  This event listener will set variables to the x, y, & z angle based on how the device is positioned in space.

window.addEventListener("message", function(event) 
{
    if (event.data.type && (event.data.type == "INCLINOMETER_DATA")) 
    {
      event.data.x;
      event.data.y;
      event.data.z;
    }
}, false);

Sample HTML5 code (this is 100% javascript, everything is rendered in Canvas):

Inclinometer sensor – ship moves around screen based in tilt of device: http://dl.dropbox.com/u/6833005/rotateship-sensor2.htm

In my example I simply created a new global variables called xAngle and yAngle and assigned the event.data.y and event.data.x accordingly. (Note the screen is perpendicular to the keyboard so I swapped the X and Y. I also multiplied by a variable called angleRate.  This allows me to adjust the speed of the of the movement as needed. 

window.addEventListener("message", function(event) 
{
    if (event.data.type && (event.data.type == "INCLINOMETER_DATA")) 
    {
        event.data.x; 
        event.data.y;
        event.data.z;
        xAngle=event.data.y*angleRate;  
        yAngle=event.data.x*angleRate;
    }
}, false);

Then in my main function, that repeats and animate the ship around the screen, I simple add the xAngle and yAngle to the shipX and shipY variables used to set the position of my ship and canvas  (see actual code as there's a bit more going on but this give you the basics).

   shipx+=xAngle; 
   shipy+=yAngle; 
   context.translate(shipx,shipy);
   drawship();

Adding Touch: http://dl.dropbox.com/u/6833005/altmegarace/code-tutorial/Canvas-click-rotate.htm

In this example I add touch.  Its very simple to add touch, you can do it all sorts of ways. I just add an event listener to get the mouse coordinates, thus every time the screen is tapped I get a new coordinate to trigger the turn and fire of my ship.  (A lot more going on to calculate turn the ship to the proper angle at the XY, but I'll let you explore the code to figure out what I did there)

window.onload = function() {
   var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');
   canvas.addEventListener('mousemove', function(evt) {
      var mousePos = getMousePos(canvas, evt);
      shotX=mousePos.x;
      shotY=mousePos.y;
      shot=true;
   }, false);
};

So adding sensor and touch features to HTML5 is very simple and it works really well.  Note, the sensor is in the base (keyboard), so depending on the tilt of the screen the experience might be different.  Because of this I switched the x and y values, so the app experience is best when the screen is perpendicular to the keyboard.   Also check out how this same code works for a WinRT version here: http://software.intel.com/en-us/blogs/2012/09/28/html5-to-winrt-with-sensor-input

There’s additional explanation in the code.