A Clean Start

A Clean Start

Note: This tutorial has been tested on Pano2VR Version 7.1.9

In A Clean Start we will cover the following topics:

The Clean Start Project ⇑

From the **CLEAN_START folder, open the CLEAN_START.(p2vr) file.

Note: You may need to reconnect to a number of files including the panoramic nodes and the skin

In the image below, several areas of the Project are highlighted.

  1. The Output Folder is *OUTPUT_CLEAN_START

  2. The Skin is UNIVERSAL_SKIN_BASE_COLOR (.ggsk)

  3. The Loading panoramic node has been set as the Start Panorama

  4. A sample Panoramic Node named Street Food

  5. A group of Panoramic Nodes contains Hotspot examples of the popup functionality.

Note: The start panorama is used as a loading screen. Once the certain elements of the tour have loaded the tour moves to the first panoramic node in the Tour Browser (#5)

Properties - Web Output ⇑

1. Open the Properties - Web Output panel.

2. Open the HTML dropdown; the Template file is a special modified file that contains options for advanced social sharing, named normal_rpgtv.ggt

 
 

Note: You can find a copy of it in the *ASSETS folder in GGT Files. Upload it to your HTML Template Directory. You can find the location of the directory in the Pano2VR Preferences under “Files > HTML Template Directory”

3. In the Advanced section, the Assets > Files or Folders, the folders from the *TO_UPLOAD_BASE_CLEAN_START folder have been added to the list.

 
 

Edit Skin Configuration Window ⇑

1. Open the Edit Skin Configuration Window.

Note: Most entries are empty or unchecked except for the following default settings.

 
 

2. Click OK to save the Edit Skin Configuration changes.

3. Save the project.

Generate Output - Publish ⇑

Now we can generate our first output to see the Clean Start tour

Note: While the elements of the tour are loading you will see an animation on the black background.

After the tour elements have loaded the black screen transitions into the first node in the Tour Browser. At this time, the only interface elements are the Previous/Next Buttons and the Node Title.

Clicking the next button takes us to the second node, the Gallery Popups. The rows display Gallery popup content as follows;

1st Row: Responsive (aspect changes from horizontal to vertical based on the browser aspect ratio. On mobile, the aspect is always vertical)

2nd Row: Square (the image remains square, but the popup may be different sizes depending upon the features selected)

3rd Row: Landscape (a fixed landscape aspect on desktop and iPad. On mobile, the aspect is always vertical)

4th Row: Portrait (a fixed aspect ratio regardless of the operating system or device)

Clicking the next button again takes us to the third node, the 360, Linked & External Video, Info, Web & Pin Popups.

The rows display the popup content as follows;

1st Row: (Hotspots 1 -3) Video: The First hotspot delivers a locally stored file, while the second and third hotspots link to YouTube and Vimeo videos.

1st Row: (Hotspot 4) 360 Video: This hotspot loads a 360˚ Video clip, stored locally and plays it back in the popup or fullscreen.

Note: This hotspot is not currently supported on Mobile Devices.

 
 

2nd Row: (Hotspot 1 & 2) Info Popups: These popups display textural information. The popup changes height based on the amount of text entered. (Hotspot 2 shown below)

2nd Row: (Hotspot 3 & 4) Web Popups: These popups display external information, such as Websites, loaded into an iFrame. (Hotspot 2 shown below)

Note: On Mobile Devices clicking on the Hotspot opens the link in a new tab.

 
 

3rd Row: Pinpoint: This popup is activated by a mouse over and displays a line animation and a title. If “Enabled Mouse Click Link” is active a mouse click will open another node or external link.

Note: This hotspot is not supported and is hidden on Mobile Devices.

 
 

Clicking the next button again takes us to the fourth node, Audio.

This node contains hotspots from the previous nodes with the addition of Audio playback buttons, and either a seekbar or soundwave.

Three examples are;

1st Row: (Hotspots 3) Portrait Gallery: This gallery has multiple images, individual descriptions and individual audio descriptions with a seekbar.

2nd Row: (Hotspots 3) 360˚ Video: This 360˚ video hotspot has an audio descriptions with a soundwave.

Note: This hotspot is not currently supported on Mobile Devices.

 
 

3rd Row: (Hotspots 3) Vimeo Video: This hotspot delivers a embedded Vimeo video and has audio playback with a seekbar and soundwave.

Clicking the next button again takes us to the fifth node, Custom Images.

1st Row: (Hotspots 1-4): These are Gallery hotspots using custom .png images defined in the Properties - Point Hotspot > Custom Image section and in the Properties - Point Hotspot > Custom Properties: Icon Shape, Icon Border, Icon Round Corners and Icon Shadow fields.

 
 
 
 

2nd Row: (Hotspots 1-4): These are Gallery hotspots using inbuilt icons defined in the Properties - Point Hotspot > Custom Properties: Hotspot Icon, Icon Shape, Icon Border, Icon Round Corners and Icon Shadow fields.

 
 
 
 

Note: When building a tour and adding hotspots these examples can be copied and pasted into new nodes or into a new project. This is very effective and reduces the time needed to add Custom Property settings.

Now, we are ready to start putting our Virtual Tour together. Next on the agenda is developing our Splash Screen.

Tony Redhead