Skip to main content

HTML5 Output Settings (Pano2VR)

Pano2VR - Help

If you would like to display your panoramas on operating systems that don't support Flash (like Apple's iOS), you will need to use HTML5. To learn more on how this is done you can watch or read the tutorial over here.

This page will describe all the HTML5 settings.

Settings Tab[edit]

HTML5 output settings window


Tile Settings[edit]

Cube Face Size: The size of a cube face, measured in pixels (height x width). Pano2VR will calculate the best output cube face size based on the original image and the window size. However, you can always change this value to what you like.
◊ NOTE: The default calculation is image width/4. You can change this to width/Pi in the Settings/Preferences.

Image Quality: The overall quality of the image as defined in JPEG images. 90% is the default value, lowering the value below 90 will decrease the quality of the outputted image.

Tile Quality: Here you can set the image quality of the individual cube faces plus the preview image. For example, the zenith and nadir images could be lowered further if their information is not critical.
Individual tile settings

Interlacing: Select this option 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, Open….
The default is images/$n_o.jpg. Images is what the folder will be named. $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.
Outputted cube face images with naming convention

Display[edit]

Window Size: Adjust the width and height of the movie window.

FoV Mode: This setting ensures that image boundaries stay true to the image's window or scaling option. When the window size is changed, the image is scaled accordingly.


Auto Rotate[edit]

Enable auto rotation: When enabled, the panorama will begin to move (rotate) when the window is opened/loaded or when triggered by the mouse.

Pan Speed: Pan speed refers to how fast the movie will rotate from left to right (positive number) or right to left (negative number).

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

Return to Horizon: Brings the movie'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 will return the image to the horizon at a quicker speed.

Start after fully loaded: Enable this option if you want the movie to start rotating only after it has been fully loaded. If left disabled, the movie will rotate while it is being downloaded.

Change Node: Pro – Set to automatically change the nodes in a tour, every n seconds. The panoramas will change according to their order in the Tour Browser, which you can change to suit the tour's story or flow.
Random: Select to randomly change the nodes.
◊ TIP: If you don't have the pro version, you can also do this manually. See this tip.


Skin/Controller[edit]

Skin: Here you can choose either one of the pre-installed skins or choose one that you have created. The file extension used for the skins is .ggsk (stands for Garden Gnome Skin).
◊ TIP: The skin, simplex uses scalable vector graphics.

Edit: Clicking this will bring you to the Skin Editor.

File: Click here to choose a skin from the Garden Gnome skins folder.

Image Format:

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 as the default folder (images) that holds the cube face images. The name of this folder can be changed. Clicking Open… will let you choose a specific location.

Output[edit]

Output File: Change the name of the file (if you wish) and choose where to save the outputted files associated with the project. The default is to output the file in the same folder as the original image. Click Open… to save the project elsewhere. ◊ NOTE: $n is a placeholder and will be replaced with the panorama's file name.


Advanced Settings Tab[edit]

Advanced Settings Tab

Download-Preview[edit]

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

Type: Choose the type of download preview image: Grayscale, Color or Sepia. 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 default setting is 1:4 which is a reasonably good setting. Setting it to 1:1 makes the downloading image as clear as the original image.

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

Control[edit]

Sensitivity: Set the movie's sensitivity to the movement of the mouse. A low sensitivity will cause the panorama to move slowly with the mouse's movement.

Movement: Control of the panorama.

Mouse: Mouse controls.

Double-click: Fullscreen option.

Mouse Wheel: Mouse wheel controls.

Keyboard: Keyboard control.

Context: Pro – Refers to the panorama's right-click context menu.

Hotspot Text Box[edit]

The hotspot text box appears when a mouse hovers over a hotspot. Be sure select, Enable to activate the settings.

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

Text: Set the text settings.

Background: Set the text box's background color.

Border:

◊ TIP: To hide the boxes, but keep the text visible, deselect Visible from both Background and Border.


Polygon Hotspots[edit]

If you've added polygon hotspots in the Hotspot Editor, then these settings will affect how they appear.

View Mode: Choose how the hotspot appears on screen:

Background Color: Choose the fill color of the hotspot.

Border Color: Choose the border color.


Multiresolution Tab[edit]

Below is video explaining the advanced settings. It is showing the Flash settings for which some are not used in the HTML5 settings. However, there is a nice explanation of how switch bias works and how Pano2VR views levels.

Video loading...

Watch this video on YouTube


HTML5 Multiresolution Tab

Basic Settings[edit]

Enabled: Select to enable multiresolution output. Once you select this, a dialog appears asking you if Pano2VR should add Levels. Choosing, Yes, will add the first levels. If you choose, No, you can manually add the levels.

Level Tile Size: This determines the size of the sub tiles in pixels. ◊ TIP: For best results use settings between 250 to a 1000px.

