PanoSalado configuration

This page presents examples of *.xml configuration file structure. All configurations were tested with files compiled from r136 release (Feb 10, 2009), older releases may alter slighlty. Invalid configuration is most often couse of PanoSalado disfunction. Use xml editor to ensure valid *.xml file structure.
ModuleLoader.swf can obtain settings either by naming configuration file as "PanoSalado.xml" and placing it in the same directory as ModuleLoader.swf, or by setting file path as argument to ModuleLoader.swf (ModuleLoader.swf?xml=path/to/configuration/file.xml). Direcories of files mentioned in configuration file are relative to ModuleLoader.swf
All listed examples are avible to download: PanoSalado configuration Examples 1.0

List of sample configurations

• Basic single panorama configuration
• Travelling between two panoramas
• Creating low resolution previews
• Animated Transitions
• Attribute inheritance
• Full configuration example

Basic single panorama configuration

<?xml version="1.0" encoding="utf-8"?>
<PanoSalado>                    
    <layer id="Meter" url="plugins/PanoSaladoLoadMeter.swf" depth="1"/>
    <layer id="PanoSalado" url="PanoSalado.swf" depth="0" >        
        <spaces onStart="loadSpace:space1">    
            <space id="space1">
                <sphere id="dark_blue_room_pano_preview">                    
                    <file>images/dark_blue/dark_blue_prev.jpg</file>
                </sphere>                
            </space>                    
        </spaces>    
    </layer>
</PanoSalado>   

• PanoSalado node is root of xml tree.
• First layer node contains module that visualizes loading progress. Its depth value is higherst, so it is displayed most ontop
• Second layer node contains PanoSalado application. It should have lowest value of depth attribute, so it would be displayed under other layers
• Panosalado layer has one mandatory child node (spaces) and this child at has least one child node describing single panorama (space)
• spaces node has one mandatory argument onStart, that determines commands executed after launching application
• space node has children describing 3D objects. See PanoSalado 3D objects
• Every 3D object has file node children (one or more) pointing at files used for texturing those objects
• This configuration has no advanced settings. Ther is much to add for better looks, faster performance and more functionality. Nodes: spaces, space, sphere and file can have additional attributes. See PanoSalado XML Schema.txt

Travelling between two panoramas

<?xml version="1.0" encoding="utf-8"?>
<PanoSalado>  
    <layer id="Meter" url="plugins/PanoSaladoLoadMeter.swf" depth="1"/>
    <layer id="PanoSalado" url="PanoSalado.swf" depth="0">
        <spaces onStart="loadSpace:space1">
            <space id="space1" transition="removeLastSpace">
                <sphere id="dark_blue_pano_preview">
                    <file>images/dark_blue/dark_blue_prev.jpg</file>
                </sphere>            
                <hotspot id="hotspot1" 
                    useOwnContainer="true" 
                    useHandCursor="true" 
                    pan="90"
                    tilt="0"
                    onClick="loadSpace:space2"
                >
                    <file>graphics/hotspot.png</file>
                </hotspot>            
            </space>
            <space id="space2" transition="removeLastSpace">
                <cube id="dark_blue_pano">
                    <file face="front">images/dark_blue/wall.jpg</file>
                    <file face="right">images/dark_blue/door.jpg</file>
                    <file face="back">images/dark_blue/wall.jpg</file>                    
                    <file face="left">images/dark_blue/elevator.jpg</file>
                    <file face="top">images/dark_blue/ceiling.jpg</file>
                    <file face="bottom">images/dark_blue/floor.jpg</file>    
                </cube>
            </space>        
        </spaces>
    </layer>
</PanoSalado>  

• In this case PanoSalado layer contains two panoramas: space1 and space2
• First space loaded after launching application is one specified in onStart value command - space1
• When space1 is done loading it executes values of transition attribute and removes previous space. Here there is no space previuos to space1, and removeLastSpace is not nesseserily in this case, but it is good practice to execute removeLastSpace in transitions.
• space1 has two children: sphere for displaying spherical panorama and one hotspot
• hotspot1 has onClick attribute - its value determines action taken after hotspot is clicked. Avaible actions taken after interaction with mouse are described at PanoSalado public functions
• When space2 is done loading it executes values of transition attribute and removes space1
• Attributes inside hotspot (useOwnContainer, useHandCursor, pan, tilt) are not mandatory, their values are overriding defualt values described in PanoSalado XML Schema.txt

