HTML5: Сенсоры для тех, кто не привык ждать

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

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

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

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

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

Как я уже говорил в основе расширения лежит 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 ^[5] и слегка модифицировал пример кода от mr doob — Ball Pool ^[6].

Оба приложения реализованы с использованием 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); 

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

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

Автор: Terror