PanoramaStudio Viewer 3.

0
Interactive Panoramas and Zoom Images in web pages using Flash

Documentation

c 2005-2010, Tobias Huellmandel Software

http://www.tshsoft.com

Contents
1 The PanoramaStudio Viewer 1
1.1 Overview and system requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Using the Viewer with the PanoramaStudio application . . . . . . . . . . . . . . . . . . . 1
1.4 Using the Viewer with panoramic images created with other software . . . . . . . . . . . . 1
1.5 Controlling the PanoramaStudio Viewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.6 License . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Creating the image data for the Viewer 5

3 Embedding the Viewer in webpages 5

3.1 Flash: The <object> and <embed> tag in HTML . . . . . . . . . . . . . . . . . . . . . . 5
3.2 Required files for the Viewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.3 Controlling the Viewer with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

4 Parameters reference 7
4.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.2 XML elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.3 All-purpose attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.4 HTML-formatted text in Viewer text fields . . . . . . . . . . . . . . . . . . . . . . . . . . 17

i
 1

1 The PanoramaStudio Viewer

1.1 Overview and system requirements
The PanoramaStudio Viewer provides an interactive player for displaying 3D panoramas and large zoom
images on webpages. The Viewer is a small and highly optimized Flash applet, which requires only an
installed Flash Player 9 or later to run.
With this requirements the Viewer is able to show nearly arbitrarily large images and panoramas embed-
ded in webpages in a platform-independent way on a wide range of systems. With the ability to connect
panoramas using hotspots it is also possible to build virtual tours containing multiple panoramas.

1.2 Features
• Interactive and platform-independent presentation of panoramas and large images on a local com-
puter as well as on websites in the internet
• Supports partial panoramas as well as full spherical 360x180 degree panoramas
• Fast and performant displaying of nearly arbitrarily large images using dynamic loading
• Highly optimized Flash code - the complete Viewer is just about 100 KB
• Supports spherical, cylindrical and cubic panorama formats
• Controlling the Viewer with JavaScript functions
• Supports hotspots and virtual tours
• Supports simulation of artifical lens flares and allows embedding MP3 sound files for a more realistic
environment
• Auto Play for automatic panning and zooming in the panorama
• User-interaction by mouse, keyboard, and mouse wheel
• Extensive configuration options

1.3 Using the Viewer with the PanoramaStudio application

The PanoramaStudio Viewer 3.0 is an integral part of the PanoramaStudio application v2.1 and later.
Webpage templates with an embedded interactive panorama or zoom image can be created automatically
and easily using PanoramaStudio. PanoramaStudio generates fully automated the necessary HTML
code and the necessary files according to the user’s settings for this purpose. The PanoramaStudio
export function supports already many of the parameters and options of the Viewer described in this
documentation.

Notice on how to create a panorama for the Viewer

For the creation of an interactive panorama or zoom image you should first of all use the export
functionality in the PanoramaStudio application. This creates an initial version of the panorama
fully automated.
Since all the features and possibilities of the Viewer described in this documentation are going far
beyond the configuration options in the PanoramaStudio application, this documentation allows
advanced users to edit and modify every aspect and detail in an existing Viewer panorama created
with PanoramaStudio.
All features and parameters which are available for an individual adjustment of the Viewer are
described in the following.

1.4 Using the Viewer with panoramic images created with other software
As a matter of principle the Viewer handles and shows all cylindrical and spherical panoramas and also
flat images created with other software. Therefore the images can be imported in the PanoramaStudio
application using File→Import/Export→Import panoramic image... and then converted and exported for
the Viewer.
2 1 THE PANORAMASTUDIO VIEWER

1.5 Controlling the PanoramaStudio Viewer

Inside a panorama showed with the PanoramaStudio Viewer the user can navigate interactively. The
main control device is the mouse. You can pan horizontally and tilt vertically inside the scene using
the mouse. Additionally the mouse wheel is supported to zoom in and out. If the toolbar is shown in
the Viewer, there are furthermore buttons for the navigation, for starting and stopping the Auto Play,
and for showing/hiding the hotspots, if applicable. The Viewer can be controlled by keyboard, too. The
cursor keys serve here for the navigation as well as the direction keys on the numerical pad. You can
zoom in and zoom out wit ”‘+”’ and ”‘-”’ respectively. The space bar serves to start and stop the Auto
Play. With ”‘h”’ the existing hotspots can be shown and hidden. The ”‘t”’ does the same for the toolbar.
1.6 License 3

1.6 License
License agreement
PanoramaStudio Viewer - Version 3.0
for Adobe Flash Player Version 9 or higher
Copyright
c 2005-2010, Tobias Huellmandel Software
Internet: http://www.tshsoft.com
E-Mail: support@tshsoft.com

1. LICENSE: The author (Tobias Hüllmandel Softwareentwicklung) provides you

