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

Devicemotion

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

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);

Метки: , , , , , ,
3 комментария на “Devicemotion javascript API – Как определить параметры движения утройства в браузере с помощью javascript
  1. drcreazy пишет:

    Дмитрий, что у вас за форматирование кода?

    { 
      x: 0 
      ,y: 0 
      ,z: 0 
    };
    

    Рекоммендую попробовать вот такой, комментится 1 строка двойным слешем

  2. Сергей пишет:

    Очеть познавательно, спасибо!

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by