About

RPGTV2024 is a Pano2VR Virtual Tour project I've been developing for nearly two years. It addresses a need for a platform that enables the publication of diverse media—including 360-degree panoramas and videos, photographs, information, and audio—in a Virtual Tour format. The project has been designed to be accessible on desktop and mobile devices without requiring users to delve into the underlying code.

Wherever possible, I’ve tried to create multiple ways of implementing a particular function to allow creative choice in the final output.

This blog contains posts that describe how to implement the options and settings associated with different elements within the project. The posts include:

Coming next;

Coming soon;

  • 360˚ Video in Hotspots

  • Hotspot Pins

  • Translations and Integration of Languages

  • Managing Exposed Colors

  • Social Sharing

NOTE: THIS TUTORIAL HAS BEEN DESIGNED TO RUN ON PANO2VR VERSION 7.1.1a.

Base Project

Base Project

Normally, you would start by generating a new Pano2VR project for most virtual tours.

However, the RPGTV2024 Virtual Tour Project contains many Custom Properties that uniquely customise Hotspots and other UI elements and variables that manage many of the project's features.

To that end, you start a new RPGTV2024 Virtual Tour Project by opening a “Base” project. The base project contains two nodes; additional nodes are added either by dragging them into the Tour Browser or adding another project to the Tour Browser.

Splash Screens

Splash Screens

Splash Screen

This post explains the importance and functions of splash screens in virtual tours. Key points include:

1. How to create different versions of splash screens:

  • Version A: A basic splash screen with title, description, and enter button

  • Version A with Logo: Adds a clickable logo with an external link

  • Version A with Language: Incorporates language selection options

  • Version B1: Similar to A but with a different layout

  • Version B2: Includes a floating image

  • Version B3: Features a full-screen background image

2. Step-by-step instructions for each version, including:

  • Configuring settings in the Edit Skin Configuration window

  • Adding and positioning elements like text, logos, and images

  • Implementing language options using translation files

  • Applying visual effects such as blur, saturation, and tint filters

3. It covers both desktop and mobile versions of the splash screens.

4. The post uses a sample project based on Myanmar and Demonstration panoramas for its examples.

5. It includes tips on file management, saving projects, and outputting results.

Navigational Menus

Navigational Menus

Navigational Menus

This post provides a detailed tutorial on creating and customizing navigational menus for virtual tours. Key points include:

1. How to add different types of navigational menus for both desktop and mobile platforms:

  • Single menu

  • Subcategory menu

  • Subcategory menu with node image backgrounds

  • Expanding menu

2. Step-by-step instructions for creating each menu type, including:

  • Configuring settings in the Edit Skin Configuration window

  • Assigning tags to panoramic nodes

  • Setting up menu tables

  • Customizing button appearances

3. How to:

  • Remove previous/next buttons

  • Add and manage tags for nodes

  • Create category and subcategory structures

  • Implement image backgrounds for menu buttons

  • Resize menu button images

4. Advanced features like:

  • Expanding menus for tours with many nodes

  • Adding a logo above the menu

5. The post uses a sample project based on Myanmar and includes screenshots of the results for each menu type and sample projects.

6. It notes which features are available on different devices (Desktop, iPad, iPhone).

Fixed Buttons V1

Fixed Buttons V1

Fixed Buttons V1

This post describes how to add and customize various interactive fixed buttons to enhance the functionality of the virtual tour project. Key points include:

1. The post covers various types of fixed buttons, including:

  • WhatsApp chat

  • Social media channels

  • Language selection

  • Fullscreen mode

  • Google Maps integration

  • Developer information

2. It provides step-by-step instructions for adding and configuring each button type, including:

  • Enabling tooltips for fixed buttons

  • Setting up left and right toolbars

  • Configuring individual button settings

3. How to:

  • Update language translation files for proper localization

  • Set up social media links

  • Configure Google Maps integration

  • Create a developer information popup

4. It covers additional features like:

  • Hiding/showing the user interface

  • Customizing button appearances and behaviours

5. The post uses a sample project based on Myanmar and includes screenshots of the results for each menu type and sample projects.

Fixed Button Floorplan/Map

Fixed Button Floorplan/Map

Floorplan/Map Fixed Button

