Overview
If you need to compare two 360˚ panoramas side-by-side on a screen, then this tutorial will provide step-by-step instructions on creating the files required to achieve the Split-Screen effect.
Two panoramas will be displayed; the left panorama will display a skin that will control the view of the right panorama to match that of the left one reflecting any of the functions enabled in the skin.
Click the button below to see a standalone example of the project created from the tutorial files.
How it Works
We will create two Pano2VR Outputs, one for the left side with skin and one for the right side without a skin.
Select files from the right project output folder will be moved to the left project output folder, and a new index.html file will be added to replace the existing one.
Tutorial File Download
In the V6-V7-Split-Screen tutorial folder, you will find the following items; (figure #1)
V6-V7 Tutorial Folder
2 x .p2vr project files: Left.p2vr and Right.p2vr
2 x equirectangular images: left_pano.jpg and right_pano.jpg
2 x Output folders: Output_Left and Output_Right
2 x Index files: v6_index.html and v7_index.html
1. x .ggsk skin: Simplex_NoFullscreen.ggsk
Getting Started
Download and unzip the Split-Screen-Tutorial.zip file
Generating the Left Project
Note: clicking on any image will enlarge it.
Note: if you are using V6 the procedure is the same
1. Double-click on the Left.p2vr file to open the project (figure #2)
Figure #2: Left project window
2. Open the Properties - Web Output > Advanced panel (figure #3)
Figure #3: Properties - Web Output > Advanced panel
Note: As we will be combining elements from the left and right projects, we need to assign unique names to similar elements. In this case the .XML file and the folder containing the node titles.
3. Right click on the Output > File: XML link and select “Edit” (figure #4)
Figure #4: Edit the XML link
4. Change pano.xml to left.xml (figure #5)
Figure #5: Change link to left.xml
5. Change the Multiresolution Filename: by adding the word “left” between the tiles/ and /$y (figure #6)
6. Make sure you have Skin: Simplex-NoFullscreen.ggsk loaded in the Output Skin: field. (figure #7)
Note: Unfortunately, we cannot use the Pano2VR fullscreen function with this project. The alternative option is to use the browser “Enter Fullscreen” option.
Figure #7: Simplex skin loaded
7. Save the project and publish to the Output_Left folder
Generating the Right Project
1. Repeat step 1- 5 with the Right.p2vr file
Note: For the right panorama no skin is needed
Combining the Right with the Left
1, Open both the Output_Left and Output_Right folders
2. Drag and copy the right.xml file from the Output_Right folder into the Output_Left folder (figure #8)
Figure #8: Drag the right.xml into the Output_Left folder
3. Open the Output_Right “tiles” folder
4. Drag and copy the “right” folder into the Output_Left “tiles” folder (figure #9)
Figure #9: Drag and Copy the Output_Right tiles folder “right” to the Output_Left tiles folder
Replace the existing index.html file
Note: In order to display the two panoramas side by side and sync their movements, some Javascript has to be added to the index.html file. In the tutorial folder, there are two prepared index files. One for V6 and one for V7.
The image below compares a standard V7 index.html and an updated V7 index.html file with the code to support split-screen. (figure #10)
Figure #10: Comparison between standard index.html and split-screen index.html
1. Drag a copy the V7_index.html file into the Output_Left folder
2. Delete the current index.html and rename the V7_index.html to index.html
3. You are now ready to preview your project
Note: if you republish the Left.p2vr project you will lose the V7_index.html and have to replace it again. You can however open the Left.p2vr project and click on the “Open Output” button to view the final version.
As you move the panorama on the left the right will follow it. Using the controls has the same effect. All that's left is to publish your files online. If you come across any issues or have any feedback on this tutorial I'd love to hear it.
Tony