the Software "PanoramaStudio Viewer 3.0",
named "Software" in the following, which contains further
an electronic documentation and a license file ("License.txt")
and grants you a license for using this product in accordance with
the following conditions.

2. COMMERCIAL/PRIVATE USE:
2.1 PRIVATE USE
The private/non-commercial use of the Software,
also in the internet, is free and does not require an additional license.

2.2 COMMERCIAL/INDUSTRIAL USE

For every commercial internet presence where the Software
is used one (Commercial) License must be purchased.
An internet presence may be defined here by the associated domain
(domain in terms of "www.tshsoft.com"). A commercial license is valid
for the domain name and possibly existing domain name aliases
refering to the same internet presence. The number of panoramas showed
with a licensed copy of the Software on an internet presence is
not limited.
A commercial use of an internet presence is basically existend, if the
owner uses the internet presence with a commercial interest, or if he
is no private individual, or if he is no non-profit organisation and no
academic institution.

3. LICENSE RESTRICTIONS:
3.1 You may not use this Software in a way other than allowed in this
License.
3.2 You shall not use an UNREGISTERED copy of the Software on
a commercial internet presence after the end of a 30-day trial
period.
3.3 You may not alter, modify, adapt or translate the Software, or
decompile, reverse engineer, or disassemble the Software.
3.4 You may not modify the Software or create derivative works based
upon the Software.

4. THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND,

EITHER EXPRESS OR IMPLIED, INCLUDING ANY WARRANTY OF QUALITY,
MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.
IN NO EVENT WILL THE AUTHOR BE LIABLE FOR LOSS OF DATA, COSTS OF
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES OR ANY SPECIAL,
CONSEQUENTIAL OR INCIDENTAL DAMAGES, UNDER ANY CAUSE OF ACTION
AND REGARDLESS OF WHETHER OR NOT THE AUTHOR HAVE BEEN ADVISED
OF THE POSSIBILITY OF SUCH DAMAGE. THIS LIMITATION WILL APPLY
NOTWITHSTANDING ANY FAILURE OF ESSENTIAL PURPOSE OF ANY LIMITED
REMEDY PROVIDED HEREIN. IN ANY EVENT THE AUTHOR WILL HAVE
LIABILITY ARISING OUT OF THIS AGREEMENT.
4 1 THE PANORAMASTUDIO VIEWER

License for SWFWheel:

Parts of the software are based on SWFWheel (http://www.libspark.org/wiki/SWFWheel/en)
licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)

Purchase a License
According to the above license agreement a license key is needed for the commercial use of the
PanoramaStudio Viewer on the internet after a 30-day trial period. For such a commercial use you
can buy your license at the registration service Share-It!. With the purchase you will get a license key
compatible to the domain name of your internet presence.

With the license key you will get:

• The right to use the PanoramaStudio Viewer on a commercial website. The number of panoramas
showed with a licensed copy of the Viewer on a website is not limited.
• The option to show your own logo in the Viewer window.
• Free support.

Order a license key

A license key can be ordered easily and primarily secure over the internet at the registration service
Share-It!. We accept credit cards, checks, bank/wire transfer, or cash as payment method. The delivery
of your license key for a certain domain name is done by e-mail within 24 hours after receiving your
payment. If you pay by credit card the license key is delivered in most cases within 30 to 60 seconds.
Order form: http://www.tshsoft.com/en/panostudioapplet/register.html

Customer service
Do you have questions about your order, payment or the delivery? Do you have already ordered a
product and want to check your data? You will find the answers at the Customer Care Center of Share-
It!: http://shareit1.element5.de/ccc/index.html?publisherid=20959&languageid=1
 5

2 Creating the image data for the Viewer

The PanoramaStudio Viewer is able to show images of nearly arbitrary size. Therefore a conversion
of the image data into an optimized format is necessary, where the original image data is split up into
small tiles of different resolutions. This enables the Viewer to dynamically load and display the required
image regions for the current field-of-view. This conversion of the image data for the Viewer requires the
PanoramaStudio application. Existing (panoramic) images can be imported into PanoramaStudio using
the command File→Import/Export→Import panoramic image... and can be exported for the Viewer
thereupon. PanoramaStudio creates fully automated optimized image data for the Viewer.

3 Embedding the Viewer in webpages

3.1 Flash: The <object> and <embed> tag in HTML
A browser-independent and quite compact solution for embedding a Flash object in HTML offers the
following combination of the <object> and <embed> tag. PanoramaStudio also creates this HTML
snippet when creating a panorama for the Viewer. Hence you can just copy and paste this snippet to
embed a panorama into another webpage.

The PanoramaStudio Viewer itself is involved here as file panoStudioViewer.swf. All required
parameters for the description and configuration of the panorama or zoom image are contained in a
XML file. The XML file is assigned here using the FlashVars parameter ’pano=...’. The following
example has the pano parameter in the <object> and <embed> tag assigned to the parameter file
MyPanorama.xml. You find a detailed description of the structure of this XML file in chap. 4 (→ S.7).
Optionally the panorama has in its object tag with id and in its embed tag with name a labeling which
allows to control the panorama from within a webpage using JavaScript.

