Web Output Properties

Choose a skin and output location in the Output Panel. Set player-based parameters such as the context menu, HTML file, and multiresolution settings in the Properties Panel.

When the Web output is selected from the list of output options, the following settings will be visible. More properties for the web output will open in the properties panel.

Output Panel

Skin

Here you can choose either one of the pre-installed skins or choose one that you have created in the Skin Editor.

Use the Grid to view previews of the built-in skins and any favorited skins.

All skins saved to the default Skins folder and any additional skin folders will be listed in the skin menu.

Otherwise, use the Open Skin button (blue folder) to add a skin or drag a skin file to the menu.

The file extension used for skins is .ggsk (stands for Garden Gnome Skin).

Toggle Skin Previews – Click this button to show or hide the skin previews. Skins that have been selected as a favorite will appear in this grid.

Favorite – Click the heart to toggle the skin as a favorite. A red heart indicates it is a favorite. All skins that have been selected as a Favorites will appear in the Skin Previews and the Skins menu.

Skins Menu – Select a skin. All skins will appear in this menu. If a skin is found in the same location as the source image, it will also be visible in the list preceded with $d: $d/myskin.ggsk.

Open Skin – Click this folder icon to navigate to a skin and add it to the output.

Edit Skin – Click this button to open the currently selected skin in the Skin Editor.

Edit Skin Configuration – Click to edit the initial values of exposed variables of the skin. This lets you configure skins to the needs of the current project.

For example, if you have a skin that is frequently applied to projects but a certain element or component (like the Fullscreen button) is not always needed, a variable can be applied to that element’s Visible Logic Block. Then, you can change the variable’s value via the Skin Configuration.

Output Folder

All files associated with this output will be added to this folder unless otherwise specified. Its default name is output. Its default location is the same folder as the source image.

• Change the output folder’s location by clicking the folder icon and navigating to the new location.

• Click the folder name to find the folder’s location in Finder (macOS) or Explorer (Windows).

• Right-click the folder name and choose Edit to rename the output folder.

  

• Erase Output Folder – Click the trash can icon to erase all the content from the current output folder. Press and hold the button to choose to erase all the content except for the tiles you already created. See Output Folder on the Output panel page.

Output

This is the series of buttons located below the Output folder.

Generate Output – Click the gear button to generate the output (Option-Command-G on macOS, Ctrl+Alt+G on Windows). Option-click (macOS) or Alt-click (Windows) the button to generate all outputs of the project.

Open Output – Click this button to view the output (output must be created first) using the Integrated Web Server. If the tour is already open in a browser tab connected to the web server, that tab shows the output again. Shift-click the button to open it in a new tab instead.

Generate Garden Gnome Package – Clicking this button will output the Garden Gnome Package format that is used for embedding panoramas in a CMS website.

Toggle Live Update – Turn Live Update on or off.

Upload – Upload the project to Gnome Cloud. Once the project is connected to Gnome Cloud, the button syncs your changes to the uploaded version instead. Its icon shows whether the project is connected to a project on Gnome Cloud. Right-click the button to:

• Disconnect from Gnome Cloud – Disconnect the current project from the uploaded version on Gnome Cloud.
• Select Gnome Cloud Account – Choose this option to switch the Gnome Cloud account that this output is connected to.

Live Update

When a web output is exported, the output is automatically opened in the default browser. After saving, the project is updated live in the browser when Live Update is activated. This keeps you from having to manually export the project to see changes. Live Update will also update with every change in the skin.

To keep Live Update on, but stop it from always updating when creating a skin, select Live Update on Save Only from the View menu in the Skin Editor.

Properties Panel

The following settings are found in the properties panel.

Autorotation & Animation

Fly In

A fly in is a dramatic opening of a project that usually begins with a little planet and ends with a rectilinear projection. You can design the fly in the Viewing Parameters.

Select, Fly In to enable the feature.

Speed – Determine the speed of the transition.

Auto Rotation

If you want the panorama to automatically rotate, select Auto Rotation to enable the feature. While the panorama rotates, or an animation plays, the mouse pointer hides after 3 seconds without a mouse movement and comes back as soon as you move the mouse.

Pan Speed – Pan speed refers to how fast the panorama will rotate from left to right (positive number) or right to left (negative number) (degrees per frame).

Delay – The time it takes for the panorama to begin to rotate again (in seconds) after it has been manually moved by the user.

