— Pixels Commander

[ In English, На русском ]

Один мир – один фронтенд или первый авиационный прибор на HTML

Доброго дня, коллеги! Еще одного доброго дня который быстро промелькнет, уйдет в прошлое и подарит миру еще один шаг вперед. Какой будет завтра фронтенд разработка к которой мы идем, делая посильный вклад в развитие открытой платформы?

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

Унификация — распространённый и эффективный метод устранения излишнего многообразия, является разновидностью систематизации и преследует цель распределения предметов в чёткую систему, удобную для пользования. (c) Wikipedia

Унификация добилась весьма серьезных успехов в политике, авиа и автостроении, инженерных решениях и электронике.

Европа в 18 веке:

Европа сейчас:

Факты:

  • Все современные пассажирские самолеты похожи. Тяжело отличить Boeing от Airbus, но изначально разнообразие форм было потрясяющим. Просто взгляните на эти недоразумения, некоторые похожи на Adobe Flex и GWT =)
  • Еще 200 лет назад в Европе существовало более 50 отдельных княжеств и государств. Сегодня? – Евросоюз, минимум границ, интеграция;
  • Вам нравятся унифицированные патроны для электрических лампочек? Правда удобно? Сначала их было куда больше, но…

В тот момент, когда человечество накапливает достаточное количество знаний в определенной области – замедляется поиск возможных решений и вместе с этим сокращается типовое разнообразие. Остаются самые популярные, эффективные и стойкие решения. Этот барьер, этап актуален для любой области – будь то политика, транспорт или инженерное дело. Актуально это и для программирования.

 

Унификация и UI

Мы разрабатываем ПО уже 60 лет при этом такая типовая задача как описание интерфейса все еще не имеет единого решения, хотя в последнее время стало заметным решение претендующее на роль долгожданного стандарта. Эту технологию используют миллионы людей ежедневно – это HTML.

И если вы скажете:»HTML это всего лишь язык описания веб страниц!», – я с уверенностью отвечу, что это уже давно не так, что вы многое пропустили.

HTML сегодня – самая популярная платформа для создания UI и он продолжает набирать обороты. Firefox OS, Tizen, Smart TV, Chrome OS, Windows 8 – вот краткий список операционных систем которые поддерживают HTML/JS, как основную платформу разработки приложений. Количество устройств использующих открытый фронтенд растет и это понятно – его применение уменьшает объем кода нуждающегося в тестировании, ускоряет разработку по сравнению с низкоуровневыми языками. Скорость и надежность дают ощутимые преимущества в конкурентной борьбе и становятся все более важны с каждым днем. Эти приемущества делают HTML/JS достойными дальнейшего расширения сферы применения.

Ниже – попытка сдвинуть наше представление о HTML/JS, применив их в самолетостроении. Речь пойдет об общих принципах использования платформы в приборных панелях самолетов (electronic flight instrumentation systems – «EFIS») и о разработке первого авиационного прибора на HTML – искуственного горизонта.

 

Обоснование

Приборы разработанные на базе web – технологий обладают высокой доступностью через компьютерный сети. Это особенно важно в век беспилотных летательных аппаратов.

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

Перенос ответственности за рендеринг на ядро браузера снизит объем тестируемого кода приборной панели, ускорит процесс разработки.

Авиационные и судовые приборы – это не только новые карьерные возможности для front-end инженеров, но и новый тип рынка UI компонент, который может стать предпосылкой для качественного рывка в отрасли.

 

Предполагаемая архитектура UI

Современные приборные панели – это LCD дисплеи отображающие приборы с различной информацией о состоянии машины.

С помощью HTML разметки производитель может самостоятельно задать сетку расположения приборов на дисплее.

Один из возможных вариантов сетки

Каждый прибор оформляется в виде отдельного класса. В его конструктор передается селектор на предназначенную прибору ячейку. Например размещение искуственного горизонта в первую ячейку будет выглядеть как

new AttitudeIndicator('#leftColumn1')

Мы видим, что для использования приборов не требуется знаний о его внутреннем устройстве. Это открывает возможности для создания живого и конкурентного рынка авиационных, морских и пр. приборов разработанных на HTML/CSS/JS.

Индустрия разработки индикаторов весьма консервативна, список используемых UI решений скуден и скушен. Главная причина этого – повышенные требования к надежности. Благодаря объему тестирования CSS может обойти это ограничение. Используемый на миллиардах устройств ежедневно CSS – достаточно надежная и мощная технология что бы стать глотком свежего воздуха для индустрии.

В предыдущей сетке центральным элементом была навигационная карта. Предположим, что погодные условия ухудшилась и теперь информация погодного радара стала приоритетной для пилота. CSS/JS позволяют создать совершенно новый уровень UX для отрасли в нескольких строках кода. Щелкните по погодному радару (правый верхний угол) для переноса его в центральную ячейку.

Интерактивная демонстрация переключения основного прибора

 

Данные приборов

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

Схема передачи данных

Для разработчика это значит, что получить данные о текущей высоте можно через

var altitude = window.flightData.altitudeSensor.altitude;

Аналог для широты и долготы

