I'm demoing Pano2VR after a long break from using the software. I'm trying to figure out whether I can get it to do what I need, and I plan to buy the full version if successful.
I can spit out a HTML5 tour and have it embedded in a web page. I'm using a Wordpress plugin: PanoPress.
I followed this tutorial: https://ggnome.com/wiki/Using_PHP_to_switch_HTML5_skins
but was unable to get the index.php to work. My webpage just says 'Page Missing'
My aim is to be able to make a simple interface that works across different devices from mobile phones to desktop computers and laptops. After some reasearch I have created two skins, one suffixed _iphone.js, and one _desktop.js
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Camp 1 Sunrise</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
}
/* fullscreen */
html {
height:100%;
}
body {
height:100%;
margin: 0px;
overflow:hidden; /* disable scrollbars */
font-size: 10pt;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove highlight on tab for iOS/Android */
}
/* fix for scroll bars on webkit & >=Mac OS X Lion */
::-webkit-scrollbar {
background-color: rgba(0,0,0,0.5);
width: 0.75em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
<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_DS_iphone.js">
<?php } else { ?>
<script type="text/javascript" src="Skin_DS_Desktop.js">
<?php } ?>
</script>
<script type="text/javascript" src="pano2vrgyro.js">
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAoAlTJmnYJhNCc3nWQ9IVetEMrOPOErBg">
</script>
<div id="container" style="width:100%;height:100%;overflow:hidden;">
<br>Loading...<br><br>
This content requires HTML5 with CSS3 3D Transforms or WebGL.
</div>
<script type="text/javascript">
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
window.addEventListener("load", function() {
pano.readConfigUrlAsync("pano.xml",function() { gyro=new pano2vrGyro(pano,"container");});
});
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
<!-- Hack needed to hide the url bar on iOS 9, iPhone 5s -->
<div style="width:1px;height:1px;"></div>
</body>
</html>
Here is the webpage: http://davidspittle.com/panoramas/
Password: PanoDS2018
And if you have any thoughts on how to centre the pano within the page then I'd also welcome that.
Thanks
Dave