Return to Horizon – Brings the panorama’s center perspective (horizon) back into view after it has been manually moved upwards or downwards. A value of 0 will equate to no return, and an increase in the value (up to a maximum of 10) will return the image to the horizon at a quicker speed.

Horizon Tilt – Choose how the image returns to auto rotation.

• Horizon – Choose horizon to have the image return to a tilt value of zero
• Default View – Select to use the tilt specificed in the Default View.

Start after fully loaded – Select to have autorotation begin only after the panorama has been fully loaded. If left disabled, the panorama will rotate while it is being downloaded.

Change Node – Select this option to automatically change the nodes in a tour, every n seconds. Set it to Never (0) to keep the current node. The panoramas will change according to their order in the Tour Browser, which you can change to suit the tour’s story or flow. (Change Node, Random, and Node Filter Tag are available in Pano2VR pro.)

• Random – Select to change to a randomly chosen node instead of the next one in the Tour Browser order.

• Node Filter Tag – Here you can filter which nodes should be included in the autorotation by selecting a tag that has been added to nodes.

Animation

Animation – Select this to use the custom movement you’ve created in the Animation Editor instead of autorotation.

Sequence – Select a sequence to use for the autorotation.

Randomize clips – Select to have the clips in the sequence played back randomly.

Video Panoramas – Select, Synchronize animation, if you’ve added an animation to a video panorama. This will sync the animation you created in the Animation Editor with the video. This means that whenever the animation begins in the player, it will run in sync with the video panorama.

Transitions

(Available in Pano2VR pro.)

When building a tour, you can add transitions to your project to create smooth changes from one image to the next. You can choose to transition between panoramas or the sound or both.

✭ Learn how to add transitions to your tour.

Panoramas

Select to enable transitions.

Transition Type – Choose the type of transition:

• Morph – A special transition that blends the panoramas in a way that suggests movement between the panoramas. Morph requires a Before effect (None is not available) and does not use the After effects, Wait for transition, or Zoom Speed settings.
• Model – If a 3D model has been added to the Tour Browser, choose to use the model for 3D effect transitions
• Cut – Changes to the next panorama instantly; the Transition Time setting does not apply.
• Cross Dissolve (default)
• Dip to Color – Use the color picker to the right to choose a color.
• Iris Round from Click Position
• Iris Round from Center
• Iris Rectangular from Click Position
• Iris Rectangular from Center
• Wipe from Left
• Wipe from Right
• Wipe from Top
• Wipe from Bottom
• Wipe Random

Soft Edge – The Iris and Wipe transition types can have a soft edge. It defines how much the edge of the transition is blurred. Use a low value of around 30 pixels for a subtle motion blur-like effect, or a high value of around 300 pixels for a very blurry transition.

Transition Time – The time of the transition from one panorama to the next, not including the Before and After effects. The default is 1 second.

Effects Before – Apply effects before the transition. Choose from the following:

• None – No transition effect will be applied before changing the node.
• Zoom In – Will zoom in to the direction of the hotspot.
• Zoom In to Pan – Zooms in toward the Pan angle only. This is useful for hotspots placed on floors as it prevents zooming to the floor.
• Zoom In to Center – Will zoom towards the center of the panorama.

Zoom to FoV – The field of view, in degrees, the view zooms in to before the transition starts. For example, with a field of view of 70° and Zoom to FoV set to 20°, the view narrows from 70° to 20° before it changes to the next node. If the view is already narrower than this value, it does not zoom.

Effects After – Apply effects after the transition. Choose from the following:

• None – No transition effect will be applied after the node changes.
• Zoom In – Will zoom in in the direction of the hotspot.
• Zoom Out – Will zoom out from the location of the hotspot.
• Fly In – Fly in from a spherical (little planet) to a rectilinear projection.

Zoom from FoV – Available when Zoom In or Zoom Out is chosen as the After effect. The field of view, in degrees, the next node starts with; from there it zooms to the node’s own start view. For Zoom In, enter a value between 70 and 160 degrees: the next node starts wide and zooms in. For Zoom Out, enter a value between 0.01 and 110 degrees: the next node starts narrow and zooms out.

Wait for transition – When selected, the After transition effect, will not occur until the transition is finished. When deselected, the effect will occur at the same time as the transition.

Zoom Speed – The speed of the zoom effect.

