Overview

This “little bit's” tutorial show you how to modify a skin that contains a Floorplan and have it zoom up and fade in when the Mouse Enters the plan.

Note: this tutorial is designed for Pano2VR V6.0.5. You can download a copy here. As “Little Bit” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.

Final Output

Tutorial Files

In the tutorial folder, Zoom-Floorplan, there is an Asset Folder with 2 x Equirectangular files and a simple floor plan map. There is also a Project folder with a Pano2VR project 'Zoom-Floorplan.p2vr', a skin 'Zoom-Floorplan.ggsk' and an Output Folder called 'Zoom-Floorplan' with project files created from the .p2vr and .ggsk elements. (Figure #1)

Project Overview

In this tutorial we will modify the Zoom-Floorplan.ggsk skin by;

Adding a Variable to hold the state of our floorplan
Add a Mouse Enter and Mouse Leave action to the floorplan element
Set the Scale and Alpha properties of the floorplan element and add Logic Blocks

Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it

Getting Started

1. Download the zipped tutorial folder here and unzip it to your desktop

2. Open the project file ‘Zoom-Floorplan.p2vr’ and click on the Generate Output button to see the current state of the project.

Note: at this stage the floorplan is static in the top right corner, as you move the panorama the radar beam moves and you can click on a marker to move between the panoramas.

3. Click on the Edit Skin button to open the Zoom-Floorplan.ggsk skin (Figure #2)

Adding a Variable

1. In the Properties/Variables dropdown menu, click in a blank field and add the following properties; (Figure #3)

Name = plan_status | Type = True/False | Init Value = false

Note: we will call this variable in our logic blocks that scale and change the alpha of the floorplan

Adding Floorplan Element Actions

1. Select the Floorplan element to highlight it and in the Properties Panel open the Position, Appearance and Map dropdown. (Figure #4)

a. The Position settings, Position, Anchor and Size, are set to the final zoom position of the floorplan element.

b. The Appearance settings show the current Scaling and Alpha properties of the Floorplan element. The Scaling/Center: anchor point is set at the top left, so this will be the fixed position and the floorplan will expand to the right and down.

c. The Map settings show the Floor Plan used and the Clone as Marker, in this case the Floorplan-Marker element

2.In the Properties/Actions dropdown menu click in a blank field to open the Action Settings window and add the following properties and select OK. (Figure #5)

Source = Mouse Enter | Action = Set Variable Status | Variable Name = plan_status | Operation = Set(=) | Value = True

Figure #5: Mouse Enter Action for Floorplan Element

2. Repeat the process changing the Source = Mouse Leave and Value = false (Figure #6)

Setting Scale and Alpha Properties

1. With the Floorplan element still selected open the Properties/Appearance dropdown menu and click on the Logic Block icon next to Scaling: to open the Logic Block Settings window. Add the following properties and select OK. (Figure #7)

Note: this Logic Block setting automatically scales the floorplan down when the tour is opened

Figure #7: Properties/Appearance/Scaling - Logic Block

2. In the Properties/Appearance dropdown menu click on the Logic Block icon next to Alpha: to open the Logic Block Settings window. Add the following properties and select OK. (Figure #8)

Figure #8: Properties/Appearance/Alpha - Setting & Logic Block

3. Close and Save the skin, save the project and re-output the project

Note: now when you open the project and the mouse enters the Floorplan Element the Floorplan scales up and becomes opaque.

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.

I'd like to Donate

Back to "Little Bits" Homepage

Floorplan Zoom on Mouse Enter