Creating multiple skins

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
4x4nrg
Posts: 6
Joined: Tue Nov 09, 2010 8:03 pm

Creating multiple skins

Post by 4x4nrg » Thu Mar 01, 2018 8:58 am

Hi

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>
I don't know if PHP works on my website, not sure how to find out?

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

User avatar
Hopki
Gnome
Posts: 9082
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Creating multiple skins

Post by Hopki » Thu Mar 01, 2018 5:44 pm

Hi Dave,
In Pano2VR we have an Is Mobile logic block that detects iOS, Android and MS Mobile.

As an example using the is mobile you can hide and show skin elements such as show a drop down menu if, Is Mobile is true, and and show thumbnail menu if, Is Mobile, is false.
Of course if its True the Thumbnail menu will hide and if its false the Thumbnail menu will show with the drop down menu hiding.

Or you can use the logic blocks to detect player width.
Using the above example you can show a drop down menu if the screen width is less than or equal to 450px.
Then show the thumbnail menu if its more then 450px.
Which means an iPad will show the Thumbnails but a Phone wont, but both are mobile devices.

Regards,
Hopki

4x4nrg
Posts: 6
Joined: Tue Nov 09, 2010 8:03 pm

Re: Creating multiple skins

Post by 4x4nrg » Fri Mar 02, 2018 12:15 am

Hi

I actually found these after I made my forum post.

I have another question though - with regard to the viewport size. It seems that you have to manually specify this - which makes it either too small when viewing on a desktop PC, or too big when viewed on a mobile phone.

The web page in it's current state demonstrates the problem...

Not sure if it's a wordpress thing or Panopress, or Pano2VR.

User avatar
Hopki
Gnome
Posts: 9082
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Creating multiple skins

Post by Hopki » Fri Mar 02, 2018 8:25 pm

Hi,
Generally speaking it's the theme that normally deals with height so you can set width 100% in the player.
However Pano2VR has logic blocks that can deal with plater width so possible to scale elements smaller with a narrower player width.
Regards,
Hopki

4x4nrg
Posts: 6
Joined: Tue Nov 09, 2010 8:03 pm

Re: Creating multiple skins

Post by 4x4nrg » Fri Mar 02, 2018 11:41 pm

I have a few more questions:

1) Sorry what do you mean by set 100% in the player? I have found how to change the scale of the skin components but not the viewport?

2) I have now tried both Panopress and ggpkg plugin. I can see the benefit of being able to simply 'add media' when using the ggpkg plugin but as far as I can tell, the panorama won't work in any of the wordpress template components apart from a very simple page. Is this a limitation on the Pano2VR end or is it because I'm not a web developer?

For example, if I try to add a lightbox, full page slider, gallery, and simply "add media" - and select my tour then it only loads the preview. If I then manually set the path of the index.html then it still says missing. Not sure whether this is because these template components are expecting images?

3) I've had no better success with Panopress, but I can atleast centre the pano in my page. When using the gggpkg plugin, how can I centre the tour in the page?

User avatar
Hopki
Gnome
Posts: 9082
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Creating multiple skins

Post by Hopki » Sun Mar 04, 2018 6:54 pm

Hi,
In the plugin you can set the width to 100%

Screen Shot 2018-03-04 at 17.30.59.png
Screen Shot 2018-03-04 at 17.30.59.png (25.99 KiB) Viewed 806 times

I have seen some examples in the past using the plugin and then being displayed in a Lightbox type window so although I have not done this myself it is possible.

Not looked at alining the pano, my test site is a basic build which does not seem to allow this so again I would say may be theme related.
Regards,
Hopki

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests