This tip will enable Object2VR HTML5 projects to be stored on a mobile device by using the browser’s cache. It is not recommended for any purpose other than to display projects offline. Because this method locally stores files and could not only confuse the user (with pop up warning dialogs) but also crash their device, we recommend not using this offline method as a general solution. For iOS devices, please consider using the GoodReader app for offline viewing.
You only need to upload one manifest file to your server. This one file must contain all the relevant information from the other manifest files.
Below, you’ll find some code to add to your HTML page to show the state of the cache and when the files are downloaded.
NOTE1: At the time of of this writing, the cache limit is around 5MB for Mobile Safari. If your object movie is larger than this, Safari will pop up a warning that asks if you want to increase this limit. If you choose, Yes, you will need to close then re-open Mobile Safari.
NOTE2: For the following to work, your host provider must have the correct mime type to serve the files. Please see Manifest file for more information.
Contents
Edit the HTML Page
Below is additional code that you can copy and paste in to your HTML page to give you feedback (in the form of a visual text box in the left corner of the screen) when all the files have been cached. This is especially helpful since no indication is given that additional files are being downloaded after the initial image.
<script type="text/javascript"> var cacheStatus; container = document.getElementById("container"); cacheStatus=document.createElement('div'); cacheStatus.setAttribute('style','position:absolute;left: 2px;top: 2px;' + 'width: 150px;height:18px;color: #fff;padding: 1px 3px;' + 'background-color: #000; opacity:0.5;'); cacheStatus.setAttribute('id','cachestatus'); cacheStatus.innerHTML="cache status"; container.appendChild(cacheStatus); if (navigator.onLine) { window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); cacheStatus.innerHTML="update ready!"; if (confirm('A new version of this page is available. Reload?')) { window.location.reload(); } } }, false); window.applicationCache.addEventListener('cached', function(e) {cacheStatus.innerHTML="cache is ready!"; },false); window.applicationCache.addEventListener('noupdate', function(e) { cacheStatus.innerHTML="cache is up to date!"; },false); window.applicationCache.addEventListener('downloading', function(e) { cacheStatus.innerHTML="downloading..."; },false); window.applicationCache.addEventListener('error', function(e) { cacheStatus.innerHTML="error"; },false); window.applicationCache.update(); } else { cacheStatus.innerHTML="offline"; } </script>
Below is what standard HTML body code looks like from a HTML5 project. Remember this has to be the HTML page of the opening/first panorama.
This will also work in conjunction with PHP code to change HTML5/CSS3 skins and Flash fallback.
<body onorientationchange="hideUrlBar();"> <script type="text/javascript" src="pano2vr_player.js"> </script> <script type="text/javascript" src="skin.js"> </script> <script type="text/javascript"> // create panorama container document.writeln('<div id="container" style="width:100%;height:100%;"></div>'); // create the panorama player with the container pano=new pano2vrPlayer("container"); // add the skin object skin=new pano2vrSkin(pano); // load the configuration pano.readConfigUrl("park.xml"); // hide the URL bar on the iPhone hideUrlBar(); </script> <noscript> <p><b>Please enable Javascript!</b></p> </noscript> </body>
The following shows where to place the extra code within the HTML Page.
<body onorientationchange="hideUrlBar();"> <script type="text/javascript" src="pano2vr_player.js"> </script> <script type="text/javascript" src="skin.js"> </script> <script type="text/javascript"> // create panorama container document.writeln('<div id="container" style="width:100%;height:100%;"></div>'); // create the panorama player with the container pano=new pano2vrPlayer("container"); // add the skin object skin=new pano2vrSkin(pano); // load the configuration pano.readConfigUrl("park.xml"); // hide the URL bar on the iPhone hideUrlBar(); </script> <script type="text/javascript"> var cacheStatus; container = document.getElementById("container"); cacheStatus=document.createElement('div'); cacheStatus.setAttribute('style','position:absolute;left: 2px;top: 2px;' + 'width: 150px;height:18px;color: #fff;padding: 1px 3px;' + 'background-color: #000; opacity:0.5;'); cacheStatus.setAttribute('id','cachestatus'); cacheStatus.innerHTML="cache status"; container.appendChild(cacheStatus); if (navigator.onLine) { window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); cacheStatus.innerHTML="update ready!"; if (confirm('A new version of this page is available. Reload?')) { window.location.reload(); } } }, false); window.applicationCache.addEventListener('cached', function(e) {cacheStatus.innerHTML="cache is ready!"; },false); window.applicationCache.addEventListener('noupdate', function(e) { cacheStatus.innerHTML="cache is up to date!"; },false); window.applicationCache.addEventListener('downloading', function(e) { cacheStatus.innerHTML="downloading..."; },false); window.applicationCache.addEventListener('error', function(e) { cacheStatus.innerHTML="error"; },false); window.applicationCache.update(); } else { cacheStatus.innerHTML="offline"; } </script> <noscript> <p><b>Please enable Javascript!</b></p> </noscript> </body>
Output the Manifest File
The following will show you how to output a Manifest file.
- Open a project file and go to the HTML tab of an HTML5 output.
- Select Create HTML5 Cache Manifest in the Template Parameters.
- Click OK and output the project. The Manifest file will be in the same folder as the HTML file.
Uploading the files
When you have finished modifying the HTML and Manifest files you will need to upload them to a server. The files that need to be uploaded are:
- The images folder
- All the XML files, one for each node
- Manifest file from the opening node
- HTML page
- Skin.js
- pano2vr_player.js
If you are using Flash fallback you will also need to upload the Flash outputs, SWF and swfobject.js files (p2q_embed_object.js if using an older version).
Creating an offline version that is less than 5MB to an iOS device
Download the below 5MB project
Download Video
The following assumes that you have uploaded the files to a server and are using the above HTML code to show the information text box. It is recommended that you restart your mobile device to clear your web browser’s cache memory before you start the following procedure.
- Navigate to the web page where your panorama is hosted.
- When cache is ready is displayed, add the web page as a web app to the the home screen of your device.
The information text box (in the upper lefthand corner) displays the following in this order:
cache status
downloading…..
cache is ready - Open the web app and check that the information text box displays cache is up to date, then close it.
- Disconnect the mobile device from the internet and open the web app. The information text box should now say offline.
Creating an offline version that is greater than 5MB to an iOS device
Download the above 5MB project
Download Video
The following assumes that you have uploaded the files to a server and are using the above HTML code to show the information text box. It is recommended that you restart your mobile device to clear your web browser’s cache memory before you start the following procedure.
As your files are larger than the 5MB cache limit of Mobile Safari you will be asked if you want to increase the cache memory size. This is not a permanent size increase; it is only for the panorama you are downloading. This message interrupts the downloading process and the web browser has to be restarted to complete the download.
- Navigate to the web page where you have your panorama or tour.
You will see the information text box state the following:
cache status
downloading….. - A system message will appear asking if you want to increase local storage, select Increase.
After this, an error will be displayed in the information text box. This is because the system message interrupted the download process. - Close Safari and/or quit the application from running in the background (depending on the device).
If your device supports apps running in the background, press and hold the Safari icon in the last-used applications bar until it starts to wobble with a minus sign above it. Tap the minus sign. - Restart Safari.
You will now see the following in this order:
cache status
downloading…..
cache is ready - When cache is ready is displayed, add the location to the Home Screen which will add a web app to the home screen of the device.
- Open the web app and check that the information text box displays cache is up to date, then close it.
- Disconnect the device from the internet and open the web app. The information text box should now say offline. Visit all the locations/nodes of the tour to make sure that all the files have been cached.
◊ TIP: To remove the web app on an iOS device, press and hold it until the icon starts to wobble and then tap the x to delete it.
◊ NOTE: This also works with any modern mobile browser. However, as of this writing, all of them have their limitations. For example, there is no way to increase the cache memory limit of 5MB in Chrome.