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 OS, Tizen, Smart TV, Chrome OS, Windows 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 =)
Justification
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 ...
this.planeMarkNode.appendChild(this.planeMarkImage);
docFragment.appendChild(this.wrapperNode);
this.node.appendChild(docFragment);
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
Conclusion
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.
P.S.
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!