Delay Transition – Select a delay option. The delay is helpful if the tour is slow to load. The default is to transition immediately, but if the connection is slow or the next node is a 360 video, it could result in black tiles. Choose from the following options:

• Do Not Wait – The default setting.
• Wait for Preview Track – The preview track will load before the transition.
• Wait for Video Panorama – If a video panorama is the next node, the transition will occur once the video is loaded.

Sounds

Select to enable transitions for sounds.

Transition Time – The full time of the transition of sounds from one panorama to the next. The default is 2 seconds.

• Crossfade – Select to use a crossfade between the sounds of the two nodes. If this is not selected, the sound of node 1 will completely fade out, and then the sound of node 2 will start fading in. If selected, the sound of node 2 will immediately start fading in, while the sound of node 1 is fading out. ✭ Currently does not work in Safari.

Hotspots

Hotspot Textbox

A hotspot text box appears when a mouse hovers over a hotspot (tooltip). Select to activate its settings below.

If a skin has been added to the project and has point hotspot templates (all built-in skins have hotspot templates), these hotspot textboxes will be ignored. They will only show when no skin has been applied or for polygon hotspots.

Size – Set the size of the text box for the hotspot.

• Auto – Choose this to have the text automatically fitted within the text box.

Text – Set the text settings.

• Color – Select the color of the text by clicking on the color well. The default is black.

• Word wrap – When selected the text will wrap to the next line.

Background – Set the text box’s background color.

• Visible – Select to show the background of the text box. When not selected, no background will be seen.

• Color – Click to choose the color of the background.

Border – Set the text box’s border.

• Visible – Select to show the box’s border. When not selected, no border will be seen.

• Color – Click to choose the color of the border.

• Radius – The radius (roundness) of the box’s border. Increase the number for a round rectangle or eventually a circle.

Polygon Hotspots

If you’ve added polygon hotspots, then these settings will affect how they appear in this web output.

View Mode – Choose how the hotspot appears on screen:

• Always Hidden – The hotspots will be active but not highlighted.

• Always Visible – The hotspots will always be active and visible (see background and border colors).

• Show Current – The hotspot will only be visible when the mouse enters the active area.

• Show All – All polygon hotspots will be visible when the mouse enters the active area of one of the hotspots.

• Disabled – The polygon hotspots will not be visible nor active.

Background Color – Choose the fill color of the hotspot.

Border Color – Choose the border color.

Line Width – Set the width of the hotspot’s border line in pixels, from 0.5 to 50.

Hand Cursor – Select to enable the hand cursor when the mouse hovers over the polygon hotspot.

VR

Select Enabled to include WebXR support on output. This will add folders and files to the output folder that are needed to display the VR output in the browser.

Skin – Select a skin for VR. Pano2VR ships with built-in skins that are free to use and edit for your needs. Each skin has a menu to navigate to nodes. The menu appears when the head tilts up. Not all elements are supported in VR.

Floating Menu Button – Selected by default. Deselect to hide this menu button that appears when viewing up in the VR output. This menu button toggles the VR skin on and off. This option is available only when a VR skin is selected.

• Position – Choose where the Floating Menu Button should appear. At the Top (looking up) or at the Bottom (looking down).

Default Node Hotspots – The default images for node hotspots are 3D spinning globes. They will be used by default if no skin is used or no point hotspot template is used for tour node type hotspots.

• Scale – Scale the spinning globes to make them larger or smaller; the default is set to 100%.

Hand Tracking – Choose the type of hand tracking that is visible in a VR headset that supports hand tracking.

• None
• No Hands
• Simple Hands (hands made of small spheres)
• Realistic Hands (realistic looking hands)

HTML

Template – Choose a template and then click the Edit Template button to open the template settings. Learn how to create a custom HTML template.

• Normal template settings
• GGPKG template settings

The normal template also has options to add social media meta tags and to create landing pages for search engines for nodes tagged seo.

Format – Choose the file format: .htm or .html. The available formats are defined by the selected template.

Output File – The output file name. The HTML file is added to the root level of the output folder.

Control

Context Menu

The context menu is the menu that pops up when you right-click in the panorama.

Menu Links – Here you can add links as menu items. Double-click in table or click the plus symbol to add the first item. In the top row, add the text that should be linked. Click the plus to add more, click the x to delete, grab the handle on the left to rearrange.

