HTML5 Output Settings (Pano2VR)
From Garden Gnome Software
If you would like to display your panoramas on Apple devices like the iPad, iPhone and iPod Touch, you will need to use HTML5 with CSS3. To learn more on how this is done you can watch or read the tutorial over here.
Contents |
Settings Tab
Tile Settings
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. However, you can always change this value to what you like.
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.
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.
Display
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.
Auto Rotate
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.
Only in focus: When enabled, the panorama will only rotate when the mouse hovers over it.
Skin/Controller
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 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
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:
$nis a placeholder and will be replaced with the panorama's file name.
Advanced Settings Tab
Control
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.
Hotspot Text Box
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:
- Word Wrap: When selected the text will wrap to the next line.
Mobile Tab
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.
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, 
, to remove a set.
HTML Tab
Use this tab create customizable HTML template. Information on the coding language used to create the HTML template can be found here.
To access the HTML template parameters, select Enable HTML File.
Template: Currently, there is only one template to choose from, normal.ggt.
Template Parameters
Text, Background Colors: Choose the color of your text and your page background.
Fullscreen: Select this to ensure the panorama fills the browser window when in fullscreen.
- TIP: Double-tap the panorama to enter fullscreen mode.
Flash panorama (fallback): 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 Userdata Table: Choose to show the userdata table or not.
Table Border, Table Text, Table Background Colors: Use these color pickers to customize your table.
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
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:
$nwill be replaced with the name of your original image.