Creating low resolution previews

<?xml version="1.0" encoding="utf-8"?>
<PanoSalado>  
    <layer id="Meter" url="plugins/PanoSaladoLoadMeter.swf" depth="1"/>
    <layer id="PanoSalado" url="PanoSalado.swf" depth="0">
        <spaces onStart="loadSpace:space1.preview">
            <space id="space1.preview" transition="loadSpace:space1;removeLastSpace">
                <sphere id="dark_blue_pano_preview">
                    <file>images/dark_blue/dark_blue_prev.jpg</file>
                </sphere>                            
            </space>
            <space id="space1" transition="removeLastSpace">
                <cube id="dark_blue_pano">
                    <file face="front">images/dark_blue/wall.jpg</file>
                    <file face="right">images/dark_blue/door.jpg</file>
                    <file face="back">images/dark_blue/wall.jpg</file>                    
                    <file face="left">images/dark_blue/elevator.jpg</file>
                    <file face="top">images/dark_blue/ceiling.jpg</file>
                    <file face="bottom">images/dark_blue/floor.jpg</file>    
                </cube>
            </space>        
        </spaces>
    </layer>
</PanoSalado>  

• When space1.preview is done loading it executes commands described in transition attribute value, one after another. First it starts loading space1, and when it is done loading it removes space previous to space1.preview (Again, no such space here)
• When space1 is done loading it executes transition value command and removes space1.preview
• In this case space1.preview may not be seen, because when images are cached by browser space1 is immediately done loading

Animated Transitions

Using tween

 <?xml version="1.0" encoding="utf-8"?>
<PanoSalado>  
    <layer id="Meter" url="plugins/PanoSaladoLoadMeter.swf" depth="1"/>
    <layer id="PanoSalado" url="PanoSalado.swf" depth="0">
        <spaces onStart="loadSpace:space1.preview">
            <space id="space1.preview" 
                transition="tween:currentSpace.viewport.alpha from 0 over 1.5 seconds using Expo.easeInOut than do onTransitionEnd"                 
                onTransitionEnd="loadSpace:space1;removeLastSpace"                
            >        
                <sphere id="dark_blue_pano_preview">
                    <file>images/dark_blue/dark_blue_prev.jpg</file>
                </sphere>                            
            </space>
            <space id="space1" 
                transition="tween:currentSpace.viewport.alpha from 0 over 1.5 seconds using Expo.easeIn than do onTransitionEnd"                 
                onTransitionEnd="removeLastSpace"              
            >
                <cube id="dark_blue_pano">
                    <file face="front">images/dark_blue/wall.jpg</file>
                    <file face="right">images/dark_blue/door.jpg</file>
                    <file face="back">images/dark_blue/wall.jpg</file>                    
                    <file face="left">images/dark_blue/elevator.jpg</file>
                    <file face="top">images/dark_blue/ceiling.jpg</file>
                    <file face="bottom">images/dark_blue/floor.jpg</file>    
                </cube>
            </space>        
        </spaces>
    </layer>
</PanoSalado>  

• transition in space1.preview makes space1.preview fade in when it is loaded, after fading is done it starts loading space1, and when space1 is loaded it removes previous space (Again, no such space here)
• transition in space1 makes space1 fade in when it is loaded, and after fading is done it removes space1.preview
• tween function is described at PanoSalado public functions
• onTransitionEnd attribute is not interpreted automatically like transition attribute - it has to be executed manually. Also, it can be named arbitrarily as long as it will be pointed at

Using tweenXML

