close panorama

krpano on iPhone / iPad / iPod Touch
via the krpanoJS Javascript / HTML5 Viewer

Introducing videos

First - just have a look at these videos:

krpano on the iPad:

krpano on the iPhone:

How does it work?

The viewer is Javascript based and uses the new HTML5 CSS 3D transforms for displaying the panoramas. These CSS 3D transforms are currently only available in the Mobile Safari and in Safari 5 Browser.

The possibilities compared to Flash are limited. It's only possible to use cubical pano images.
A triangle based 3D rendering, which would allow things like Fisheye / 'Little Planet' projections, spherical / cylindrical and partial panos is not possible with the CSS 3D transforms. Maybe there will be more possibilities in future when some real 3D graphics APIs (like WebGL) become available. But the current quality and performance is already really good and viewing panos makes fun, especially on the iPad ;-)

The viewer reads and parses the same XML file as the krpano Flash viewer. So it's possible to control and setup both viewers by the same file.

But due to the limited memory resources of the mobile devices, it's not possible to use the same large images as in the Flash viewer - e.g. several 2000x2000 pixel images will let the Safari Browser simply crash, no error throw or something...
As solution there are new settings in the xml to specify (smaller) images for the mobile and tablet devices, more details about that here in the How to use it section.

NOTE - this first release of the Javascript based krpano viewer supports only a small subset of all krpano Flash viewer xml possibilities and settings, but there are plans to extend it step by step - the krpano actions, the plugin and hotspots system and maybe also a kind of multi-resolution...

How to use it?

The Javascript viewer is an additional file - the krpanoiphone.js. It must be placed in the same folder as the krpano.swf and will be loaded automatically on the iPhone / iPad / iPod Touch devices by swfkrpano.js embedding script (other embedding scripts will follow).

This viewer is an Add-on to the normal krpano licenses, so there is an additional license necessary - get it here - it's a personalized license file - the krpanoiphone.license.js, it must be placed in the same folder as the krpanoiphone.js.

The embedding syntax is the same like for the krpano Flash Panorama viewer, no changes are necessary here, but note - it's important to set some iPhone specific meta settings in HTML for correctly scaling - just use the default HTML template, which is included in the viewer and tools download packages!

Only cubical panoramic images are supported at the moment!
And their size is limited (the exact size is unknown), for the iPhone cube face sizes like 480x480 to 640x640 seems to be good, and for the iPad something around 1024x1024 to 1280x1280. Just play around and find what size is good in your eyes.
BUT NOTE - too large images will crash the Mobile Safari Browser!

The paths to the iPhone / iPad images will be set in the XML in the <image> node by the <mobile> and <tablet> tags. If it will be possible to support in future also other mobile devices (e.g Android based ones) then these tags and images can / will be used also for them.

On the iPhone the <mobile> tag will be loaded and on the iPad the <tablet> tag or if that doesn't exists then the <mobile> tag.

Here an example of the XML structure:
<image ...>
    <!-- here the normal pano image paths -->
    ...

    <!-- mobile phone / iphone images -->
    <mobile>
        <left  url="mobile_l.jpg" />
        <front url="mobile_f.jpg" />
        <right url="mobile_r.jpg" />
        <back  url="mobile_b.jpg" />
        <up    url="mobile_u.jpg" />
        <down  url="mobile_d.jpg" />
    </mobile>

    <!-- tablet pc / ipad images -->
    <tablet>
        <left  url="tablet_l.jpg" />
        <front url="tablet_f.jpg" />
        <right url="tablet_r.jpg" />
        <back  url="tablet_b.jpg" />
        <up    url="tablet_u.jpg" />
        <down  url="tablet_d.jpg" />    
    </tablet>
</image>

Tools / Droplets

The kmakemultires Tool and its MAKE PANO Droplets have also been extended for automatically creating down-scaled iPhone and iPad images.

There are these new settings the kmakemultires .config files:
buildmobileimages=auto
buildmobileres=480
buildtabletimages=auto
buildtabletres=1280

The buildmobileimages and buildtabletimages settings say if the tools should also build images for mobile and tablet devices. Possible settings are yes, no or auto, where auto means - build the images only when there is a krpanoiphone.license.js file in the tools folder.
The settings buildmobileres and buildtabletres are used to set the resolution / size of the panos.

Test the Viewer on your PC/MAC with Safari 5

It's possible to test the krpano Javascript viewer also on the PC/MAC with the Safari 5 Browser by changing the 'user-agent' setting:
  1. Mac: Click on Safari on the menu bar and go to Preferences.
    Windows: Click on Edit on the menubar and go to Preferences.
  2. Go to the Advanced tab.
  3. Check the checkbox for Show Develop menu in menu bar.
  4. Now a new Develop menu will show up in the menu bar.
  5. Click on this new Develop menu and then select User Agent.
  6. There select the Mobile Safari 3.2 - iPad item.
  7. Reload the krpano page and view the panos there.

What about Android?

On Android devices there are currently no possibilities to display 3D images / panos in the Browser. Maybe the Flashplayer 10.1 will help here, but more details can't be said before it will be available.