Table of Contents

A project can easily start to amass a number of files and media from skin files to pinned images to patches. Pano2VR helps to keep all files together and orderly.

Once your images have been added to a Pano2VR project, the next step would be to prepare them for viewing, linking, and outputting.

Learn how to add a map to a virtual tour.

Learn how to add a floor plan to a tour.

Custom map tiles can be added in the Tour Map. These maps can then be used in the skin using the Map Element.

In order to use Google Maps in the Tour Map, or to add Place IDs for Street View, or to add a Google Map in the skin, you will need a Google Maps API key. Google requires this key for anyone wishing to use/embed their Maps JavaScript API (Google Maps).

To upload a tour to Google Street View from Pano2VR, open the Google Street View Panel and connect your Google account. You'll then have access to all your images and tours. Here's the basic workflow for uploading a small tour to Google Street View.

If a tour includes multiple levels of a building, you can publish all levels to Google Street View and Google will link them with an elevator control.

Learn how to pin images to the panorama with correct distortion.

Use the Sound Mode to add directional and static sounds to your project.

Use the Video Mode to pin video to a panorama.

Learn how to pin a web element. In this example we pin a Wikipedia page to a tour node.

Alternative audio files can be converted from within the Sound Mode's properties.

An alternative video file can be converted from within the Video Mode's properties.

Learn how to add Google Fonts to your project.

Fonts can be embedded in Pano2VR’s skin. This means that the fonts are served locally, rather than fetching them from third-party servers like Google Fonts.

Learn how to create animated icons for point hotspots. This particular animated icon will consist of to rotating bars hinged at the center.

Learn how to use a couple of text boxes to create a 2-state button.

Learn how to create a custom image popup with a text box that expands to fit the amount of text.

The Garden Gnome Package (GGPKG) is a package format for offline viewing and for content management systems to easily embed your projects into websites.

Gnome Cloud is a service we provide that you can use to host your projects. Upload a project to the cloud from the Web Output.

The Little Planet image is a stereographic projection that, that when manipulated in a way, resembles a photo of a tiny planet. Learn how to make one below.

Pano2VR allows you to create a thumbnail image from your panoramic image. To do this, choose Transformation from the Output panel.

The integrated web server's default settings are set to be used when viewing the output within an HTML page. It was included to allow local viewing of the web output (something most browsers do not allow for security reasons).

The normal HTML template is the default template that is used when exporting a web output. Use the template parameters to quickly configure it.

Edit this Garden Gnome Package HTML template to create a custom GGPKG output or select for Droplet use.

A container is an invisible element that allows you to group elements together in the tree or canvas.

The rectangle element can be drawn to any size. Use it as a button or as a screen tint. Or even as a fix to create active areas in 3D distorted hotspot images.

Text Box are for adding text to the skin. You can use basic HTML tags to format the text, or use CSS.

The image element is used to add images to the skin. Once you click on the Canvas, you'll be instructed to selected an image.

The button element provides multiple states of a button. Each state can have a different image which provides visual indications of interaction.

Click the *Add Scalable Vector Graphics* button in the Toolbar and then click in the Editor to choose a SVG file. Or, just drag the SVG in to the editor.

Lottie files are small animations designed to work on all devices. Use them for buttons and hotspots.

Use the PDF element to embed PDF documents in the skin.

Use the external image to add images that need to be loaded externally rather than embedded in to the skin. This is especially useful if you have a lot of thumbnails in a tour and are not using the Node Image element.

Use the Node Image Element to easily add thumbnail images from the current tour. This is especially useful for creating galleries or buttons from the images. Use this in conjunction with the Cloner to build a tour menu or gallery. Click in the canvas to add an image. A placeholder will appear. Go to the Node Image settings to choose the node.

A scroll area is a container that will add scrollbars around an element or group of elements, if necessary. It can also be used to clip content.

The cloner is a useful tool that creates lists for building menus. The cloner is used to create thumbnails of nodes within a tour, creating a thumbnail menu. The cloner is also used to create a multi-level menu, a multilingual menu, a menu of all hotspots, or a menu of all floor plans.

The timer is a container that is useful for timing actions in the skin. For example, you can use a timer to hide a Welcome Screen (or splash screen) after 5 seconds.

A hotspot template lets you add a custom image to a point hotspot.

Maps and Floor Plans can be easily added to the skin by selecting the Map Element in the Toolbar and clicking in the Canvas to add.

Use this to add videos to your skin. You can use local files, URLs or YouTube and Vimeo IDs.

Seekbars can be used to seek or move backwards and forwards in time for background sounds, all pinned sounds and videos of the project, as well as skin sounds and skin videos, and even 360° video panoramas (except embedded YouTube and Vimeo videos).

The code element is used to apply Javascript to the skin.

In the actions section of the Actions/Modifiers tab in the Skin Editor, you'll find a column called Sources with a pop-up menu. These sources represent the triggers that cause the actions.

Actions or a set of directions can be applied to any element added to the skin to create interactivity.

Use modifiers to affect a skin element's behavior. Open the Modifiers panel and double-click in the table or click the plus sign to the right to open the Modifier Settings.

Here you'll find a few examples of common actions. You can assign actions to any element in the skin editor.

Triggers are start of events for a condition of a logic block.