Panotour Tutorials - How to

Plugin description file documentation (plug info.xml) > Parameters tags documentation (plug info.xml) > Templating tags and custom Kolor tags > Logo youtube.png > Panotour Tutorials - How to

Intro

This page aims to be a quick reference page, full of short tutorials, tips, tricks or links to the appropriate documentation and full tutorials (text or video) to help you set up parts of your tour.

The way this page works is simple, find your way by reading the titles. For example:

• > How to... > Display or open (above the tour) > An image will show you how to display an image on the click of a button or a hotspot.
• > How to... > Block/ Stop > Viewing the Nadir/Zenith will show you how to stop the viewer from looking up or down when viewing your scene.

Note: For most actions, these tutorials use the point hotspot or a simple button, but you can of course use other spot styles or buttons, these are simply the most commonly used.

Certain features are Panotour Pro only    Titles with the blue Panotour Pro logo are features only available in Panotour Pro, and not available in Panotour Standard.

Display or Open (above the tour)

Display an Image

1. Go to the Style tab
2. Create a new point spot style or Simple Button instance
3. Assign the action "Basic > Display an image" to this hotspot or button
   • If you chose a hotspot, leave the filepath empty, and go to the Tour tab to place your spots. You will be able to link your images from Spot Properties.

See on YouTube How to Display an Image using Actions

Display an Image with a description

See steps for Set up a Gallery

• Make sure you add a caption which would be your image's description.
• You can hide the gallery's controls (prev/next pictures, slideshow and counter) so that the image and description will appear independent.

Display a Slideshow

See steps for Set up a Gallery

• Make sure you add the Slideshow Play/Pause button in the controls
• You can set the slideshow to auto-start in the advanced settings > slideshow.

Display a video

1. Go to the Style tab,
2. Create a new point spot style or Simple Button instance
3. Assign the action "Basic > Display a video" to this hotspot or button
   • If you chose a hotspot, leave the filepath empty, and go to the Tour tab to place your spots. You will be able to link your videos from Spot Properties.

See on YouTube How to Display a Video using Actions

Display a web video (youtube, vimeo..)

1. Go to the Style tab
2. Create a new point spot style or Simple Button instance
3. Assign the action "Basic > Display a web video" to this hotspot or button
   • For this action you need to input the video ID and not the full URL. So for http://youtu.be/TAzyr_uflEc the video ID would be TAzyr_uflEc
   • If you chose a hotspot, leave the video ID field empty, and go to the Tour tab to place your spots. You will be able to link your web videos from Spot Properties.

Display a PDF

1. Go to the Style tab
2. Add an instance of the PDF Box plugin from the Plugins Library > Viewers > PDF Box. Configure it to your liking.
3. Create a new point spot style or Simple Button instance
4. Assign the action "[Plugin] PDF Box > Display a PDF File" or "Toggle open and close the PDF Box" to this hotspot or button
   • If you chose a hotspot, leave the filepath empty, and go to the Tour tab to place your spots. You will be able to link your PDFs from the Spot Properties.

Display a Description

1. Go to the Style tab
2. Add an instance of the Description plugin from the Plugins Library > Text zone > Description, and select if you want to display the project, group, panorama or spot description.
   • If you want to place lots of little text boxes with different information in each, go for the spot description since you can set one description per spot
   • You can use several instances of the Description plugin to show different descriptions from different buttons or spot styles.
3. Create a new point spot style or Simple Button instance
4. Assign the action "[Plugin] Description > Open the description" or "Toggle open and close the description" to this hotspot or button
   • If you chose a hotspot, go to the Tour tab to place your spots.
   • If displaying the spot description, fill in the description field of your spots in the Spot Properties.

Display a text zone

You have several options, depending on the types of content you want to display:

• If you only want to display text, see steps for display a description
• If you want to display text and images, see steps for display an Image with a description
• If you want to display text, images, links or any other content, see steps for a local HTML file.

In either case, you can choose to display this content per scene, per group, for the project or per hotspot depending on how they are activated.

Display a text zone with pictures, links and html

See steps for a local HTML file

Display a Website

1. Go to the Style tab
2. Add an instance of the Website Box plugin from the Plugins Library > Viewers > Website Box. Configure it to your liking.
3. Create a new point spot style or Simple Button instance
4. Assign the action "[Plugin] Website Box > Open the Website Box" or "Toggle open and close the Website Box" to this hotspot or button
   • If you chose a hotspot, go to the Tour tab to place your spots. You will be able to link your website from the Spot Properties.

Display a local HTML file

1. Go to the Style tab
2. Add an instance of the Website Box plugin from the Plugins Library > Viewers > Website Box. Configure it to your liking.
3. Create a new point spot style or Simple Button instance
4. Assign the action "[Plugin] Website Box > Open the Website Box" or "Toggle open and close the Website Box" to this hotspot or button
   • If you chose a hotspot, go to the Tour tab to place your spots. You will be able to link your website from the Spot Properties.
   • For easy access and uploading of the final tour, it is recommended that you place the local HTML file with the rest of the built tour's data.
   • For example, in the YOUTOURdata folder, create a new folder called Extras. In this folder place your html files and their data folders if they have any.
   • For the example, the URL (the filepath) you'd use to find your html file would be: ./YOURTOURdata/Extras/MYLOCALFILE.html

Display (in the interface)

Display a title

1. Go to the Style tab
2. Add an instance of the Title plugin from the Plugins Library > Text Zone > Title. Select which title you want to display (panorama, group or project)

Display a logo

1. Go to the Style tab
2. Add an instance of the Logo plugin from the Plugins Library > Image Zone > Logo.
3. Set the logo image and destination URL.
   • If you don't want to add a URL, use the Nadir Patch option of the scene properties instead.

Display an image

1. Go to the Style tab
2. Add an instance of the Picture plugin from the Plugins Library > Image Zone > Picture.
3. Set the picture's filepath

Display a header/footer

1. Go to the Style tab
2. Add an instance of the Footer or Header plugin from the Plugins Library > Image Zone > Footer or Plugins Library > Image Zone > Header.
3. Configure to your liking

Display a button

1. Go to the Style tab
2. Add an instance of the Simple Button plugin from the Plugins Library > Controls > Simple Button
3. Configure appearance to your liking and assign one or several actions to the button

Display a panorama-specific button

1. Download and install the free extra plugin Panorama-Specific - Simple Button. Restart Panotour Pro.
2. Go to the Style tab
3. Add an instance of the Panorama Specific - Simple Button plugin from the Plugins Library > Controls > Panorama Specific - Simple Button
4. Configure appearance to your liking and assign one or several actions to the button
5. Set the panoID of the scene you want the button to only appear on
   • You can set several panoIDs, click on the + icon to add a line to input a new panoID
   • To find the panoID, go to the Tour tab and select your scene. Click on the "i" icon next to the scene name. The ID will be something along the lines of pano## where ## is a number.

Display (in the scene)

Display an Image

1. In the Tour tab, select your scene
2. In the Hotspot Editor, place your Image hotspot's four corners, starting from the top left corner and placing them clockwise.

See on YouTube Adding a Picture Spot

Display a video

1. In the Tour tab, select your scene
2. In the Hotspot Editor, place your Video hotspot's four corners, starting from the top left corner and placing them clockwise.

See on YouTube Adding a Video Spot

Display a web video (youtube, vimeo..)

1. In the Tour tab, select your scene
2. In the Hotspot Editor, place a Web Content hotspot's four corners, starting from the top left corner and placing them clockwise.
3. In the Spot Properties, input the embed URL of your web video.
   • You will find the embed URL as part of the share code for your video. It is not the page URL.

Display a logo or image to hide the tripod

See steps for Display a logo to hide the nadir or zenith

Display a logo to hide the nadir or zenith

If you want to be able to open a URL by clicking on the logo:

1. Go to the Style tab
2. Add an instance of the Logo plugin from the Plugins Library > Image Zone > Logo.
3. Set the logo placement to in the panorama sphere
4. Set the logo image file and destination URL.
   

If you don't need to open a URL or want to set different logos for different scenes:

1. Go to the Tour tab
2. Select the 360x180° scene(s) you want to assign the logo to.
3. In the Scene Properties, scroll down to the Nadir Patch tab and set your image.

Display a Website

1. In the Tour tab, select your scene
2. In the Hotspot Editor, place a Web Content hotspot's four corners, starting from the top left corner and placing them clockwise.
3. In the Spot Properties, input the URL of your website.

Display a local HTML file

1. In the Tour tab, select your scene
2. In the Hotspot Editor, place a Web Content hotspot's four corners, starting from the top left corner and placing them clockwise.
3. In the Spot Properties, input the URL (the filepath) to your local HTML file.
   • For easy access and uploading of the final tour, it is recommended that you place the local HTML file with the rest of the built tour's data.
   • For example, in the YOUTOURdata folder, create a new folder called Extras. In this folder place your html files and their data folders if they have any.
   • For the example, the URL (the filepath) you'd use to find your html file would be: ./YOURTOURdata/Extras/MYLOCALFILE.html

Display a text zone with pictures and links

See steps for a local HTML file

Open in a new page/tab (outside the tour)

Open a Website

1. Go to the Style tab
2. Create a new point spot style or Simple Button instance
3. Assign the action Basic > Open a website to this hotspot or button
   • If you chose a hotspot, go to the Tour tab to place your spots. You will be able to set your links from the Spot Properties.

Open a local HTML file

1. Go to the Style tab
2. Create a new point spot style or Simple Button instance
3. Assign the action Basic > Open a website to this hotspot or button
   • If you chose a hotspot, go to the Tour tab to place your spots. You will be able to set your links from the Spot Properties.
   • For easy access and uploading of the final tour, it is recommended that you place the local HTML file with the rest of the built tour's data.
   • For example, in the YOUTOURdata folder, create a new folder called Extras. In this folder place your html files and their data folders if they have any.
   • For the example, the URL (the filepath) you'd use to find your html file would be: ./YOURTOURdata/Extras/MYLOCALFILE.html

Set up

Set up the first panorama of the tour

• To set the scene order, see Set up the scene order
• If you are looking to set the first panorama from the url, see Start the tour with a specific panorama from the URL

Set up the scene order

1. Go to the Tour tab
2. In the Project Properties, open the Order tab
3. Rearrange the order of your scenes as you see fit.
   • If you have groups in your project, it's the first panorama of that group that will be used
   • You can set the order of the scenes of your group from the Group Properties > Order tab.

Set up a Floor plan

1. Go to the Style tab
2. Add an instance of the Floor plan plugin from the Plugins Library > Maps > Floor plan. Configure it to your liking. Make sure the option "Single floor plan" is selected.
3. Go to the Tour tab
4. In the Project Properties > Floor plan tab, add the Floor plan
5. A new icon will show up on the bottom left side of the workspace, click on it to open the Floor Plan Hotspot Editor
6. Place the hotspots that will link to your different scenes
7. Now you can either
   1. Use the button in your Control Bar to open the Floorplan window
   2. Create a new point spot style (or other type of hotspot) or Simple Button instance
      • Assign the action "[Plugin] Floor plan > Open the Floor plan plugin" or "Toggle open and close the Floor plan plugin" to the hotspot or button

Set up Multiple Floor plans

1. Go to the Style tab
2. Add an instance of the Floor plan plugin from the Plugins Library > Maps > Floor plan. Configure it to your liking. Make sure the option "Multi-level floor plans" is selected.
3. Go to the Tour tab
4. In the Project Properties > Floor plan tab, add the Floor plan (optional)
5. In the Group Properties > Floor plan tab, add the Floor plan, and do so for each group that will have a Floor plan
6. A new icon will show up on the bottom left side of the workspace and at the bottom of each group, click on them to open the Floor Plan Hotspot Editor for each Floor plan
7. Place the hotspots that will link to your different scenes
8. Now you can either
   1. Use the button in your Control Bar to open the Floorplan window
   2. Create a new point spot style (or other type of hotspot) or Simple Button instance
      • Assign the action "[Plugin] Floor plan > Open the Floor plan plugin" or "Toggle open and close the Floor plan plugin" to the hotspot or button

Set up Panotour Maps

1. Go to the Style tab
2. Add an instance of the PanotourMaps plugin from the Plugins Library > Maps > PanotourMaps. Configure it to your liking and select the provider you want to use for the map.
   • Certain providers require an API key that you need to generate: Google Maps, Bing Maps, Yandex.
   • OpenStreetMap does not require an API key.
3. Go to the Tour tab
4. Click on the Globe icon on the bottom left side of the workspace to open the Web Map Hotspot Editor
5. Set the default view to your desired start location and zoom level.
6. Place the hotspots that will link to your different scenes
   • If your panoramas contain GPS data, you can geolocate them by selecting the scene and clicking on the globe icon in the Geolocalisation tab, a spot will automatically be placed at those GPS coordinates.
7. Now you can either
   1. Use the button in your Control Bar to open the Web Map window
   2. Create a new point spot style (or other type of hotspot) or Simple Button instance
      • Assign the action "[Plugin] PanotourMaps > Open the map" or "Toggle open and close the map" to the hotspot or button

Set up a Gallery

1. Go to the Style tab
2. Add an instance of the Gallery plugin from the Plugins Library > Gallery > Gallery. Configure it to your liking.
3. Scroll to the bottom of the Gallery's parameters and click on "Add multiple files"
   • (optional) Add a title and caption for each image
4. Create a new point spot style (or other type of hotspot) or Simple Button instance
   • Assign the action "[Plugin] Gallery > Open the gallery" or "Toggle open and close the gallery" to the hotspot or button
   • Use the action "Open the Gallery on a specific image" if you want to open the gallery on a specific image on the click of a hotspot. In this case leave the field blank and go to the Tour tab to place your spots. You will be able to link your images from the Spot Properties.

Set up Multiple Galleries (for different scenes)

1. Go to the Style tab
2. Add an instance of the Gallery plugin from the Plugins Library > Gallery > Gallery. Configure it to your liking.
3. Scroll to the bottom of the Gallery's parameters and click on "Add multiple files"
   • (optional) Add a title and caption for each image
4. Repeat steps 2 and 3 for as many galleries as you need.
5. Create a new point spot style (or other type of hotspot) or Simple Button instance. You will have to create or duplicate a new spot style or button for each gallery, they can use the same image.
   • Assign the action "[Plugin] Gallery > Open the gallery" or "Toggle open and close the gallery" to the hotspots or buttons
   • Use the action "Open the Gallery on a specific image" if you want to open the gallery on a specific image on the click of a hotspot. In this case leave the field blank and go to the Tour tab to place your spots. You will be able to link your images from the Spot Properties.

Set up Multiple languages

See Internationalisation of your tour.

Set up Internationalisation of your tour

See Tour Languages documentation page.

Set up the default projection of your tour to Architectural

1. Download and install the free extra plugin Call Actions on Tour Events (CAOTE). Restart Panotour Pro.
2. Go to the Style tab
3. Add the Call Actions on Tour Events plugin to your tour, from the Plugins Library > Advanced > Call Actions on Tour Events.
4. Find the event "React when a new panorama is loaded" and give it the action "View Control > Set architectural projection"

Set up the default projection of your tour to Fisheye

See The default projection of your tour to Architectural.

Set up Social Sharing

1. Go to the Style tab
2. Add the Social Share plugin to your tour, from the Plugins Library > Viewers > Social share. Configure it to your liking.
3. Now you can either
   1. Use the button in your Control Bar to open the Social Share window
   2. Create a new point spot style (or other type of hotspot) or Simple Button instance
      • Assign the action "[Plugin] Social Share > Open the Social Share plugin" or "Toggle open and close the Social Share plugin" to the hotspot or button

Start the tour with

Start the tour with a specific panorama from the URL

See the documentation on Deep Linking

Start the tour with a little planet introduction

1. Go to the Tour tab
2. Make sure no scene is selected to access the Project Properties
3. First check in the Order tab that the first scene in your project order is a full 360x180° scene, or there will be no little planet intro
   • Little planet intro is only supported on 360x180° spherical scenes. Partial spherical scenes or planar scenes can not use the Little Planet intro.
4. Still in the Project Properties, move on to the "Start Parameters tab > Little Planet" and check the option "Start tour with little planet effect".

Start the tour with a Splash Screen Image

1. Go to the Tour tab
2. Make sure no scene is selected to access the Project Properties
3. Open the "Start Parameters tab > Splash Screen" and open a file on your computer that you want to use as a Splash Screen.
   • Once the filepath has been set, a variety of options will become available, namely adding an overlay behind the image or setting a timer until the Splash Screen dissapears automatically.

Start the tour with Drag to or Move to mouse navigation mode

1. Go to the Tour tab
2. Make sure no scene is selected to access the Project Properties
3. Open the "Start Parameters tab > Navigation mode" and set the type of mouse navigation that you want to use.

Start the tour with Autorotation activated

1. Go to the Tour tab
2. Make sure no scene is selected to access the Project Properties
3. Open the "Start Parameters tab > Autorotation" and choose the option "Start tour with Autorotation".
   • There is an Autorotation tab in the Project Properties, from there you can configure the Autorotation settings (speed, direction) for the tour.
   • In Panotour Pro you can set individual Autorotation settings for each image scene.

Start the tour with Autotour activated

1. Go to the Tour tab
2. Make sure no scene is selected to access the Project Properties
3. Open the "Start Parameters tab > Autotour" and choose the option "Start tour with Autotour".
   • There is also an Autorotation tab in the Project Properties, from there you can configure the Autorotation (speed, direction) and Autotour settings for the tour.

Start the tour with Controls Hidden

1. Go to the Tour tab
2. Make sure no scene is selected to access the Project Properties
3. Open the "Start Parameters tab > Controls" and check the option "Start tour with hideable controls hidden".
   • You can decide which controls will hide with this action in the Style tab in the parameters for each interface element, by checking or un-checking the option "Respond to show/hide controls request".

Start the tour with Hotspots Hidden

1. Download and install the free extra plugin Call Actions on Tour Events (CAOTE). Restart Panotour Pro.
2. Go to the Style tab
3. Add the Call Actions on Tour Events plugin to your tour, from the Plugins Library > Advanced > Call Actions on Tour Events.
4. Find the event "React when the tour starts, after introduction effects" and give it the action "Interface Control > Hide hotspots"
   • You'll need to add a way in your tour to display hotspots again, using a simple button or the show/hide hotspots button in the control bar.

Start the tour with Sounds off by default

1. Go to the Tour tab
2. Make sure no scene is selected to access the Project Properties
3. Open the "Start Parameters tab > Sounds" and un-check the option "Play Sounds".

Navigate

Navigate keeping the same view from one scene to another

See Using the Keepview Tag - Case 1: Keepview navigation for the whole tour.

Navigate with a Virtual Reality Headset

See VR Mode documentation page: How to access VR Mode and Navigation

Block/ Stop

Stop viewing the Nadir/Zenith

1. In the Tour tab, select your panorama
2. Use the Crop Tool of the Hotspot Editor to virtually crop the scene

Block the tour from being displayed on other domains

1. In the Build Tab, open the Protection options
2. Add your list of authorized domain names for your tour
   • For example, to only show the tour on www.kolor.com write
     • kolor.com in the list of domains, if you want the tour to be able to work on store.kolor.com, something.kolor.com, other.kolor.com
     • www.kolor.com in the list of domains, if you want the tour to be able to work on www.kolor.com only

Stop the error console from showing in the tour

1. In the Build Tab, open the Protection options
2. Un-check the option "Display errors at run time"
   • Disabling this will hide the error console, if a serious issue appears in your tour it will be difficult to troubleshoot without the console

Specific cases

Create a Day/Night scene

See Using the Keepview Tag.

• If there will only be the day/night scene in your tour, follow the steps in the 1rst case: Keepview navigation for the whole tour.
• If there will be normal navigation in your tour as well as the day/night scene, follow the steps in the 2nd case: Keepview and default navigation in the same tour.

BACK TO: Documentation / Panotour Documentation