Panotour - Advanced - Creating custom hotspots
Contents
Introduction
This tutorial is intended for Panotour Pro users wishing to use and select their own hotspots in Panotour's Spots Library, rather than the default ones offered by the software.
This tutorial will walk you through the steps of adding two hotspots to Panotour, one animated and one plain image. We'll be basing ourselves on two pre-existing hotspots.
Requirements and notes
- You need Panotour Pro to install and use customised content.
- You need to have mastered the tools used in the creation and modification of graphical icons (Illustrator, Photoshop, GIMP, etc.).
- You have to be able to modify XML files. Although no knowledge of XML syntax is required for this tutorial, you need to have no fear of editing such files. The use of editors such as Notepad ++or Sublimetext is recommended to view XML files clearly.
What's a hotspot made of?
Just like plugins used by Panotour, hotspots that are going to be stored in your spot library are comprised of several files:
- Spots -name- folder - You'll be placing all of your spots in this folder. One folder per theme, for example.
- Spot image(s)
- Spot_info.xml - This XML file describes the spots, to tell Panotour if it's animated or not and how. If you have several spots, they will all be described in this one XML file.
Customising your own hotspots
Step One: Copying a template
- Open Panotour Pro.
- Go to Edit > Open Template System Directory. This will open a file explorer containing all the plugins and content that is available by default in Panotour Pro.
- Open the spots folder, and select a spot style to copy. In this tutorial we will be using the Black and Color spots as a base, so copy (Ctrl+C) the tuto folder.
Step Two: Pasting and renaming the template
- Back to in Panotour Pro
- Go to Edit > Open User Directory. This will open a file explorer containing all the custom plugins and content that you have added to Panotour Pro.
- Open the plugins folder, paste (Ctrl+V) your copied template spots, and rename it. I'm going to call my new spots style "Triangles".
Step Three: Using your own graphics
First, we'll have to analyze how the graphics are used for the different spot types.
In the template we copied, there's two different images, for each spot type: static and animated.
- Animated spot
The animated spot in the template is called hotspot_animated.png. Each frame of the animation is displayed vertically. Each frame is 32x32 in this template.
- Static spot
The static spot is called hotspot.png. This one is simple, whatever this image is will be used as a static spot in your tour.
You can use these images as a base, or simply use the layout as inspiration. You can change the image and frame size too, but you'll have to write the new sizes in the spot_info.xml once we move on to that step.
Here it's up to you to create or modify your own spots. A good source for icons is iconfinder.com if you are not the drawing type. For my new spots, I'm going to re-use some old icons that were used in a previous version of Panotour (3DGlow direction spots) but aren't used anymore.
Here are my new spots:
- Animated spot
There are 14 frames, in separate images, and they are all 65x65 pixels, so I created a transparent canvas of 910x65 pixels to fit in all the frames, and aligned them vertically.
- Static spot
Notes:
Creating and/or replacing the graphics is what takes the longest in this tutorial.
If you want your spot to be colorizable in Panotour, then make your icons all the same one color (prefer blunt bright colors like blue or red for an easier integration).
White, grey or black areas will remain that color no matter the color change. They can't be used as a base color.
Now that we've finished creating our spots, the next step is to edit the spot_info.xml.
Step Four: Editing the xml
You now have to edit the spot_info.xml so that your hotspots can be opened and used by Panotour, it's very simple though.
Open the file in a text editor.
This is the spot_info.xml for our spot base:
<spots id="ptp18tutorialspot" name="tr:Black and Color circles" version="1.0"> <spot url="hotspot.png" baseColor="#ff6600" name="tr:Neutral"/> <spot url="hotspot_animated.png" type="sequence" baseColor="#ff6600" name="tr:Neutral" frames="10" frameWidth="32" frameHeight="32"/> </spots>
And here is how each element of that xml works:
- ID
ID of the plugin. This is for Panotour to recognise and use your plugin, it must be absolutely unique, so be wordy if needed.
- name (in the spots id tags)
Is used in Panotour when you select your spot from the library, as a sort of category or style name. Hotspots names are in two parts, using this name and the specific spot name.
- url
Specify the name of the hotspot image.
- type
Specifies the type of spot, image (static) or sequence (animated). If your spot is a sequence, Panotour will automatically add (sequence) to the end of your hotspot name.
- baseColor
Specify the base color of your spots if you want them colorizable in Panotour.
- name (in the spot line)
Is the second part of the hotspot name that is shown in the hotspot library.
- frames
Specify the number of frames in your animated spot
- frameWidth/frameHeight
Specify the width and height of your frames.
With all that in mind, here is the edited xml for my new spots:
<spots id="triangleshotspots" name="tr:Triangles" version="1.0"> <spot url="triangles_static.png" type="image" baseColor="#2680ff" name="tr:Direction"/> <spot url="triangles_sequence.png" type="sequence" baseColor="#2680ff" name="tr:Direction" frames="14" frameWidth="65" frameHeight="65"/> </spots>
And my spots in the spots library:
Once you've done these edits, you will be able to open Panotour Pro and use your new spots in your future virtual tours!
BACK TO: Documentation / Panotour Documentation