The Clean Start Project

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

From the **CLEAN_START folder, open the 1_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.

The Output Folder is *CLEAN_START_OUTPUT
The Skin is UNIVERSAL_SKIN.ggsk
The Loading panoramic node has been set as the Start Panorama
A sample Panoramic Node (Streetfood)
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.

Open the Properties - Web Output panel.

Open the HTML dropdown; the Template file is the 240205_Social_2values.ggt

Note: if you don’t have that .ggt file you can find a copy of it in the *ASSETS folder in GGT Files.

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

Edit Skin Configuration Window

Open the Edit Skin Configuration Window. Most entries are empty or unchecked except for the following default settings.

Before closing the Edit Skin Configuration window, scroll to the -[ HOTSPOT PINPOINT ]- section and check the Show/Hide All Pinpoints and Enable Mouse Click Link: attributes.

Note: this will show a Pinpoint example on the 360, Linked Video, Info, Web & Pin node

Click OK to save the Edit Skin Configuration changes.

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.

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.

Output the project to see it all in action. The initial screen should look like the example below.