Обнаружение ориентации устройства

Все более широкое распространение получили устройства с возможностью определения своей ориентации; то есть они могут сообщать данные, указывающие на изменения их ориентации относительно силы тяжести. В частности, портативные устройства, такие как мобильные телефоны, могут использовать эту информацию для автоматического поворота экрана, чтобы оставаться в вертикальном положении, предоставляя широкоэкранный вид веб-контента при повороте устройства так, что его ширина больше высоты.

Существуют два события JavaScript, обрабатывающие информацию об ориентации. Первое — DeviceOrientationEvent, которое отправляется, когда акселерометр обнаруживает изменение ориентации устройства. Получая и обрабатывая данные, сообщаемые этими событиями ориентации, можно интерактивно реагировать на изменения поворота и наклона, вызванные перемещением устройства пользователем.

Второе событие — DeviceMotionEvent, которое отправляется при добавлении изменения ускорения. Оно отличается от DeviceOrientationEvent тем, что следит за изменениями ускорения, а не ориентации. К сенсорам, которые обычно способны определять DeviceMotionEvent, относятся сенсоры ноутбуков для защиты движущихся накопителей. DeviceOrientationEvent чаще встречается в мобильных устройствах.

Для начала получения изменений ориентации необходимо прослушать событие deviceorientation:

window.addEventListener("deviceorientation", handleOrientation, true);

После регистрации обработчика события (в данном случае, JavaScript-функции с названием handleOrientation()) функция обработчика периодически вызывается с обновленными данными ориентации.

Событие ориентации содержит четыре значения:

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

Функция обработчика события может выглядеть примерно так:

function handleOrientation(event) {
  const absolute = event.absolute;
  const alpha = event.alpha;
  const beta = event.beta;
  const gamma = event.gamma;

  // Do stuff with the new orientation data
}

Значение, отчётливое для каждой оси, указывает величину вращения вокруг данной оси по отношению к стандартной системе координат. Более подробное описание приведено в статье Объяснение данных ориентации и движения, которая суммирована ниже.

• Значение DeviceOrientationEvent.alpha представляет движение устройства вокруг оси z, выраженное в градусах со значениями от 0 (включительно) до 360 (исключительно).
• Значение DeviceOrientationEvent.beta представляет движение устройства вокруг оси x, выраженное в градусах со значениями от -180 (включительно) до 180 (исключительно). Это представляет переднее-заднее движение устройства.
• Значение DeviceOrientationEvent.gamma представляет движение устройства вокруг оси y, выраженное в градусах со значениями от -90 (включительно) до 90 (исключительно). Это представляет лево-правовое движение устройства.

Этот пример будет работать в любом браузере, поддерживающем событие deviceorientation, и на устройстве, способном определить свою ориентацию.

Представьте себе мяч в саду:

<div class="garden">
  <div class="ball"></div>
</div>
Hold the device parallel to the ground. Rotate along its x and y axes to see the
ball move up/down and left/right respectively.
<pre class="output"></pre>

Этот сад имеет ширину 200 пикселей (да, он крошечный), и мяч находится в центре:

.garden {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid #ccc;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

Теперь, если мы перемещаем устройство, мяч будет перемещаться соответственно:

const ball = document.querySelector(".ball");
const garden = document.querySelector(".garden");
const output = document.querySelector(".output");

const maxX = garden.clientWidth - ball.clientWidth;
const maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  let x = event.beta; // In degree in the range [-180,180)
  let y = event.gamma; // In degree in the range [-90,90)

  output.textContent = `beta: ${x}\n`;
  output.textContent += `gamma: ${y}\n`;

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
  if (x > 90) {
    x = 90;
  }
  if (x < -90) {
    x = -90;
  }

  // To make computation easier we shift the range of
  // x and y to [0,180]
  x += 90;
  y += 90;

  // 10 is half the size of the ball
  // It centers the positioning point to the center of the ball
  ball.style.left = `${(maxY * y) / 180 - 10}px`; // rotating device around the y axis moves the ball horizontally
  ball.style.top = `${(maxX * x) / 180 - 10}px`; // rotating device around the x axis moves the ball vertically
}

window.addEventListener("deviceorientation", handleOrientation);

Нажмите здесь, чтобы открыть этот пример в новом окне; так как deviceorientation не работает в кросс-доменном <iframe> во всех браузерах.

События движения обрабатываются так же, как и события ориентации, за исключением того, что у них есть собственное имя события: devicemotion

window.addEventListener("devicemotion", handleMotion, true);

На самом деле, изменилась информация, предоставленная в объекте DeviceMotionEvent, переданном как параметр обработчика события (handleMotion() в нашем примере).

Событие движения содержит четыре свойства:

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

Объекты DeviceMotionEvent предоставляют разработчикам веб-приложений информацию о скорости изменения положения и ориентации устройства. Изменения предоставляются вдоль трех осей (подробнее см. статью Объяснение данных ориентации и движения).

Для acceleration и accelerationIncludingGravity, эти оси соответствуют следующему:

x

Представляет ось с запада на восток

y

Представляет ось с юга на север

z

Представляет ось, перпендикулярную земле

Для rotationRate, ситуация немного иная; информация в каждом случае соответствует следующему:

alpha

Представляет скорость вращения вдоль оси, перпендикулярной экрану (или клавиатуре для настольных компьютеров).

beta

Представляет скорость вращения вдоль оси, идущей слева направо по плоскости экрана (или клавиатуры для настольных компьютеров).

gamma

Представляет скорость вращения вдоль оси, идущей снизу вверх по плоскости экрана (или клавиатуры для настольных компьютеров).

Наконец, interval представляет интервал времени в миллисекундах, в течение которого данные получаются от устройства.

• DeviceOrientationEvent
• DeviceMotionEvent
• Описание ориентации и данных о движении
• Использование deviceorientation в 3D-преобразованиях
• Игра Cyber Orb: лабиринт в 2D с ориентацией устройства