Pixtra Stitchers: Create Virtual Tour - Manual

The virtual tour authoring in Pixtra Stitchers is limited to one panorama, for quick tour making.  We strongly recommend using Pixtra TourMaker, the dedicated full-featured tour authoring tool (Download Pixtra TourMaker).

Now that you have made a panorama with Pixtra PanoStitcher or Pixtra OmniStitcher, it is time to create a virtual tour web page to share with the world. Creating the tour page can be as simple as "Load" and "Create Web Page", though more features are available for customization.

A tour page contains three sections, optional tour title, viewer and control bar.   The "Create Virtual Tour" UI authors the tour content and the tour page layout.

User Interface

The Create Virtual Tour window is launched via

1) Stitcher toolbar button "Create Virtual Tour", or

2) Main menu | Publish | Create Web Virtual Tour, or

3) (After saving a panorama to .jpeg or .tiff format) Right-click on your panorama to bring up the panorama floating menu and choose "Create Web Virtual Tour"

Virtual Tour UI

Layout diagram

It displays how the tour page would be like upon launching.   It will update whenever a layout property changes.

Tour Title

Tour title is shown in web browser's title bar.  

[x] Show in Web Page:   also show tour title at top of the tour page.

Vista

A vista is a panorama image as stitched with Pixtra PanoStitcher / OmniStitcher.   Clicking Load will pop-up Image Browser window to select the panorama file.   

Vista Bin

Once a vista is loaded, its thumbnail will be displayed in Vista Bin.   The yellow box indicates the initial view as the vista is shown in the tour page viewer.   This initial view box can be relocated by clicking on the desired area in the thumbnail while pressing the ctrl-key or completely removed by drag it away.   Removing the view box is unnecessary since another vista can be loaded to replace the current one.

Viewer

The tour page viewer width / height can be modify here.   Alternatively drag a viewer size marker to resize.

Image Quality dictates the compression level of the published vista file: a higher quality means a larger file size, hence the longer time to download (from the published internet site).

Viewer Size Markers

These include

  - Viewer width marker on the horizontal ruler at bottom

   - Viewer height marker on the vertical ruler at right

Dragging a marker will change the viewer width or height.   The location of the marker on the ruler also gives a visual idea of the viewer size.

Initial Behavior

These affect the viewer's initial actions as a tour page is loaded:

- Horizontal Field-of-View: the angular span of viewable area, e.g.,   the zoom level of the initial view (as indicated by the coverage of initial view box).

- Spin Speed: in degrees per second.   A positive value corresponds to spin-left while a negative value to spin-right.   The corresponding time to loop around is also indicated.

Tour Sound

The sound to be played when browsing the tour page.   The tour sound can always be turned off from the tour control bar.

Colors/Fonts

Tour Title: Color / Font.

Control Bar: Color. [ ] no color: means transparent

Page Background: Color  

Save Tour File

Choose the folder and web page file name to save the tour.   The folder should contain only one tour to avoid conflict of the folder Pixtra_media and the file StitcherStarterPage.htm for different tours.  

Create Web Page

To make the tour.

Preview

To view the created tour:   Launch the default web browser and load StitcherStarterPage.htm, which will automatically load the tour page in another browser window of the right size.  

Save Configuration

Save the current settings in Viewer, Initial Behavior and Colors/Fonts.   Virtual Tour window will be configured to these initial settings upon future launches.   Then creating a tour can be as simple as Load and Create.

Typical Tour Making Steps

1) Load a vista

2) Give the tour a title

3) Create Web Page

4) Preview

5) Upload files to web server

Tour starter page:   this page is launched upon clicking "Preview".   Once loaded this page automatically launches the virtual tour page in a   separate browser window, as shown below:

Sample Virtual Tour Page:   Viewer, control bar (with no tour title in page):  click on the snapshot for a tour.

Click on "show embedded tour at bottom" to illustrate the tour page embedded as part of the parent page.  

Tour Page Path

The provided html code fragments in the starter page assume that the published tour page and the parent page are in the same folder.   If not, the tour page attribute has to be modified (e.g., src="SF_tour.htm" for embedding).   This tells the parent page where to find the tour page.   There are two ways to specify the path:

(1) Relative path.   This assumes both the parent and tour pages are on the same drive of your PC.   The use case is that you have the local copy of your website (where both pages will be uploaded to the web server maintaining the same relative path).   With a relative path the tour URL could be locally played/tested before uploading (even with no web connection).

Example 1: tour page path is "C:\site\pixtra\tour\sf\SF_tour.htm", and parent page path is "C:\site\parent.htm", the relative path will be "tour/sf/SF_tour.htm" (with the common prefix ignored).   The html fragment to insert to the parent page for launching will be

<input id="launch_PixtraTour" type="button" value="Start Virtual Tour" onclick="javascript:window.open('tour/sf/SF_tour.htm', 'PixtraTourWin_SF_tour', 'status=yes,top=5,left=5,width=606,height=458')"/>

Example 2: tour page path is "C:\site\pixtra\tour\sf\SF_tour.htm", and parent page path is "C:\site\hotel\trip\index.htm", the relative path will be "../../tour/sf/SF_tour.htm" (with "..\..\" means going up two folder levels to the closest common parent folder).   The html fragment to insert to the parent page for launching will be

<input id="launch_PixtraTour" type="button" value="Start Virtual Tour" onclick="javascript:window.open('../../tour/sf/SF_tour.htm', 'PixtraTourWin_SF_tour', 'status=yes,top=5,left=5,width=606,height=458')"/>

(2)   Web URL path:   This assumes the tour is already uploaded .   this will always work if URL is valid.   The web connection is required to test the linking of the parent page.   To guarantee correctness, show the web tour in a browser.   Copy and paste the URL as show in the browser navigation bar to modify the src attribute.

Example:   if tour page URL is "http://www.pixtra.com/tour/sf/SF_tour.htm", the html fragment to insert to the parent page for embedding will be

<iframe id="embed_PixtraTour" src="http://www.pixtra.com/tour/sf/SF_tour.htm" width="606" height="458" frameborder="0" scrolling="no"></iframe>

Pixtra TourMaster has a feature to automatically make the correct path at publish time.  

Publish to the Web

Follow the instruction in the Virtual Tour Starter Page.

If you are to publish multiple tours to your website, the following is strongly recommended:

Publish all tours to the same top Folder.   Then all your tours will share the same PixtraTour.jar and PixtraTour_media folder.   This will speed up viewing your tours: The cached version of these files will be used,   instead of each tour downloading its own version.   More importantly, sharing one copy of PixtraTour.jar in your website is the workaround to an outstanding compatibility issue between Java and FireFox browser.

Pixtra Tour Help

Pixtra Tour provides rich navigation options, which is summarized in this tour Help web page (launched by clicking the tour control bar Help button in a tour page):  

The Java applet PixtraTour is the virtual tour engine.   It requires Java version 1.0 or above installed to the browser.