<?xml version="1.0" encoding="utf-8"?>
<PanoSalado>  
    <layer id="Meter" url="plugins/PanoSaladoLoadMeter.swf" depth="1"/>
    <layer id="PanoSalado" url="PanoSalado.swf" depth="0">
        <spaces onStart="loadSpace:space1.preview">    
            <space id="space1.preview" 
                transition="tweenXML:tween1"
                onTransitionEnd="loadSpace:space1;removeLastSpace"                
            >        
                <sphere id="dark_blue_pano_preview">
                    <file>images/dark_blue/dark_blue_prev.jpg</file>
                </sphere>                            
            </space>
            <space id="space1" 
                transition="tweenXML:tween1"                 
                onTransitionEnd="removeLastSpace"              
            >
                <cube id="dark_blue_pano">
                    <file face="front">images/dark_blue/wall.jpg</file>
                    <file face="right">images/dark_blue/door.jpg</file>
                    <file face="back">images/dark_blue/wall.jpg</file>                    
                    <file face="left">images/dark_blue/elevator.jpg</file>
                    <file face="top">images/dark_blue/ceiling.jpg</file>
                    <file face="bottom">images/dark_blue/floor.jpg</file>    
                </cube>
            </space>        
        </spaces>
        <tweens>
            <tween id="tween1"
                target="currentSpace.viewport"
                property="alpha"
                direction="from"
                endValue="0"
                time="1.5"
                easeClass="Expo"
                easeFunction="easeInOut"
                onComplete="onTransitionEnd"
            />                    
        </tweens>
    </layer>
</PanoSalado>  

• Actions are same as ones performed in "Using tween"
• tweenXML function is described at PanoSalado public functions

Attribute inheritance

<?xml version="1.0" encoding="utf-8"?>
<PanoSalado>                   
    <layer id="Meter" url="plugins/PanoSaladoLoadMeter.swf" depth="1"/> 
    <layer id="PanoSalado" url="PanoSalado.swf" depth="0" >        
        <spaces onStart="loadSpace:space1"         
            attribute1="toggleFullscreen"
            attribute2="toggleFullscreen"
            attribute3="toggleFullscreen"    
        >    
            <space id="space1"            
                attribute2="toggleAutorotator"
                attribute3="toggleAutorotator"                
            >
                <sphere id="dark_blue_room_pano">                    
                    <file>images/dark_blue/dark_blue_prev.jpg</file>
                </sphere>
                <hotspot id="hotspot1" 
                    useOwnContainer="true" 
                    useHandCursor="true" 
                    pan="90"
                    tilt="0"                                        
                    attribute3="tween:hotspot1.rotationX to 360 over 1.5 seconds using Expo.easeIn"
                    
                    onClick="attribute1"                    
                    onOver="attribute2"
                    onOut ="hotspot1.attribute3"                    
                >
                    <file>graphics/hotspot.png</file>
                </hotspot>            
            </space>                    
        </spaces>    
    </layer>
</PanoSalado> 

• Clicking on hotspot will couse value of attribute1 from spaces node to be executed
• Mouse over hotspot wil couse value of attribute2 from parent space node to be executed
• Mouse out of hotspot will couse value of attribute3 from hotspot node to be executed
• Each space node can inherit attributes of same name from spaces node and override them if nesseserily.
• 3D objects (sphere, hotspot ect.) can also inherit attributes of same name first from parent space, then if none is specified, from spaces node. However they cannot override them. To use attribute from e.g. hotspot, attribute needs to be specified to which 3D object it belongs.

Full configuration example

<?xml version="1.0" encoding="utf-8"?>
<PanoSalado>                    
    <layer id="Meter" url="plugins/PanoSaladoLoadMeter.swf" depth="2" />    
    <layer id="Interface" url="plugins/layout_7.swf" depth="1">
        <style url="plugins/css_minimini_BR_styl.swf"/>
    </layer>
    <layer id="PanoSalado" url="PanoSalado.swf" depth="0" >        
        <spaces
            onStart="loadSpace:light_red.preview"                        
            
            cameraRetainsLastValues="true" 
            cameraZoom="10"
            cameraFocus="100"
            cameraZoomIncrement="0.2"
            cameraKeyIncrement="120"
            cameraSensitivity="20"
            cameraFriction="0.125"
            cameraRestThreshold="0.0001"
            cameraMinimumZoom="5"
            cameraMaximumZoom="15"            
            
            autorotator="true"
            autorotatorDelay="15000"
            autorotatorRestartDelay="15000"
            autorotatorIncrement="0.25"
            
            dynamicQualityAdjustment="false"
            stageQuality="high"                                
        >    
