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 14_MENU_HIDE.(p2vr) file and save it as 15_FIXED_BUTTONS.(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 uncheck Include Files: Hotspots and Media

Click the Project Translation Folder: folder icon and open the **LANGUAGE_CLEAN_START folder.

Note: The existing language files are automatically added into the Translations

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 up 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 down 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 down 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 Desktop/iPad versions the Hide and What’s App buttons are on the left and the Language and Fullscreen buttons on the right.
On the iPhone version there is no fullscreen button as it is not a function of the phone.

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

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 and the node names haven’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 “basefiles” 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_FIXED_BUTTONS1.pot file from the **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 Find window and search for the name Basefiles

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

Note: If you translate the lowercase “basefiles”, the button will not work as the Menu Table is looking for the word “basefiles”!

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 down 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.

Note: There are two versions of Google Maps, Global and Local. A global Google map is set in the Edit Skin Configuration window while a local Google map is set in the User Data fields.

Setting up a Global Map

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: = Shwedagon Pagoda, Yangon, Myanmar (Burma) or..
Enter Map Address: = 16.798567633116246, 96.1495572964951

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

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

Starting Map Type [ k=satellite, p=terrain ]: = k

Scroll up 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.

Note: Using the Lat/Long settings with a zoom of 15 and a type = p (terrain) shows a map like the one below.

Setting up a Local Map

Note: In addition to a global map you can have node specific Google Map. When the Google Map button is selected these settings will override the ones set in the Edit Skin Configuration window but only for the tagged node/s

Select the node that you want a local map to appear on.

Select the Properties - User Data tab and add the tag “gmaplocal” to the node/s Tag field

In the User Data settings, there is a section with Custom Properties

Set the attributes for -[ GMap Alt Location ]-;

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

Enter Map Address: = The Home Hotel, Mandalay, Myanmar (Burma)
Enter Map Address: = 21.973758572418923, 96.08074370712927

Set the attributes for -[ GMap Alt Zoom ]-; [ 0 -22 ]

Set Zoom Level: = 20.00

Set the attributes for -[ GMap Alt Terrain ]-; (k=satellite, p=terrain)

Type : = p

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

Note: all other nodes will show the Global Map

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.

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

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

Show Developer Info: = 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 Developer Info button opens the Info popup window displaying information about the developer or tour owner.

Translating the Tooltips

We need to create a Translation file for the Skin to translate the tooltips.

Open the Skin Editor

Click the “Generate Translation Template” button in the top-right Skin menu.

Close the Skin Editor

Note: This will create a new folder, in the same location as the skin (ggsk) file, with the name of the skin. In this example it will be UNIVERSAL_SKIN_translations.
Inside the folder is a new .pot file, UNIVERSAL_SKIN.pot.

Use the same process described in the Splash Screen tutorial post set up the language.

In this example search for the string “ind_ref_tooltip” and translate the following entries:

About the Tour
Ambient Off
Ambient On
Click to close Fullscreen
Click to view Fullscreen
Close Map
Enter Fullscreen
Exit Fullscreen
Google Map (there is no translation available)
Hide All
Hide Thumbnails
Languages
Location Map
Next
Previous
Show All
Show Thumbnails
WhatsApp (there is no translation available)

Also, search for;

View Social Sites
View Facebook
View Instagram
View Linkedin
View Pinterest
View X

When you have translated everything, close the .po file and save it

Save the project and output it.

Note: it should look like the English and Burmese versions below

View version Fixed buttons V2 Skin Language

This concludes the post on Fixed Buttons V1.

In the next post, we will examine the Floorplan and SVG Map.

Back to the Index

SETUP

ADDING THE FIXED BUTTONS

Updating the my_MM.po

Enabling other Buttons:

Social Channels

Google Maps

Setting up a Global Map

Setting up a Local Map

DEVELOPER INFO

Translating the Tooltips

Tony Redhead