HTML5 shakeDeviceMotionEvent event

About devicemotion

html5 provides several new DOM events to obtain information about the physical direction and movement of the device, including: gyroscope, compass and accelerometer.

The first DOM event is **deviceorientation**, which provides the physical orientation information of the device, expressed as a series of rotation angles of the local coordinate system.

The second DOM event is **devicemotion**, which provides acceleration information of the device, expressed as cardi coordinates in the coordinate system defined on the device. It also provides the rate of rotation of the device in the coordinate system.

The third DOM event is **compassneedscalibration**, which is used to notify the web site to calibrate the above event using compass information.

Principle

Developers obtain unmodified sensing data from various built-in sensors and observe or respond to various movements and angle changes of the device. These sensors include gyroscopes, accelerometers, and magnetometers (compasses). The accelerometer and gyroscope data describe the position along the three directional axes of the iOS device. For an iPhone placed vertically, the X direction is from the left (negative) to the right (positive) of the device, and the Y direction is is from the bottom (-) to the top (+) of the device, while the Z direction is perpendicular to the screen from the back (-) to the front (+) of the device.

DeviceMotionEvent will be generated when the device has a meaningful swing (or movement). The event object encapsulates the generated pitch value, rotation rate, and device acceleration.

Acceleration is calculated by gravity and the two acceleration vectors generated by the user The device uses gyroscopes and accelerometers to distinguish between the two.

Judging the motion status of the device through DeviceMotion can help us achieve the "shake" interactive effect on the web page.

Event monitoring

if ((window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
  document.getElementById("dmEvent").innerHTML = "Not supported on your device."
}

Capture gravity acceleration

var acceleration = eventData.accelerationIncludingGravity;

Shake the demo

var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;       
function deviceMotionHandler(eventData) {        
  var acceleration =eventData.accelerationIncludingGravity;
  var curTime = new Date().getTime();       
  if ((curTime - last_update)> 300) {                
      var diffTime = curTime -last_update;
      last_update = curTime;       
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;       
      var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;          
           if (speed > SHAKE_THRESHOLD) {
                alert("shaked!");
      }
      last_x = x;
      last_y = y;
      last_z = z;
    }
}

Another chestnut~

function deviceMotionHandler(eventData) {
  // 捕捉重力加速度
  var acceleration = eventData.accelerationIncludingGravity;     
  // 打印加速数据
  var rawAcceleration = "[" +  Math.round(acceleration.x) + ", " +Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]";
// Z轴,可知设备朝上或者朝下
  var facingUp = -1;
  if (acceleration.z > 0) {
    facingUp = +1;
  }     
  // 根据重力通过 acceleration.x|y 转换得到加速值,
  // 运用重力加速度9.81来计算得到一个百分比然后乘以转换角度90
  var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
  var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);     
  // 打印加速度的计算结果
  document.getElementById("moAccel").innerHTML = rawAcceleration;
  document.getElementById("moCalcTiltLR").innerHTML = tiltLR;
  document.getElementById("moCalcTiltFB").innerHTML = tiltFB;     
  // 将2D和3D的转换应用到图片上
  var rotation = "rotate(" + tiltLR + "deg) (1,0,0, " + (tiltFB) + "deg)";
  document.getElementById("imgLogo").style.webkitTransform = rotation;
}