А как насчет ориентации? Device Orientation API
Естественно, речь идет не про сексуальную и даже не про социальную ориентацию, а про самую обычную — в пространстве. И не не вашей, а мобильного устройства. Преимущества, которые дает возможность учитывать физическую ориентацию, в разъяснениях не нуждаются, тем более все производители мобильных устройств сегодня снабжают их гироскопическими модулями, и традиционное программное обеспечение их информацию использует постоянно. Так чем хуже www? Да ничем! Посему знакомимся с Device Orientation API.
Ключевым элементом здесь является событие DeviceOrientation-Event. Применяется оно к объекту window, и делается это следующим образом:
<html>
<head>
<title>Mobile Page</title>
<script>
If (window. DeviceOrientationEvent) {
Console. log("DeviceOrientation is supported");
Window. addEventListener(‘deviceorientation’, function(e){
Console. log("a = "+e. alpha); console. log("P = "+e. beta); console. log("Y = "+e. gamma);
}, false);
} else {
Console. log("Orientation is not supported")
}
</script>
</head>
<body>
1>Просто страница<Д1>
</body>
</html>
Чтобы понять, что представляют собой свойства события deviceorientation alfa, betta и gamma, нужно разобраться с принятой для мобильного устройства системой координат. Тут сюрпризов нет — все по Декарту. Прежде всего расположение устройства определяется прямоугольными координатами по трем пространственным измерениям — х, у, и z. Начальное положение устройства и направление осей координат показаны на рис. 128 (здесь и далее используются рисунки из спецификации W3C). Заметим, что нормальным, нулевым считается положение устройства, покоящегося на горизонтальной поверхности, нижней панелью обращенной к наблюдателю. Поворот устройства параллельно поверхности, вокруг вертикальной
z
Рис. 128. Декартовы координаты для смартфона
Оси (рис. 129), и будет параметром e. alpha, представляющим собой значение угла поворота против часовой стрелки в градусах с диапазоном от 0 до 360. Параметры e. beta и e. gamma — это значения угла поворота вокруг осей x и y соответственно (рис. 130 и 131). Диапазон для betta будет равен от -180 до 180°, а для gamma — от -90 до 90°.
Рис. 129. Угол поворота alpha
Рис. 130. Угол поворота beta
Рис. 131. Угол поворота gamma
Событие содержит еще одно булево поле, e. absolute, принимающее значение false в случае невозможности получить абсолютные пространственные ориентиры (в этом случае углы отсчитываются от неких условных осей).
Пример: если пользователь держит устройство в руках, с экраном в вертикальной плоскости и верхней панелью, направленной вверх, — значение e. beta будет 90°.
Допустим, у нас есть некий <div>, содержащий осмысленный текстовый контент, настолько важный, что мы должны быть уверены в доступности его для пользователя, как бы он не вертел свой планшет (смартфон). Пишем следующий код:
<html>
<head>
<title>Mobile Page</title>
<script>
Var block = document. getElementById(»importantText»); window. addEventListener(‘deviceorientation’, function(event) { var dir = event. alpha;
Block. style. transform = "rotate(" + dir + "deg) ";
}, false);
</script>
</head>
<body>
<div id = "importantText">Не стой под стрелой!<> </body>
</html>
При современном состоянии дел с CSS3 я не думаю, что тут можно обойтись без vendor-префиксов, но идея, я надеюсь, ясна.
Настоятельно советую при написании реального приложения держать все три вышеприведенные картинки перед глазами, иначе нетрудно быстро «потерять ориентацию».
На этом возможности нового API не заканчиваются (правда, именно с этого места приходится признать, что значительная их часть — пока только спецификация).
Прежде всего интересно последующее событие — DeviceMotion-Event. Это событие наступает при перемещении устройства, а точнее при придании ему ускорения. Оно также применяется к объекту window и обладает рядом свойств, некоторые из которых выглядят совершенно фантастически. Применяется это событие так:
<html>
<head>
<title>Mobile Page</title>
<script>
Window. addEventListener("devicemotion", function(e) { var a =e. acceleration; var g = e. accelerationlncludingGravity var r e. rotationRate var i = e. interval }, true);
</script>
Поля acceleration и accelerationlncludingGravity содержат информацию по ускорению, приданному устройству, и тому же показателю, но с учетом силы тяжести. Значения их представлены в виде полей. x, .y, .z, где х, у, z — значения ускорения (в м/с2) по трем измерениям.
Разницу между acceleration и accelerationlncludingGravity легко пояснить примером. Если устройство мирно покоится на столе, значение этих параметров будет [0, 0, 0] и [0, 0, 9.8] соответственно (я надеюсь, не надо объяснять числа). Если аппарат свободно падает на пол, экраном вверх, они будут равны [0, 0, 9.8] и [0, 0, 0], если подымается, строго вертикально, с ускорением 0.5 м/с2 [0, 0, 0.5] и [0, 0, 10.3], если двигается вбок — [0.5, 0, 0] и [0.5, 0, 9.8].
Поле rotationRate отображает вращательный момент также по трем измерениям (rotationRate. alfa, rotationRate. beta и rotationRate. gamma). Interval — константа, отображающая значение интервала фиксации движения, в миллисекундах.
Еще одно интересное событие — compassneedscalibrationEvent, необходимо для калибровки компаса, служащего для абсолютной ориентации устройства. Применяется оно так:
Window. addEventListener("compassneedscalibration", function(event) {
Alert(‘Your compass needs calibrating! Wave your device in a figure-eight motion’);
Event. preventDefault():
}, true):
Использовать данный API можно не только для правильного представления контента — это применение самое простое. Легко представить, сколько возможностей появляется при работе с вебприложениями и играми при помощи жестов: «стряхивание», повороты, наклоны и тому подобные действия.
Добавить комментарий