HTML5: Сенсоры - взаимодействие.

Рынок мобильных компьютеров начал стремительно меняться, помимо стандартных компонентов ультрабуки, вслед за планшетами и смартфонами, оснащаются сенсорами и тач-скринами. Сенсоры открывают разработчикам новые перспективы, позволяющие создавать новые модели использования их программных продуктов. Посмотрите на рынок мобильных приложений, там уже никого не удивишь возможностью играть в игры, используя в качестве игрового контроллера акселерометр, гироскоп, компас.
Добавить поддержку сенсоров в настольные приложения сейчас не составляет никакого труда, весь необходимый API уже имеется. Для десктоп приложений в Windows 7 и Windows 8 есть Sensor and Location Platform, позволяющий получать информацию о поддерживаемых сенсорах и читать их данные. В Windows UI приложениях для этого можно использовать API для работы с сенсорами в составе Windows RT.

А как обстоят дела с веб-приложениями? Тут тоже прогресс не стоит на месте, консорциум W3C разрабатывает Sensor API для веба. Мало того, функции для работы с сенсорами уже частично реализована в некоторых версях мобильных браузеров, например обработка события Device Orientation.

Пару недель я заинтересовался вопросом использования сенсоров в веб-приложениях, и обнаружил, что ни один из браузеров для Windows их не поддерживает. Можно было бы расслабиться и подождать, пока поддержка появится, но, как говорится, это не наш метод. В свое время, с целью удовлетворения своего любопытства я изучал возможность создания расширений для Google Chrome включающих NPAPI плагины, которые по сути представляют из себя DLL библиотеки, и в них можно реализовать практически любое взаимодействие с платформой. Я решил применить этот опыт на практике и результататом стало расширение Sensors for Chrome.

Как это работает


Как я уже говорил в основе расширения лежит NPAPI плагин, который работает с сенсорами через API Sensor and Location Platform. При загрузке плагина он перечисляет все доступные сенсоры, ищет инклинометр или 3D компасс. Если сенсор найден — плагин регистрирует интерфейс и начинает получать уведомления от платформы, содержащие информацию о новых показаниях сенсора. Получив эти данные он перенаправляет их фоновой страннице расширения, которая, в свою очередь, отправляет их странице на активной вкладке браузера.

Для получения данных страница регистрирует прослушиватель и получает данные по мере их поступления. Кусок кода, получающий данные на странице, выглядит следующим образом:

window.addEventListener("message", function(event) 
{
    if (event.data.type && (event.data.type == "INCLINOMETER_DATA")) 
    {
       event.data.x;
        event.data.y;
        event.data.z;
    }
}, false);


В объекте event.data будут доступны значения x, y, z которые можно интерпретировать в зависимости от задач приложения.

Помимо расширения, я также создал тестовое простое приложение Maze и слегка модифицировал пример кода от mr doob — Ball Pool.



Оба приложения реализованы с использованием Box2D, в обоих изменение положение устройства влияет на гравитацию. Пример обработчика поступления данных с инклинометра:

window.addEventListener("message", function(event) 
{
    if(event.data.type && (event.data.type == "INCLINOMETER_DATA")) 
    {
        gravity.x = Math.sin((event.data.y) * Math.PI / 180) ;
        gravity.y = Math.sin((Math.PI / 4) + event.data.x * Math.PI / 180);  
    }
}, false); 


Если у вас нет под рукой «железа» с сенсорами, а попробовать уже хочется — можно использовать «виртуальные» сенсоры, описанные в этой статье.

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


Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями. Для этого воспользуйтесь предлагаемыми ниже кнопками:


Блог: http://romanlovetext.blogspot.com/