PanoModules logo

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

Tutorial 1. First simple virtual tour

In this tutorial we will create a simple virtual tour, including a map and a panoramic module (without any decoration, panoramic compensatory distortion and other features). You can find ready files of this tutorial in the downloaded package in tutorial_1.zip. This zip does NOT contain modules files and folder JS with JavaScript files, because they included in package. To achieve quick result, unzip it and do steps 2 and 3 only.

1. Choose a folder for your virtual tour.

For example, it will be a folder with name folder_tutorial_1.

2. Put files of modules.

We are going to use the “Base” version of PanoModules. Put files module_Map_Base.swf and module_Pano_Base.swf from the PanoModules package into folder_tutorial_1.

3. Put JavaScript files.

Put the folder JS from the PanoModules package into folder_tutorial_1. The folder JS contains files swfobject.js and PanoModulesGroup.js.

Learn more about SWFObject...

4. Create the main HTML file.

Open your favorite HTML editor (or even any simple text editor, for example, Notepad in Windows) and write following code:

<html>
<head>

<!-- 1. JavaScript files linking: --> 
<script type="text/javascript" src="JS/swfobject.js"></script> 
<script type="text/javascript" src="JS/PanoModulesGroup.js"></script>
 
</head>

<body>

<!-- 2. Containers: --> 
<div id="myMapModule" style="width:200px; height:200px"></div> 
<div id="myPanoModule" style="width:400px; height:300px"></div> 

<!-- 3. Initializing script: --> 
<script type="text/javascript"> 
  var pmg = new PanoModulesGroup("licenseKeyMustBeHere", "virtualTour1"); 
  pmg.addModule("module_Map_Base.swf", "myMapModule"); 
  pmg.addModule("module_Pano_Base.swf", "myPanoModule"); 
</script>

</body>
</html>

Save this file in folder_tutorial_1 with any name. We recommend use the modules group name for file (if you have only one group on a page). We have set the group name virtualTour1, so let's call the file virtualTour1.htm. (You can find this ready file in tutorial_1.zip).

Learn more about embedding modules into HTML page...

5. Create the common preferences file.

Create an empty text file in folder_tutorial_1. (We won't set any common preferences now, but this file must exist, even it is empty, if you test your virtual tour locally. When it work online, you may omit empty preferences files).

This file must have a name dependent on modules group name: add _prefs.xml at the end, so the name for preferences file must be virtualTour1_prefs.xml. (You can find this ready file in tutorial_1.zip).

6. Create a subfolder for stuff.

Create a subfolder for stuff (i.e. images and XML files) in folder_tutorial_1.

It must have a name dependent on modules group name: add _stuff at the end, so the name for stuff folder must be virtualTour1_stuff. (You can find this folder with all its content in tutorial_1.zip).

If you want the panoramic module to display a panoramic image longer than 1000 pixels in width (it is a usual case), you have to cut it into fragments and save them as separate files. Fragments can differ in width, but every one must be less than 1000 pixels.

The map module can only load and display single map image with height and width up to 2880 pixels.

7. Put images for panorama and map.

Put fragments of your panorama into the stuff folder virtualTour1_stuff. For example, there are five fragments: amazingPano_1.jpg, amazingPano_2.jpg, amazingPano_3.jpg, amazingPano_4.jpg, amazingPano_5.jpg.

Put map image into the stuff folder (let's name it coolMap.png).

8. Create XML files describing content for modules.

Now you have to create two XML files — for panorama and for map.

We recommend name these data files using the base of images names, so they will be amazingPano.xml and coolMap.xml.

Write following code in amazingPano.xml:

<panData>
  <namesFixedBeforeVar>amazingPano_</namesFixedBeforeVar>
  <namesVariable>1,2,3,4,5</namesVariable>
  <namesFixedAfterVar>.jpg</namesFixedAfterVar>
  <angle>360</angle>
</panData>

 

Write following code in coolMap.xml:

<mapData> 
  <imageFile>coolMap.png</imageFile> 
  <hotspotsDataSource>coolMap_hotspots.xml</hotspotsDataSource> 
</mapData> 

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

9. Add hotspots on map.

Put any small image or SWF file for hotspot into stuff folder virtualTour1_stuff. For example, take mapHotspot.png.

Then create an XML file coolMap_hotspots.xml (this name was referred in coolMap.xml ).

Write following code in it:

<hotspots> 
  <elem0> 
    <moduleLoaderType>panorama</moduleLoaderType> 
    <loadDataSource>amazingPano.xml</loadDataSource> 
    <viewSource>mapHotspot.png</viewSource> 
    <yPercent>35</yPercent> 
    <xPercent>63</xPercent> 
    <hintText>Load Amazing Pano!</hintText> 
  </elem0> 
  <elem1> 
    <moduleLoaderType>panorama</moduleLoaderType> 
    <loadDataSource>anotherAmazingPano.xml</loadDataSource> 
    <viewSource>mapHotspot.png</viewSource> 
    <yPercent>72</yPercent> 
    <xPercent>39</xPercent> 
    <hintText>This place|is missing yet</hintText> 
  </elem1> 
</hotspots> 

Learn more about data format for describing hotspots...

10. Make the map to load at startup.

Create a preferences file for the map module. It must have a name dependent on module's ID value as it have been set in initializing script in HTML. We have set it as myMapModule, and the preferences file must be myMapModule_prefs.xml.

Write following code in it:

<prefsMap> 
  <initialLoadData>coolMap.xml</initialLoadData> 
  <showFieldOfVision>true</showFieldOfVision> 
</prefsMap> 

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