Fixed buttons are a feature of RPGTV 2024, which features a variety of interactive buttons designed to enhance user experience and provide easy access to different functionalities, as shown below.

-[ FIXED BUTTONS LEFT ]-:

What’s App: Opens a What’s App window with pre-entered content.
Social Channels: Buttons that link to Social Media sites connected to the tour, including LinkedIn, Pinterest, Instagram, X (formerly Twitter), and Facebook.
Floorplan-Map: Buttons that open geographic maps and detailed floorplans help users locate and explore areas of interest visually.
SVG Map. A full screen diagrammatic map that represents the different categories in the tour.
Audio Control: Play and pause buttons to manage audio content, allowing users to start or stop playback as needed.
Hide UI: Options to hide or reveal user interface elements, offering a cleaner or more detailed view based on user preference.

-[ FIXED BUTTONS RIGHT ]-:

Share to Social: Buttons for sharing the tour on various social media platforms, including Linkedin, Pinterest, X (formerly Twitter) and Facebook.
Developer Information: A button that opens a popup window with information about the company's developer behind the tour.
Google Maps: A dedicated button that opens the selected location directly in Google Maps for additional navigation and information.
Language Selection: A feature that allows users to change the website's language, supporting multilingual accessibility.
Fullscreen Mode: A button to toggle fullscreen mode, providing an immersive viewing experience by expanding the webpage to fill the entire screen.

SETUP

Open the 12_RPGTV2024_MENU_EXPAND.p2vr file and save it with the name 14_RPGTV2024_FIXED_BUTTONS1.p2vr.

NOTE: this version of the project isn’t set up for languages. So we will quickly add the translation folder and language title.

In the Properties - Project > Translations section, click the Project Translation Folder: folder icon and open the **RPGTV2024_LANGUAGE folder.

Change the my_MM.po Title to MY as shown below.

Save the project

Note: As some fixed buttons, Floorplan Map, SVG Map, Ambient Sound and Share to Social, require additional entries in other sections of the Edit Skin Configuration and purpose-built assets, we will cover them in a future post.

ADDING THE FIXED BUTTONS

Note: to see fixed button tooltips we will need to enable them in the
-[ FLOATING TOOLTIP ]- section.

Open the Edit Skin Configuration window and scroll to the -[ FLOATING TOOLTIP ]- section.

Set the attributes for -[ FLOATING TOOLTIP ]-;

Show Fixed Button Tooltips: = checked

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

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

Show Left Toolbar: = checked
Show Hide Button = checked
Show Whats App Chat = checked
What’s App Phone Number (inc. +): = +61438501002
What’s App Message: = Contact me for more information

Scroll to the -[ FIXED BUTTONS RIGHT ]- section.

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

Show Right Toolbar: = checked
Show Fullscreen: = checked
Show Language Options: = checked (if you haven’t set up languages leave this option unchecked)

Scroll to the -[ LANGUAGE ]- section.

Set the attributes for -[ LANGUAGE ]-;

Show/Hide Language Buttons [ uncheck = false ]: = checked

Click OK to save the Edit Skin Configuration changes.

Save the project and output the project. The opening node panorama will look like the example below.

Note: On the left are the Hide and What’s App buttons and on the right the Language and Fullscreen button.

Clicking on the hide button hides the UI and vice-versa.

Clicking on the What’s App button will open a new window showing the Phone Number and Message entered in the text fields.

Clicking on the Language Buttons reveal the language choices available.

Clicking on the Fullscreen Button opens the tour in Fullscreen.

Note: Clicking on the MY button does not change all of the button names to Burmese. In the example below the Basefiles button name hasn’t been translated.

Note: The problem is is that we are using a base translation file from an earlier project that didn’t have these names included. We need to create a new English .pot language file based on the current project, then update the my_MM.po translation file.
In order to have them change, the my_MM.po language file needs updating to add Burmese translations for the words: Basefiles (only the capitalised version, not the lowercase “base files” as it’s used in the menu cloner and will break it translated). Also all the names of the Panoramic nodes except Loading.

Updating the my_MM.po