Filename: This determines the file location and naming convention of the generated sub tiles. You may change the name to suit your project, although the placeholders must be used so Pano2VR knows which tiles to use.

Generate Files: This option is selected by default to generate the multiresolution files. Once multiresolution is set up, you can deselect this option to keep Pano2VR from re-generating the tiles each time the project is outputted. (It's a time-saver!)

Advanced Settings[edit]

Overlap: Keep 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.

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

Bias = 1

Bias = 0

Levels[edit]

When you enable multiresolution, Pano2VR automatically sets three levels. The division of the levels is determined by the settings in the Pano2VR Settings/Preferences. Their widths can either be divided by 4 or by Pi.

Add: Click to manually add levels.

Width: The width of each level's tile size and can be edited.

Remove levels: Click the red X to the right, of the level you wish to remove.

Load at Startup: This determines which level will be used when the player is first opened.

◊ TIP: If making gigapixel panoramas set the Memory Hint in Pano2VR Settings/Preferences to at least half of your computer's RAM; this will speed up the process. The default is 300MB. If, for example, you have 8GB of RAM, set it to 4000MB.

Mobile Tab[edit]

This is where you can create alternate images by specifying the tile size to be used based on a device's screen resolution. This is a necessary step to avoid the browser from crashing because of too much memory needed to play back large tile sizes. Alternatively, you can now use the Multiresolution feature to achieve the same outcome.

Mobile Tab

To add multiple alternate image sets, click Add.

Max. Screen Size: Set the maximum screen size in pixels for the tile size specified.

Tile Size: Set the desired tile size in pixels for the specified screen size.

Image Quality: The overall quality of the image as defined in JPEG images. 90% is the default value, lowering the value below 90 will decrease the quality of the outputted image.
◊ TIP: If you use a small tile size, you may want to increase the quality. However, too high of a quality may require too much memory.

Image Names: This creates a folder to hold these alternate images. You can choose your own folder or location by clicking, Open….
The default is images/$n_o_$x.jpg. Images is what the folder will be named. $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. And $x will be replaced by the tile size.

Remove level: Click this button, Html5 remove level.png, to remove a set.


HTML Tab[edit]

Use this tab create a customizable HTML template. Information on the coding language used to create the HTML template can be found here.

HTML Tab

Enable HTML File: Select to access the HTML template parameters.

Template: Choose a template.


Template Parameters[edit]

These settings will change depending on the template you choose.

Current available templates:

The following parameters are for the normal template.

Text, Background Colors: Choose the color of the text and the page's background.

Fullscreen: Select this to ensure the panorama fills the browser window when in fullscreen.
◊ TIP: Double-tap the panorama to enter fullscreen mode, when using a touch device.

Include Google Maps: Select to include a map within the HTML page.

Direct node access: Select to directly access any node within a tour by adding the node's ID in the URL. For example: .../index.html#node5.
◊ TIP: To see the node's ID in the context menu in Tour Browser, select Show internal node ID in the Advanced Tab of the Settings/Preferences.


Include gyroscope control: Select to enable use of a gyroscope that is included in some mobile devices (Apple's iPhone and iPad, Google's Nexus line, etc.).

Disable on startup: If selected, the gyroscope control will not be on when the panorama starts up. It's recommended to have a button within the skin so the user can enable gyroscope control.
Use true north: Select to use true north and the panorama will always stays true to direction (like a compass). If not it just uses the gyroscope and the panorama will move with the device.



Flash fallback player: Select to use a Flash player that uses the XML file to playback the project. If using this, there's no need to add a fallback file (SWF).

Flash fallback file: Add the Flash version (SWF) of the panorama here so that browsers that do not support HTML5 3D transformations, but do support Flash can properly playback the panorama.

Prefer Flash if available: Select this to have Flash as the preferred player. If a browser supports both HTML5 3D transformations and Flash, the Flash version will played via the Flash player.


Show User Data Table: Select to include a table with information from the user data.

Table Border, Table Text, Table Background Colors: Use these color pickers to customize your table.


Embedded XML: Embeds the XML file in the HTML template. Good for when things can read the external file.

iOS Device Webpage Icon: Add an image file for the bookmark icon. Click, Open..., to choose the file. Reference for icon sizes.

Create HTML5 Cache Manifest: Select this option to have the ability to access the panorama offline. This outputs a manifest file called projectname_out.manifest.


Template Output[edit]

Format: Choose between extensions, .html and .htm.

Output File: If you wish, change the name of the file and choose where to save the outputted HTML file. The default is to output the file in the same directory as the original image. If no change is made here, this is where you will find your outputted image. ◊ NOTE: $n will be replaced with the name of your original image.


See also[edit]

HTML5 Output (Pano2VR)
HTML5 Flash Fallback Player
On progressive JPEGs
Simple Panorama Slideshow for non-pro versions