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.4. 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.
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)
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
1. Download the zipped tutorial folder here
2. Open the project file ‘hotspot-scale-pan-tilt.p2vr’ (Figure #2)
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)
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)
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)
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.
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)
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.
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)
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)
Note: The color of the SV2 element is now blue, but is hidden behind the red version. (Figure #11)
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)
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)
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.
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.