Overview

This is part 2 of a 2 part tutorial showing, step-by-step how to create a Point Hotspot Zooming Popup that uses an Extenal Image and has an interactive Reveal Text Overlay. It carries on from Part 1 and you will need to complete it before you start this part.

Note: this tutorial is designed for Pano2VR Version 6 beta 3

Part 1 of this tutorial covered;

Import an Equirectangular Image into Pano2VR
Add a Point Hotspots
Set the Output Type (HTML5)
Create a Skin
Build and Image Element using an External Image
Create an Image Container
Build a Test Output

In Part 2 we will;

Create Variables and Actions to manage the content within the Skin
Add a reveal text box with styled text
Output the Final Project

Legacy Settings, Variables and Logic Blocks

In Part 1 we loaded the 'Information Popup Silhouette' component from the Built-In component list and kept some of the elements. This component comes with some predefined settings, variables and logic blocks and they were applied when it was added to the skin.

Even though we have deleted some elements a number of the settings, variables and logic blocks remain. To see the variable added by the compenent;

1. Open the saved Hotspot_Zoom.p2vr project file. Open the Skin Editor and click anywhere on a blank section of the canvas. In the Properties > Variables section there is a variable: Name = vis_info_popup | Type = True/False | Init Value = false (Figure #1)

Note: This variable allows us to create a button that, on Mouse Click, changes the Init Value to true. We can add the variable as a Trigger in multiple element Logic Blocks so that the action of clicking the single button triggers a state (true or false) in those elements

Step 1. Activating the Hotspot

At the conclusion of Part 1, when the project was output, the popup_image content was visible on load. The first thing we want to do have the popup_image content hidden and have the hotspot trigger it's visibility.

1. Select the popup_image container and in Properties > Appearance uncheck Visible: and then click on the Visible: Logic Block icon to open the Logic Block (Figure #2)

Figure #2: popup_image Properties > Appearance

Note: in the empty Logic Block you can see the Default Value: is Visible: false because Visible: is unchecked in the Appearance panel

2. Double click in the empty field under Trigger and select the variable '*vis_info_popup' (Figure #3)

3. Using the dropdown menu set the Visible: = true and then click 'OK' to save the settings (Figure #4)

4. Now the Properties > Appearance > Visible Logic Block is coloured to indicate there is an active Logic Block in use (Figure #5)

5. Save the Skin and Output the project

Note: In the example above the project opens and the popup_image isn't visible. Clicking on the hotspot 'i' icon reveals the image and the screentint. Clicking on the close_button or the screentint also close the image.

In the Skin, click on the screentint_info element and look at the Properties > Appearance > Visible: you will see that it already has a Logic Block and some additional Set Value Actions added when the component was initially added to the skin

Part 2. Setting up the Zoom

1. Open up the Skin Editor if it's not already open. Select the popup_image container to make it active and in Properties > Appearance > Scaling: set the X and Y scale to 0 (Figure #6)

Note: this sets the scaling for the zoom image when the project opens. Adding an action to the ht_info hotspot to change the scaling will trigger the image to appear

2. Click on the ht_info hotspot to make it active. If it's not already open click on Properties > Actions to view the actions associated with the hotspot. Click on the delete button to remove the two 'Set Value' Actions (Figure #7)

Note: These Action were associated with the Text box that we deleted in Part 1 and are no longer required in this project.

5. Double Click on the empty field under Source and in the Action Settings module set the following: Source = Mouse Click | Action = Scale | Type = Toggle | Scale = X & Y 100% | Transition Time: 2 s | Target = popup_image and then click 'OK' to save the settings (Figure #8)

Note; When a user clicks on the hotspot 'i' icon the 'popup_image' container (and anything in it) will be scaled from 0,0 to 1,1 over a 2 second period

6. Save the Skin and Output the Project

Note: if you click the 'info_popup_close' the image and screentint will disappear but when you click on the hotspot 'i' icon it reopens and zooms down. This is because the 'info_popup_close' button isn't resetting the zoom just the visibility. The Action Type 'Toggle Element Scale' also needs to be added to the button to reset the zoom. (See Step 3/3)

Step 3. Applying logic and actions to all elements

The following steps apply logic and actions to other buttons and clickable areas so that user interactions work with the zoomed image.

1. Click on the 'info_popup_close' element to make it active and open the Properties > Actions dropdown menu (Figure #9)

Figure #9: info_popup_close default actions

Note: There are 3 Actions in the menu, part of the original component

2. As they are not part of the skin delete the two Set Value actions (Figure #10)

3. Double Click in the empty 'Source' field to open the Action Settings module. In the Action Settings module select the following: Source = Mouse Click | Action = Scale | Type = Toggle | Scale = X & Y 0% | Transition Time: 2 s | Target = popup_image (Figure #11)

4. Click 'OK' to save the settings (Figure #12)

5. Save the Skin and Output the project

Note: when a user clicks on the info_popup_close 'x' icon the popup_image container will be scaled to 0 (invisible). All elements in the skin that have the variable 'vis_info_popup' in their Visible Logic Block will be hidden as the action in the button sets the variable to 'false'

Note: if you click on the 'screentint_info' the old action remains so the same 'Toggle Element Scale' used in the 'info_popup_close' element needs to be added to it's actions

6. Click on the 'info_popup_close' element if it isn't already selected and in Properties > Actions right click on the 'Toggle Element Scale' action and select 'Copy' (Figure #13)

7. Click on the 'screentint_info' element to make it active and in Properties > Actions delete the two 'Set Value' Actions (Figure #14)

8. Right Click in the empty field and select 'Paste' to copy the 'Toggle Element Scale' action (Figure #15)

11. Save the Skin and Output the project

Note: if you want to change the speed of the zoom go back into the 'Toggle Element Scale' actions and change it there.

You will notice that the title may appear over the image as it's scaling if the hotspot is behind the zoom image or the mouse remains over the button. That's because it's using a mouse over action in the Title Visible Logic Block. The next step will stop this happening

12. Select the 'ht_info hotspot' element and in Properties > Actions double click on the empty 'Source' field to open the Action Settings module. In the Action Settings module select the following: Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = tt_information (Figure #16)

13. Click 'OK' to save the settings (Figure #17)

14. Save the Skin and Output the project

Note: now the title disappears as soon as you click the info button and will reappear when you close the window.

Step 4. Creating the Text Reveal

Note: the Text Reveal will be made up of two elements, a rectangle and a text field in a container. The container will be positioned below the external_image and be triggered to change position by a Mouse Over Parent action.

1. From the Skin Editor menu click on Basic: > Draw rectangle and click once into the skin to add the rectangle element. Click on Basic: > Draw text field and click once into the skin to add the text field element (Figure #18)

2. Select the Rectangle 1 to make it active and in Properties > Position > set ID: to reveal_bg | Anchor set to center | Size: 500 px x 120 px (Figure #19)

3. In Properties > Rectangle set Background: > Color: to R 0, G 0, B 0, Alpha Channel: 100 and Border: > Width to 0 (Figure #20)

Figure #20: Set background colour to the rectangle

4. From the main Pano2VR menu select Edit > Center Element in Canvas > Horizontal and then Vertical (Figure #21)

5. Select the Text 1 to make it active and in Properties > Position > set ID: to reveal_text | Anchor set to center | Size: 480 px x 100 px (Figure #22)

6. In Properties > Rectangle> set Background: > Enabled: unchecked | Border: Width: 0 (Figure #23)

7. From the main Pano2VR menu select Edit > Center Element in Canvas > Horizontal and then Vertical (Figure #24)

8. Select both the reveal_text and reveal_bg elements (Figure #25)

9. From the Skin Editor menu click on Basic: > Draw container and click once into the skin to add the container element (Figure #26)

Figure #26: reveal_bg and reveal_text in the new Container

Note: with both elements selected the container automatically adds them

10. With Container 1 selected in Properties > Position set ID: to reveal | Anchor set to center (Figure #27)

11. Inside the 'reveal' container drag the reveal_text element above the reveal_bg element (Figure #28)

12. Select reveal_text and in Properties > Font: check Default. In Align: set Justify, check Word wrap, check Auto Size, uncheck Scroll Bar if it’s selected. (Figure #29)

Note: the text for the overlay will be loaded using a Pano2VR placeholder $(hd). This placeholder takes any text in the Description text field of the Properties > Point Hotspot. The text is styled using some inline CSS and provides a link for more information

13. In the Project window select the point hotspot to open the Properties > Point Hostpot. Copy and paste the following text into the Description text field (Figure #30)

Figure #30: reveal_text content in the Point Hotspot Description

<div style="margin-top: -10px; line-height: 1.6;font-family:arial;color:white;font-size: 13px;"><p>On the edge of the great Etosha Salt Pan in Namibia sits the Fort.</p><p>Built in a Moroccan style the deck provides the opportunity to view the watering hole and the animal acitivity that goes on there. For more information visit <a href="https://goo.gl/maps/CXRhGxVdJjw" target="_blank" style="text-decoration:none; color:rgb(200,180,170);">The Fort</a></p> </div>

Note: as the text is in the description text field, as opposed to directly in the text field, we have to trigger the loading of the text

14. In the Skin Editor select the 'ht_info' element and in Properties > Actions double click on the empty 'Source' field to open the Action Settings module. In the Action Settings module select the following: Source = Mouse Click | Action = Set Value | Parameters = $(hd) | Target = reveal_text (Figure #31).

Figure #31: set Action to trigger text load

15. Select OK

16. Save the Skin and Output the project

Note: when you mouse click the hotspot icon the text loading is triggered. You may have to pan the panorama if the 'i' icon is behind the reveal background

Step 5. Position the Reveal

Note: the next step is to position the reveal and trigger it's position change

1. Drag the reveal container into the popup_image container and position it above the external _image but below the external_border element (Figure #32)

Note: placing it below the external_border element will allow it to appear underneath the border

2. Select the reveal container to make it active and in Properties > Position set Position: to set X = 0 and Y = 325 This will locate it just below the popup_image container (Figure #33)

Note: this will be it's starting position

Figure #33: Setting the position of the reveal container

3. Select > Position: Logic Block and set Trigger = Mouse Over Parent, Comparison = , Value = true, X=0, Y=205 | Transition check enabled, Time = 2 seconds - Select 'OK' to save the Logic Block settings (Figure #34)

Note: the Y position is the starting position minus the height of the reveal_bg which is 120 px

4. Save the skin and output the project (Figure #35)

Note: When you click on the hotspot icon the image zooms up and when you mouse over the image the text reveal slides up over the image and when you mouse off it goes back to its original position. Also when you click on the the link 'The Fort' nothing happens. These issues are resolved in the next steps.

5. Select the 'popup_image' container, in Properties > Container, check Masking: Enabled (Figure #36)

Figure #36: popup_image container masking enabled

Note: The container will now act as a clipping path and any elements within it but outside of its boundaries will not be visible.

6. Select the 'external_border' element and in Properties > Advanced check Permeable: Enabled (Figure #37)

Figure #37: external_border permeable enabled

Note: this means that mouse actions will be allowed to pass through the layer to other elements below it and allow interaction with those elements

7. Save the skin and Output the project

Note: Now the text is hidden and appears on Mouse Over, when the cursor is over the text link 'The Fort' it changes to a hand and the link can be clicked on.

Note: After enabled is activated the white border may be cropped. If so try setting the popup_image element Width and Height to 503 x 517 and the external_border element Width and Height to 495 x 490

The final step is to add an icon that prompts the user to move the mouse over the image. To do this we will reuse the 'i' button from the hotspot.

8. Open the skin if it's not already open

9. Click on the 'ht_info_image' element and select Menu > Edit > Copy (Figure #38)

10. Select Menu > Edit > Paste and the graphic element is pasted on top of the original and appears at the top of the tree (Figure #39)

11. Drag it into the popup_image container and position it on the canvas in the lower left corner of the external_image rectangle. In Properties > Position . ID: rename it ht_info_reveal (Figure #40)

Figure #40: Positioning the ht_info_reveal button

Note: We don't want the icon to appear when the text reveal is in place so we shall temporarily change it’s alpha value while the mouse is over the image

12. Select the 'ht_info_reveal' element and in Properties > Appearance > click on the Alpha: Logic Block button and set the following; Trigger = Mouse Over Parent | Comparison = | Value = true | Alpha: 0.000 | Transition check Enabled, Time = 1 second. Click 'OK' (Figure #41)

13. In Properties > Appearance set Hand Cursor: to checked (Figure #42)

14. Save the skin, Save the project and Output the tour

That finishes the tutorial, if you have any questions, issues or suggestions please leave a comment

Addedum

The image, title and description can be updated in the tour without having to open the project or skin in Pano2VR.

1. In the output folder, Hotspot_Zoom, open the pano.xml in a text editor. I use Text Wrangler but it can be any editor (figure #43)

2. Find the entry <hotspot title=", there is a section named 'title=' used in the popup button and a 'description=' used in the text reveal (figure #44)

3. Replace the title and description text with the new content (figure #45)

Note: in order to maintain the integrity of the xml code the '<' and '"' must be replaced with the unicode '<' and '"' If you don't use the unicode you will see an error message when you load the project.

Figure #45: pano.xml with updated title and description

4. Save the pano.xml file

5. Replace the existing external_image with a new image of the same ratio. When you open the project the new image will be shown along with the new description as shown below

Update: coming soon a “Little Bits” tutorial on how to open a fullscreen image from the popup. Here’s an example…click on the image once it’s open to fill the screen. In this example, because we are in an iFrame, I’ve added an additional '“Fullscreen” button to open up out of the iFrame. To view in a browser use this link https://s3-ap-southeast-2.amazonaws.com/p2vrtutorials/Hotspot-Zoom-Reveal/Hotspot_Zoom_Fullscreen/index.html

Donations

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.

I'd like to Donate

Zooming Popup with Reveal Text Overlay - Part 2