This post shows how to add and customize a Floorplan-Map fixed button to enhance the navigation and user experience. Key points include:

1. The post introduces the Floorplan-Map button, which can display either a map or a floorplan based on the current location and associated tags.

2. The post covers several key steps:

  • Setting up language options and translations

  • Adding and configuring a map using OpenStreetMap

  • Creating and positioning a floorplan for a specific area (Turbo Theatre)

  • Implementing the Floorplan-Map fixed button

  • Configuring nodes with appropriate tags for map and floorplan display

3. It explains how to:

  • Assign tags to panoramic nodes for categorization

  • Set up geo-location data for map pins

  • Create a transition point between map and floorplan views

4. The post provides step-by-step instructions for:

  • Updating language translation files

  • Adding and configuring maps and floorplans in the Tour Map panel

  • Adjusting settings in the Edit Skin Configuration window

5. It covers additional features like:

  • Resizing the map/floorplan display

  • Switching between map and floorplan views based on node tags

6. The post uses a sample project called "Taman Festival Bali" to demonstrate the implementation.

Fixed Button SVG Map

Fixed Button SVG Map

SVG Map Fixed Button

This post covers the implementation of an SVG Map in a virtual tour project. Key points include:

1. Introduction to the SVG Map as a full-screen diagrammatic navigation tool.

2. SVG Map features and benefits:

  • Resolution-independent and scalable

  • Fast rendering

  • Preview on mouseover

  • Active/Visited states for buttons

  • Desktop/iPad and Mobile versions

  • Multiple language support

3. Steps for adding an SVG Map:

  • Preparing SVG and PNG files

  • Adding the map as a floorplan in Pano2VR

  • Configuring map properties

  • Positioning tour nodes on the map

4. Implementation of the SVG Map button:

  • Adding the button to fixed left buttons

  • Configuring map display settings

  • Setting up background tint and blur

5. Creating a mobile-specific version of the SVG Map:

  • Adding a separate mobile floorplan

  • Configuring mobile-specific settings

6. Multilingual support:

  • Setting up English and Indonesian versions of the map

7. Detailed explanations of the SVG Map assets' file structures and folder organization.

8. Instructions for customizing the map appearance and behavior through the Edit Skin Configuration window.

9. Screenshots demonstrating the final result on desktop and mobile devices.

Thumbnail Scroller

Thumbnail Scroller

Thumbnail Scroller

This post covers the implementation of an interactive and customizable Thumbnail Scroller to enhance navigation and user experience in the virtual tour project. Key points include:

1. Introduction to thumbnails in virtual tours and their benefits:

  • Easy navigation

  • Visual previews

  • Enhanced user experience

  • Efficient tour exploration

  • Integration with other navigation tools

2. Two main types of thumbnail scrollers:

  • Show All: displays all panoramic nodes

  • Sub-category: shows only thumbnails related to a specific category

3. Steps for adding a Show All Thumbnail Scroller:

  • Tagging relevant nodes

  • Configuring thumbnail settings in the Edit Skin Configuration window

  • Enabling bottom gradient tint for visibility

4. Addressing overlap issues between menu and thumbnail scroller:

  • Reducing thumbnail scroller width

  • Implementing auto-hide functionality

5. Creating a Sub-category Thumbnail Scroller:

  • Assigning categories to nodes using descriptions

  • Configuring thumbnail settings for category-specific display

6. Detailed instructions for:

  • Adding and configuring thumbnails

  • Adjusting visibility and auto-hide settings

  • Customizing thumbnail appearance and behavior

7. Screenshots demonstrating the final result on desktop and mobile devices

8. Explanation of how the thumbnail scroller integrates with different menu formats (Single, Expanding, and Sub-category)

Hotspot Nodes

Hotspot Nodes

Hotspot Nodes

This post shows how to add and modify Hotspot Nodes in the virtual tour. Key points include:

1. Hotspot Nodes are clickable areas in a panorama that link to other panoramas, allowing navigation between scenes in a virtual tour.

2. The tutorial walks through the process of creating, customizing, and positioning Hotspot Nodes, including:

  • Enabling Hotspot Nodes in the Skin Configuration

  • Adding Hotspot Nodes to panoramas

  • Setting properties for Hotspot Nodes (ID, position, target view)

  • Customizing the appearance of Hotspot Nodes (icons, previews, titles)

3. The post covers various settings and options for Hotspot Nodes, such as:

  • Showing/hiding 3D previews and titles

  • Using different icon styles

  • Adjusting target views for smooth transitions

4. The post addresses potential issues like overlapping Hotspot Nodes when multiple nodes are placed close together and provide a solution through a skin configuration setting called "Overlap."

Replacing the Default Font

Replacing the Default Font

Sometimes, a client may have a specific font and font styles that are part of their Brand Guidelines, and the Virtual Tour should reflect those fonts and styles.

In this post, we will replace the Montserrat font with a new font ITC New Baskerville.

In the course of the post, we will;

  • Convert .ttf fonts to .woff2

  • Add the fonts as Local Files

  • Add the font CSS

  • Update the Font Classes Code Element

Mobile Landscape

Mobile Landscape

In general usage, most users tend to hold their phones in portrait orientation for general tasks like browsing, messaging, and social media.

When watching videos, users often switch to landscape orientation, especially for longer content and more immersive mobile games often encourage landscape use.

In my experience, I have found that most interactive virtual tours are best suited to portrait orientation especially when there are popup windows with text and or images.

In landscape orientation, the user interface of the web browsers displaying the Virtual Tours doesn’t leave much screen real estate for the display of information. Still, it is acceptable for viewing just the panoramic node.

Responsive Hotspots

Note: This post is a work-in-progress

In the post, “A Clean Start”, the section headed “Generate Output (Publish)” includes a review of the nodes included in the tutorial files as named below;

  • Galleries

  • 360, Linked & External Video, Info, Web & Pin Popups

  • Audio

  • 360˚ Video

  • Custom Images

Each of these nodes contains hotspots that display content, in a popup window, when the hotspots are interacted with.

I refer to them as Responsive Hotspots because they are designed to display the content in a way that reflects the browser screen size, aspect ratio, orientation (when viewing on a mobile device) and dependencies of different operating systems.

For example, a gallery hotspot popup can look like this on a browser that has a horizontal aspect ratio.

Or like this when the browser aspect ratio is vertical

 
 

Or like this when the device is a mobile phone.

 
 

Adding a Responsive Hotspot

#1 Copy and Paste

The simplest way to add a new hotspot is to copy and paste an existing one and then modify it.

In this example, we will copy a Responsive Gallery hotspot from the *BASE_EN_DEMO.p2vr project and add it to the 12_TAMAN_MULTINODES(.p2vr) project.

1. Open the BASE_EN_DEMO(.p2vr) project found in the **BASE folder

2. Publish the project

3. Click on the last hotspot on the top row

Note: As you can see from the tooltip this hotspot has a number of settings defined;

  • Responsive

  • Multiple Images

  • Slide Title & BG

  • Headline

  • Description

4. Click on the hotspot to open it.

Note: you can click the large “>” arrow to open the next image. As you do so the image title changes and the description changes. This gallery has five images in it.

5. In the project file select the hotspot

6. Right-click and select “Copy Active Point Hotspot” from the popup menu

7. Close the project

8. From the **TAMAN_FESTIVAL folder open any of the versions in the folder. In my example, I’m using 12_TAMAN_MULTINODES(.p2vr)

9. Right-click in the Gas Mask node and select Paste Point Hotspot from the popup menu.

10. With the hotspot selected you can see the settings attached to the hotspot in the Properties - Point Hotspot panel

11. Save the project as 14_TAMAN_RESHOTSPOTS(.p2vr)

12. Publish the project

13. On the Splash screen select “Enter the Park”

Note: on mouse-over the floating tooltip is shown and when the hotspot is clicked the Responsive Popup Gallery is displayed.

Note: at this point we would modify the Point Hotspot Properties by changing the images and text. In the next example we will create the same popup from scratch and this will provide examples that can be used to update the Copy and Paste version.

#2 Creating from Scratch

1. From the **TAMAN_FESTIVAL folder open the 12_TAMAN_MULTINODES(.p2vr) project

2. Select the second node “Gas Mask”

3. Add a Hotspot

Cart (0)