company_banner

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 — вот вам готовое решение. Используйте, экспереминтируйте, кто знает, возможно в процессе игры вам придут в голову уникальные идеи и откроются новые модели использования ваших приложений.
    Intel
    Компания

    Комментарии 5

      0
      На sony ericsson lww в Google Chrome, как только пальцем касаюсь ball«ы падают заново как будто страница обновляется.
        0
        Если при этом шарики, которые уже были на экране не исчезают, то это фича, в оригинальном примере так и задумано. А если исчезают, то это уже баг :-)
          0
          Исчезают)
        0
        пишет консоли и не реагирует на наклон:
        Port error: Could not establish connection. Receiving end does not exist.
        chromeHidden.Port.dispatchOnDisconnect miscellaneous_bindings:236

        Werdas возможно сенсор барахлит и воспринимает как даблклик

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое