Floorplan/Map Fixed Button

About the Floorplan/Map 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.

Open the C1_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, they are categorized as;

  1. Empty Loading only (not used in the Menu)

  2. Locations featuring Street Art: current tag = streetart

  3. Locations featuring Old Buildings: current tag = oldbuildings

  4. Locations featuring the 3D Theatre: current tag = 3dtheatre

The Street Art and Old Buildings panoramic nodes will assigned to a Map, and the 3D Theatre will be assigned to a 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.

Edit Skin Configuration window ⇑

The project also has a number of additional feature already activated in the Edit Skin Configuration window.

You can find the setting in the Edit Skin Configuration > -[ GENERAL SETTINGS ]- and they include;

  • Developer Info

  • Fixed Buttons Left

  • Fixed Buttons Right

  • Floating Tooltips

  • General Settings

  • Google Map Settings

  • Gradients & Tints

  • Hotspot Nodes

  • Logo

  • Menu

  • Menu Mobile

  • Splash Screen

  • Thumbnails

  • Transitions

  • Menu Tables

Getting Started ⇑

Output the project. The splash screen and first node should look like the examples below.

 
 

Click on the “Enter the Taman Festival” button to open the first node

 
 

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 as well as the addition of the Language buttons.

Language ⇑

The project is shown in two languages, English and Indonesian. The id_ID.po translation files can be found in the folders;

  • C_TAMAN_FESTIVAL_LANGUAGE

  • UNIVERSAL_SKIN > UNIVERSAL_SKIN_BASE_COLOR_translations

For more information on languages within RPGTV2025 see the post Splash Screens and the section Language.

Adding the Map ⇑

Save the project as C2_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 markers are visible.

 
 

Three of the markers are overlaping. Moving them slightly will make it easier for the visitor to use the markers.

 
 

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 marker that takes us into the theatre

 
 

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

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

 

scroll to the -[ FIXED BUTTONS LEFT ]- section.

Set the attributes for -[ FIXED BUTTONS LEFT ]-;

  • Show Floorplan-Map Button: = checked

 

Click OK to save the Edit Skin Configuration changes.

Save the project and output the project.

Enter the tour and in the opening node click on the Map button.

Note: The Floorplan-Map button will show in the left-hand fixed buttons;

This will open the the map and should look like the example below..

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

 

Click OK to save the Edit Skin Configuration changes.

Save the project and output it. After clicking on the map button, the opening node with the map should look like the example below, with the small map visible.

 

Adding the Floorplan ⇑

Open the C2_TAMAN_MAP.(p2vr) file and save it as C3_TAMAN_FLOORPLAN.(p2vr)

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

 
 

Navigate to the PROJECT_ASSETS > 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”,

 
 

Close the Map

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 marker, within the theatre. Clicking on that marker takes me to the Projection Room node within the theatre and changes the Map to the Floorplan.

Selecting the Theatre Entrance marker in the Floorplan takes me out of the theatre to the Theatre Entrance and changes the Floorplan back to the Map.

This concludes the section on the Floorplan/Map Fixed Button.

In the next post, we will look at creating the SVG Map & Left Fixed Buttons,

Tony Redhead