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
Note: at this time the option to load an original PDF file into a hotspot is only available on the desktop. I’ll be posting an alternative ‘Mobile’ friendly addendum to this tutorial shortly.
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)
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 firstname.lastname@example.org
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
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)
2. Open the Skin Editor (Figure #3)
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)
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)
4. Select the ‘information’ container and delete it (Figure #6)
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)
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
8. Click the ‘Close’ button and save the skin (Figure #9)
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.
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)
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'
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.
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>
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.
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
2. Select the ‘info_popup_close' element. Open Properties/Actions and delete both 'Set Value' actions (Figure #17)
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
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
5. Select the ‘screentint_info' element. Open Properties/Appearance and delete both 'Set Value' actions (Figure #20)
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
7. Select the ‘ht_info' element. Open Properties/Actions and delete both 'Set Value' actions (Figure #22)
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
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)
3. Double click on the first action ‘Set Variable Value’ to open the ‘Action Settings’ window (Figure #25)
4. Double click on the ‘Action Filter’ button in the ‘Action Settings’ window to open the ‘Action Filter’ window (Figure #26)
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)
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)
7. Click on ‘OK’ to confirm the changes and the changes are reflected by an ‘*’ next to the Source action (Figure #30)
8. Repeat steps 3 - 7 with the ‘Set Element Alpha’ action (Figure #31)
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)
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
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)
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
That concludes the the tutorial. I hope it was helpful and any comments or suggestions are welcomed.