<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="1024" height="480" id="pano1"
codebase="http://active.macromedia.com/flash9/cabs/swflash.cab#version=9,0,28,0">
<param name="movie" value="panoStudioViewer.swf" />
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="pano=MyPanorama.xml" />
<embed src="panoStudioViewer.swf" width="1024" height="480"
type="application/x-shockwave-flash" name="pano1"
allowScriptAccess="always" allowNetworking="all" allowFullScreen="true"
FlashVars="pano=MyPanorama.xml"
pluginspage="http://www.macromedia.com/go/getflashplayer" >
</embed>
</object>

3.2 Required files for the Viewer

When you save an interactive panorama / zoom image in PanoramaStudio then it creates already all
necessary files. If you copy a panorama or upload it to a webserver ensure that you copy all of these files.
A webpage with an interactive panorama or zoom image involves, besides the HTML file, several files.
These are the Flash applet panoStudioViewer.swf, a folder containing the image data and a XML file
containing all the necessary information about the panorama and parameters on how to display the
panorama.
These files should remain together in the same folder wherever applicable. Otherwise you have to adjust
the paths in the HTML and XML file.

3.3 Controlling the Viewer with JavaScript

The PanoramaStudio Viewer can be controlled by other components from within the webpage with
JavaScript commands.
Important: For security reasons the Flash Player does not allow controlling a Flash applet located
6 3 EMBEDDING THE VIEWER IN WEBPAGES

on the local computer. This means, JavaScript commands work for the PanoramaStudio Viewer
only if it runs on a webserver or in a local folder which is explicitely enabled with the Flash se-
curity manager. You can open the Flash security manager online and add folders here: http:
//www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

The following JavaScript commands are available for the Viewer:

• void startAutoPlay()
Starts the Auto Play.

• void stopAutoPlay()
Stops the Auto Play.

• void toggleHotspots()
Shows/Hides the hotspots.

• void setAutoPlay(double autoPanRate,double autoTiltRate,double autoZoomRate)

Sets the parameters for the Auto Play. The value in autoPanRate pans the panorama horizontally
by this amount in degrees per second, autoTiltRate tilts the panorama (degrees/second) and
autoZoomRate is for automatic zooming in and out. Values less than 1.0 do a zoom in, values
bigger than 1.0 do a zoom out.
If the content is a Zoom Image the parameters for autoPanRate and autoTiltRate are expected
as the speed in x and y direction in parts of the image width/height (i.e. 0.01 for autoPanRate
induces a movement of 1 percent per second of the image width to the right).

• void showToolbar()
Shows the toolbar in the Viewer window.

• void hideToolbar()
Hides the toolbar.

• void setView(double pan,double tilt,double hfov)

Sets the viewing direction in the panorama to the angles pan and tilt as well as the horizontal
field-of-view to the value hfov.

• void setPlanarView(double x,double y,double zoom)

Sets the view for a planar zoom image. The (x,y) position is expected as normalized width/heigth
(i.e. 0.5 and 0.5 for the center of the image). The zoom parameter set to 0 shows the image
completely zoomed out. Set to 1 it shows the image in original size.

• boolean isPlaying()
Checks, if the Auto Play is active.

• void openPanorama(String filename,String cmd,boolean blend,double blendTime)

Opens another panorama in the same Viewer window. For that purpose the parameter filename
must contain the name of a XML parameter file.
The parameters cmd, blend, and blendTime are optional. With blend set to ’true’ the Viewer
fades smoothly into the new panorama. The duration of the fade in seconds can be set using
blendTime.
The cmd parameter supports a simple list of commands to set the field-of-view for the new
panorama. For that purpose you can set for a 3D panorama the parameters view.pan, view.tilt,
and view.hfov. For 2D zoom images you have the parameters view.x, view.y, and view.zoom
(please see also the functions setView and setViewPlanar ).
As an example let’s assume we want to open a panorama with a view in the direction 100 degrees
horizontally, 5 degrees vertically and a field-of-view of 45 degrees. MyPanorama is the name/id of
the <object>/<embed> tag:

<a href=# onClick="document.MyPanorama.openPanorama(’Panorama2.xml’,

’view.pan=100.0; view.tilt=5.0; view.hfov=45; ’);">Open next panorama</a>
 7

JavaScript examples

Two more examples:

A start and stop button for the Auto Play function. MyPanorama is the name and id of the
<object>/<embed> tag (as in chap. 3.1 (→ S.5)).
<INPUT type="button" value="Play" onClick="document.MyPanorama.startAutoPlay();">
<INPUT type="button" value="Stop" onClick="document.MyPanorama.stopAutoPlay();">

A more complex example of a combined play/pause button.

