— Pixels Commander

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

One world – one frontend or first flight instrument built with HTML

Good day colleagues! One more good day which will ends quickly become past and will present one more step forward for us. How will front end development we are all passionate of look like tomorrow?

History likes unification

To predict the future lets look into the past… If we do this – we see that solid thread of unification goes through mankind`s history.

Unification — effective method to decrease diversity. Unification is a kind of systematisation. Aim for unification is to place elements in particular order building strict system which is comfortable to use. (c) Wikipedia

Unification have been succeed in science, engineering, politics and business.

Europe in 18 century:

Europe nowadays:


Unification never stops:

  • All airplanes look similar nowadays and it is hard to differ Boeing from Airbus, but it was not like this in the beginning! Just have a look, some of them look as weird as GWT or Adobe Flex
  • 200 years ago there were dozen of countries in Europe. Today we see European Union absence of borders and integration still crawls further;
  • Do you enjoy unified lamp sockets? There were much more kinds of them. But…

In every field of knowledge there is a limit after hitting which diversity decreases and only best solutions survive. This works for software development as well.

We develop software for 60 years and such a common problem as interface description is not standardised yet. However in recent years one technology is gonna to go out from labyrinth of experiments. This technology is compatible with widest range of devices and is being used by milliards of people every day. This is HTML/CSS. And if you say that HTML is only a markup language, I would argue:”It is not. Seems that you missed some news.”


HTML today and tomorrow

HTML/JS today is the most popular platform for UI development of any complexity and it still goes up. Firefox OSTizenSmart TVChrome OSWindows 8 – it is short list of operating systems which use HTML as application development platform. Variety of devices which use HTML growth as well as it`s popularity and it is quite easy to understand why. Usage of HTML/JS shortens development cycle and decreases amount of code to test. Browser takes care of many duties which lower level languages delegate to developer. And what do speed of development and reliability mean nowadays? What are benefits of using single front end platform? Is it just a competitive advantage and speed of innovations? A lot of people nowadays think that it is even more.

HTML/JS is good enough to expand it`s limits further. It is quick, flexible and clear approach to create visual components, UIs of any kind.

Below you can find details of HTML5 usage in aircraft manufacturing industry. We will consider possible approaches to develop electronic flight instrumentation systems (“EFIS”) with help of HTML/JavaScript. Also will use HTML/JS to implement artificial horizon. What is good – it will work even if you do not have own plane yet =)



HTML driven EFIS systems are easier to share via computer network. This is highly valuable in the age of remotely controlled drones.

Usage of unified, popular and reliable technology decreases development cost with standardization of development flow and technologies stack.

Moving responsibility for rendering from indicator developer to browser core is able to shorten development cycle and reduce amount of code to test. This opportunity is highly valued in aviation world where development cycle lasts for years.

Flight and marine indicators are not just new career opportunities for front-end developers. They could establish new kind of UI components market and be basis for new qualitative leap for aircraft and shipbuilding industries.


UI architecture proposal

Modern instrumental panels consist of LCD panels showing different flight instruments.

HTML allows manufacturer to configure any layouts for displays.

One of display layouts possible

Instruments should be implemented as JS classes. Constructor of such a class expects CSS selector as first argument so instruments can be deployed to layout cell as following

new AttitudeIndicator('#leftColumn1')

We see that instrument is being used as black box without any knowledge about it`s internals. This makes possible existence of dynamic and competitive market of flight, marine etc. instruments built with HTML/CSS/JS.

Indicators development industry is quite conservative. List of UI solutions being used is limited and boring. Main reason for this is highest standards for reliability. Due to amount of testing CSS is able to break this limit. Being used on milliard of devices daily CSS is robust and powerful enough to be a fresh breath for industry.

Recent layout have navigation map as central element. Lets suppose that weather became worse and now meteo information is top priority for pilot. CSS/JS allows to implement brand new level of UX for flight instruments with just a few lines of code. Click on weather radar (top-right) in order to move it to central panel.

Interactive demo for swapping instruments


Sensors data

It is assumed that displays browsers are connected to shared data bus.

Data flow scheme

Developer can get altitude data in JavaScript code as following

var altitude = window.flightData.altitudeSensor.altitude;

and getting current coordinates look like

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

Similar approach is being successfully used to access native resources in PhoneGap and Adobe Air.


Attitude indicator

Instrument consists just of few moving parts and key frame animations are absent. All we need is smooth indication of two values: roll and pitch of aircraft. So using few absolute positioned layers and CSS transitions would be most performant and compatible solution for such a task.

Implemented as JavaScript class AttitudeIndicator(cssSelector, autoUpdate).

Arguments of constructor:

  • cssSelector specifies element for indicator deployment;
  • autoUpdate optional boolean argument defines will indicator use HTML5 Orientation API or not& If it is true – Orientation API is enabled, otherwise value have to be sent with help of updateAngles(horizontalAngleDegrees, verticalAngleDegrees) method.

During initialization and operation indicator uses as more as possible of native functions and as less as possible of calls to DOM. Elements are created with help of documentFragment to minimize UI locks.

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

//Creating all nodes and adding them to wrapperNode ...


Animation is based on CSS3 transitions with periodic values updating.

If indicator was created with autoUpdate equals to true – values are updated on deviceOrientation event.

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

//Others elements are being turned ...

In case if autoUpdate was set to false – deviceOrientation listener will not be added.

It is fun to know that deviceOrientation axis for Maс and iOS are swapped. For Mac it detects orientation of keyboard part and for iPad it works for screen ofcourse. So this have to be fixed by userAgent based condition.

Video of first flight ever using HTML/JS aircraft indicator

Try artificial horizon

Orientation API support was tested on Mac Book Pro (without SSD) and iPad

Source code



HTML/JS is adult enough to be used for production of vehicle indicators. Platform is tested by millions of users daily and is amazingly robust. Features of HTML/CSS/JS stack allow rapid development of quite complex and dynamic indicators which are easily accessible via network which is highly valuable for any kind of drones. Web – driven indicators are not just a new job opportunity for front end developers, it is ready to use approach to have faster software evolution for product owners and create new kind of competitive market which can be basis for new era in indicators development industry.



IT industry loses tons of energy porting UI from one language to another. Windows, Mac OS, Unix, Android, iOS, Windows Mobile, Blackberry, Tizen, FirefoxOS, embedded deveices. Mankind need one front-end to be better. So let`s take a sober look at the future, move away from weird, experimental solutions to well known, open and unified technologies. And… have a good day!

  • 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 …) ……

  • Anonymous

    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 😉

  • makc

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

  • Anonymous

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

    This will work fine, thanks.

  • Anonymous

    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.

  • Anonymous

    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.,,