In Properties - Project > Translations, click the Generate Translation Template icon to create a new .pot file based on the current project.

Open the **RPGTV2024_LANGUAGE_CLEAN_START folder, and you will see the new .pot named after the current project.

Double-click on the my_MM.po file to open it and from the main Poedit menu select Translation > Update from POT File…

Select the 14_RPGTV2024_FIXED_BUTTONS1.pot file from the **RPGTV2024_LANGUAGE folder and click Open.

This will automatically update the current my_MM.po and include any additional words created in the current project.

In the my_MM.po open a search window and search for the name Basefiles

Once you have found the word Basefiles (note uppercase B), click on the translation to apply it.

Go back to the Find window and search for User Data Title. This will find all the names of the following panoramic nodes;

Responsive, Square, Landscape, Portrait, 360 & Linked Video, Info, Web and Pin, Audio, Custom Image and Streetfood

Note: make sure they have an uppercase first character

As you find each word, apply the translation and close the my_MM,po file to save the changes when you finish.

Save the project and output the project. Now when you change the language to Burmese all of the menu names will change to Burmese.

Enabling other Buttons:

Social Channels

Open the Edit Skin Configuration window and scroll to the -[ FIXED BUTTONS LEFT ]- section.

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

Show Social Channels: = checked
Show Facebook: = checked
Show Twitter: = checked
Show Instagram: = checked
Show Pinterest: = checked
Show Linkedin: = checked

Note: Social Channels buttons promote social media engagement and make it easy for visitors to connect with your social media presence directly from your virtual tour.

Scroll to the -[ SOCIAL MEDIA LINKS ]- section.

Set the attributes for -[ SOCIAL MEDIA LINKS ]-;

Linkedin User Name: = tonyredhead
Pinterest User Name: = tonyredhead
Instagram User Name: = tonyredhead
Twitter Handle [ no "@” ]: = tonyredhead
Facebook User Name: = tonyredhead

Note: On the image below I’ve highlighted the name I’m using for the Facebook Social Media Link

Click OK to save the Edit Skin Configuration changes.

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

Note: On the left, we can now see the Social Media button. Clicking on it reveals the 5 Social Media sites. Clicking an individual Social Media site will open it in a new window.

Google Maps

The Google Maps button opens a popup window displaying a single map location. Settings for zoom level and map type are available.

Open the Edit Skin Configuration window and scroll to the -[ GOOGLE MAP SETTINGS ]- section.

Set the attributes for -[ GOOGLE MAP SETTINGS ]-;

Note: you can use longitude and latitude or an actual address

Enter Map Address: = 16.798567633116246, 96.1495572964951
Enter Map Address: = Shwedagon Pagoda, Yangon, Myanmar (Burma)

Note: The Map Zoom level (larger the number = closer view)

Set Map Zoom Level [ 0 -22 ]: = 19.00

Starting Map Type [ blank = terrain, satellite ]: = satellite

Scroll to the -[ FIXED BUTTONS RIGHT ]-.

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

Show Google Map: = checked

Click OK to save the Edit Skin Configuration changes.

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

Clicking on the Google Map button opens the map popup window displaying the location.

Note: if the language option MY is selected the Google map displays certain sections of the interface in that language.

DEVELOPER INFO

The Developer Info button opens an information popup that provides information and links about the developer or company behind the tour.

Open the Edit Skin Configuration window and scroll to the -[ DEVELOPER INFO ]- section.

Set the attributes for -[ DEVELOPER INFO ]-;

Information Title: = RPGTV 2024
Information Contact: = Tony Redhead
Logo Name [ inc ext - jpg, png or SVG ]: = redhead.png
Facebook User Name: = tonyredhead
Instagram User Name: = tonyredhead
Linkedin User Name: = tonyredhead
Info What’s App Phone Number: = +61438501002
Info What’s App Message: = For Developer information, send a message
Website Title: = tonyredhead.com
Website URL [ https://location ]: = https://tonyredhead.com/rpgtv2024

Note: The redhead.png is a logo in the logos folder in the To_Upload folder
Note: Even though I’ve used the same name for the social channels that I used in the fixed buttons you can use different ones here.