HTML5 Output Settings (Pano2VR)
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.
- 1 Settings Tab
- 2 Advanced Settings Tab
- 3 Multiresolution Tab
- 4 Mobile Tab
- 5 HTML Tab
- 6 See also
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.
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.
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.
- Vertical: When the image is scaled or window resized, the vertical field of view will stay true.
- Horizontal: Choose this option to ensure the horizontal field of view is most important and is always visible when scaling the image.
- Diagonal: If the diagonal of the image is most important and should stay within the image's frame, choose this option.
- Max: When this option is chosen, whichever dimension is greatest (vertical, horizontal or diagonal) will stay within the field of view when the image is scaled.
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: 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.
- Convert SVG to PNG: Select to have the SVGs in the skin, converted to PNG. If this is not selected, Pano2VR will output both formats in the case a Flash fallback will be used.
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 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
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.
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.
- Inertia: When this is enabled, the panorama will slowly come to a stop - as if it has mass. If not enabled, it will stop immediately.
Mouse: Mouse controls.
- Disable: Select to disable interactivity with the panorama via the mouse.
- Invert control: Select this to invert the mouse control. When inverted, dragging the movie with the mouse will drag the panorama in the same direction as the mouse. Also, to move the panorama, the user must click and drag (like Google Street View).
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.
◊ NOTE: This will only work if Fullscreen is unselected in the HTML tab.
Mouse Wheel: Mouse wheel controls.
- Disable: Disable interactivity with the panorama via the mouse wheel.
- Invert: Invert the interactivity of the mouse wheel. For instance, scrolling down will zoom the movie out (instead of zooming in).
- Speed: The rate at which the panorama will move relative to the mouse wheel.
Keyboard: Keyboard control.
- Disable: Select this to disable interactivity with the panorama via the keyboard.
Context: Pro – Refers to the panorama's right-click context menu.
- Hide About Pano2VR: Select to hide 'About Pano2VR' from the right-click context menu.
Hotspot Text Box
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.
- 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. 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.
- 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.
◊ TIP: To hide the boxes, but keep the text visible, deselect Visible from both Background and Border.
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:
- 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 a mouse enters the active area.
- Show All: All polygon hotspots will be visible.
- Disable: Disable the background and border for the hotspots.
Background Color: Choose the fill color of the hotspot.
Border Color: Choose the border color.
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.
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!)
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
- 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.
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.
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.
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.
Use this tab create a customizable HTML template. Information on the coding language used to create the HTML template can be found here.
Enable HTML File: Select to access the HTML template parameters.
Template: Choose a template.
These settings will change depending on the template you choose.
Current available templates:
- GGPKG: Use this for embedding your project in your website.
- iBooks: Use this template to embed your project in an iBooks project.
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.
Format: Choose between extensions,
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.