Background: Interactive Graphics with HTML5
- state of the art & outlook
What is HTML5?
Apart from the fact that it's a buzz word:
HTML5 is the current framework for a large range of extensions to earlier HTML standards.
We still expect that the use of HTML will stay as dynamic as it was in the past.
There are some more or less precise recommendations by W3C, WhatWG, and other organisations,
and still much space for browser specific innovations.
The article describes some HTML5 features available in the fields of graphics elements, touchscreen input and motion detection
which were useful for implementing the Panorado JS viewer.
This required not just to read documentation, but to investigate the features of some current browsers one by one.
The Canvas Element
Canvas supports rendering primitive graphics elements, as well as bitmap elements like sections of large panoramic images.
Current Canvas implementations offer 2 so-called contexts which are radically different:
||Supports simple 2-dimensional rendering and transformations.
Implemented by all HTML5 compatible browsers.|
||Supports 3-dimensional rendering, using graphics hardware according to the WebGL standard defined by the Khronos Group.
This enables very fast rendering which currently some browsers make use of more or less successfully.
This is currently an issue for tablet computers, mobile tablets and smartphones.
Unlike mouse input on traditional computers, touch input needs to be interpreted very carefully:
Touches can refer to a certain visible element on the screen,
but can also be meant as gestures to flip pages, scroll, or zoom the current page.
The good thing about touch input is that touch input is detected by virtually all mobile browsers.
The bad thing is that some browsers have implemented proprietary interfaces which differ significantly
from the W3C recommendations.
Another problem: Parallel handling of input events and time-consuming graphics rendering
seems to be a real challenge for some browsers on today's mobile devices which are still rather slow.
Most current mobile devices are equipped with acceleration sensors and gyroscope/compass.
Theoretically, data from these sensors could be used to interactively control visual website content.
In practice, our Android 4.0 test showed that it makes sense to rely on the deviceOrientation API in
conjunction with window orientation detection, not on the deviceMotion API. Even though, no browser was really perfect (yet).
At least, all browsers tested made use of the same W3C interface definitions.
We expect that browser implemented applications with real motion control will be possible in the future,
since all that needs to be done is fixing some bugs in current browser implementations.
We are currently witnessing a significant shift of user practice -
away from traditional computers (desktop, notebook)
towards small mobile devices (smartphone, tablet).
Web publishers habe to be aware of this. For developers, there are some significant differences:
||Apart from some older netbooks, they are equipped with powerful (Intel) processors
plus powerful graphics hardware.
Normally controlled by keyboard, mouse or mouse-like touchpad, not by touchscreen input.
All popular browsers perform quite fast and stable.
||The preferred way of input is touching the screen with fingers.
Quality and performance of newer devices are comparable to desktop computers,
while older devices impose some restrictions by slow processors
and some browsers are not yet implementing WebGL rendering and touch input perfectly.
This table is a summary of test results for 14 different operating system/browser combinations.
I like to emphasize that the selection of browser/os combinations is far from being complete,
and that all results are just a snapshot.
Results have changed with almost every upcoming new browser version in the past,
and I don't expect this to change in the future.
Recent tests have proven these OS/browser combinations as suited for Panorado JS:
|Windows 7+:||Microsoft Internet Explorer 9+, Mozilla Firefox, Chrome, Opera|
|Android 5+:||Chrome, Opera|
I'm expecting further quality, stability and performance improvements of mobile web browsers in the near future.
Hardware performance of new mobile devices is also likely to improve.
Development of OS-specific apps is tedious, and the web is the common platform of almost all users anyway.
The logical consequence is to use the new HTML5 features for interactive graphics applications like