"A Modular Cinematic Sidebar is a skin component that uses CSS Grid, Fluid Typography and Pano2VR Skin Elements to create a balanced, app-like experience that intelligently adapts its shape and content based on the viewer's screen ratio."

Note: for now I’ve removed the tutorial as the component has changed significantly in the past few days with redeveloped CSS and Javascript. I’ll be updating the project in the next couple of weeks and I’ll post on the Pano2VR & Object2VR Users Group in Facebook and on the Pano2VR forum when it’s available.

This “Pano2VR V7” tutorial shows you how to use the new Cloner Option: “Hotspots” to create a dropdown menu displaying a list of Youtube videos that open in a YouTube video player popup window.

Prior to V7 the only source options available were Nodes and Tables. V7 introduces Hotspots, Floorplans and Translations.

Let me preface this post by saying that I love the way AI can help us accomplish many of the tasks we need to do to realise our design/development goals. Let me also say I love using SVG files in Pano2VR for their resolution independence and the flexibility they offer.

This tutorial will use Le Chat AI features to update SVG files developed in Adobe Illustrator. From there we will create Custom Hotspot Templates, add them to the skin and project and expose the colors so we can customise the SVG files.

This tutorial describes how to create a zoom & pan gallery project with multiple nodes that can be assigned to individual hotspots in a tour.

In Part 1 we will create the image gallery that is automatically loaded into the tour program.

This tutorial describes how to create a zoom & pan gallery project with multiple nodes that can be assigned to individual hotspots in a tour.

In Part 2 we will update the tour project and create hotspots that load the image viewer into the tour.

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.

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%.