Floorplan-Map Button Fixed Button

This blog will detail adding the Floorplan-Map button to the left-hand fixed buttons and developing the content displayed in the output.

The Floorplan-Map button supports two visual displays: a floorplan and/or a map. The current location and associated tags determine the type of display.

For example, the screenshots below show the popup map, with the Skeleton node represented by a pin on the Map. A “map” tag assigned to the Skeleton node displays the map.

Alternatively, the screenshots below shows the popup map, with the Dress Circle node represented by a pin on a Floorplan. A “floorplan” tag assigned to the Dress Circle node displays the floorplan.

Note: changing locations with tags map to floorplan or vice versa automatically changes the popup map display.

The Project: Taman Festival Bali

In this post, we will use a project I’ve been developing called Taman Festival Bali, as the implementation of the maps needs an actual tour. The panoramic nodes and locations are more conducive to setting up the Floorplan-Map.

Note: The project is located in the **RPGTV2024_TAMAN_FESTIVAL folder.

Open the *RPGTV2024_TAMAN_FESTIVAL.p2vr

In the Tour Browser is the black panoramic node, which is used for loading, and then a series of panoramic nodes representing different locations in the park.

For use in the menu, we can categorize them as;

Black Loading only (not used in the Menu)
Locations featuring Street Art: tag = streetart
Locations featuring Old Buildings: tag = oldbuildings
Locations featuring the 3D Theatre: tag = 3dtheatre

The Street Art and Old Buildings panoramic nodes will assigned to the Map, and the 3D Theatre will be assigned to the floorplan.

Note: In groups #3 & #4 there is a crossover panoramic node called Theatre Entrance. It will appear in both the Map and Floorplan.
We will configure it later in the post.

The project also has an additional feature already activated, Display Node Title.

You can find the setting in the Edit Skin Configuration > -[ GENERAL SETTINGS ]-

Display Node Title: = checked

Save the project with the name 1_RPGTV2024_TAMAN_START.p2vr. and output the project. The splash screen and first node should look like the examples below.

Note: The Node Title is displayed on all devices.

First Step

The current project is based on the Fixed Buttons 1 project and uses the same menu structure and fixed buttons as that version.

However, it doesn’t have the Right Menu Fixed Language buttons.

To have working Language buttons, we must create a new translation .pot file using the RPGTV2024_TAMAN_FESTIVAL project entries.

Adding the Language

In the Properties - Project > Translations section, click the Project Translation Folder: folder icon

Select the **RPGTV2024_LANGUAGE_TAMAN folder and click Open.

Note: The Translation Folder is now set to the Taman language folder.

Click the Generate Translations Template icon to create the new Taman-based translation template.

Open the **RPGTV2024_LANGUAGE folder

Double-click the 1_RPGTV2024_TAMAN_START.pot file and then click on “Create new translation”

Select Indonesian (Indonesia) as the language.

Note: Depending upon the language selected you may see this warning. In this instance you can select “Don’t Show Again”.

In the id_ID.po open a search window and search for the name Splash

Note: This helps you quickly find all entries that are associated with the word splash or have it as part of a variable etc.

Once you have found a splash screen word, the first one should be “An Abandoned Amusement Park” click on the translation to apply it.

Go back to the Find window and click next to find all the following entries;

Enter the Park
TAMAN FESTIVAL BALI

Continue translating the names of the Panoramic Nodes.

Note: Use “User Data Title” to find the following entries [they should appear in this order].

Theatre Entrance, Worm, Dress Circle, Gas Mask, Grand Hall, Lilly Pond, Projection Room, Ruined Pavillion, Skeleton, Stalls, Steps to Theatre.

Note: Use “Skin Table Cloner” to find the following Menu Button Title entries [they should appear in this order].

3D Theatre, Old Buildings and Street Art

When all the Splashscreen/Logo/Button Titles are translated, close the id_ID.po file and save it into the **RPGTV2024_LANGUAGE_TAMAN folder.

In the project Properties - Project > Translations > Translations: change the id_ID.po title to ID

Open the Edit Skin Configuration window and scroll to -[ LANGUAGE ]- and set Show/Hide language buttons [ uncheck = false ]: = checked

