Panosalado is a Flash-based panorama viewer implemented by Zephyr Renner and Michael Rondinelli. Version 2 is tailored to display high-resolution spherical panorama images. And last but not least, Panosalado 2 is free, open source software released under the GNU General Public License (GPL), which makes it a perfect candidate for extensions (thank you Zephyr and Michael for releasing such a great work under the GPL).

On this page, I would like to present a slight extended version of Panosalado (the original version can be found at the official Panosalado web page). In summary, these extensions include the following:

Please note that I have just implemented the things that I needed. For a demo of the functionality, please visit my panorama gallery. Basically, changing the camera's direction of view interactively is supported. Panosalado supports more than this, for instance, dynamic changes of the camera's field of view (zooming), auto-rotation (turning the camera without user interaction), hotspots, etc. Maybe, I will make (some of) these features available through my Flash component in the future. Since Panosalado is released under the GPL, I make the compiled viewer including the complete source code available on this web page (so feel free to add or change things).

For everyone requiring more functionality: You might also want to have a look at another player based on Panosalado called SaladoPlayer by Marek Standio.

Download

The ready to use viewer and the complete source code can be downloaded from here:

Version History

Using the Panorama Viewer

If you want to use the viewer on your web page, first download one of the archives above. From this archive, you only need the Flash component PanoSaladoViewer.swf. Copy this file onto your web server.

A minimal web page using the panorama viewer looks like this:

<html> <head> <title>Pano Test</title> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.path = "pano/pano_f.xml"; flashvars.fov = "55"; flashvars.pan = "0"; flashvars.tilt = "0"; flashvars.info = "Foobar"; var params = {}; params.allowfullscreen = "true"; swfobject.embedSWF("PanoSaladoViewer.swf", "PanoArea", "800", "600", "10", "expressInstall.swf", flashvars, params); </script> </head> <body> <div id="PanoArea"> This page requires Adobe Flash (<a href="http://www.adobe.com/go/getflashplayer">Download Adobe Flash</a>) </div> </body> </html>

The viewer requires Flash version 10. Swfobject takes care of loading the component and embedding it into the web page at the place of the element with the given id (PanoArea in the example).

The viewer is configured using the variable flashvars. The most important argument is path, which defines the path to the panorama. Actually, the panorama is not a single file but a set of files of a cubic panorama. This variable must point to the file with the extension “_f.xml” (see below for a describtion of how to create the file set of the cubic panorama).

The variable fov defines the camera's field of view. Larger values might result in quite distorted pictures. I recommend something around 55 degrees. pan and tilt specify the initial direction of the camera. With info you can specify a comment that is displayed when the about button is pressed (in additon to the credits to Zephyr Renner and Michael Rondinelli; cui honorem, honorem).

Creating a Cubic Panorama

Panosalado expects spherical panoramas to be defined as 6 sides of a cube. Moreover, these sides are split into tiles at different resolutions (called deep zoom). Together, this is a perfect combination to display high quality panorama images at high resolution without having to load the complete high resolution image in advance. However, most spherical panoramas are originally a single image representing an equirectangular projection. Typically, these images have dimensions such that image width = 2*image height (if your panorama has different dimensions, please check the output options of your panorama software for equirectangular projection). Zephyr Renner and Michael Rondinelli have developped two tools that convert such an equirectangular image into the right format for Panosalado, namely EquirectangularToCubic and DeepZoomTiler. For your convincience, I have included both applications into the above archives in the folder tools. However, you can also download them from the official Panosalado web page. In order to execute these programs, you need to install at least the runtime environment of Java available from the Java web page.

First, you create the 6 cube sides of your panorama using EquirectangularToCubic. I assume, your pano has the file name pano.jpg (png format is also OK). Execute the following command (note that I set the quality parameter to 1.0 in order to have not quality loss in this intermediate step):

java -jar EquirectangularToCubic.jar -quality 1.0 -outputdir "cubic" pano.jpg

This creates the directory cubic containing the 6 sides of the cube as jpg images (pano_b.jpg, pano_d.jpg, pano_f.jpg, pano_l.jpg, pano_r.jpg, pano_u.jpg). Change into that directory, and execute the following command on each cube file to create the deep zoom tiles of each cube side:

java -jar DeepZoomTiler.jar -quality 0.8 pano_b.jpg

With quality you can define the compression level of the jpg files in the range [0.0,1.0]. After this step you should have 6 directories called tiles_pano_X. Copy the content from these directories into one directory. In the end, you should have a single directory (for instance, pano) containing the 6 files pano_X.xml plus 6 directories pano_X containing the tiles. Copy this directory to you web server, and use the name of this directory together with the file name of the file “_f.xml” as the path flashvar when initializing the Flash viewer (see above).

For your convinience, I have create a shell script that automates this process. This script called prepare_cubic_pano.sh can be found in the tools directory of the above archives. In order to use this script, you have to set your shell's environment variable CLASSPATH to include the two jar files. Then you call it like this:

prepare_cubic_pano.sh -q 0.8 -o cubic pano.jpg

Option -q specifies the jpg quality; -o specifies the output directory.

Converting Cylindrical Panoramas to Equirectangular Panoramas

Panosalado natively only supports spherical panoramas (at least I could not find a way to load cylindric images directly). Therefore, images that do not cover the whole vertical field of view of 180 degrees—in particular cylindric panoramas—need some more preparation. The basic idea is to create a spherical image from the vertically restricted panorama and restrict the vertical field of view in the viewer.

First, I extended Panosalado to support vertically restricted images. I added another flashvar called vfov. If you set vfov, the tilt of the camera is restricted in the viewer such that you cannot see any “white spots” that are not covered by the image. (With the parameters minPan, maxPan, minTilt, and maxTilt, you can also restrict the pan and tilt of the camera. However, setting vfov is much more convenient since the tilt parameters are calculated for you based on the camera's field of view).

Secondly, you have to create an ordinary equirectangular image covering the whole vertical 180 degrees. Since the original image covers less than 180 degrees in the vertical direction, this image will contain white spots as shown in this picture:

Converted equirectangular panorama Converted equirectangular panorama

Assume you have a cylindric image. Load this image into your favorite panorama software. I use Hugin. Hugin wil ask you for the type of lense you used when you load the image. Here you say “cylindric”, and horizontal field of view 360 degrees (obviously only if your cylindric panorama actually covers 360 degrees horizontally). As output parameters you set the type of projection to equirectangular, and vertical field of view to 180 degrees, and save the image (Hugin also tells you the actual vertical field of view for the vfov parameter). This equirectangular image can be handled as mentioned in the previous section.