Home » Forums » Using Flash to deliver panoramas » PanoSalado : The Open Source viewer

Basic XML structure for PanoSalado (rev 73)

OK! Smile

The below is based from revison 73 ("rev73") at the PanoSalado repository; see the PanoSalado blog for the latest exploits and updates from your intrepid VR adventurers...

This is just about the most basic XML file ("PanoSalado.xml") which you can feed to your PanoSalado ("PS" from here on out) presentation. PS will use all the default settings for panning, segments, pan, zoom, tilt, and so on, when you don't specify them in the XML.

I'm showing an example here which includes a preview image, the panorama itself, and a hotspot on the panorama. More complex XML to come will show how to add "spaces" (panoramas with or without hotspots), hotspots, interactivity, and so on.

To wit:

<PanoSalado>
        <layer id="PanoSalado" url="PanoSalado.swf?xml=PanoSalado.xml" depth="0" onStart="loadSpace:myPreview">

                <spaces>

                        <space id="myPreview" onTransitionEnd="loadSpace:myPano">
                                <sphere id="myPreviewImage">
                                        <file>images/preview.jpg</file>
                                </sphere>      
                        </space>

                        <space id="myPano">
                                <cube id="myPanoCubeFaces">
                                        <file id="front">path/to/myCubeFace_f.jpg</file>
                                        <file id="right">path/to/myCubeFace_r.jpg</file>
                                        <file id="left">path/to/myCubeFace_l.jpg</file>
                                        <file id="top">path/to/myCubeFace_u.jpg</file>
                                        <file id="bottom">path/to/myCubeFace_d.jpg</file>
                                        <file id="back">path/to/myCubeFace_b.jpg</file>
                                </cube>

                                <hotspot id="myHotspot" useHandCursor="true" pan="-20" tilt="-10">
                                        <file>graphics/hotspot.png</file>
                                </hotspot>

                        </space>

                </spaces>      

        </layer>
</PanoSalado>

So, the PS XML file is started/ended with the PanoSalado tag. Inside PanoSalado we need to put a "layer". (Geeks should note that we could have multiple layers, which would mean multiple panoramas layered on top of each other... Go have fun geeks! Smile )

Inside the layer is where the fun begins -- our panorama or "space". Our first space will be a preview image, which in the PS downloads is a grayscale equirectangular JPG, Gaussian blurred and exported out to about 50KB or so for quick download.

This preview gets its own space tag, inside which we can place its attributes. In this stripped down example, we just give it an ID or name of "myPreview", so that it can be uniquely identified with code when we need it. Since we're using an equirectangular image (which will be mapped onto a sphere for display), myPreview encloses a sphere tag, again with its own unique identifier, which then encloses a file tag; file is simply the path to our equirectangular JPG file.

The next space is our actual panorama, which is a set of cube faces. We make a new space with its own unique ID, and put a cube inside of it. Since it's a cube, we need to have 6 files for it -- down, left, right, up and so on. Make sense? Smile

Inside our panorama space, we place a hotspot. Notice here that I've included a few attributes other than the unique identifier of id: usehandCursor tells Flash to change the cursor to a hand when we mouse over the hotspot; pan and tilt tell our hotspot where to situate itself in the 3D space. (Actually, these attributes are read by PS's Actionscript code, and PS situates the hotspot properly -- but you get the idea).

After that we close all our XML element tags, and we're done. Well, almost. Up at the very top you'll have seen:

<layer id="PanoSalado" url="PanoSalado.swf?xml=PanoSalado.xml" depth="0" onStart="loadSpace:myPreview">

At the outset we're telling PS what to do when it first loads: load the space (panorama) which has an ID of myPreview. Look again at myPreview, and you'll see it has another attribute of onTransitionEnd. This tells PS what to do after preview has loaded: load the 'real' panorama, which has an ID of myPano. Cool!

There you have PanoSalado in a nutshell. Sweeeet.

Of course, the example linked to from the PanoSalado blog has a lot more going on -- multiple previews, hotspots that "do" things to the panorama, tooltips that pop up, interface buttons, yada yada yada. I'll go over most of that in a forum post near you soon, but wanted to get the basics to you.

Cheers!

__________________

Patrick Cheatham
FlashPanos.com creator, Panoramic Photographer
Got PanoSalado?

‹ Issues with PanoSalado Complete XML structure for PanoSalado (rev 73) ›

Cube pano vs Equi

Hi Patrick,

Thanks for the awesome work. I have some questions:

1) Is there a reason why the preview and the actual panos take on 2 different formats (Equi vs. Cube)? Can the actual pano be an equirectangular format as well? If so, will it affect the hotspot placements?