Click OK to save the Edit Skin Configuration changes.

Save the project and then output the project. The splashscreen and tour screens should look like the examples below.

Note: remember you can click on any image to enlarge it.

view the taman language output

Adding the Map

Open the 1_RPGTV2024_TAMAN_LAN.p2vr file and save it with the name 2_RPGTV2024_TAMAN_MAP.p2vr.

Click Menu > Tour Map to open the Properties - Map panel, click the “+” button and select Add Map.

Set the following Properties:

Map ID: = taman
Title: = Taman Festival
Map Provider: OpenStreetMap
Map Style: Streets

Note: All of the nodes, with the exception of the 3D Theatre nodes, are automatically pinned to the map because they contain Geo-location data. If you don’t have the Geo location data you can place the nodes manually.

Click on the “Fit nodes in window” button, then use the slider to adjust the view so all pins are visible.

Drag the Projection Room node, from the Tour Browser window, onto the square representing the Turbo Theater on the map.

Note: this will be the pin that takes us into the theatre

Close the Tour Map window and select all nodes with Geo-location data (little satellite icon), except the Projection Room in the Tour Browser.

Right-click on one of the nodes, select Add/Remove Tag > Add and add a new tag, “map”.

Adding the Floorplan-Map button

Open the Edit Skin Configuration window and scroll to the -[ FLOORPLANS & MAPS ]- section.

Set the attributes for -[ FLOORPLANS & MAPS ]-;

Show Map: = checked
Map Type [Default = Roadmap, uncheck = Satellite]: = checked

Click OK to save the Edit Skin Configuration changes.

Save the project and output the project. The opening node with the map should look like the example below.

Note: The Floorplan-Map button will show in the left-hand fixed buttons; click on the button to show the floorplan-map popup window.

Note: you can resize the map by clicking on the ↗︎ or set the initial size of the map/floorplan via the Edit Skin Configuration window.

Open the Edit Skin Configuration window and scroll to the -[ FLOORPLANS & MAPS ]- section.

Set the attributes for -[ FLOORPLANS & MAPS ]-;

Size [Default = small, uncheck = large]: = checked

View taman map version

Adding the Floorplan

Open the 2_RPGTV2024_TAMAN_MAP.p2vr file and save it as 3_RPGTV2024_TAMAN_FLOORPLAN.p2vr

Click on Menu > Tour Map to open the Properties - Map panel, click the “+” button and select Add Floorplan.

Navigate to the *RPGTV2024_ASSETS > Taman > Floorplan folder and select the turbo_theatre.png.

Set the following Map Properties:

Map ID: = turbo
Title: = Turbo Theatre

Output:

Format: = PNG
Background Color: = HTML: #ffffff Alpha Channel: 1

Drag each Turbo Theatre node onto the Floorplan and arrange them as shown below.

In the Tour Browser, select the “Theatre Entrance” node and add two new tags “floorplan” and “exterior”.

Note: The Theatre Entrance node has both floorplan and map tags. As it works as a bridge between the Theatre and the external environment having both tags allows it to be shown on both the map and the floorplan.

Select the remaining Turbo 3D theatre nodes, add two new tags “floorplan” and “interior”,

Open the Edit Skin Configuration window and scroll to the -[ FLOORPLANS & MAP ]- section.

Set the attributes for -[ FLOORPLANS & MAP ]-;

Show Floorplan: = checked

Note: With both the Show Floorplan and Show Map checked the UI will automatically switch between the two options based on the panoramic nodes tag (floorplan or map)

Click OK to close the Edit Skin Configuration window and apply the changes.

Save the project and output it. Clicking on the Location Map Button opens the Map, and clicking the ↙︎makes the map larger; opening a node within the theatre changes the Map to a Floorplan and vice versa.

Note: When I’m at the Theatre Entrance I can see a pin, highlighted in red, within the theatre. Clicking on that pin takes me to the Projection Room node within the theatre and changes the Map to the Floorplan.
Selecting the Theatre Entrance pin in the Floorplan takes me out of the theatre to the Theatre Entrance and changes the Floorplan back to the Map.