Blog. Just Blog

Обработка событий датчиков и геолокация на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Обработка событий датчиков положения на JavaScript
Обработка событий датчиков положения на JavaScript

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

Событие DeviceLightEvent предназначено для получения данных от датчика освещенности устройства, естественно, если ваше мобильное устройство им оборудовано. Само событие поддерживается только браузером Firefox, поэтому для кроссбраузерных задач использование этого события нежелательно.
  1. // Проверить доступность и назначить обработчик событий датчика освещенности
  2. if (window.DeviceLightEvent) {
  3.     window.addEventListener('devicelight'light_hookfalse);
  4. }
  5. else {
  6.     // DeviceLightEvent не поддерживается
  7. }
  8.  
  9. // Обработчик события DeviceLightEvent
  10. function light_hook(event) {
  11.     // Уровень освещенности в люксах
  12.     console.log('Light: 'event.value);
  13. }
DeviceProximityEvent - событие датчика приближения устройства. Также поддерживается только браузером Firefox со всеми вытекающими ограничениями для использования. Обработчик получает три значения: текущее показание датчика, а также минимальное и максимальное расстояние в сантиметрах, на которое датчик действует. На моем смартфоне текущее значение меняется не плавно, как ожидалось бы, а резко меняется с нулевого значения на ненулевое (8) и наоборот, при этом максимальное значение возвращает равное 5.
  1. // Проверить доступность и назначить обработчик событий датчика приближения
  2. if (window.DeviceProximityEvent) {
  3.     window.addEventListener('deviceproximity'proximity_hookfalse);
  4. }
  5. else {
  6.     // DeviceProximityEvent не поддерживается
  7. }
  8.  
  9. // Обработчик события DeviceProximityEvent
  10. function proximity_hook(event) {
  11.     console.log('Proximity: '
  12.         'value=' event.value ', '
  13.         'min=' event.min ', '
  14.         'max=' event.max
  15.     );
  16. }
Самое полезное событие, которое можно и нужно использовать в мобильных приложениях, - это DeviceMotionEvent. Событие предназначено для получения данных от датчика-акселерометра при перемещении устройства. Поддерживается почти всеми современными мобильными браузерами. В обработчик события передается несколько групп свойств события, подробнее посмотрите в документации.
  1. // Проверить доступность и назначить обработчик событий датчика-акселерометра
  2. if (window.DeviceMotionEvent) {
  3.     window.addEventListener('devicemotion'motion_hookfalse);
  4. }
  5. else {
  6.     // DeviceMotionEvent не поддерживается
  7. }
  8.  
  9. // Обработчик события DeviceMotionEvent
  10. function motion_hook(event) {
  11.     console.log('Accelerometer: '
  12.         'X=' event.accelerationIncludingGravity.x
  13.         'Y=' event.accelerationIncludingGravity.y
  14.         'Z=' event.accelerationIncludingGravity.z
  15.     );
  16. }
Еще одно полезное событие - DeviceOrientationEvent. Оно предназначено для получения информации с датчика магнитометра при изменении положения устройства, по сути аналог компаса. Поддерживается практически всеми современными мобильными браузерами, поэтому может использоваться без особых ограничений. Из параметров события, которые передаются обработчику, значение имеют три - alpha, beta и gamma, соответственно, текущее значение ориентации устройства по осям X, Y и Z.
  1. // Проверить доступность и назначить обработчик событий датчика ориентации
  2. if (window.DeviceOrientationEvent) {
  3.     window.addEventListener('deviceorientation'orientation_hookfalse);
  4. }
  5. else {
  6.     // DeviceOrientationEvent не поддерживается
  7. }
  8.  
  9. // Обработчик события DeviceOrientationEvent
  10. function orientation_hook(event) {
  11.     console.log('Magnetometer: '
  12.         'alpha=' event.alpha
  13.         'beta=' event.beta
  14.         'gamma=' event.gamma
  15.     );
  16. }
Обработку всех описанных выше событий я собрал на одной тестовой страничке. Положение картины подвязано на кроссбраузерный обработчик DeviceMotionEvent и зависит от угла наклона устройства.

Использование геолокации на JavaScript
Использование геолокации на JavaScript

В заключении осталось рассказать об использовании геолокации в мобильных приложениях. Область использования географических координат обширна, например, прокладка маршрутов до нужных объектов и оценка времени в пути, автоматическое определение региона пользователя для таргетированных предложений. Геолокацию поддерживают все современные браузеры, как стационарные, так и мобильные. Собрав воедино все основные методы и принципы работы с геопозиционированием, я нарисовал вот такой скрипт, который можно взять за основу в рабочих проектах. Обязательно учтите, что все обращения к модулю геопозиционирования выполняются асинхронно, поэтому все действия с полученными результатами выполняются только в callback-функциях.
  1. // Проверить поддержку геолокации
  2. if ('geolocation' in navigator) {
  3.     // Идентификатор наблюдателя
  4.     var watchID;
  5.     // Получить координаты
  6.     navigator.geolocation.getCurrentPosition(
  7.         // Если удалось определить, то активировать наблюдателя
  8.         function() {
  9.             watchID navigator.geolocation.watchPosition(
  10.                 // Обработчик геолокации
  11.                 geo_success,
  12.                 // Обработчик ошибок
  13.                 geo_error,
  14.                 // Дополнительные параметры
  15.                 {
  16.                     // Повышенная точность определения
  17.                     enableHighAccuracy true,
  18.                     // Время кэширования результата
  19.                     maximumAge         30000,
  20.                     // Время ожидания до генерации ошибки
  21.                     timeout            20000
  22.                 }
  23.             );
  24.         },
  25.         // Обработчик ошибок
  26.         geo_error
  27.     );
  28. }
  29. else {
  30.     // Браузер не поддерживает геолокацию
  31.     console.log('Geolocation is not supported');
  32. }
  33.  
  34. // Обработчик геолокации
  35. function geo_success(position) {
  36.     console.log(position.coords.latitude+' : '+position.coords.longitude);
  37. }
  38.  
  39. // Обработчик ошибок
  40. function geo_error(error) {
  41.     // Деактивировать наблюдателя
  42.     navigator.geolocation.clearWatch(watchID);
  43.     // Значения error.code:
  44.     // 1 - User denied Geolocation
  45.     // 2 - Unable to acquire location
  46.     // 3 - Timeout expired
  47.     console.log('ERROR (' error.code '): ' error.message);
  48. }
Если к данным с датчиков web-приложение может обращаться в любое время, как угодно и абсолютно без ведома пользователя, то данные геолокации являются приватными и попадают под действие политик безопасности любых браузеров. При попытке обращения к методу getCurrentPosition или watchPosition браузер выдаст предупреждение, что сайт запрашивает местоположение, и пользователь уже сам решает, предоставить сайту эти данные или послать подальше.

На демонстрационной странице вы можете протестировать GPS-модуль вашего мобильного устройства на предмет взаимодействия с web-страницей. Полученные данные никуда не передаются и не собираются, так что можете смело разрешать передачу координат в браузере.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 1476 | Комментариев: 1

Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Андрей (05.02.2016 в 16:53):
Странно, но при ручном запрете остаётся висеть "Acquire location..."
В случае если геолокация запрещена глобально - "Geolocation is not supported"
FF44.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.0044 сек.) / Память: 4.5 Mb
Наверх