If more space is need to add text, click the pencil.

Default Items – Choose any of the following to appear within the context menu:

• Add projection items – Select to add options for switching the projection in the player.

• Add ‘Fullscreen’ item – Select to add a menu option to go into Fullscreen mode.

• Add ‘VR’ item – When selected, an Enter VR item will appear in the context menu. It will detect when a wired headset is connected to the computer.

• Hide ‘Created with Pano2VR’ – Select to hide Created with Pano2VR from the context menu. (Available in Pano2VR pro; not available with Education, Student, or Review licenses.)

Control

Sensitivity – Set the panorama’s sensitivity to the movement of the mouse, from 1 (low) to 20 (high). A low sensitivity will cause it to move slowly with the mouse’s movement.

Inertia – Select Enable to let the panorama slowly come to a stop after you drag it, as if it has mass. When deselected, it stops immediately.

Mouse – Mouse controls.

• Disable – Select to disable mouse interactivity.

• Drag Mode – Select this (selected by default) to invert the mouse control. When inverted, rotation will be in the same direction as the mouse.

• Rubber band effect at limits – Select this to enable the rubber band effect so that the panorama can be dragged or pulled beyond its viewing limits. Once the mouse or finger releases, the panorama will bounce back to its original viewing limits.

• Zoom center at cursor – Select to zoom at the mouse’s location. Deselect to have zoom happen at the center of the viewport. Below is a gigapixel panorama and the project is set to use Zoom center at cursor. Move your mouse to the clock and zoom in. On a touch device, the center of the zoom will be at the touch location’s center.

Double-click – Fullscreen option.

• Toggle fullscreen – Selects the fullscreen mode on double-click or double-tap when using a touch screen device. With this option, a skin is not required to enter and exit Fullscreen mode.

Mouse Wheel – Mouse wheel controls.

• Disable – Disable interactivity of the mouse wheel.

• Invert – Invert the interactivity of the mouse wheel. For instance, scrolling down will zoom out (instead of zooming in).

• Speed – The rate at which the panorama will move relative to the mouse wheel.

Image

Format – Choose the image format of the exported tiles.

• JPEG
• WebP

Quality – The overall quality of the images. 90% is the default value, lowering the value below 90 will decrease the quality of the outputted images.

Multi Res

Select to output multiple resolutions of the panorama. This will allow users to see a sharper image when they zoom in – it keeps the image sharp at all zoom levels. When this is selected you’ll see the following settings:

Output Tile Size – This determines the size of the sub tiles in pixels. The default is set to 1024 pixels. There are options to use 512 and 2048 pixels. Choose Custom Value… to enter any size from 32 to 10000 pixels. Multiresolution creates a lot of files. If this is a concern for you, consider using a larger tile size.

Levels – Set the levels of resolution either automatically (Auto) or manually (Manual).

When Auto is chosen, levels will be automatically set. The levels are based on the calculation chosen in the program’s settings (Settings > Advanced > Output > Use width/Pi as output factor).

When Manual is chosen, you can enter the level size yourself. In the table that appears, double-click in the empty field and the first level will be added. You can change this value (which is the result of image width/4) or keep it. Click the plus sign or double-click the field below to add another level. It’s recommended to have the last level be equal to or just a bit less than the Level Tile Size.

Single Res

Select to output a single resolution.

If this is selected you’ll see the following settings:

Cube Face Size – The size of a cube face, measured in pixels. A new web output starts with the face size Pano2VR calculates for the start node: for an equirectangular panorama, a quarter of the image width, or the width divided by π when Use width/Pi as output factor is selected in the Advanced settings.

Tile Quality – Click to open the Cube Face Quality dialog and set the image quality of each cube face separately: Front, Right, Back, Left, Up, and Down. Select a face to give it its own quality from 1 to 100. A face you leave unselected uses the Quality value above. For example, lower the quality of Up and Down if their content is not critical. This button is available only when Single Res is selected.

Interlacing – Select Use progressive JPG to use progressive JPEGs.

Image Names – This creates a folder to hold the cube face images. Or you can choose your own folder or location by clicking the folder icon. The default is images/$n_o.jpg. $n is a placeholder that will be replaced by the image’s name. o simply stands for output and can be removed or changed according to your needs.

Face Names – Choose a naming convention for the cube faces. The naming convention will be appended to the file name displayed in the Image Names text field.

Download / Preview

