Final Output
This tutorial provides a step-by-step instructions on how to open an Adobe PDF file into a hotspot template and have the popup and PDF scale as the browser window is resized. At the end of the tutorial the final output will be the same as the example below.
Click here to view this in a resizable browser window
Update 15/10/18: A solution for this issue has been provided at the end of the tutorial
Update 14/05/20: I’ve added additional information regarding use on Mobile Devices at the end of the tutorial under the section; Addendum #1: Displaying the PDF on Mobile Devices
Tutorial Files
In the tutorial folder, Auto_Resize_PDF, there is an Asset Folder with a PDF file DC3-Wreck-Location.pdf and an equirectangular image dc3-fuselage.jpg, a Project folder with a Pano2VR project 'auto-size-pdf.p2vr', a skin 'auto-size-pdf.ggsk' and an Output folder called 'Auto_Resize_PDF' with project files created from the .p2vr and .ggsk elements. (Figure #1)
Figure #1: Auto_Resize_PDF folder
Note: The image dc3-fuselage.jpg is copyright to Tony Redhead. I'm happy for you to use them to build the tutorial but if you want to use them in for other purposes please contact me at tony@tonyredhead.com
Project Overview
In the tutorial we will modify the 'auto-size-pdf.p2vr' project and skin by;
Modifying the ‘ht_info’ component to load the PDF file
Creating an 'include' folder containing the PDF file
Adding in iFrame code to load the PDF file and create the auto resizing
Note: this tutorial assumes a basic knowledge of Pano2VR V5 or V6 beta
Getting Started
1. Download the zipped tutorial folder here
Note: Once you have downloaded the zip file and extracted it you can view the project by right click on the index.html file and opening it in Firefox.
1. Open the tutorial Pano2VR project file auto-resize-pdf.p2vr (Figure #2)
Figure #2: Pano2VR tutorial project opened in Pano2VR V6beta4
2. Open the Skin Editor (Figure #3)
Figure #3: Skin Editor and auto-resize-pdf.ggsk tutorial skin
Modify the 'ht_info' component
1. Click on the dropdown arrow next to the 'information' container to reveal the contents of the container (Figure #4)
Figure #4: contents of the ‘information’ container
Note: we don’t need all of the elements in the ‘information’ container that comes with the component. So we will drag the ones we want to keep out of the container and then delete the container.
2. Shift select the 'info_popup_close' and ‘info_text_body’ elements and drag them out of the 'information' container to the top of the tree (Figure #5)
Figure #5: elements dragged out of information container
4. Select the ‘information’ container and delete it (Figure #6)
Figure #6: information container selected
Next: we will rearrange, reposition and resize some of the elements and then test the changes.
5. Click on the ‘info_popup_close' element in the canvas and drag it to the top right of the canvas (Figure #7)
Figure #7: repositioned info_popup_close button
6. Select the ‘info_text_body’ element and set the following Properties/Position properties; (Figure #8)
Position: Anchor: to the center
Size: Width = 40% Height: = 80%
Set the following Rectangle properties;
Background: Enabled: check | Color: #aaaa7f
Note: you can leave the rectangle color attributes as white or select another color by clicking in the small color square. The background color is only used to visually check the rectangle’s position and size.
Right Click in the ‘info_text_body’ element in the canvas and select ‘Center Element in Canvas’ - Vertical from the popup menu
Figure #8: Setting the position and rectangle attributes of the ‘info_text_body’ element
8. Click the ‘Close’ button and save the skin (Figure #9)
Figure #9: Close and Save the skin
9. Output the project (Figure #10)
Note: because of the percentage settings of 40% and 80% on the size of the ‘info_text_body’ element, the element changes size as the browser window is resized.
Figure #10: ‘info_text_body’ element resizing as the browser window resizes
Adding the PDF File
1. Create a new folder inside the Auto_Resize_PDF folder, name it 'includes' and drag and drop the dc3-wreck-location.pdf into it (Figure #11)
Figure #11: new ‘includes’ folder containing the pdf
3. Open the Skin Editor if it’s not already open
4. Select the ‘info_text_body’ element and set the following Properties/Rectangle properties; (Figure #12)
Background: Enabled: uncheck
With the ‘info_text_body’ element still selected set the following Properties/Text properties;
Text: <iframe src="includes/dc3-wreck-location.pdf" height="100%" width="100%" frameborder=”0”></iframe>
Align: Center | uncheck 'Word wrap' | uncheck 'Scroll Bar'
Figure #12: ‘info_text_body’ element properties
5. Click the Close button and save the skin
6. Output the project (Figure #13)
Note: The pdf fills the info_text-body element when the page loads but doesn't scale when the element resizes to fit the browser window unless you reload the page.. We will resolve this issue by adding a parameter to the .pdf file name.
Figure #13: PDF is loaded but doesn’t automatically scale
7. Open the Skin Editor
8. Select the ‘info_text_body’ element and in the Properties/Text field add #view=FitH to the .pdf location so that the iframe code looks like this: (Figure #14)
<iframe src="includes/dc3-wreck-location.pdf#view=FitH" height="100%" width="100%" frameborder=”0”></iframe>
Figure #14: updated iframe code
9. Click the Close button and save the skin
10. Output the project (Figure #15)
Note: The #view-FitH sets the pdf file to always match the Horizontal Width of the container it sits within. So the PDF scales when the browser window is scaled.
Figure #15: The pdf file now scales to match the horizontal width of the container
Add the Interactivity
Note: the final step is to set up the interactivity so when the viewer clicks on the ‘i’ hotspot button, the screentint is loaded, the popup opens with the pdf displayed, the close button is made visible and the ‘i’ hotspot button is hidden.
Subsequently when either the screentint or the close button is clicked the popup closes, the screentint is hidden, the close button is hidden and the ‘i’ hotspot button is shown.
1. Select the ‘info_text_body’ element and set the following Properties/Appearance properties; (Figure #16)
Visible: Logic Block
Trigger = *vis_info_popup | Comparison = | Value = true | Visible = true
Visible: uncheck
Figure #16: properties set for the ‘info_text_body’ element visible settings to show/hide pdf
2. Select the ‘info_popup_close' element. Open Properties/Actions and delete both 'Set Value' actions (Figure #17)
Figure #17: Delete unnecessary ‘Set Value’ Actions from the ‘info_popup_close' element
3. With the ‘info_popup_close' element still selected. Create a new Action; (Figure #18)
Source = Mouse Click | Action = Set Element Alpha | Parameters = 1.000 | Target = ht_info
Note: this action will reset the ‘ht_info’ alpha to 1.000. In step #6 we will add an action to set it to 0.00 when the button is clicked
Figure #18: New ‘info_popup_close' action
4. With the ‘info_popup_close' element still selected. Set the following Properties/Appearance properties; (Figure #19)
Visible: Logic Block
Trigger = *vis_info_popup | Comparison = | Value = true | Visible = true
Visible: uncheck
Figure #19: ‘info_popup_close' visible settings to show/hide button
5. Select the ‘screentint_info' element. Open Properties/Appearance and delete both 'Set Value' actions (Figure #20)
Figure #20: Delete unnecessary ‘Set Value’ Actions from the ‘screentint_info' element
6. With the ‘screentint_info' element still selected. Create a new Action; (Figure #21)
Source = Mouse Click | Action = Set Element Alpha | Parameters = 1.000 | Target = #ht_info
Figure #21: New ‘screentint_info' action
7. Select the ‘ht_info' element. Open Properties/Actions and delete both 'Set Value' actions (Figure #22)
Figure #22: Delete unnecessary ‘Set Value’ Actions from the ‘ht_info' element
8. With the ‘ht_info' element still selected. Create a new Action; (Figure #23)
Source = Mouse Click | Action = Set Element Alpha | Parameters = 0.00 | Target = #ht_info
Figure #23: New ‘ht_info' action
9. Close and Save the Skin
10. Output the final project file
Addendum #1: Displaying the PDF on Mobile Devices
At this time mobile browsers cannot display PDF files. As an alternative we can implement a mobile solution whereby the PDF is automatically downloaded and opened in the device when the hotspot button is selected.
Note: We want the hotspot button to have two distinct functions.
1. When the project is viewed on a desktop the button will open the text box and load the iframe and display the PDF.
2. When viewed on a mobile device the hotspot button will use a ‘Go to URL’ that points to the PDF’s location in the project folder.Thanks to Hopki for his tip on how to achieve this.
1. Open the final project file
2. Open the Skin Editor and select the ‘ht_info’ element to highlight it and open the Properties/Actions dropdown menu (Figure #24)
Figure #24: ht_info selected and Actions dropdown showing
3. Double click on the first action ‘Set Variable Value’ to open the ‘Action Settings’ window (Figure #25)
Figure #25: Set Variable Value Action Settings window
4. Double click on the ‘Action Filter’ button in the ‘Action Settings’ window to open the ‘Action Filter’ window (Figure #26)
Figure #26: Action Filter window
Note: an action filter sets the parameters under which an Action will take effect. In this case when the isMobile = false (we are viewing on a desktop) the Action can be executed.
5. For the ‘Trigger’ select ‘Player - is Mobile’ (Figure #27)
Figure #27: Select Player/is Mobile
6. Set Comparison = | and Value = false and click ‘OK’. The Action Filter button is highlighted in orange to indicate that an Action Filter has been set. (Figure #28, 29)
Figure #28: Completed filter
Figure #29: Highlighted button
7. Click on ‘OK’ to confirm the changes and the changes are reflected by an ‘*’ next to the Source action (Figure #30)
Figure #30: Action Filter applied to Mouse Click | Set Variable Value action
8. Repeat steps 3 - 7 with the ‘Set Element Alpha’ action (Figure #31)
Figure #31: Both action have the same filter
Note: all that’s left is to create a new action that will be triggered when ‘is Mobile’ is true
9. Double click in a blank source field in the Actions drop down menu to open the Actions window. Set the following actions;
Source: Mouse Click | Action: Go to URL | URL: (leave empty for now) | Target: _blank (Figure #32)
Figure #32: Action Settings
10. Click on the pencil icon to open the ‘Enter Value’ window and add the correct URL to the pdf file (Figure #33)
Note: the URL must include the top root folder. For example the URL to my example is ‘https://s3-ap-southeast-2.amazonaws.com/p2vrtutorials/Auto_Resize_PDF/index.html’ In the URL: field I will put /p2vrtutorials/Auto_Resize_PDF/includes/dc3-wreck-location.pdf
Figure #33: URL to the pdf file
11. Click ‘OK’ to confirm the URL
12. Click on the ‘Action Filter’ button and add a Trigger Player ‘is Mobile’ = true. Click ‘OK’ to confirm and ‘OK’ to add it to the Actions (Figure #34)
Figure #34: New ‘Go to URL’ action with filter to activate if ‘is Mobile’ is true
13. Save the Skin
14. Output the project
Note: when the project is loaded from the server to a mobile device, clicking on the hotspot button will open the PDF file in a new window.
You can see it in action here: https://s3-ap-southeast-2.amazonaws.com/p2vrtutorials/Auto_Resize_PDF/index.html
Summary
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.
