Part 1: Getting Started & Adding the Component

Overview - Part 1

This Pano2VR RGTP V6 Component tutorial will take you step-by-step through the workflow required to add the RPGT_COMPONENT.GGSKC to an existing Version 6 project and populate it with gallery and text popups.

Final Output

The tour below is a sample of the final output from this tutorial.

Tutorial Files

1. Download the zipped tutorial folder and unzip it.

In the tutorial folder, RPGT_Tutorial_V6, there are a number of folders as shown in the image below. Included are Custom icons, Project Files, and Tutorial Files (figure #1)

 

Figure #1: Tutorial Folder

 

Note: The equirectangular image, component and project files supplied with this tutorial are copyright Tony Redhead 2022 and not to be sold, used or modified in any way without the express written permission of the author.

Click on any image in the tutorial to enlarge it

This tutorial assumes a basic knowledge of Pano2VR V6

Tutorial Overview

In this tutorial, we will modify the RPGT_Tutorial_Simplex.p2vr project and skin by:

  • Installing the RPGT component

  • Adding the Component to the current skin (Simplex)

  • Adding Externalized colors to the skin.xml (optional, requires WinZip or another extraction software that can show the internal files of the .ggsk)

  • Creating a Single image gallery popup with a Description

  • Creating a Multi-Image gallery popup with a Description

  • Creating a Text only popup

  • Adding Individual Slide Titles

  • Adding Individual Slide Descriptions

  • Adding a Custom Icon

  • Setting Project Colors

  • Integrating the RPGT component with the Simplex Skin

  • Reviewing the Edit Skin Configuration options and Variable Previews

Installing the Component

1. Locate the component, RGTP_COMPONENT.ggskc, in the Tutorial folder > Component

2. Double click the component to add it to your Component Toolbox

Note: if you aren’t familiar with the use of the Component Toolbox please review the video below.

Adding the Component to the Current Skin

1. Open the project file ‘RPGT_Tutorial_Simplex.p2vr’ in Pano2VR V6 (figure #2)

Figure #2: Project window

Note: This is a simple single node tour with a standard Simplex skin

3. Open the Skin Editor

4. Set the Canvas size to 900 x 600 (figure #3)

Figure #3: Set Canvas size

5. Open the Component Toolbox and locate the folder that you saved the RGTP_COMPONENT into (figure #4)

Figure #4: Component Toolbox and RG

6. Double-click the RGTP_COMPONENT to add it to the skin (figure #5)

Figure #5: RGTP_COMPONENT added to the skin

6. Close the Component Toolbox and open the Properties > Variable dropdown menu and you can see the variables added by the component (figure #6)

 

Figure #6: Variables added to the skin

 

7. Select Save As.. and save the skin into the tutorial folder Project Files 270722 as Simplex_RPGT_Skin.ggsk

8. Close the skin

9. In the project window click on the Edit Skin Configuration button

10. Check ‘Show Variable Previews (Debug)’ and click on OK to close the window (figure #7)

Figure #7: Check ‘Show Variable Previews (Debug)

Note: This will test and see if the component is working within the skin. This element is great for debugging as it shows you the state of the variables that affect the component elements. This will be covered in more detail in Part 10 of the tutorial.

11. Output the project

Note: It should look like the example below.

Note: if you are interested in using the component please contact me at tony@tonyredhead.com and we can discuss your requirements.

Note: This is the end of Part 1 lets move onto Part 2: Adding Externalized Colors