Pano2VR recently released a new beta version, Pano2VR 7.1. In a recent webinar, What’s New in Pano2VR 7.1, Martin Hopkins showed us how to use an application called ngrok. He demonstrated how remote locations can connect their local devices to your Pano2VR application running on your localhost via a URL and automatically update using Live Update.

In this tutorial, I’ll take you step-by-step through the process described by Martin in the video.

In it, I’ll cover the following topics;

• Requirements

• What does ngrok do?

• Advantages of using ngrok

• Limitations of Tunnel

• Signing up to ngrok

• Installing ngrok

• Sharing a Project

• Using a Rebrandly URL Shortener

This two-part “Pano2VR” Intro Animation with Fading Text and a Projection Button tutorial shows you how to create an animated opener that starts as a Little Planet (Stereographic projection) and, over 10 seconds, ends as a Flat (Rectilinear projection) panorama.

During the transition, a text block fades in and out and disappears at the end of the animation, and a small button that allows you to change the projection type appears.

This is a preview of an upcoming tutorial covering how to build a sliding menu with a Logo, Cloner Node Menu with Scroller and a set of Control buttons.

This “Pano2VR” tutorial shows you how to use Cloners to create a Category Menu and a Popup window in Pano2VR V7.0.1. The Category Menu will open a popup window with information and clickable node images related to the selected category. Clicking on a node image will take you to that node. Active nodes will have highlighted text and a tick to indicate they have been visited.

As the number of tutorials grows it becomes a bit more difficult to find what’s there without having to go through pages and pages of the site. This list provides a summary of each tutorial and a link to the tutorial page. The list is in chronological order starting with the most current.

This “Pano2VR” tutorial shows you how to use a custom preview image layout that has been designed specifically for the multiple grid sizes available within the Garden Gnomes Packages app.

The tutorial also shows how to add a custom preview image to the Garden Gnome Package (GGPKG) file.

Sometimes your client and/or project requires not only an offline project but also one that doesn’t require a web browser when outputting to HTML5.

This “Pano2VR” tutorial shows you how to Create a Desktop app suitable for use on a desktop Mac and works with both Pano2VR and Object2VR projects. The tutorial is based upon the original published by Garden Gnome Software on their website at https://ggnome.com/doc/tip-desktop-app/.

Sometimes your client and/or project requires not only an offline project but also one that doesn’t require a web browser when outputting to HTML5.

This “Pano2VR” tutorial shows you how to Create a Desktop app suitable for use on a desktop Mac and works with both Pano2VR and Object2VR projects. The tutorial is based upon the original published by Garden Gnome Software on their website at https://ggnome.com/doc/tip-desktop-app/.

Once you start working in Pano2VR you quickly realise that the Skin Editor is a very powerful part of the software application. The Skin Editor allows us to create unique User Interfaces and Interactivity inside our tours.

However during the development of a project the skin can be quite complex and requires the management of a large number of skin elements, such as interactive Components, Actions and Logic Blocks.

In this tutorial I’m going to take a look at a process that I call “Trimming the Tree”. Step by step you will learn how to reduce the number of elements that have similar functionality reducing the number of elements by over 50%.

This two part “Pano2VR” tutorial show you how to animate a multilevel Lower Third Banner that is responsive to mobile devices such as smartphones.

In the first part of this tutorial we will modify the project skin by;

• Setting the Z-index of elements in the lower third to manage the stacking order

• Adding Timers and configuring them to move/change elements in a sequence

This two part “Pano2VR” tutorial show you how to animate a multilevel Lower Third Banner that is responsive to mobile devices such as smartphones

In the second part of this tutorial we will continue to modify the project skin by;

• Develop a break size to determine at what point we require the responsive logic to apply to the banner

• Add logic to the Scale property of the lower third banner elements

• Add logic to hide the Lower Third Banner when the panorama is interacted with

When developing virtual tours for clients there is often the need to create unique user interface elements (skins) that on many occasions may require the use of a custom font. 

The best way to ensure consistency across browsers is to use a Local Font file and CSS to style the text. In this tutorial I'm going to style the text on a button and a popup information block using the local font file/css method.

In this tutorial we will… 

• Modify a CSS file to style both the text for the button name, the header and body in a popup window

• Update the skin to style the text & add .woff fonts to the Output folder

• Link to the CSS file to the HTML5 template

• Fine tune the line spacing, kerning and add a website link

Note: this tutorial is designed for Pano2VR Release versions 6+. In the Beta versions the options have changed.

In Pano2VR 6.0 you have the CSS in the HTML page so there you need to use the disable fonts in the template.

Pano2VR 6.1 the CSS for the fonts are in the skin editor. To this end, there is no disable fonts checkbox in the Template anymore.

This tutorial shows how to place a ‘Floating’ nadir logo into a Pano2VR virtual tour. In this tutorial we will;

• Add a Point Hotspot to the project

• Adding a Hotspot Template to the skin

• Importing and attach a .png logo to the Hotspot Template