PanoModules logo

The kit of modules to create and manage interactive virtual tours on web sites

Tutorial 2. Improving the panoramic scene

In this tutorial we will improve the simple virtual tour created in Tutorial 1. Let's find folder_tutorial_1 and than rename or copy it to folder_tutorial_2.

Download complete Tutorial 2

1. Update XML files describing panoramic content.

Open the XML file amazingPano.xml in folder_tutorial_2/virtualTour1_stuff. Add following lines anywhere before </panData>:

<land>

Percent (from 0 to 100) of land height relative to full height of panoramic photo. Land height is measured from low edge of photo to horizon.

This parameter is for correct panoramic distortion.

If value is not set — 50 supposed, i.e. horizon is in the middle.

<scX>

Value of compensatory "barrel distortion". May be 0 (no distortion) or more, but it is not recommended to set it more than half of module with. If value is not set — 0 supposed.

<scY>

Value of compensatory "reversed pincushion distortion". May be 0 (no distortion) or more, but it is not recommended to set it more than half of module height. If value is not set — 0 supposed.

  <land>70</land>
  <scY>50</scY>
  <scX>30</scX>
  <hotspotsDataSource>amazingPano_hotspots.xml</hotspotsDataSource>
  

Now the file amazingPano.xml must contain the following code:

<panData>
  <namesFixedBeforeVar>amazingPano_</namesFixedBeforeVar>
  <namesVariable>1,2,3,4,5</namesVariable>
  <namesFixedAfterVar>.jpg</namesFixedAfterVar>
  <angle>360</angle>
  <land>70</land>
  <scY>50</scY>
  <scX>30</scX>
  <hotspotsDataSource>amazingPano_hotspots.xml</hotspotsDataSource>
</panData>
  

Open virtualTour1.htm and compare panoramic views before and after the compensatory distortion applying.

Before After
Horizontal lines are curved
without the compensatory distortion.
When compensatory distortion is applied,
horizontal lines are straight, as they must really be.

 

Also update the file yetAnotherPano.xml just as preceding, but with values:

  <land>40</land>
  <scY>50</scY>
  <scX>15</scX>
  

Learn more about data describing panoramic and map content...

3. Put files for hotspots into the stuff folder.

You can use any image file (jpg, gif, png) or Flash file (swf) as hotspot. Now let's use jumping.swf and arrow.png. Download them and put into the stuff folder virtualTour2_stuff.

4. Create XML file describing hotspots on the panoramic scene.

Create an XML file amazingPano_hotspots.xml.

Write the following code in it:

<hotspots>
  <elem0>
    <hintText>Test hotspot 1</hintText>
    <viewSource>jumping.swf</viewSource>
    <distorted>true</distorted>
    <azimuth>254</azimuth>
    <yPercent>16</yPercent>
  </elem0>
  <elem1>
    <loadDataSource>yetAnotherPano.xml</loadDataSource>
    <hintText>Go to another pano</hintText>
    <viewSource>arrow.png</viewSource>
    <distorted>true</distorted>
    <azimuth>264</azimuth>
    <yPercent>25</yPercent>
  </elem1>
</hotspots>
  

The file with hotspots data for any scene must be referred in the file, describing content of this scene. So the file amazingPano_hotspots.xml is referred in amazingPano.xml.

Learn more about data format for describing hotspots...

All done. Open file virtualTour1.htm in your browser.

Click on the map hotspot to load "Amazing Pano" (i.e. view of Roma). Rotate the panoramic scene to locate two hotspots. Click the "arrow" hotspot to load another panorama.

Something about PanoModules Pro features

PanoModules Pro allows you to manage content of your virtual tour visually in-place, insted of editing XML files. You can place and move hotspots by mouse, assign actions to each hotspot, tune the compensatory distortion interactively and so on.