Jump to: navigation, search

Panotour Tutorials - Create a simple virtual tour and upload it on Google Drive

Introduction

This tutorial is intended to show you how to create a very simple virtual tour, and then how to publish it.

Since there are many different types of web servers and virtual interfaces out there, and it would be impossible to document them all, we have decided to use a free server that any user can easily gain access to, and will serve as a baseline for publishing on your own web server: Google Drive.

Important Note: Google's web page hosting service will end in August 2016. From then on you will have to find a different hosting service.
If you don't have a server, have a look at setting up an Amazon Simple Storage Servers. You can also find many other paid or free web hosting solutions with a quick web search.



Assets and Requirements

In this tutorial we are providing you with some assets, so that you will be able to recreate exactly the same virtual tour as shown in the tutorial, and properly get your head around the use of Panotour.


Requirements

To follow this tutorial you will need:

  • To have downloaded the SimpleTourAssets.zip and placed it's contents somewhere on your computer.
  • To have downloaded and installed Panotour Pro (the trial version will work just fine for this tutorial) to have access to the interface presets.
  • A Google Account so that you can access Google Drive.


Assets

  • Download this SimpleTourAssets.zip folder.
  • Inside the folder, you will find 4 panoramas taken with the Ricoh Theta


Limitations to using Google Drive

Since this a free hosting service, and like many of its kind (Dropbox too, for example) there are a few limitations, the main limitation being displaying external web content through website boxes.
Google drive hosts your tour on a secure server, and will not allow you to use website boxes to display external websites, as they are considered a security "risk". They will display blank or empty instead.
A work-around for this would be using linking to local html files with your content instead, that you will upload with the tour's data.

See the difference between http and https.



Creating a simple virtual tour

Step One: Importing the images

Launch Panotour Pro and open an explorer window with the Panoramas in it.
Select them all and drag'n'drop them into Panotour Pro.

Panotour Tutorials - Simple VR 001.gif


Step Two: Preparing the interface

In the Style tab, go to the bottom left and click on Load a preset.

Panotour Tutorials - Simple VR 002.PNG

Select the Ricoh Theta preset. You can discard the Display an Image and Open a Website hotspot styles as we will not be using them in this tutorial.


Step Three: Placing your hotspots

Back in the Tour tab select each panorama to place the hotspots that will allow you to navigate between each panorama, using the Hotspot Editor.

Panotour Tutorials - Simple VR 003.gif


Step Four: Build the tour

Now you can go to the Build tab, set the destination folder and file name and then click on Build.

Panotour Tutorials - Simple VR 004.PNG

You can leave all the settings on default, as they will produce a multi-resolution tour including both the HTML5 and Flash players. The tour will switch automatically between the two, detecting the platform you are viewing the tour from.

Finished Tour



Uploading and Sharing on Google Drive

Google Drive offers you the possibility to host and view webpages , so that is precisely what we are going to do.
Please note that this is purely an example of publishing for your tour, and that there are many other solutions (both free and not so free) out there that you can try.

To publish the tour on your website, see this page on Web Publishing once you have got the link to your tour, at the end of this tutorial.


Step One: Set up a folder in the Drive to place your Tour

  • Create a public folder in your Google Drive. To do this:
    • Create a new folder in which you will be placing all your tours. Call it "Virtual Tours", or "Public" for instance.
    • Right-click and click on Share.
    • On the bottom-right, click on Advanced.
    • On the line Private - Only you can access, click on Change and set the privacy to Public on the web.
    • Save the new setting.
    • In this public folder, create a sub-folder where you will be placing your latest virtual tour. One sub-folder per tour, which will have the same privacy settings as the parent folder.


Step Two: Drag and Drop the content into that folder

  • Open an explorer window to the folder where your tour was generated.
  • Select all the files of the tour (index.html and the data folder)
  • Drag and Drop these items into your public sub-folder, and wait for the upload to finish.


Panotour Tutorials - Google Drive 002v2.gif


Note: To Drag'n'Drop a folder, you need to be using Google Chrome as your browser. Other browsers will not allow this action.
You also have the option of installing Google Drive on your computer, then you only have to copy the tour's folder into the Google Drive folder on your computer and wait for it to synchronise.



Step Three: Retrieving the URL of your tour

These steps are using the new version of Google Drive. They are much less staight-forward than with the old version of the Drive, so make sure you follow these instructions very carefully.

  • Once the upload has finished, go back up one folder to select the folder containing your virtual tour (it will be highlighted in blue once selected), right-click to open the contextual menu and click on Get Link.
  • A little window will appear with a link. Copy that link and paste it in a text editor.
  • Copy this link to the text editor: https://googledrive.com/host/DOC-ID-HERE/index.html. Rename index.html if the html file of your tour is named differently.
  • Now find the document ID for your shared file, which is a long string of numbers and letters (example: 0B5uG-tHXXXXXXXXXtNjQ). Select it and copy it.
  • Replace DOC-ID-HERE in the URL above with the actual document ID, and paste this new URL in your browser and open the page.
  • The link will change, giving you direct access to your html file, this is the hosting URL.



You can use the hosting URL to share the tour directly, or go to the next step to embed the tour on a webpage.


Step Four: Integrating the tour on our website

Now that you have the working URL to your tour, you have to integrate it to your website.

The recommended integration is by using an iFrame, so you would use this code and place it on your webpage:

<iframe src="http://WWW.MY-DOMAIN.COM/VIRTUAL_TOUR/MY-TOUR.html" width="800" height="600" allowFullScreen></iframe>


So with our newly obtained URL it would be:

<iframe src="https://49bc6130e8cd1d9c5acf43941b125e6652644cc2.googledrive.com/host/0B21ztMIr_KkXdTNvcHNOYjNlVGc/index.html" width="800" height="600" allowFullScreen></iframe>


Place that code somewhere on your webpage and voilà!












BACK TO: Documentation / Panotour Documentation