Using Tags with Multiple Nodes

Using Tags with Multiple Nodes

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.

Home Button Skin Template

Home Button Skin Template

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

Auto-Close Hotspot Popups

Auto-Close Hotspot Popups

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

Floorplan Zoom on Mouse Enter


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)


Figure #1: Tutorial Folder


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)

Figure #2: Zoom-Floorplan.ggsk

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


Figure #3: Variable settings


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


Figure #4: Properties settings


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)


Figure #6: Floorplan Element Actions

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


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)

Trigger = *plan_status | Comparison = = | Value = false| Alpha = 0.500 | Transition = Enabled (checked) | Time = 1.000 second

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.


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

Custom Fonts Pano2VR6.1.2a ßeta

Custom Fonts Pano2VR6.1.2a ßeta

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.

Fly-in with Splash Screen

Fly-in with Splash Screen

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