The devicemotionevent of HTML5 gravity induction events

Objective

Today mainly introduces the HTML5 gravity induction event devicemotionevent, before my article Http://www.haorooms.com/post/jquery_jGestures, introduced the third party encapsulates the event, inside " Orientationchange "Can get a change in the direction of the device. Today, the main introduction of the HTML5 events, however, this event is a new event, about the document please see: http://w3c.github.io/deviceorientation/spec-source-orientation.html Event Description1, Deviceorientation provides the physical direction information of the equipment, expressed as a series of local coordinate system rotation angle. 2. Devicemotion provides the acceleration information of the equipment, expressed as the Kaldi coordinate in the coordinate system defined on the device. It also provides the rotation rate of the device in the coordinate system. If feasible, the event should provide acceleration information at the center of gravity of the device. 3, Compassneedscalibration used to inform the Web site using Compass information to calibrate the above events. Introduction to Usage register a receiver for a deviceorientation event:     Window.addeventlistener ("Deviceorientation", function (event) {     //handling Event.alpha, Event.beta and Event.gamma  }, True); Place the device on a horizontal surface, and the top of the screen points to the west, and the orientation information is as follows:     {alpha:90,    beta:0,    gamma:0}; To get a compass point, you can simply use 360 degrees minus alpha. If set parallel to the horizontal surface, the compass is pointed to (360-alpha). If the user is holding the device, the screen is in a vertical plane and the top of the screen points to the top. Beta values are 90,alpha and gamma-independent. User handheld device, facing the alpha angle, the screen is on a vertical screen, the top of the screen points to the right, the direction of the information is as follows:     {alpha:270-alpha,    beta:0,    gamm A:90}; Only use a custom interface to notify the user to calibrate the compass:    window.addeventlistener ("Compassneedscalibration", function (event) {      Alert (' Your compass needs to be calibrated, please move the device along the digital 8 direction. ');       Event.preventdefault ();  }, True); Register for a devicemotion time receiver:    window.addeventlistener ("Devicemotion", function (event) {     // Process Event.acceleration, event.accelerationincludinggravity,      //Event.rotationrate and Event.interval  }, True); Place the device on a horizontal surface with the screen up and acceleration to zero, then its aCcelerationincludinggravity information is as follows:     {x:0,    y:0,    z:9.81}; Equipment to do free fall, screen level up, accelerationincludinggravity zero, then its acceleration information is as follows:     {x:0,    y:0,     Z:-9.81}; Place the equipment in the vehicle first, the screen in a vertical plane, the top upward, facing the rear of the vehicle. The vehicle travels at a speed of V and turns to the right with a radius of R. The device records acceleration and accelerationincludinggravity at location X, and the device also records negative values for Rotationrate.gamma:     {acceleration: {x:v^2/r, y:0, z:0},    accelerationincludinggravity: {x:v^2/r, y:0, z:9.81},    rotationrate: { alpha:0, beta:0, gamma:-v/r*180/pi}; Application case   if (window. devicemotionevent) {                   window.addeventlistener (' Devicemotion ', Devicemotionhandler, false);          }          var speed = 30;//speed         var x = y = z = lastx = lasty = Lastz = 0;         function Devicemotionhandler (eventdata) {      &NBSP     var acceleration =eventdata.accelerationincludinggravity;                 x = acceleration.x;                 y = acceleration.y;                 z = acceleration.z;                 if (Math.Abs (X-LASTX) > Speed Math.Abs (y-lasty) > Speed Math. ABS (Z-LASTZ) > Speed) {                   //Simple Shake trigger code   &NBSP ;                 alert (1);                                 LASTX = X                 lasty = y;                 LASTZ = Z;        }