2) Where does one edit the roll-over text content? For both the interface buttons and the hot spots? I couldn't find it in the XML. Are these features included in the download? I couldn't get the roll-over to show up.

Regards,

Pat L

Re: Cube pano vs Equi

Hi Pat:

Thanks for the thanks!

makiedog wrote:

1) Is there a reason why the preview and the actual panos take on 2 different formats (Equi vs. Cube)? Can the actual pano be an equirectangular format as well? If so, will it affect the hotspot placements?

The actual panorama can be an equirect, cube faces, cylinder or QTVR; Cylinder/QTVR support is currently undocumented until we get it working 100%.

I used an equirect for the preview and cube faces for the panorama just to show how to use either. Using an equirectangular image should not affect hotspot placement -- but do keep us informed!

makiedog wrote:

2) Where does one edit the roll-over text content? For both the interface buttons and the hot spots? I couldn't find it in the XML. Are these features included in the download? I couldn't get the roll-over to show up.

Smile

You'll need to build your own tooltips in the "UserInterface.fla" (or your own user interface or other FLA brought in on its own layer as a SWF).

Currently (and also undocumented) we've built in a tooltip attribute in the XML; this means that your "3D" hotspots (ones that are pinned to the panorama versus being layered on top of it) will send out a special Tooltip Event which you can hook onto in your other SWFs.

We don't include the tooltips which you see in my example, because I got lazy and incorporated the Tooltip component from afcomponents.com. Much quicker to incorporate rather than building my own, and this was just before we coded PanoSalado for Tooltip Events. Smile

Cheers, and thanks for the intrest & questions --

Patrick

__________________

Patrick Cheatham
Forum Administrator

What about the simple html?

Is there somewhere a simple example/tutorial on what the html file should look like? you mention that the html should "point" to the PanoSalado.xml, but in the html file theres i no explicit mention of the name of the xml file. Also, is there somewhere a list of options for the ModuleLoader.swf ?

re: HTML embed parameters for PanoSalado & ModuleLoader

sbprzd wrote:

Is there somewhere a simple example/tutorial on what the html file should look like? you mention that the html should "point" to the PanoSalado.xml, but in the html file theres i no explicit mention of the name of the xml file. Also, is there somewhere a list of options for the ModuleLoader.swf ?

Hi there sbprzd (is that short for something? Wink ):

Not sure where I mention that the HTML should point to something, so please let me know where you saw that so I can amplify it.

ModuleLoader.as/swf & PanoSalado.as/swf both automatically look for a file named "PanoSalado.xml", if no parameter of xml is set. You can set the xml file parameter a la:

    <script type="text/javascript">
          var so = new SWFObject("ModuleLoader.swf?xml=myXMLfile.xml", "pano", "100%", "100%", "9", "#000000");        
          so.addParam("allowFullScreen","true");
          so.addParam("allowScriptAccess","sameDomain");
          //[...] other stuff here
    </script>

Note that I'm using SWFObject to handle embedding of the Flash presentation.

ModuleLoader takes the PanoSalado.xml file as its options. All ModuleLoader is doing is loading in PanoSalado.swf, and whatever other interface SWFs you want to layer on and around PanoSalado; It's just an empty container until it gets the PanoSalado.xml file. Of course, you can call PanoSalado.xml whatever you want.

See this post's follow up post, which shows you how to define different layers (one of which is PanoSalado --or, your tour's pano files and hotspots) which ModuleLoader loads in and stacks on top of each other..

Does this help?

Cheers,

__________________

Patrick Cheatham
FlashPanos.com creator, Panoramic Photographer
Got PanoSalado?

re: Embed HTML

Thanks a lot Patrick, this is clear. I was missing the option to ModuleLoader.swf

The "point at" comes from http://code.google.com/p/panosalado/

And sbprzd is just my short mnemonic I use on flickr: http://flickr.com/sbprzd/

re: Embed HTML

sbprzd wrote:

Thanks a lot Patrick, this is clear. I was missing the option to ModuleLoader.swf

The "point at" comes from http://code.google.com/p/panosalado/

And sbprzd is just my short mnemonic I use on flickr: http://flickr.com/sbprzd/

Ah, good! Thanks for pointing out my "point at". Smile

Wow, so the mnemonic isn't too short for much. Cool!

--
Be sure to check also the "complete" XML example in this forum; it shows putting 'global' settings in the spaces element, and setting segments, etc, on individual space elements.

Cheers,

__________________

Patrick Cheatham
Forum Administrator