THE COMPONENTS

CVI is a set of 4 Pano2VR Components: (left to right) Screen Capture, Copy View to Link, iFrame Embed, and Help

Note: click on any image in the page to enlarge it

Screen Capture

Screen Capture takes a screenshot of your current tour window that is saved to your desktop or device.

Functions

Capture the image within the current viewport

Save as a 72dpi JPG image

Requirements:

Custom Template .ggt

Compatibility:

Desktop, iPad, iPhone, Android Phone, Android Tablet
Tours within iFrames

Copy View to Link

Copy View to Link will create a URL link of the current tour and add it to the Clipboard of the device being used.

Link Elements

Custom Node ID
Current Pan, Tilt, and Field of View
Projection

Requirements:

Full URL of the tour (ie https://tonyredhead.com/index.html)
Custom Node ID activated in HTML Template
Custom Template .ggt

Compatibility:

Desktop, iPad, iPhone, Android Phone, Android Tablet
Does not work in iFrame

iFrame Embed

iFrame Embed will generate iFrame code that includes a link to the current tour and adds it to the Clipboard of the device being used.

Tour link contains:

Custom Node ID
Current Pan, Tilt, and Field of View
Projection

Requirements:

Full URL of the tour (ie https://tonyredhead.com/index.html)
Custom Node ID activated in HTML Template
Custom Template .ggt

Compatibility:

Desktop, iPad, iPhone, Android Phone, Android Tablet
Does not work in iFrame

Options:

Predetermined Width (% or px) and Height (px) (set in the Edit Skin Configuration)
User-defined Width (% or px) (range between 10% and 100% or 250px and 2,000px)
User-defined Height (px) (range between 125px and 1,000px)

Help

Help is a button and a popup window that contains information on how the components operate.

Screen Capture: only the panoramic image is captured not any pinned or skin element
Custom.ggt file: included with the components
Tours within iFrames: requires specific iFrame code that can be created using the iFrame Embed component

WORKING EXAMPLE

The iFramed tour below has been added to the web page using code generated by the iFramed Embed button.

Brown Bluff is a link generated by the Copy View to Link button.

Old Whaling Ship image is a stereographic projection of node 2 created by the Screen Capture button.

INSTALLING THE COMPONENTS

1. Extract the contents of the CVI-COMPONENTS zip file

Note: the zip file contains 3 folders including a project folder so you can follow along with the tutorial.

2. Double click each .ggskc file to add them to the Component Toolbox.

3. Scroll to the bottom of the Category list, click on New… and create a new Category called CVI Components

Note: If you want to learn more about the Component Toolbox please see the video below.

4. Add the language_url_social_tags_screen_v4.ggt file to your html5 templates file folder

Note: You can find your HtmlTemplate directory by launching Pano2VR, and opening Preferences/Files. Right click on the text field next to HTML Template Directory: and it will open the folder.

5. Simply drag the language_url_social_tags_screen_v4.ggt file into the folder.

6. Close Pano2VR and re-open it.

7. Load the language_url_social_tags_screen_v3.ggt by clicking on the Template dropdown button in the Output: HTML panel and selecting language_url_social_tags_screen_v4.ggt

8. Enable Direct Node Access by clicking on the Edit Template button

9. Click on the checkbox next to Direct Node Access if it’s not already selected.

That finished the installation and you are ready to deploy the components..

DEPLOYING THE COMPONENTS

The CVI components can be deployed individually or collectively into the skin..

Note: if two or more CVI components are deployed their visibility within a tour can be managed via the Edit Skin Configuration

1. Open the CVI-COMPONENTS folder (extracted from the zip file downloaded previously)

2. Open the CVI-Project folder

Note: There is an empty CVI-Output, a Panoramas folder with 3 grid equirectangular images and a Projects folder with a Grids.p2vr file and a Grids.ggsk file

3. Double Click the Grids.p2vr file to open it.

4. Click on the Edit Skin button to open the skin

Note: the skin is empty save for a set of Previous/Next buttons to navigate through the nodes

5. Click on the Components Toolbox button to open the toolbox and navigate to the category folder where you saved the components.

6. Double Click on CVI-SCREEN-CAPTURE to add it to the skin.

Note: this will add a two elements to skin

7. Double Click on CVI-COPY-LINK to add it to the skin.

Note: you will see a popup window with information about a variable. Click on ‘Use skin variable’

Note: this will add two more elements to the skin

Copy View to Link button added to the skin

8. Double Click on CVI-IFRAME to add it to the skin.

Note: you will see a number of popup windows with information about a variable. Click on ‘Use skin variable’ for all of the windows
Note: this has added nine new elements to the skin

Note: both the Copy View to Link and iFrame Embed use a skin element cvi_cnt_settings. By loading both components to the skin we have two elements the same. Select and delete one of them.

8. Double Click on CVI-HELP to add it to the skin.

Note: you will see a number of popup windows with information about a variable. Click on ‘Use skin variable’ for all of the windows
Note: this has added two new elements to the skin

9. Save and Close the skin and Publish the project

COMPONENT SETTINGS

Note: After publishing the only buttons that are working as they should are the Help and Screen Capture buttons. Copy View to Link and iFrame Embed only return partial SCR information.
In order to resolve this, we need to add some information to the Component settings.

1. Open the Project if it’s not already open

2. Click on the Edit Skin Configuration button to open the Edit Skin Configuration window

Note: the Edit Skin Configuration provides access to change variables within the skin without having to open the skin.

For example, if you have a skin with all four components loaded but you only want to show the Capture button then you would uncheck ‘Show Copy View Link button’ and ‘Show iFrame Button:

The other functions are;

Site location: this is the URL to the location of the tour and is used by the ‘Copy View to Link’ and ‘iFrame Embed’ components

In the Working Example site, posted above, the link generated from the button is, https://p2vr.s3.ap-southeast-2.amazonaws.com/COMPONENTS/COPY-VIEW-IFRAME/PONANT/index.html#Antarctica-Browns-Bluff,99.68713427811454,16.979963929293195,59.05636990508611,4

So in the Edit Skin Configuration for the Working Example the Site Location is: https://p2vr.s3.ap-southeast-2.amazonaws.com/COMPONENTS/COPY-VIEW-IFRAME/PONANT/index.html

If you don’t have a site URL yet and you are working locally you can use the localhost address.

1. Publish your project

2. In the default browser address bar copy the URL

Note: it will look something like this: http://localhost:8080/HZhVP7yK/index.html

3. Paste the URL into the Site Location text field in the Edit Skin Configuration window.

Note: This will allow you to test the components that require a Site Location

iFrame Width: this is the default width value shown when the iFrame Embed button is clicked

iFrame Width Type (% or px): how the width is defined in the code as either a percentage value (most common) or a pixel value.

In the example above the iFrame Width is 100 and the Width Type is % the result in the code will be Width=100%

iFrame Height: this is the default height value shown when the iFrame Embed button is clicked

Note: iFrame Height is primarily represented in pixels

iFrame Fixed Dimensions: when this is checked the default Width and Height are the only values that can be used. The options to change Width, Height and Type are hidden

Note; if fixed dimensions are checked the Help popup displays information relevant to the dimension state.

Summary

If you wish to customise the components by changing their colors, position in the skin, etc the three tree elements are;

Screen Capture: cvi_txt_screen_capture_button

Copy View to Link: cvi_txt_copy_link_button

iFrame Embed: cvi_cnt_iframe_button

Help: cvi_txt_help_button

Addendum

The language_url_social_tags_screen_v4.ggt also has support for multiple languages and can display a default language by passing a parameter in the URL string.

The following example below shows English/Spanish language integrated with the CVI-Components. If the tour has Spanish selected as its language then the code output from Copy to View Link and iFrame Embed will pass the Spanish language parameter in the code.

In this example, Spanish is the language passed in the parameter.

Open the tour in a new tab

CVI - Capture, View, iFrame

THE COMPONENTS

Screen Capture

Copy View to Link

iFrame Embed

Help

WORKING EXAMPLE

INSTALLING THE COMPONENTS

DEPLOYING THE COMPONENTS

COMPONENT SETTINGS

Summary

Addendum

Tony Redhead