The finished output…

This tutorial will show you how to add both Maps and Floorplans to the project using the supplied project files.

Note: this tutorial is built on the Pano2VR files 0801_BASE_RPGTVW_DLS.p2vr and 0801_BASE_RPGTVW_DLS.ggsk and the new .ggt file, 1601_base_normal.ggt that were delivered on the 8th of January 2023

Note: Before we start there are some issues in the 0801_BASE_RPGTVW_DLS.ggsk that needs to be fixed.

If you want to do the tutorial independent of your ongoing projects then use the 0801_BASE_RPGTVW_DLS_UPDATE.ggsk (this is already set in the P2VR project file.
If you want to use your current project skin you will need to copy some elements from the 0801_BASE_RPGTVW_DLS_UPDATE.ggsk to your current skin (figure #1)

1. Cut the FLOORPLANS, RPGTVCOMPONENTS and DLS_COMPONENTS elements to remove them from the Tree

2. Copy, one at a time, the same elements from the Update skin and paste them into your skin.

Note: make sure you place them in the same order in the tree

3, Once you have finished save your skin with a new name

Getting Started

The tutorial folder contains the 3 Base files, a BASE_OUTPUT folder, a TO_UPLOAD folder and an ASSETS folder

1. Start by double clicking on the 0801_BASE_RPGTVW_DLS.p2vr file to open the project (figure #2)

2. Generate an Output

Note: this generates a single node tour with sample Point Hotspots showing a variation of the currently available Point Hotspots within the skin.

3. Save the Project as Floorplan_1

Adding the Panoramas

1. From the ASSETS > Panoramas folder drag in the Northern Territory folder and then the Adelaide Gaol folder (figure #3)

Note: because the panoramas are in named folders and have metadata for titles, descriptions and location these attributes will be automatically added to tags, titles and maps.

If you want you can set your own names and adjust the default view.

2. Save the Project

Setting the Edit Skin Configurations

Note: A number of basic configuration need to be set in order to display the User Interface. This is done via the Edit Skin Configuration window.

1. Open the Edit Skin Configuration window

2. Set the following:

INTRODUCTION SCREEN GLOBAL SETTINGS
Show Introduction Screen (A or B): = checked
Show Introduction A: = checked
Start Button Title: = Enter Tour
INTRO SCREEN A
Screen Title: = Floorplan Tutorial
Screen Description: = Adding Maps and Floorplans to the Tour
FIXED SKIN ELEMENTS
Show Logo Above Menu: = checked
Logo Name: = vt_logo_stacked.svg
MAIN MENU
Show Main Menu: = checked
SHOW/HIDE FIXED BUTTONS LEFT
Show Floorplan Button: = checked
Show Hide Button: = checked
FLOORPLANS
Show Floorplan: = checked
Show Map: = checked

Menu Tables
Main Menu:

Tag: Northern Territory, Adelaide Gaol, Placeholder_360
Title: Northern Territory, Adelaide Gaol, Sample Hotspots

3. Close the Edit Skin Configuration window

4. Save the Project as Floorplan_2

5. Generate an Output (figures #4 & #5)

Note: in the tour we can see the menu with the sub-categories and in the bottom there is the Floorplan and Hide button. Clicking on the Floorplan button opens the empty Floorpan Element (figure #6)

Adding the Floorplan and Map

1. Save the Project as Floorplan_3

2. Click on the Tour Map menu button to show the Tour Map panel (figure #7)

Note: You will be able to see the map pins for the three nodes we added because the images have metadata including the Geo locations of the images.

3. Click on the green “+” and select “Add Map”

4. Set the Title to Northern Territory

5. Zoom in to the map to show the region of interest

6. In the Properties - Map panel click on the Map Limits pin button

7. Draw an area of interest around the Northern Territory pins (figure #8)

Figure #8: Setting the area of interest (map limits)

Note: adding Map Limits prevents the viewer from moving the map beyond the limits.

8. Click on the green “+” and select “Add Floorplan”

9. Set the Title to Adelaide Gaol

10. Set the Output: Format: = png

11. Set Background Color: to 0 Alpha

12. Drag the node from the Tour Browser onto the floorplan and align the panorama to North

13. Set a Tag for the two Northern Territory nodes = map

14. Set a Tag for the gaol = floorplan

Note: the floorplan element will recognise the tags and show either the map element or the floorplan element based on the tags

15. Save the project as Floorplan_4

16. Generate an Output

17. Click on the Floorplan button to open the Floorplan popup (figure #9)

Figure #9: Floorplan popup element showing the Map

Note: the map is being displayed even though the Placeholder node isn’t on the Map or Floorplan. This is a feature that allows you to have the floorplan visible over a range of nodes even if they aren’t in the map/floorplan.

Note: the map isn’t showing any radar beams but the nodes are clickable and will take you to the associated node.

Remove Map from Designated Nodes

Note: if we don’t want the map to show on particular nodes but automatically show for nodes that do have links to either the map or floorplan we can do the following:

1. Select the Placeholder node in the Tour Browser

2. Add a new tag “nomap”

3. Save the Project

4. Generate an Output

Note: now, even if you have opened the Floorplan element on a node that has the “map” or “floorplan” tag and the Floorplan element is open when you go to the Placeholder node the Floorplan element is hidden and shown again when you are on one of the other nodes.

Floorplans on Mobile

Note: A number of basic configuration need to be set in order to display the User Interface on the iPhone. This is done via the Edit Skin Configuration window.
The first setting will show a sub-category menu, the second setting will show a single menu.

1. Open the Edit Skin Configuration window

2. Set the following:

FIXED SKIN ELEMENTS
Show Node Title: = checked
MOBILE MENU
Show Mobile Menu: = checked
Show Menu on Open: = checked
Show Sub Menu mobile: = checked
Change Category on Node Change: = checked

Menu Tables
Mobile Menu:

Tag: Northern Territory, Adelaide Gaol, Placeholder_360
Title: Northern Territory, Adelaide Gaol, Sample Hotspots

3. Close the Edit Skin Configuration window

4. Save the project as Floorplan_5

16. Generate an Output

Note: Screenshots below are Google Pixel phone running Android. Click on any image to enlarge it.

Note: Screenshots below are Apple iPhone 13 Pro. Click on any image to enlarge it.

To show a single menu do the following

17. Open the Edit Skin Configuration window

18. Set the following:

MOBILE MENU
Show Mobile Menu: = checked
Show Menu on Open: = checked
Show Sub Menu mobile: = unchecked
Change Category on Node Change: = checked

19. Close the Edit Skin Configuration window

20. Add the tag “single” to each node you want to appear in the menu

21. Save the Project

22. Generate an Output

That concludes the Floorplan tutorial :-)