Overview - Part 8
In this section, we will look at Adding a Custom Hotspot Image
Note: The RPGT component, by default, comes with a hotspot image, a circle with a “i” inside it. However you may want to add your own hotspot images globally or individually by using the Custom Image element.
If you aren’t familiar with adding custom images I suggest watching this Pano2VR tutorial video
ADDING CUSTOM ICONS
Note: In testing the component with V7 Beta 4a I’ve come across a bug where .svg files cannot be selected by clicking on the folder. The current solution is to type in the path to the .svg. This is a known issue and will be resolved in future versions.
1. Open the RPGT_Tutorial_Simplex.p2vr project if it’s not already open
2. In the Viewer select the hotspot that has the title Australia to make it active (figure #1)
Figure #1: Hotspot selected
3. In the Properties - Point Hotspot window click on the ‘folder’ next to the Custom Image: -
4. In the Tutorial folder navigate to Assets > Custom Icons
5. Select ‘australia_map_shadow.svg’ (figure #2)
Figure #2: Locate and select australia map.svg
Alternative workflow for V7 Beta 4a
Note: this follows on from Step #5
1 In the Properties - Point Hotspot window right-click on the empty field next to Custom Image: and select ‘Edit’ from the popup window. (figure #1)
Figure #1: Edit link
2. Enter the location of the tutorial folder containing the assets: ../Assets/Custom Icons/ and then the name of the .svg file. (figure #2)
Figure #2: Location of the .svg file
3. Click on ‘OK’
Note: once you click OK it will open into the Viewer at its normal size
End of Alternative workflow for V7 Beta 4a
Continue with V6
Note: once you click open it will open into the Viewer at its default size (figure #3)
6. Resize the icon by dragging on the red dot handles or by setting a Width or Height within the Custom Image: section.
Note: I’ve set mine to 80 x 80 (figure #4)
Figure #4: Custom Image resized
7. Open the Edit Skin Configuration window and check ‘Show Custom Hotspot Images’ (figure #5)
Figure #5: check ‘Show Custom Hotspot Images’
8. Output the project
Note: now we have two default hotspot images and the Australia Map hotspot image (figure #6)
Figure #6: Australian map custom image
9. Repeat the process and add the camera_shadow.svg to the Australian Nature hotspot and the image_shadow.svg to the Australian Outback hotspot
Note: for the camera a size of 60 x 54 is good and for image 68 x 60
10. Output the project
Managing Hotspot Images
Note: Now that you are familiar with adding the custom hotspot images to a Pano2VR project let’s take a look at how you can manage them within the component.
There are 3 ways in which the hotspot images can be presented.
Example 1. All hotspots use the default hotspot image (blue circle with orange i) (figure #1)
Figure #1: Default Hotspot Images
Example 2. Some hotspots use the default hotspot image (blue circle with orange i) while others use custom hotspot images (figure #2)
Figure #2: Mix of default and custom hotspot images
Example 3. All hotspots use custom hotspot images (figure #3)
Figure #3: All custom hotspot images
Note: if you want to quickly change from custom icons to the default icons simply uncheck the ‘Show Custom Images’ button in the Edit Skin Configuration and output the project
Note: This is the end of Part 8 move onto Part 9: Setting Project Colors
