This tutorial shows how to place a ‘Floating’ nadir logo into a Pano2VR single node virtual tour.
Note: once you complete this tutorial there is another tutorial that uses the files created here to apply the Floating Nadir Logo universally across multiple nodes at Universal Floating Nadir Logo.
Update 17/06/2019: Added instructions on how to add a modifier to resize the logo as the viewer zooms in or out of the panorama.
In the tutorial folder, Floating-Nadir-Logo, there is an Asset Folder with an equirectangular image and a sample .png logo file. There is also a Project folder with a Pano2VR project 'floating-nadir-logo.p2vr', a empty skin 'floating-nadir-logo.ggsk' and an Output folder called 'Floating-Nadir-Logo' with project files created from the .p2vr and .ggsk elements. (Figure #1)
In this tutorial we will modify the floating-nadir-logo.p2vr and floating-nadir-logo.ggsk skin by;
Adding a Point Hotspot to the project
Adding a Hotspot Template to the skin
Importing and attaching a .png logo to the Hotspot Template
Add a modifier to resize the logo as the fov changes
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image to enlarge it
1. Download the zipped tutorial folder here
2. Double Click on the floating-nadir-logo.p2vr file to open the tutorial Pano2VR project (Figure #1)
Adding the project point hotspot
Note: this point hotspot will define the position of the center of the nadir logo on the panorama.
1. In the Edit menu click on the ‘Viewing Parameters’ button and in the Default window change the Tilt to -90˚ (Figure #2)
Note: this will orientate the panorama so we are viewing the nadir and center it in the viewer
2. Hover your mouse over the ‘Select Mode’ icon in the viewer to reveal the Viewer Mode options. Move the mouse down over the ‘Point Hotspot’ icon (Figure #3 & 4)
3. Click once to action the Point Hotspot and then click twice in viewer window to add the Point Hotspot (Figure #5)
Note: this will position the Point Hotspot at the location of the Double Click and also open the Properties - Point Hotspot panel
4. To accurately position the Point Hotspot change the Pan: and Tilt: degrees to -70.00˚ and -90.00˚ respectively. (Optional: Change the Type: to Image and add any additional information you may need to use in the skin.) (Figure #6)
5. Save the project
Adding the Hotspot Template and Logo
Click on the ‘Edit Skin’ button in the Output Panel to open the floating-nadir-logo.ggsk skin (Figure #7)
2. Click once on the ‘Add Hotspot Template’ button and then click once inside the Canvas to place the Hotspot Template (Figure #8)
Note: In order to make it easier to align the logo to the template we will center the template in the skin
3. Right click on the template icon and select ‘Center Element in Canvas’ - Horizontal and then Vertical. In the Properties Panel | Position set the Anchor position to center. (Figure #9)
4. Click once on the ‘Add Image’ button and then click once inside the Canvas to open a system window. Browse to the tutorial folder and the Assets Folder. Highlight the red360logo.png and select ‘Open’. (Figure #10)
5. The logo is added to the canvas (Figure #11)
Note: the next step is to reduce the size of the logo and center it on the Hotspot Template
6. In the Properties Panel - Position set the Anchor to the center. Click on ‘Reset Size /2’ to reduce the overall size of the logo and Rt Click on the logo and repeat the ‘Center Element in Canvas’ both Horizontal and Vertical. In Appearance set the Hand Cursor: to checked (Figure #12)
Note: the logo needs to be child of the Hotspot template in order to position it on the panorama
7. In the Tree, drag the image1 element onto the Hotspot1 element to make it a child element (Figure #13)
8. Let’s change the ID: of the Hotspot1 element to something more representative of its function. With Hotspot1 selected change the Properties Panel - Position - ID: to ht_nadirlogo and with Image1 selected change the ID: to red360logo. I’m also going to add a Mouse Click action ‘Go to URL’ to the logo.(Figure #14)
Note: because we have changed the hotspot template ID we need to update the Point Hotspot ID as well.
Add a modifier to resize the logo
Note: if you are using a nadir logo to cover an object, such as a tripod, that’s visible in the panorama, we don’t want it to be visible if the viewer zooms in (changes FoV) on the panorama.
To avoid this we will add a modifier to the logo that will resize it in conjunction with the changes in FoV.
This tip was generously provided by Dizzz Gil, thank you.
1. With the ‘red360logo’ element selected click on the dropdown arrow on the Properties/Modifiers panel.
2. Click in an empty field to open the Modifiers Settings window and enter the following settings: (Figure #15)
3. Click Ok, save and close the skin
Update Point Hotspot, Default View and publish the tour
In the Properties - Point Hotspot panel click on the dropdown arrow next to Skin-ID: and select ht_nadirlogo (Figure #16)
2. In the Viewing Parameters panel click on the Reset button to set the initial view back to Default (Figure #17)
3. Save the project
4. In the Output Panel - Output: click on the ‘Generate Output’ button to build the tour (Figure #18)
Summary; When the viewer navigates around the panorama the nadir logo will remain in a set position and note rotate in conjunction with the panorama. The logo will also change size as the viewer zooms in or out.
In addition when the logo is clicked a new window will open with the designated website displayed.