<INPUT type="button" value="Play/Pause" onClick="

if (document.MyPanorama.isPlaying())
document.MyPanorama.stopAutoPlay();
else document.MyPanorama.startAutoPlay();
">

Here is an example of a JavaScript action on an <a href> tag. The Auto Play direction will be changed
here: <a href=# onClick="document.MyPanorama.setAutoPlay(-2.0,-1.0,1.0);">Change direction</a>

4 Parameters reference
4.1 Overview
All parameters regarding the properties of the panorama and the appearance of the Viewer are stored in
a XML file.
The structure of the XML file for a Viewer panorama contains the XML declaration followed by the
<panoramaStudioViewer> element with a version attribute which must be 3.0 for the current version.
The XML declaration contains the XML version and the character encoding. For the PanoramaStudio
Viewer this must be:

<?xml version="1.0" encoding="UTF-8" ?>

All required parameters are specified within the <panoramaStudioViewer> element. Each parameter is
a XML element itself. Here is a list of all valid child elements of the <panoramaStudioViewer> element:

<?xml version="1.0" encoding="UTF-8" ?>

<panoramaStudioViewer version="3.0">

<image [attributes] > ... </image>

<settings [attributes] />
<quality [attributes] />
<view [attributes] />
<camera [attributes] />
<hotspots [attributes] />
<hotspot[attributes] > ... </hotspot>
<lensflare [attributes] />
<progress [attributes] />
<key> ... </key>
<sound [attributes] />
<logo [attributes] > ... </logo>
<control [attributes] />
<autoplay [attributes] />
<border [attributes] />
<toolbar [attributes] > ... </toolbar>
<textbox [attributes] />
<addon [attributes] />
<include [attributes] />

</panoramaStudioViewer>
8 4 PARAMETERS REFERENCE

4.2 XML elements

<image>

Specification of the image data. The <image> element and the image data should be created automati-
cally using the PanoramaStudio application. You should not edit or change this section.

Attributes:

• projection - [String], Type of the image projection

valid entries: ’spherical’,’cylindrical’,’cubic’,’planar’
’planar’ shows the panorama or image as flat zoom image. ’spherical’, ’cylindrical’, and
’cubic’ show the image data according to this projection type as 3D panorama.
• multilevel - [Boolean], true, if the <image> element contains multiple resolutions, else false.

• baseindex - [Integer], base index of the image tile numbering

Sub-elements:
• <bitmap> - image data of the panorama or zoom image. If multilevel=’true’ then the Viewer
expects multiple bitmap elements of the image in different resolutions.
Attributes:
– width - [Integer], width of the overall image for this bitmap element
– height - [Integer], height of the overall image for this bitmap element
– tilesize - [Integer], width/height of an image tile in this bitmap element, if the image is
split up in tiles.
– src - [String]. URL of a JPG image file or a template for a series of JPG image tiles. If the
image is split up in tiles, then %x and %y is used as placeholder for the x and y coordinates
in the URL of the image tile. Leading zeros i.e. for a three digit number are expressed with
%00x.
Example:
<bitmap width=’22705’ height=’7918’ tilesize=’841’
src=’pano1/pano1.tiles/l4 %0y %0x.jpg’/>

Sub-elements of bitmap:
– <left>, <right>, <front>, <back>, <up>, <down> - In a cubic panorama the
bitmap element expects the six cube faces in this sub-elements. The src attribute contains
the image file name or the template for the image tiles as otherwise in the src attribute of
the bitmap element. width and height in the parent bitmap element must be identical and
describe the size of a cube face.
• <preview> - Preview image
Attributes:
– src - [String], Path of a JPEG image file
– rotate - [String], For cubic panoramas the preview image must be a horizontal strip of the
six cube faces. The rotate attribute contains optionally an encoded instruction on how to
rotate the six cube faces. It must be a string of 6 characters. 0 means no rotation for that
face, 1: 90 degrees, 2: 180 degrees, 3: 270 degrees.
Example: rotate=’001122’
4.2 XML elements 9

<settings>

The settings element allows to configure the memory management and the properties for loading and
decoding images.

Attributes:

• maxdatamem - [Integer], maximum allowed cache memory for compressed JPEG image files in MB
(default: 50, min: 4, max: 500)

• maximgmem - [Integer], maximum allowed cache memory for decoded image data in MB (default:
300, min: 100, max: 1500)

• loadqueues - [Integer], maximum number of simultaneous image downloads (default: 4, min: 1,

max: 10)

• decodequeues - [Integer], maximum number of simultaneous image decoding jobs (default: 3, min:
1, max: 10)

<quality>

Options for the display quality

Attributes:

• useflash10 - [boolean], uses Flash 10, if available (default: ’true’)

• flash9quality - [Integer], sets the quality for the Flash 9 mode. Levels: 0: lowest quality/fastest,
1: low, 2: medium, 3: high, 4: dynamic (default: 1)

