HTML5 Output (Pano2VR)
From Garden Gnome Software
(Redirected from Pano2VR - HTML5 Export)
The HTML5 output format allows you to create VR panoramas for use with mobile devices, like the iPhone, which do not support Adobe Flash. This page will explain the steps needed in order to output and display your HTML5 panorama.
Video loading...
Download the project files used in this tutorial.
- Import your image.
- Adjust viewing parameters and add user data, hotspots, and sounds if you wish.
- In the output section, choose HTML5 from the output format list.
- In the Tile Settings, choose a cube face size.
TIP: This tile size should be larger than the largest tile size specified in the Mobile Tab. When you build multiple tile size versions, this cube face size becomes the default for any screen resolution above the largest targeted screen resolution in the Mobile tab. (See step 11.)
- Next, for Image Names, you can either choose a folder to which all the cube faces will be stored by clicking Open..., or you can leave it at the default, images/$n_o.jpg, and Pano2VR will create a folder named, images, in the same location as the image.
TIP: The placeholder, $n, will take on the current name of the project (found in the Output File text field).
- Choose a naming convention with Face Names. The convention will appended to the file name.
- Set a window size and a FoV mode.
NOTE: The window size can always be changed within the HTML template.
- Enable Auto Rotation (select) or not.
- If you like, add a skin to the project by selecting one from the list, or by clicking Edit and building your own.
TIP: The skin, simplex.ggsk, which is pre-installed, uses scalable vector graphics.
- For Image Output Path, choose a folder (or create new one by simply typing the folder name in the text field) to keep the skin images in or leave it at the default which is the same folder that holds the cube face images.
- Go to the Mobile Tab and click Add to enter different tile sizes for different screen resolutions. If you are following our example, we start with two sizes.
NOTE: This is where you can specify which version of your image should be used based on a device's screen resolution. If the tile size is too big for a device it will cause Safari to crash because the image is using too much memory. What tile size to use is basically trial and error plus personal preference.
In essence, it works like this: If the device's screen resolution is 960px, and you add a target max screen resolution of 1025px, the player will use this resolution using the tile size indicated (in our example we use 800px). If the device has a resolution of 1280px and you did not specify a resolution above 1025px in the Mobile tab, then the tile size that is set in Tile Settings, will be used.
- Enter the pixel width of the first maximum screen size (you can start with something like 1025px, this will cover the iPad's resolution of 1024px plus the iPhone4 and iPod Touch screens.). And then enter the tile size for this particular resolution. You can try an 800px tile size. For the second tile size, enter 500px for the max screen size and 400px for the tile size (this will include the iPhone3G and older iPod Touches.)
- Choose a compression (Image Quality) setting.
TIP: If you use a small tile size, you may want to increase the quality. In our example we start with a setting of 80 for the 1025px screen size and 90 for the small screen size.
- Change the name of the outputted version if you like. Like with the Image Names setting in Tile Settings, you can create a new location or use the default folder, Images.
NOTE: The placeholder, $x, will take on the size of the tile. (e.g. ring_o_800_0.jpg, where 800 is the tile size)
- Enter the pixel width of the first maximum screen size (you can start with something like 1025px, this will cover the iPad's resolution of 1024px plus the iPhone4 and iPod Touch screens.). And then enter the tile size for this particular resolution. You can try an 800px tile size. For the second tile size, enter 500px for the max screen size and 400px for the tile size (this will include the iPhone3G and older iPod Touches.)
- Go to the HTML tab to export an HTML template. Enable the output by selecting, Enable HTML file. Here you can do a number of things:
- Select Fullscreen to ensure the panorama fills the whole screen when in Fullscreen mode.
TIP: Double-tap on the panorama to go to Fullscreen.
- Add the Flash version (SWF) to Flash panorama (fallback) to ensure that your panorama plays on all devices. If the browser used to playback the panorama does not support HTML5 3D transformations, the Pano2VR player will fallback to the Flash version. If the browser does not support either of these, an error message will pop up.
- Select Prefer Flash if available if you want the Flash version be preferred over the HTML5 version in a browser that is capable of playing back both.
NOTE: When building a tour that includes both Flash and HTML5, have your hotspots point to the Flash versions if you want to make sure that your tour is playable in all browsers.
- Select Fullscreen to ensure the panorama fills the whole screen when in Fullscreen mode.
- Hit OK to output the panorama.
TIP: If you're going to be adding this to a web server, make sure you copy over the XML, HTML, javascript player, javascript file for the skin, the images folder (including the skin images folder if you made a separate folder for it).