This section will determine how the preview track of the panorama will look. This is what the user sees as the tiles are downloading.

Type – Choose the type of download preview image: Grayscale, Color, Sepia, or Gaussian Blur. When None is chosen, no preview image is used during download. Rather, only a background color is shown (color-picker).

Resolution – This represents how sharp or blurry the download preview image will appear. This setting will effect the file size. The resolution can be set from 1:2 to 1:8. The default setting is 1:4 which is a reasonably good setting. Setting it to 1:2 makes the preview image the sharpest.

Background Color – Click the color picker to choose the color of the background.

Quality – The quality of the preview image as defined in JPEG images. 25 is the default value.

Advanced

Skin

File – Rename the Skin file here. This is useful if you want to have multiple versions of a project with different skins that share the same output path. This way, you can have multiple skins in the output folder.

Image Format – Select Convert SVG to PNG to have the SVGs in the skin converted to PNG. If this is not selected, Pano2VR will output both formats.

Image Output Path – This creates a folder to contain the images of the skin and by default is placed in the same location as the panorama. The default is the same folder (images) that holds the cube face images. The name of this folder can be changed. Click the blue folder icon to choose a different location.

Inline Image Size – Set the size limit, in bytes, of inline images (images that are stored within the skin and not as external files in the image folder). Setting this limit to 0 will place all images in the images folder.

Export Skin as XML – Select to export the skin as an XML file to the output folder (This is needed by some 3rd party VR players).

Hotspots – Choose how the hotspot icons are rendered on output. Sharp will sharpen the icons, but they may have a choppy movement. Smooth Motion slightly softens the hotspot icons but it will have a smooth movement in the skin.

Output

File – This is the output file path. You can change its location and name of the file by clicking the folder icon to the right.

Multiresolution

Multiresolution allows you to break an image down into multiple levels (or layers) so that every zoom level has good resolution. This section is only available if Multires in the Image properties is selected.

Filename – Here, you can choose the naming convention of the tiles. The naming convention is created with placeholders and you can choose from the list or build your own. There is one special template, tiles/$y/%k.jpg, which uses %c, %l, %x, %y plus additional hidden values to generate unique filenames for tiles.

Overlap – Keep 1 pixel overlap selected to have the tiles overlap by one pixel to avoid visible seams in the image. If using tiles from a source other than Pano2VR, this option may need to be deselected for correct tile alignment.

A new output turns Overlap off by itself when the project holds cube face input whose face size divides evenly by 256, as it does for Matterport imports for example. Those faces tile exactly without the overlap pixels, while keeping them would leave a very thin last row and column of tiles.

Switch Bias – Changing this setting will determine at which zoom levels the tiles will change. The higher the number, the sooner the tiles will change. If this is set too high it will require much more processing (downloading and decoding) for the host computer. A good compromise setting is between 0.4 and 0.5.

This all works by comparing screen and image pixels:

• Bias = -1 – A negative setting will change the tiles when there are 4 image pixels to 1 screen pixel. Zooming in will cause the visible tiles to change just before there are 4 image pixels to 1 screen pixel. Zooming out, the tile will change just before there are 2 image pixels to 1 screen pixel.

• Bias = 1 – A high bias number will change the tiles sooner and will produce aliasing, and will increase processing load. Zooming in will cause the visible tiles to change just before there is 1 image pixel to 1 screen pixel. Zooming out will change the tiles just before there is 0.5 image pixel to 1 screen pixel.

• Bias = 0 – Zooming in will cause the visible tiles to change just before there is 1 image pixel to 2 screen pixels. Zooming out will change the tiles just before there is 1 image pixel to 1 screen pixel.

Switch Bias HiDPI – This setting is similar to Switch Bias except it is for high resolution displays and ensures better viewing of high resolution images.

Number of Loaded Levels at Startup – Set the number of levels that will be loaded when the player is first opened.

Assets

Add external media to your project. When you export, Pano2VR will copy these files and folders into an Assets folder inside the Output folder. Any folders you add will become subfolders in the Assets folder.

To add assets, double-click in the table or click the plus button to browse for a file or folder. You can also drag and drop files or folders directly into the Assets table.

---

See also…

• Adding Point Hotspots

• Adding Polygon Hotspots

• Skin Editor

• Tip: Adding a Logo to the Context Menu

• Adding Different Logos to Tour Nodes