Auto Resizing PDF in a Hotspot Popup

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

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.

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

That concludes the the tutorial. I hope it was helpful and any comments or suggestions are welcomed.

Tony

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia