P2VR V7.1.4 Fullscreen Image Viewer - Part 2
STREET VIEW STYLE USING MARGINS
In response to a Post by Rajesh in the Pano2VR Forum by using some new features in V7 using Logic Blocks to set "Margins" I’ve come up with the following example for a “Street View” style layout of a map and panorama.
The layout is responsive across Desktop, Mobile including iPad, iPhone and Android.
ngrok & Live Update - Mac
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
Intro Animation with Fading Text and a Projection Button - Part One
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.
Intro Animation with Fading Text and a Projection Button - Part Two
This is part two of the “Pano2VR” Intro Animation with Fading Text and a Projection Button tutorial, which shows you how to create an animated opener that starts as a little planet (stereographic) and, over 10 seconds, ends as a flat (rectilinear) 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.
Sliding Menu + Logo + Controller
Creating a Split-Screen Effect in V6 or V7
If you need to compare two 360˚ panoramas side-by-side on a screen, this tutorial will provide step-by-step instructions on creating the files required to achieve the Split-Screen effect.
Two panoramas will be displayed; the left will display a skin that will control the view of the right panorama to match that of the left one reflecting any of the functions enabled in the skin.
Category Menu with Node Popup
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.
Hotspot Templates and iFrames - Update 4/10/21
Using Point Hotspots to deliver contextual content is a great way to make your Virtual Reality tours more interactive and provide an enhanced experience for the viewer. The most convenient way to create and deliver the content is by employing .html files and iFrames within the hotspots. Rather than create and manage multiple hotspots this tutorial shows how to use a single point hotspot template and external .html files with multiple hotspots.
This update details how to add the external HTML files to the assets folder in the output project using the Output > Advanced panel. Adding them this way a Garden Gnome Package Output will correctly show the HTML files in the iFrame.
Pano2VR Tutorials
Package Viewer - Custom Preview (Mac)
Building a Desktop App (Windows 10)
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/.
Building a Desktop App (Mac)
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/.
Trimming the Tree - Part 1
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%.
Trimming the Tree - Part 2
This is Part 2 of the tutorial In which we 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%.
Note: You will need to complete Part 1 before starting this tutorial
Blurred Panorama Background
This “Pano2VR” tutorial will take you through the steps on creating a custom skin with the ability to blur and desaturate the current node panorama. The effect, activated by an Action in the skin, applies CSS Filters, Blur and Grayscale, to the current node panorama. A simple tint option is also available.
In this tutorial we will modify the tutorial project file by;
Adding Custom Node ID’s
Enabling Direct Node Access
and modify the tutorial skin by:
Creating an iFrame that loads another instance of the node panorama
Apply CSS Filters
Add a Screentint
Add an Impermeable element
Add a Timer
Add Logic Blocks and Actions to control the blur and tint
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Responsive Animated Lower Third Banner - Part 1
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
Responsive Animated Lower Third Banner - Part 2
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
Managing Textbox Button Colors & Actions
This “Pano2VR” tutorial show you how to manage textbox button colors and actions using variables in response to a question posted by Andre De Trua on the Pano2VR Users Group page in Facebook. What Andre wanted to achieve were text field buttons that had different states and actions as follows;
a. Mouseover the button changes the color of the text and the background button color
b. Mouseclick the button makes it active, changes the color and shows several icons
c. Mouseclick the button again deactivates it, hides the icons and resets the colors
d. With one button active clicking another button makes the new button active, changes the color and adds additional icons
e. Clicking an active button deactivates it without affecting any other active buttons
Note: this tutorial is designed for Pano2VR V6.0.6