Zooming Popup with Reveal Text Overlay - Part 2

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 Project and then the saved Skin Editor from Part 1 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) 

 

Figure #1: vis_info_popup variable

 
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)

 

Figure #3: Visible Logic Block set trigger

 

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

 

Figure #4: Visible Logic Block set trigger option

 

4. Select 'OK' and now the Properties > Appearance > Visible Logic Block is coloured to indicate there is an active Logic Block in use (Figure #5)

 

Figure #5: Active Logic Block

 

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.
If you click on the screentint_info 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 intially 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)

Figure #6: Scaling settings

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)

Figure #7: ht_info hotspot Actions

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)

 

Figure #8: Action to set the scale size of popup_image

 
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)

 

Figure #10: Delete Set Value actions

 

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)

 

Figure #11: New action settings

 

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

 

Figure #12: New Mouse Click action

 

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) 

 

Figure #13: Copy the Mouse Click action

 

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)

 

Figure #15: Paste the action

 

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)

 

Figure #16: Action to hide title

 
Note: if you see the warning sign click on it to convert the Target ID to a regular expression. The target element is dynamically cloned in the browser and must be addressed using regular expressions.

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

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)

 

Figure #18: Adding a rectangle and text box to the skin

 

2.  Select the Rectangle1 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 (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)

 

Figure #21: Rectangle centered on the canvas

 

5. Select the Text1 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)

 

Figure #22: Set text box ID | Anchor | Size

 

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

 

Figure #23: Set Background and border

 

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

 

Figure #24: text field centered on the canvas

 

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

 

Figure #25: Both elements selected

 

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 Container1 selected in Properties > Position set ID: to reveal | Anchor set to center (Figure #27)

 

Figure #27: Container1 settings

 

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

12. Select reveal_text and in Properties > Text set Text: to $(hd) | Align: Justify, check Word wrap, check Auto Size, uncheck Scroll Bar (Figure #29)

Figure #29: reveal_text settings

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. Save the Skin and Output the project

Note: when you rollover 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
 

Figure #32: reveal container position

 

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)

 

Figure #34: Logic Block to move the reveal container vertically

 
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.
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)

 
 Figure #39: copy of ht_info_image

Figure #39: copy of ht_info_image

 

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 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)

 

Figure #41 Logic Block to hide the ht_info_reveal button

 

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)

 
 Figure #43: pano.xml file

Figure #43: pano.xml file

 

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)

 Figure #44: pano.xml hotspot entry

Figure #44: pano.xml hotspot entry

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 '&lt;' and '&quot;' 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

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia