Update - 28/01: In order to resolve some issues around the Desktop version of the final output additional .html assets and a new gallery_styles.css file have been developed and there is a new download zip file https://rebrand.ly/scrolling-tutorial-zip

Part 1 has not changed however the final section, 'Resolving the double scroll issue on Desktops' , in Part 2 has been revised.

Introduction

This tutorial covers the implementation of scrollable iFrames within the built-in Gallery Component. It was developed in response to a Pano2VR forum post in regard to loading external web pages into the gallery and then a further discussion on how to enable scrolling on iOS devices.

If the standard method of loading web pages into a text box is used, scrolling will be available on the desktop but not on iOS devices. To enable the scroll function on iOS requires some workarounds that this tutorial will cover in detail.

The final output from the tutorial is shown below.

Note: to view the actual scrolling effect in the above example you will need to open the tour in a new browser window by clicking on this link https://rebrand.ly/scrollfinal

Pano2VR Gallery Component

If you are not familiar with the Gallery Component here is a video by Hopki that provides a great overview of it's functionality and how to modify it.

Part 1 & 2

This tutorial has been divided into two parts. Part 1 covers the following;

Assets used in the Tutorial
Requirements and Test Devices
Setting up the Project Folder
Setting up the Basic Project
Adding the Gallery Component

Part 2 covers;

Modifying the Gallery Component
Setting up the iFrames
Resolving the double scroll issue on Desktops

Assets

There are a number of assets, for download at https://rebrand.ly/scrolling-tutorial-zip, to use while following the tutorial. The zip file contains a folder, named Gallery_Scrolling-iFrame (figure #1) which in turn contains HTML files, photos, a sample panorama (but you can certainly use your own), fonts, a .css file and the simplex gallery component.

In the 'includes' folder there are 8 .html files that provide content for 3 different slides and compatibility with Mobile and Desktop browsers. Each Mobile slide has two .html files, for example slide 1 uses 01.html and 01_content.html. Each Desktop slide has one .html file, for example slide 1 uses 01_dt-content.html.

The reason for two HTML files is to implement the workaround for iOS devices. The first file 01.html contains simple code that defines a <div> surrounding an <iframe>. The <div> has the following class that uses CSS to enable the scrollbar to function in iOS.

The second file 01_content.html contains the content that we want to have appear in the scrolling iFrame.

The 01_dt-content.html is provided to get around a bug that results in two sets of scroll bars. Details are in Part 2 of this tutorial.

Requirements

This tutorial has been developed in Version: 5.2.3 pro 64bit for Mac and tested on iMac, iPhone 6 and iPad Air 2 and Samsung S8.

Getting Started

Setting up the Project Folder (figure #2)

1. Create a new folder in the Gallery_Scrolling-iFrame folder and call it 'scrolling-iframe'
2. Copy the 'photos' and 'includes' folders into the new folder
3. Copy the two fonts from the fonts folder into the top root of the new folde r

The Project File

Setting up the Basic Project
The next step is to create the basic project. The basic project will include the panorama and basic template settings but no skin options.

1. Launch Pano2VR
2. Drag the panorama, 8x4.jpg, from the Assets | panorama folder into the 'Viewer' window
3. Select 'HTML' from the Output dropdown menu (figure #3)

figure #3: Panorama added and HTML5 selected as Output

4. Click on the 'Output Folder' icon and browse to the 'scrolling-iframe' folder (figure #4)

5. Select the scrolling-iframe folder and click 'Open'

Note: you will see a warning message that the folder is not empty. Go ahead and click on 'Yes' and the folder location will be set in the project

6. Click on the 'HTML' tab to reveal the template options (figure #6)

7. To add the .css file and gyroscope (if required) click on the 'Edit Template' button to open the HTML Template window (figure #7)

8. Click on the 'Include gryoscope control:' if you want it active on the mobile devices
9. Click on the 'Open' button next to 'Include external CSS file:'
10. Browse to the 'Assets | css' folder, highlight 'gallery-styles.css' and click on 'Open'
11. Click on 'Okay' to apply the changes and close the HTML Template window

12. Add a title to the index.html by clicking on the 'User Data' button and enter 'Scrolling iFrame Tutorial' in the 'Title: text box' (figure #9)

13. Save the project as 'scrolling-iframe.p2vr' to the top root of the 'Gallery_Scrolling-iFrame' folder (figure #10)

14. Click on the 'Generate Output' button to build the basic version of the project as shown below.

Adding the Gallery Component

Now that we have our Basic Project we can check to see if the Gallery Component is installed in our version of Pano2VR. If it isn't the following steps will show you how to install it. If you already have it installed proceed to step #12.

1. Click on the 'Edit Skin' button to open the 'Skin Editor' and
2. Click on the 'Components Toolbox' button to see if the 'Gallery Component' is installed in any of the Categories (figure #11)

Note: If you don't have the Simplex_Gallery component already installed follow steps #4 to #8

3. Browse to the 'Gallery_Scrolling-iFrame' folder
4. Open 'Assets | skin component'
5. Double click on the 'simplex_gallery.ggskc' file. This opens the 'Copy Component into Category' window (figure #12)

6. Click on the 'Choose a category:' drop down menu to show 'New'
7. Click on 'OK'
8. From the 'Copy Component into Category' select either User Defined or create a new Category.

In this example I'll create a new category called 'Gallery'

9. Select 'New' and click on 'OK' (figure #13)

10. Enter 'Gallery' in the 'Category Title', field and click on 'OK' (figure #14)

Note: You will see a notification that the component has been successfully copied. (figure #15). When you select 'OK' a new project window may open, just close the window and close all of the skin windows.

11. After you have closed the Skin windows, reopen them. The new category 'Gallery' will be available in the scrolling 'Categories' window. Selecting the Gallery option shows and 'Information' tab with information about the component (figure #16)

Note: Clicking on the Gallery Simplex component reveals details about the component. If you are looking for the Silhouette version you can find it in the Pano2VR forum post https://ggnome.com/forum/viewtopic.php?t=11216

figure #16: Gallery Simplex loaded into the Gallery Category of the Components Toolbox

12. You can add the component to the skin by 'double clicking' on it and then selecting 'Close' on the Components Toolbox window.

The component elements will appear in the 'Tree' as well as in the 'Canvas'. You will also see 'Variables' that are part of the component Properties (figure #17)

figure #17: Gallery Simplex component open in Skin Editor

13. With the Skin Editor window active select Menu | File | Save As
14. Name the file 'scrolling-gallery' and save it into the top root of the 'Gallery_Scrolling-iFrame' folder (figures #18 & #19)

15. The 'scrolling-gallery' skin is now applied to the HTMl Output (figure #20)

16. 'Save' the project and click on the 'Output' button
17. Click on 'Yes' when you see the message re overwriting the file
18. The component can now be interacted with in the output file but only the basic functionality is available as shown below.

If you have reached this point please proceed to 'Part 2' of the tutorial

Scrolling iFrames in a Gallery Component - Part 1