HTML5: Sensors for those who are not used to waiting

The mobile computer market has begun to change rapidly, in addition to standard components, ultrabooks, after tablets and smartphones, are equipped with sensors and touch screens. Sensors open up new perspectives for developers, allowing them to create new models for using their software products. Look at the market of mobile applications, there you will not be surprised at the opportunity to play games using an accelerometer, gyroscope, compass as a game controller.

Adding sensor support to desktop applications is now straightforward; all the necessary APIs are already available. For desktop applications in Windows 7 and Windows 8, there is a Sensor and Location Platform, allowing you to obtain information about supported sensors and read their data. In Windows UI applications, you can use the API to work with sensors in Windows RT for this.

What about web applications? Here, too, progress does not stand still, the W3C consortium is developing a Sensor API for the web. Moreover, the functions for working with sensors are already partially implemented in some versions of mobile browsers, for example, handling the Device Orientation event .

For a couple of weeks, I became interested in using sensors in web applications, and found that not one of the Windows browsers supports them. One could relax and wait for support to appear, but as they say, this is not our method. At one time, in order to satisfy my curiosity, I studied the possibility of creating extensions for Google Chrome that include NPAPI plugins, which are essentially DLL libraries, and you can implement almost any interaction with the platform in them. I decided to put this experience into practice and the result was the Sensors for Chrome extension .

How it works

As I said before, the extension is based on an NPAPI plugin that works with sensors through the Sensor and Location Platform API. When loading the plugin, it lists all available sensors, looks for an inclinometer or 3D compass. If a sensor is found, the plug-in registers the interface and starts receiving notifications from the platform containing information about new sensor readings. Having received this data, he redirects them to the background page of the extension, which, in turn, sends them to the page on the active browser tab.

To receive data, the page registers a listener and receives data as it arrives. The piece of code that receives the data on the page looks like this:

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

In the event.data object, x, y, z values ​​will be available that can be interpreted depending on the tasks of the application.

In addition to the extension, I also created a test simple Maze application and slightly modified the sample code from mr doob - Ball Pool .



Both applications are implemented using Box2D, in both, changing the position of the device affects gravity. An example of an inclinometer data receipt handler:

window.addEventListener("message", function(event) 
{
	if(event.data.type && (event.data.type == "INCLINOMETER_DATA")) 
	{
		gravity.x = Math.sin((event.data.y) * Math.PI / 180) ;
		gravity.y = Math.sin((Math.PI / 4) + event.data.x * Math.PI / 180);		
	}
}, false); 

If you don’t have “hardware” with sensors at hand, but you already want to try it, you can use the “virtual” sensors described in this article .

In general, if you can’t wait to play with sensors and you are an HTML5 developer, here’s your turnkey solution. Use, experiment, who knows, maybe during the game you will come up with unique ideas and new models of using your applications will open.