<view>

Sets the initial view for the panorama or zoom image

Attributes:

• pan - [Number], horizontal viewing direction in the panorama in degrees (default: 0)

• tilt - [Number], vertical viewing direction in the panorama in degrees (default: 0)

• hfov - [Number], horizontal field-of-view in the panorama in degrees (default: 90)

• x - [Number], horizontal position of the viewer in a zoom image in the range of 0 (left) to 1 (right)
(default: 0.5)

• y - [Number], vertical position of the viewer in a zoom image in the range of 0 (top) to 1 (bottom)
(default: 0.5)

• zoom - [Number], zoom setting for zoom images. A value of 0 shows the image completely zoomed
out, a value of 1 shows the image in its original size (default: 0)

• mode - [String], mode for zoom images, fillWindow: the image can be zoomed out as far as it
still fills the window or fitInWindow: The image can be zoomed out until it fits completely in the
window (default: ’fitInWindow’)
10 4 PARAMETERS REFERENCE

<camera>

Camera properties. Limits the minimum and maximum zoom allowed. Defines the covered field-of-view
for partial panoramas.

Attributes:
• minpan - [Number], the left boundary of the panoramic image in degrees (default: 0)
• maxpan - [Number], the right boundary of the panoramic image (default: 360)
• mintilt - [Number], the upper boundary of the panoramic image (default: -90)
• maxtilt - [Number], the lower boundary of the panoramic image (default: 90)
• minhfov - [Number], minimum horizontal field-of-view. This limits the maximum magnification
(default: 0.000000001)
• maxhfov - [Number], maximum horizontal field-of-view (default: 140)
• maxzoom - [Number], maximum possible magnification of the image pixels (alternative to the
parameter minhfov) (default: 10)

<hotspots>

Properties of the hotspots

Attributes:
• visible - [Boolean], if set to true the hotspots are always visible, else only if the mouse cursor
hovers over a hotspot (default: ’true’)

<hotspot>

Describes a hotspot in the panorama or zoom image

Attributes:
• href - [String], Destination URL. Valid URLs are webpages or another panorama using the XML
parameter file as URL (see also target)
• target - [String], HTML target. If using the keyword myself here, then the href attribute expects
a XML parameter file of another panorama which will be opened in the same Viewer window, else
this attribute has the same meaning as in HTML.
• targetview - [String], command list, which allows setting an initial view for the new panorama
(read also cmd in openPanorama in chap. 3.3 (→ S.5) )
• transition - [String], command list, where you can configure a transition effect when open-
ing another panorama. Specification using an example: ’zoomin,1.0 ; blend,2.0’ Here the
zoomin,1.0 initiates a zoom on the clicked hotspot within a period of 1.0 seconds, following a fade
into the new panorama (blend) within 2.0 seconds.
• path - [String], path specifying a polygon hotspot. path contains a closed polygon of coordinates
using the notation ’x1, y1 ; x2 ,y2 ; x3, y3, ....’. You can easily create such polygon hot-
spots using the hotspots tool in PanoramaStudio.
4.2 XML elements 11

• position - [Number,Number], position of a bitmap hotspot (see unit).

• unit - [String], unit of the coordinates in the path attribute and in the position attribute. Valid
entries: pix, for pixel coordinates, deg, for coordinates in degrees, norm for normalized values in
the range from 0 to 1. For cubic panoramas the entry pix is not allowed, for planar zoom images
the entry deg is not allowed.
• bitmap - [String], URL of an image file used as bitmap hotspot (JPG, GIF, PNG).
• bitmapscale - [Number;Number(optional)], scale affects the size of a bitmap hotspot in the default
state and when the mouse is hovering over the hotspot, i.e. ’1.0;1.2’ to enlarge the hotspot by
20 percent when the mouse hovers over the hotspot.
• displaytext - [String], display mode for the tooltip. ’permanent’ shows the tooltip permanently,
’onhoverstatic’ shows the tooltip on a fixed position when the mouse hovers over the tooltip,
’onhoverfollow’ shows the tooltip when the mouse hovers over the hotspot attached to the mouse
cursor.
• fillcolor - [Integer;Integer(optional)], color of the hotspot area in the normal state and when
the mouse hovers over the hotspot. As notation for the color you can use hexadecimal or HTML
style. Example: fillcolor=’0xff0000;0xffff00’ or fillcolor=’#ff0000;#ffff00’
• fillalpha - [Number;Number(optional)], transparency for the polygon hotspot area in normal
state and when the mouse hovers over the hotspot. Allowed values are in the range between 0.0
(completely transparent) and 1.0 (opaque). Example: fillalpha=’0.5;0.7’
• linecolor - [Integer;Integer(optional)], the same as fillcolor for the border of a polygon hotspot.
• linealpha - [Number;Number(optional)], the same as fillalpha for the border of a polygon
hotspot.
• linethickness - [Number;Number(optional)], thickness of the border line around a polygon
hotspot in the normal state and when the mouse hovers over the hotspot.
Example: linethickness=’1.5;3’

