Background: Interactive Graphics with 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. To get this overview, some current browsers needed to be investigated one by one.

Canvas is an HTML element which allows drawing operations to be performed at runtime, controlled by JavaScript code.

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:

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 it 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 older mobile devices.

virtually all current mobile devices are equipped with gyroscope/acceleration/magnetometer sensors. In theory, data from these sensors could be used to interactively control visual website content. In practice, our tests on Android devices showed that it makes sense to rely on the deviceOrientation API in conjunction with window orientation detection, not on the deviceMotion API. Since the times of early Android versions, there have been significant improvements in hardware and software.

The inaccuracy of magnetometer data (compass) is still an issue which cannot be fully compensated by software.

At least, all browsers tested made use of the same W3C interface definitions.

In the meantime, device motion data which is available within browsers is now sufficient for providing a realistic 3-D impression when you look at a panoramic scene with a VR glasses/smartphone array. You may watch the VR samples in our Panorama Gallery to get an impression.

We are currently witnessing a significant shift of user experience - 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:

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 snapshots. Results have changed with many upcoming new browser version in the past, and we don't expect this to change in the future.

Recent tests have proven these OS/browser combinations as suited for Panorado JS:

We are 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. Thus, it's a good idea to use the new HTML5 features for interactive graphics applications like Panorado JS.