Using PHP to switch HTML5 skins

You can use PHP code to alternate separate skins for the iPad and iPhone/iPod Touch.
If your web hosting provider has PHP capabilities, you can use the following to switch skins depending on which device is being used. A good example of this can be found on our website in our Virtual Tour example.
When you visit the link with an iPad you will see a map and directional pointers. Visit the same link with an iPhone or iPod Touch and you will have a different skin with drop down thumbnails. This is achieved by renaming the skin.js files to different names and adding some lines of PHP code to the HTML page.

Here is what the body section of the HTML page looks like when produced by Pano2VR, Object2VR is almost identical except that you will see object2vr_player.js:

<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>

Simply replace the line

<script type="text/javascript" src="skin.js">
</script>

with the following to the above html page

<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPod"))) { ?>
	<script type="text/javascript" src="skin_iphone.js">
<?php } else { ?>
	<script type="text/javascript" src="skin_ipad.js">
<?php } ?>
</script>

So it now looks like this:

<body onorientationchange="hideUrlBar();">
	<script type="text/javascript" src="pano2vr_player.js">
	</script>
<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPod"))) { ?>
	<script type="text/javascript" src="skin_iphone.js">
<?php } else { ?>
	<script type="text/javascript" src="skin_ipad.js">
<?php } ?>
	</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>

You can copy and paste this code snippet into your own HTML page; just replace park.xml with your file. Once finished with your modifications to the HTML page, rename it to .php. If you had index.html, it will now will have the PHP extension: index.php. It is important to remove all HTML pages with the same name or this will not work.

This will also work with HTML pages with Flash fallback so you can have three different versions of the same panorama optimized for the viewing device.

The above code is looking for two different javascript files, skin_ipad.js and skin_iphone.js. Pano2VR and Object2VR only outputs a skin.js file, so you need to do the following to create the required files.

Make two skins, one for the iPad and then a different one for the iPhone.
Select the iPad skin in HTML5 output, then output the project. Rename the outputted skin.js file to skin_ipad.js.
Change to the iPhone skin file in the HTML5 output and then output the project again, this will output another skin.js file, rename this to skin_iphone.js.

You will need to upload both skin files to your server along with the index.php, remembering to delete the index.html file if there is one on the server.