This “little bit's” tutorial show you how to assign tags to individual nodes and use them to show information pertinent to that node. In the tutorial we are going to define each node as Lounge, Dining and Bedroom. In the skin will be a drop down information box that has a title matching one of the three locations and some placeholder text. As the user moves between nodes the title and text will change to reflect the location.
This “little bit's” tutorial shows you a little trick on how to create a skin template that can be re-used on different tours without having to change or modify the skin.
In this tutorial we will modify the project file and the skin by;
Adding a Custom Node ID to one of the 3 nodes in the Tour Browser
Setting our output to include ‘Direct Node Access’
Adding an Action to the Home button to directly access that node
Adding Actions to the previous/next buttons to resolve an issue with Direct Node Access
Updating the tutorial components
This “little bit's” tutorial show you how to create a timer that will automatically close any hotspot popup after a set period of time. In addition it also shows how to add a visual countdown to the close.
In this tutorial we will modify the Auto-Close.ggsk skin by;
Adding additional Actions to our Hotspot Template to activate our timer
Add an Action to the timer to set a variable that will close the Hotspot Popup
Add a ‘Visual Countdown’ showing how many seconds left to the Hotspot Popup closure
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.
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)
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
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
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)
Trigger = *plan_status | Comparison = = | Value = false | x = .25 | y = .25 | Transition = Enabled (checked) | Time = 1.000 second
Note: this Logic Block setting automatically scales the floorplan down when the tour is opened
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)
Trigger = *plan_status | Comparison = = | Value = false| Alpha = 0.500 | Transition = Enabled (checked) | Time = 1.000 second
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.
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.
In Pano2VR Version 6 custom fonts could be added by disabling ‘device default CSS fonts’ in the HTML Template window and adding in a CSS Style Sheet and fonts. In Version 6 beta this option is no longer available and has been superseded by a new workflow.
This “little bit's” tutorial show you how to style text with CSS and Local Fonts in Pano2VR 6.1.2a ßeta by modifying the custom_fonts_beta.ggsk skin and adding the ‘my_styles_new’ css file to the ‘embedded stylesheet’ Edit Window in the skin editor.
This “little bit's” tutorial show you how to create a Fly-in effect and show a splash screen at the end of the fly-in.
In this tutorial we will modify a project file and skin by;
Adding in a Draw Text Field that loads the splash screen using an iFrame
Add a Logic Block to show the splash screen when the fly-in finishes
Add in a Blocking Tint to hide the splash screen loading
Enable a Mouse Click Action to hide the splash screen