Sub-elements:
• <textbox> - Shows a textbox element as tooltip for the hotspot (read also <textbox> element).
Only the position of the tooltip is not declared with the corresponding textbox attributes but with
the displaytext attribute of the hotspot, if a textbox is used as tooltip.

<lensflare>

An artificial lens flare in a panorama

Attributes:
• pan - [Number], horizontal position of the lens flare in degrees (min: 0, max: 360)
• tilt - [Number], vertical position of the lens flare in degrees (min: -90, max: 90)
• type - [Integer], type of the lens flare. There are 7 pre-defined types (min: 0, max: 6)
• brightening - [Number], brightening of the scene if the view is directed to this light source (default:
0.8, min: 0, max: 1)
• scale - [Number], size of the glares for this lens flare (default: 1, min: 0.1, max: 10)

<progress>

Progress indicator while loading image data for the panorama or zoom image
12 4 PARAMETERS REFERENCE

Attributes:
• type - [String], type of the indicator, valid entries are ’textOnly’: progress is displayed as text-
only, ’progressBar’: progress bar with text, ’progressIndicator’: circular progress indicator
with text.
• showtext - [Boolean], if ’true’, progressBar and progressIndicator have an additional text
displaying the status, ’false’ otherwise (default: ’true’)
• text - [String], if defined, this replaces the default text of the progress indicator. As placeholder
%d is used for the progress in percent. The string can be formatted using some basic HTML tags
(read also HTML-formatted text in Viewer text fields).
Example: text=’{i}Loading: %d%{/i}’
• style - (see style attribute)
• filters - (see filters attribute)
• align - (see align attribute)
• xoff - (see xoff attribute)
• yoff - (see yoff attribute)

<key>

Element containing the license key. A license key is necessary if the Viewer is used on a commercial
website. Please read the license conditions for more information regarding the commercial use of the
Viewer. Example:
<key>123456789</key>

<sound>

The PanoramaStudio Viewer allows embedding a MP3 sound file.

Attributes:
• src - [String], URL of a MP3 file
• loop - [Boolean], play sound file in an infinite loop (default: ’true’)
• directional - [Number], if defined, this attribute allows to place the source of the sound on a
certain direction in the panorama so that is plays from this direction. As source direction you can
set the horizontal angle in degrees (default: 0, min: 0, max: 360).

<logo>

The <logo> element allows to insert an own logo replacing the Viewer logo, if the Viewer runs on the
local computer or online with a license for commercial use (see <key>)

Attributes:
• src - [String], URL of a logo image file (GIF, PNG, or JPEG).
• href - [String], target URL of the webpage opened when the logo is clicked.
• target - [String], HTML target.
• align - (see align attribute )
• xoff - (see xoff attribute )
• yoff - (see yoff attribute )
4.2 XML elements 13

Sub-elements:

– <textbox> - Shows a textbox element as tooltip for the logo (see <textbox> element). Only
the position of the tooltip can not be declared with the corresponding textbox attributes but
is always attached to the mouse when the mouse hovers over the logo.

<control>

Configures the mouse properties

Attributes:

• mousemode - [String], control mode. Valid entries: ’move’, the camera pans in the direction the
mouse is moved. ’drag’ the image/panorama can be dragged with the mouse.

• mousemass - [String], mouse mass (only if mousemode=’move’). With the mouse mass you can
assign inertia to the mouse actions. This allows smooth acceleration and deceleration when panning
the camera with the mouse. (default: 0.5, min: 0.1, max: 2.0)

• mousesensitivity - [String], with the mouse sensitivity (only if mousemode=’move’) you can
affect the force and velocity of the camera movements initiated by mouse interactions. (default:
1.2, min: 0.1, max: 2.0)

<autoplay>

Parameters regarding the Auto-Play.

Attributes:

• status - [String], valid entries: ’on’ or ’off’ to switch the Auto-Play on or off.

• pan - [Number], for panoramas, horizontal panning speed in degrees per second (values <0 to the
left, values >0 to the right).

• tilt - [Number], for panoramas, vertical panning speed in degrees per second (values <0 to the
top, values >0 to the bottom).

• x - [Number], for zoom images, horizontal scrolling speed in parts of the image width per second
(values <0 to the left, values >0 to the right).

• y - [Number], for zoom images, vertical scrolling speed in parts of the image height per second
(values <0 to the top, values >0 to the bottom).

• zoom - [Number], zoom in or zoom out. Values less than 1.0 perform a zoom in, values bigger than
1.0 perform a zoom out.

• restart - Restart of the Auto-Play after an interruption due to an user interaction in seconds
(default: 5.0, min: 0, max: 1000)

<border>

Draws a small border around the panorama.

14 4 PARAMETERS REFERENCE

