Overview
This “little bit's” tutorial show you how to change the size of a hotspot based on the current Pan and Tilt Angles. In addition we will also fade between two colors during the scale transition.
Note: this tutorial is designed for Pano2VR V6.0.5. You can download a trial version 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, Hotspot-Scale-Pan-Tilt, there is an Asset Folder with a 8x4-green-grid.png equirectangular panorama and a target.svg file. There is a Project folder with a Pano2VR project 'hotspot-scale-pan-tilt.p2vr', a skin 'hotspot-scale-pan-tilt.ggsk' and an Output Folder called 'Hotspot-Scale-Pan-Tilt' with output files created from the .p2vr and .ggsk elements. (Figure #1)
Figure #1: Tutorial Folder Contents
Project Overview
In this tutorial we will modify the hotspot-scale-pan-tilt.ggsk skin by;
Setting an initial scale size
Adding a logic block with degree ranges and an alternative scaling size
Duplicating the target.svg, and changing its color
Adding an Alpha logic block with degree ranges to the duplicate svg
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
2. Open the project file ‘hotspot-scale-pan-tilt.p2vr’ (Figure #2)
Figure #2: Hotspot-Scale-Pan-Tilt P2VR project file
3. To view the starting project click on the ‘Open Output’ button to open the saved project. In the project you can see the target.svg file and in the top right are 2 text fields showing the current pan and tilt angles.
As you move the panorama the target.svg stays the same size and the angles are updated in the text fields. (Figure #3)
Figure #3: Screen shot of the starting project
Note: Keep this window open as we will use it to determine the angles that will trigger the scale effect.
4. Click on the ‘Edit Skin’ button to open the ‘hotspot-scale-pan-tilt.ggsk’ skin.
In the tree is a container ‘position-feedback’ with the two child text fields. Below that is a Hotspot Template ‘ht_scale_icon’ with the child SVG file ‘SVG1’. (Figure #4)
Figure #4: hotspot-scale-pan-tilt.ggsk in the Skin Editor
Determine the Angles
Note: The first step is to determine the angles that will define the region that will trigger the scale effect. Using the angles displayed in the text fields it can help you determine the correct region.
In this example I want the scale to happen when the Pan Angle is + or - 20˚ and the Tilt Angle is + or - 10˚ (Figure #5)
Figure #5: Active region when the trigger for scaling occurs.
Applying the Settings
1. In the Skin Editor select the SVG1 element to make it active.
In the Properties/Appearance panel set the Scale: to .25. (Figure #6)
Note: This will be the size when the trigger angles are reached/passed.
Figure #6: SVG1 selected and Properties/Appearance Scale: updated
2. Click on the ‘Scaling Logic Block’ icon to open Logic Block Settings window.
Under the Trigger heading dbl click to open the dropdown menu and select ‘View/Pan’
Under the Comparison heading click to open the dropdown menu and select the ‘greater than’ icon ‘>’
Under the Value heading enter -20.
In the next line down repeat the process using the ‘less than’ icon ‘<‘ and the value 20.
Make sure under the Operation heading it is set to ‘And’
Note: As we also want the Tilt to also trigger the scaling effect repeat the above using ‘View/Tilt’
Under the Trigger heading dbl click to open the dropdown menu and select ‘View/Tilt’
Under the Comparison heading click to open the dropdown menu and select the ‘less than’ icon ‘<’
Under the Value heading enter 10.
In the next line down repeat the process using the ‘greater than’ icon ‘>‘ and the value -10.
Note: By entering these values we are defining an region of the pan between 20 and -20 degrees and tilt between 10 and -10 degrees. Within this region the scale values, set in the logic block, will be active.
Leave the X and Y values at 1.00 and
Enable Transition and set a time of 1.000 second to smooth the scale effect.
Click on OK to save the changes to the logic block (Figure #7)
Figure #7: Scaling Logic Block
3. Save the Skin and re-output the project. (Figure #8)
Note: Now when you pan around the panorama the SVG1 is at 1:1 when it’s in the region defined by the values and smaller once it is outside those values.
Figure #8: SVG1 scaled to X: 1:00 and Y: 1.00
Applying a Color Fade
Note: to make the transition even more visual we can change the color of the element as it scales.
1. With the SVG1 element selected, copy the element;
Cut and paste the element
Rename it to SVG2
Drag it down the tree and below SVG1 (Figure #9)
Figure #9: Duplicate, rename and reposition SVG1 to SVG2
2. With SVG2 still selected, change the SVG2 color;
Click on the ‘Color Tool’ button to open the ‘Change Colors’ window.
Double Click in the ‘New Color’ panel to open the ‘Select Color’ window.
Select a new color and then
Click the ‘OK’ button (the new color is updated)
Click the ‘Apply’ button to confirm the change and close the window. (Figure #10)
Figure #10: Change Color
Note: The color of the SV2 element is now blue, but is hidden behind the red version. (Figure #11)
Figure #11: SVG2 color changed to blue
Note: in order to effect a change between both of them we need to add another logic block to SVG1, this time the Alpha Logic Block. We apply the change in the SVG1 element as we want to set the action to occur within the defined region.
4. With the SVG1 element selected, copy the scaling logic block settings;
Click on the ‘Scaling Logic Block’ icon to open Logic Block Settings window.
Click on the ‘Copy’ button, to copy all of the logic block settings,
Close the window by clicking on ‘OK’. (Figure #12)
Figure #12: Copy logic block settings
5. With the SVG1 element still selected add the alpha settings;
In Appearance/Alpha: set the alpha value to 0.000
Click on the ‘Alpha: Logic Block’ icon to open Logic Block Settings window.
Click on the ‘Paste’ button, to add the settings to the logic block.
Change the Alpha: value from 0.000 to 1.000
Enable the Transition and set it to 1.000 seconds.
Click on the ‘OK’ button to close the window (Figure #13)
Figure #13: Copy settings from Scaling logic block
6. Save the Skin and re-output the project.
Note: Now the icon scales and changes color based on the pan/tilt of the panorama as shown in the final project output above.
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.