<!--  #########################################################-->        
            <space id="light_red.preview"   
                label="Light red room"
                interactive="false"                
                transition="tweenXML:default_tween"                 
                onTransitionEnd="loadSpace:light_red;removeLastSpace"                
            >
                <sphere id="light_red_pano_preview" rotationY="213" segments="22">                    
                    <file>images/light_red/light_red_prev.jpg</file>
                </sphere>                
            </space>                        
<!--  #########################################################-->
            <space id="light_red" 
                label="Light red room"
                interactive="true"                
                transition="tweenXML:default_tween"                 
                onTransitionEnd="removeLastSpace"                
            >
                <cube id="light_red_pano" segments="16">
                    <file face="front">images/light_red/window.jpg</file>
                    <file face="back">images/light_red/door.jpg</file>
                    <file face="right">images/light_red/wall.jpg</file>
                    <file face="left">images/light_red/window.jpg</file>
                    <file face="top">images/light_red/ceiling.jpg</file>
                    <file face="bottom">images/light_red/floor.jpg</file>                    
                </cube>                
                <hotspot id="light_red_hotspot" 
                    useOwnContainer="true"
                    useHandCursor="true"
                    pan="180" 
                    tilt="5.3"                     
                    smooth="true"                    
                    onClick="loadSpace:dark_blue.preview"
                >
                    <file>graphics/hotspot.png</file>
                </hotspot>                
            </space>            
<!--  #########################################################-->
            <space id="dark_blue.preview" 
                label="Dark blue room"
                interactive="false"                
                transition="tweenXML:default_tween"                 
                onTransitionEnd="loadSpace:dark_blue;removeLastSpace"                
            >
                <sphere id="dark_blue_pano_preview" rotationY="213" segments="22">                    
                    <file>images/dark_blue/dark_blue_prev.jpg</file>
                </sphere>                    
            </space>            
<!--  #########################################################-->
            <space id="dark_blue" 
                label="Dark blue room"
                interactive="true"                
                transition="tweenXML:default_tween"                 
                onTransitionEnd="removeLastSpace"                
            >
                <cube id="dark_blue_pano" segments="16">
                    <file face="front">images/dark_blue/wall.jpg</file>
                    <file face="back">images/dark_blue/wall.jpg</file>
                    <file face="right">images/dark_blue/door.jpg</file>
                    <file face="left">images/dark_blue/elevator.jpg</file>
                    <file face="top">images/dark_blue/ceiling.jpg</file>
                    <file face="bottom">images/dark_blue/floor.jpg</file>                    
                </cube>                
                <hotspot id="dark_blue_hotspot" 
                    useHandCursor="true"
                    pan="90" 
                    tilt="5.3"                                     
                    smooth="true"
                    useOwnContainer="true"                    
                    onClick="tweenXML:dark_blue_hotspot_tween"
                    finish="loadSpace:light_red.preview"                    
                >
                    <file>graphics/hotspot.png</file>
                </hotspot>                                            
            </space>            
<!--  #########################################################-->            
        </spaces>    
        <tweens>
            <tween id="default_tween"
                target="currentSpace.viewport"
                property="alpha"
                direction="from"
                endValue="0"
                time="1.5"
                easeClass="Expo"
                easeFunction="easeInOut"
                onComplete="onTransitionEnd"            
            />
            <tween id="dark_blue_hotspot_tween"
                target="dark_blue_hotspot"
                property="rotationX"
                direction="to"
                endValue="90"
                time="1.5"
                easeClass="Expo"
                easeFunction="easeInOut"
                onComplete="dark_blue_hotspot.finish"            
            />
        </tweens>
    </layer>
</PanoSalado>

• This is just sample configuration, It is not proven to be best one. Feel free to experiment with settings. Everything is decribed in PanoSalado XML Schema.txt
• Good configuration depends on type of panorama and quality of pictures, but it usually is matter of compromise between speed and quality
• To compare diferent types of configurations set spaces attribute statistics value to "true" and find one with best FPS