Attributes:
• visible - [Boolean], show border (default: ’false’)
• color - [Integer], border color in hexadecimal or HTML notation.

<toolbar>

Shows a toolbar with buttons to navigate and to switch the Auto-Play and Hotspots on/off. Besides
a number of predefined designs and layouts the toolbar is also fully configurable with own layouts and
designs. Therefore it has a lot of attributes which allow modifying the look of the toolbar in nearly every
detail.

Attributes:
• visible - [Boolean], shows the toolbar. (default: ’true’)
• layout - [Integer], selection of three different default layouts for the buttons (default: 0, min: 0,
max: 2)
• design - [Integer], selection of 14 different predefined designs for the buttons of the toolbar (default:
0, min: 0, max: 13)
• filters - (see filters attribute)
• fullscreenbutton - [Boolean], shows a button in the toolbar to toggle the fullscreen mode (default:
’true’)
• playbutton - [Boolean], shows a button to start/stop the Auto Play (default: ’true’)
• hotspotsbutton - [Boolean], shows a button in the toolbar to show/hide the hotspots in the
panorama (default: ’true’)
• buttonwidth - [Integer], width of the buttons in pixels (default: 32, min: 8, max: 256)
• buttonheight - [Integer], height of the buttons in pixels (default: 28, min: 8, max: 256)
• buttonrounded - [Integer], draw the buttons with rounded edges (default: 10, min: 0, max: 256)
• tweentime - [Number], duration of the transition between the button states (normal, onHover,
and onMouseDown) (default: 0.3, min: 0, max: 10)
• fillcolor - [String], attribute for the fill color of the buttons. This can be a directed color gradient
for each of the button states normal, onHover, and onMouseDown. The enumeration of the states
is split with a semicolon, where the last two states are optional. For each state the color or color
gradient is described within [] brackets. Colors are specified in hexadecimal or HTML notation,
followed by an optional direction parameter for the direction of the gradient. In a color gradient
the colors will be uniformly distributed. Example for a gradient with two color in each of the three
states:
fillcolor=’[#222277,#47c4ee],90; [#4444cc,#69cdee],90 ; [#4444ff,#a0e7ff],90’
• fillalpha - [String], enumeration of the transparency of the fill color for the buttons in the three
states. 0 is completely transparent, 1 opaque. Example:
fillalpha=’0.5 ; 0.7 ; 1.0’
• linecolor - [String], this is the attribute for the border colors of the buttons. These can be
optionally directed color gradients as in fillcolor. See also fillcolor
• linealpha - [String], transparency of the border color of the buttons, the same as fillalpha is
for the inside area of the buttons.
• linethickness - [String], defines the line thickness of the border around the buttons. It is an
enumeration of the three button states split with semicolons. Example:
linethickness=’1.5 ; 2.0 ; 2.0’
4.2 XML elements 15

• shapecolor - [String], defines the color of the symbols on the buttons in the three possible button
states. These can be directed color gradients optionally. See also fillcolor

• shapealpha - [String], transparency of the symbols on the buttons, same as fillalpha is for the
button area.

• align - (see align attribute )

• xoff - (see xoff attribute )

• yoff - (see yoff attribute )

Sub-elements:

– <customlayout> / <button> - enables youu to create layouts with own arrangements of

toolbar buttons. Within the <customlayout> element an enumeration of <button> elements
define the buttons of a custom toolbar.
Attributes of <button>:
∗ type - [Integer], type of the button. Valid entries: 0: zoom in button, 1: zoom out, 2:
pan left, 3: pan right, 4: pan up, 5: pan down, 6: play/pause, 7: toggle fullscreen, 8:
show/hide hotspots, 9: navigation panel, 10: zoom slider
∗ idx - [Integer], assigns an index to a button. The buttons are arranged relative to each
other starting with the index 0.
∗ position - [Integer], Arrangement of the button relatively to its predecessor (see idx).
Valid entries: 0: left, 1: right, 2: above, 3: below the predecessor.
∗ indent - [Boolean], it is possible for a layout that designated buttons are not visible
(i.e. the hotspots button, if there are no hotspots in the panorama). Because of the
relative arrangement of the buttons in a layout, you can declare that a button takes the
position of its predecessor if the predecessor is not visible or that the button is placed
on its designated position. In the following example all buttons following the fullscreen
button (type=’7’) are not indented but fill the free space if the fullscreen button is not
visible. (default: ’true’)
∗ xoff - [Integer], horizontal offset of the button position.
∗ yoff - [Integer], vertical offset of the button position.
Example, declaration of the predefined layout 0:

<customlayout>
<button idx=’0’ type=’7’ position=’-1’ />
<button idx=’1’ type=’8’ position=’1’ xoff=’4’ yoff=’0’ indent=’false’/>
<button idx=’2’ type=’2’ position=’1’ xoff=’4’ yoff=’0’ />
<button idx=’3’ type=’3’ position=’1’ xoff=’4’ yoff=’0’ />
<button idx=’4’ type=’4’ position=’1’ xoff=’4’ yoff=’0’ />
<button idx=’5’ type=’5’ position=’1’ xoff=’4’ yoff=’0’ />
<button idx=’6’ type=’0’ position=’1’ xoff=’4’ yoff=’0’ />
<button idx=’7’ type=’1’ position=’1’ xoff=’4’ yoff=’0’ />
<button idx=’8’ type=’6’ position=’1’ xoff=’4’ yoff=’0’ />
</customlayout>

<textbox>

The <textbox> element for displaying text is used amongst others as tooltip for the hotspot and
<logo> element, but can also be used directly for displaying text in the panorama.
16 4 PARAMETERS REFERENCE

Attributes:
• text - Contains the (HTML formatted) text. See also 4.4.
• style - (see style attribute )
• filters - (see filters attribute )
• alpha - [Number], transparency of the textbox, 0: completely transparent, 1: opaque (default: 1.0,
min: 0.0, max:1.0)
• background - [Boolean], show text in front of a background (default: ’false’)
• backgroundcolor - [Integer], background color in hexadecimal or HTML notation.
• width - [String], fixed width for the textbox, even if the text is just one line which is smaller than
this width. Valid entries in percent (%) or pixels (px). Example:
width=’33%’
width=’250px’

• maxwidth - [String], if width is not defined, you can define with maxwidth a maximum width.
Especially for a single-line text with background which is smaller than maxwidth the width of the
textbox will be adjusted. For longer texts maxwidth causes an automatic line break. Valid entries
in percent (%) or pixels (px). Example:
maxwidth=’33%’
maxwidth=’250px’

• align - (see align attribute )

• xoff - (see xoff attribute )
• yoff - (see yoff attribute )

<include>

<include> allows including further XML parameter files. An include file has the same structure than
the main XML. Within the <panoStudioViewer> element you can declare properties and elements to
configure the currently displayed panorama. This allows to store settings and parameters used by several
panoramas into one external include file (i.e. custom toolbars).

Attributes:
• src - [String], URL of an include file

<addon>

(not yet documented)

4.3 All-purpose attributes

Some attributes can be used for several XML elements:

• style - [String], elements like <progress> and <textbox> allow formatting the displayed text
using a subset of CSS. Therefore you have the following CSS properties: color, font-color,
font-family, font-size, font-style, and text-align. A complete list and documentation can
be found here: http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/
text/StyleSheet.html
You can assign CSS properties in the style attribute either globally or even for individual tags.
4.4 HTML-formatted text in Viewer text fields 17

Example 1:
style=’color: #00ffff; font-family: Arial,Helvetica,sans-serif;
font-size: 15px; font-weight: normal; display: inline’
Example 2:
style=’body {color: #ffffff; font-family: Arial,Helvetica,sans-serif;
font-size: 10px; font-weight: normal; display: inline; } p { font-size:20; }
’
• filters - [String], some elements like <progress>, <toolbar>, and <textbox> allow applying
some visual effects using a set of filters. You can apply a combination of multiple filters. The
specification is written as a enumeration of the filter name followed by an array of optional
parameters. More filters can follow after a semicolon. The syntax has the notation filtername1,
param1, param2, ... ; filtername2, param1, param2, ... ; ...
As filters you have: glow, blur, dropshadow und bevel. The filters are identical to the correspon-
dent filters in the Flash API. The optional parameters are also identical to the parameters in the
constructors of these filters:
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/filters/
GlowFilter.html
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/filters/
BlurFilter.html
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/filters/
DropShadowFilter.html
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/filters/
BevelFilter.html

Example:
filters=’glow, 0x0000ff ,1,2.0,2.0,3,1 ; glow,0,0.5,6.0,6.0,1,1 ; dropshadow’
• align - [String], Alignment of an element in the window, possible values left, top, right, bottom,
lefttop, leftbottom, righttop, rightbottom, and center
• xoff - [Integer], offset to the left (<0) or to the right (>0)
• yoff - [Integer], offset to the top (<0) or to the bottom (>0)

4.4 HTML-formatted text in Viewer text fields

Strings, especially in the <textbox> element, can be formatted with some of the basic HTML tags and
attributes. Since the HTML tag brackets < and > cannot be used just like that for that purpose within
the XML, these brackets are substituted here with { and }. For example, the opening italic tag is {i}.
The { and } brackets itself can be used with a \ put in front.
The available HTML tags include <b>, <i>, <u>, <p>, <br>, <font>, <li>, <img>, <span>,
<textformat>. The <a> tag is not supported by the Viewer.
A detailed description can be found here:
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.
html#htmlText

Example:

text="{b}{font color=’#ff0000’ size=’15px’}Lorem ipsum dolor sit amet{/font}{/b},

{p}
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.{/p}
{p}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.{/p}"