Рынок мобильных компьютеров начал стремительно меняться, помимо стандартных компонентов ультрабуки, вслед за планшетами и смартфонами, оснащаются сенсорами и тач-скринами. Сенсоры открывают разработчикам новые перспективы, позволяющие создавать новые модели использования их программных продуктов. Посмотрите на рынок мобильных приложений, там уже никого не удивишь возможностью играть в игры, используя в качестве игрового контроллера акселерометр, гироскоп, компас. Добавить поддержку сенсоров в настольные приложения сейчас не составляет никакого труда, весь необходимый 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/
