HTML5 provides an advanced Web user experience with modern device sensors

Today, we published the prototype implementation of the Deviceorientation event specification draft on Http://www.aliyun.com/zixun/aggregation/79228.html > Html5labs.com. This specification defines a new DOM event that provides the physical orientation and movement-related information of the device. Such APIs will allow web developers to easily provide an advanced Web user experience with sensors from modern devices.

Developer Benefits

With the device direction API, developers can explore new input mechanisms for the game, new gestures for applications (such as "shaking to clear the screen" or "tilt to zoom") or even magnifying the actual experience. The prototype installation includes a sample game to help you get started with the API.

This video describes the concept in dynamic form for the introduction of this 250.html > post.

How to Work

The device direction API exposes two different types of sensor data: direction and motion.

When the physical direction of the device changes (for example, the user tilts or rotates the device), the Deviceorientation event is triggered in the window, and the alpha, beta, and gamma angles of rotation are provided (in degrees):

<div id= "Directions" ></div>

<script>

Window.addeventlistener ("Deviceorientation", Findnorth);

function Findnorth (evt) {

var directions = document.getElementById ("directions");

if (Evt.alpha < 5 | | Evt.alpha > 355) {

directions.innerhtml = "north!";

else if (Evt.alpha < 180) {

directions.innerhtml = "Turn left";

else {

directions.innerhtml = "Turn right";

}

}

</script>