var longtitude = window.flightData.gpsSensor.longtitude;
var latitude = window.flightData.gpsSensor.latitude;

Подобный подход уже сейчас используется в PhoneGap и AdobeAir для доступа к нативным ресурсам.

 

Разработка искуственного горизонта

Авиагоризонт состоит из небольшого количества подвижных элементов, а покадровые анимации отсутствуют. Все что необходимо – плавное отображение двух величин: крена вертикального крена. Нам будет достаточно нескольких слоев с абсолютным позиционированием и css transitions. Transitions – нативная имплементация твинов в браузере и похоже такое решение будет самым быстрым и совместимым из html/css стека.

 

Реализация

Прибор представлен в виде JS класса AttitudeIndicator(cssSelector, autoUpdate)

Входящие аргуметы конструктора:

  • cssSelector элемента для развертывания индикатора;
  • autoUpdate необязательный boolean параметр определяющий будет ли прибор использовать HTML5 API для получение координат. Если true – используется HTML5 Orientation API, если false – параметры передаются извне с помощью метода updateAngles(horizontalAngleDegrees, verticalAngleDegrees)

При инициализации и работе используется максимум нативных функций рендеринга и минимум вызовов.

Основные элементы добавляются к DOM единожды через documentFragment что бы блокировать работу браузера минимально.

p.initElements = function() {
var docFragment = document.createDocumentFragment();
this.wrapperNode = document.createElement('div');

//создание всех узлов и добавление к wrapperNode

this.planeMarkNode.appendChild(this.planeMarkImage);
docFragment.appendChild(this.wrapperNode);
this.node.appendChild(docFragment);

Анимация происходит через CSS3 transition движущихся элементов при периодической передаче данных. Из события deviceOrientation происходит вызов функции:

updateAngles(horizontalAngleDegrees, verticalAngleDegrees) {
this.verticalMeasurementline.style[this.transformString] = 'translate(0, ' + verticalTransform + 'px)';

//Поворот остальных элементов ...
}

Соответственно если обьект создан с autoUpdate = true (второй аргумент конструктора) слушатель на deviceOrientation не устанавливается.

Занимательно что deviceOrientation на Mac дает значения осей для корпуса, а не монитора. Соответственно между iPad и Mac есть разница в осях. Исправляется условием по userAgent, но вероятно есть библиотеки с расширенной поддержкой устройств? Можете что то посоветовать?

Попробуйте авиагоризонт в действии

Проверено на данных встроенных гироскопов Mac Book (без SSD) и iPad .

Исходный код

Видео первого в истории полета с использованием HTML/JS авиационного прибора:

 

Заключение

HTML/CSS/JS -достаточно зрелый стек для создания авиационных и корабельных приборов. Он обладает рядом преимуществ по части скорости, гибкости разработки, а созданные таким образом приборы надежны и обладают чрезвычайно высокой сетевой доступностью, что особо важно в век беспилотных ЛА.

Еще одна возможность скрывающаяся в применении веб – технологий для разработки приборов – создание конкурентного рынка, создающего небывалый выбор производителям ЛА и предпосылки для качественного скачка в индустрии авиационных и корабельных приборов.

 

P.S.

Вне всякого сомнения – сейчас на портировании интерфейса между платформами человечество теряет гигантское количество энергии. Windows, OSx, iOS, Blackberry, Android… А вы видели язык разметки в Android? Разве это не странно – дублировать существующие и успешные парадигмы?

Давайте же мыслить трезво, держа уверенный шаг на пути в лучшее будущее и… Доброго дня!

  • Alex Winx

    Weed effect passed so I can see why? cos of difference if how NVidia and ATI and…rendered UI and cos of difference how Win,Mac,(btw I couldn’t run this on Win >:))) …cos of difference of browsers, and new and old versions…cos of difference of devices (did u said works on IPad, my laptop doesn’t have gyro yet?) and difference of UI towards devices (you flight with touch or mouse I prefer joystick …) ……

  • makc

    navigator.userAgent.match(/(iPad|iPhone|iPod)/g) why not /iPw+/g ?

  • Аноним

    I was quite careful with user agents matches. There is bunch of them http://www.useragentstring.com/pages/All/

    This will work fine, thanks.

  • Аноним

    This is not an article about cross browser compatibility. If somebody will build airplane indicator with JS/HTML he will use custom WebKit or FF fork + Linux. So no need to support Win7 + IE9 ;)

  • Аноним

    maaaan, dont trust web-browsers as avionics, this is a critical operation, where your life depends on that equipament. i just imagine flight with my avionics with huge latency.

  • Аноним

    Ok, understand you =) Actually the idea is that you get data in C, operate data in C, but display data with HTML/JS since it is quite performant and stable rendering platform which is used very very widely.

    I`d say we are not Web developers anymore, at least a lot of us. Front-end or UI developer fits better today. Web was the origin, but now it is only one of environments possible.

    We`ve been flying with this thing for 20 minutes, it was not that bad. Since instrument is simple it was quite easy to implement avoiding memory leaks and performance degradation. The biggest issue was mac`s gyro sensitivity, should use more specialized sensor for sure.,,