Devicemotion javascript API — Как определить параметры движения утройства в браузере с помощью javascript

В мобильных (и не только) браузерах не так давно появилась возможность определить ускорение устройства в разных плоскостях. Для этого в устройствах имеются акселерометры. Эта функциональность может быть особенно полезна разработчикам браузерных игр, мобильных браузерных приложений и т.п. как и deviceorientation Начнем с демки, а потом посмотрим, как это работает (код демки в самом конце статьи) Давайте откроем эту страницу на устройстве с поддержкой devicemotion в браузере (телефоны, планшеты, некоторые ноутбуки) и посмотрим на показатели. Мы должны увидеть: Зеленым — x, y, z ускорения, которые испытывает устройство в данный момент (учитывая гравитацию) Красным — максимальное (положительное или отрицательное ускорение, учитывая гравитацию), которое устройство испытало за все время, начиная с открытия демки Синим — положение устройства, опираясь на то, в каком направлении действует сила тяжести.

Devicemotion

Давайте теперь разберемся, как работает devicemotion В соответствии со спецификацией мы можем добавить

devicemotion listener к объекту window и получить событие с полями e.acceleration, e.accelerationIncludingGravity, e.rotationRate , e.interval

Javascript

window.addEventListener("devicemotion", function(e) {
      // e.acceleration
      // e.accelerationIncludingGravity
      // e.rotationRate (Returns the rate at which the device is rotating around each of its axes in degrees per second)
      // e.interval(Returns the interval, in milliseconds, at which data is obtained from the underlaying hardware)
}, true);

Рассмотрим несколько примеров:

Устройство, которое лежит горизонтально на столе с экраном, повернутым к верху, имеет значения acceleration и accelerationIncludingGravity:

Javascript

 e.acceleration = 
  {x: 0,
   y: 0,
   z: 0};

  e.accelerationIncludingGravity = 
  {x: 0,
   y: 0,
   z: 9.81};

Устройство, которое падает со стола в горизонтальном положении (с экраном, повернутым к верху), имеет значения acceleration и accelerationIncludingGravity:

Javascript

  e.acceleration = 
  {x: 0,
   y: 0,
   z: -9.81};

  e.accelerationIncludingGravity = 
  {x: 0,
   y: 0,
   z: 0};

Пример посложнее. Устройство устанавливается в автомобиле с экраном в вертикальной плоскости в верхней задней части автомобиля. Автомобиль движется со скоростью V, входя в поворот с радиусом r. Устройство записывает положительный компонент х для acceleration и для accelerationIncludingGravity. Кроме того, устройство записывает отрицательное значение rotationRate.gamma:

Javascript

  {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} };
 Давайте взглянем на иллюстрацию для того, чтобы лучше понять, о чем идет речь: 

А теперь вернемся к коду демки в начале статьи

html

<div id="accelerationIncludingGravity">
    Откройте этот пример в браузере с поддержеой devicemotion (Android 3+, Iphone 4.2 +)
</div>

css

div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    color:green;
  }

  div strong{
     font-size: 1.2em;
     color:red;  
  }

  div span{
     color:blue;  
  }

javascript

   var nodeAG = document.getElementById('accelerationIncludingGravity');
   var maxAG = 0;
   function onMotionChange(e) {
     // покажем значения параметров в реальном времени
     var ag = e.accelerationIncludingGravity;
     nodeAG.innerHTML = '';
     for(var i in ag){
        nodeAG.innerHTML += i + ' = ' + ag[i].toFixed(2) + '</br>';
        if(Math.abs(maxAG) < Math.abs(ag[i])){
          maxAG = ag[i];
        }
     }
     nodeAG.innerHTML += '<strong>MAX = '+maxAG.toFixed(2)+'</strong></br>';
     if(ag.x > ag.y && ag.x > ag.z){ nodeAG.innerHTML += '<span>Горизонтально перед собой</span>';}
     if(ag.y > ag.x && ag.y > ag.z){ nodeAG.innerHTML += '<span>Вертикально перед собой</span>';}
     if(ag.z > ag.x && ag.z > ag.y){ nodeAG.innerHTML += '<span>На столе</span>';}
  }
  window.addEventListener('devicemotion', onMotionChange, true);

PDF и версия для печати