02Mar2015 Mobile settings for Pano2vr version 3.x & 4.1 only

Bostjan · Fri Dec 23, 2011 12:29 pm

I have a pano made for html5 ... I am testing it with iPhone 4s (iOS5). My manual menu template which is with png files displays ok... but when I used svg files (pano2VR template menu) I found that svg does not display ... is *.svg supported withj html5?

Fri Dec 23, 2011 12:34 pm

Hi
The mime type on your server is not correct.
Please see Here
Regards
Hopki

Bostjan · Fri Dec 23, 2011 1:44 pm

Thanks Hopki!

Vestland · Sun Dec 25, 2011 6:35 pm

Thank you, that will reduce some of the problems.
--

janaslani · Mon Jan 09, 2012 10:49 pm

Hello all,

How does one use 2 different html5 skins for iPhone vs iPad?

Since the iPhone screen is smaller, I'd like to hide the navigation buttons.

Thanks,
Edwin.

Tue Jan 10, 2012 12:12 am

Hi Edwin
Please see this link: http://gardengnomesoftware.com/wiki/Usi ... TML5_skins
Our websites User Guide section has many pages, tips and knowledge base documents, with many answers to many questions.

User Guide: http://gardengnomesoftware.com/wiki/Main_Page

We also have a blog page which we update when new documentation is added, you can subscribe to this to get auto updates, otherwise keep checking back to the User Guide page.
Regards
Hopki

janaslani · Mon Jan 16, 2012 10:12 pm

Thanks a bunch, exactly what I needed

janaslani · Tue Jan 24, 2012 4:28 am

Hi Hopki, please take a look at this page:

http://bit.ly/y2Uets

Per your suggestion, I followed the directions of this link to add 2 different skins (iphone/ipad) to a php file

http://bit.ly/wLA3jx

Here's my code:

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>The Huntington - Desert Garden</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" />
		<script type="text/javascript" src="swfobject.js">
		</script>
		<script type="text/javascript">
			// hide URL field on the iPhone/iPod touch
			function hideUrlBar() {
				if (((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))) {
					container = document.getElementById("container");
					if (container) {
						var cheight;
						switch(window.innerHeight) {
							case 208:cheight=268; break; // landscape
							case 336:cheight=396; break; // portrait, in call status bar
							case 356:cheight=416; break; // portrait 
							default:
								cheight=window.innerHeight;
						}
						if ((container.offsetHeight!=cheight) || (window.innerHeight!=cheight)) {
							container.style.height=cheight + "px";
							setTimeout(function() { hideUrlBar(); }, 1000);
						}
					}
				}
				
				if (window.pageYOffset==0) {
					window.scrollTo(0, 1);
				
				}
			}
		</script>
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: #000000; 
			}
			/* fullscreen */
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
			}
			body {
			  font-size: 10pt;
			  background : #ffffff; 
			}
			table,tr,td {
				font-size: 10pt;
				border-color : #777777;
				background : #dddddd; 
				color: #000000; 
				border-style : solid;
				border-width : 2px;
				padding: 5px;
				border-collapse:collapse;
			}
			h1 {
				font-size: 18pt;
			}
			h2 {
				font-size: 14pt;
			}
			.warning { 
				font-weight: bold;
			} 
		</style>	
	</head>
	<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>

		<div id="container" style="width:100%;height:100%;">
		This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
		</div>
		<script type="text/javascript">
		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
		// use HTML5 panorama
	
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
			// add the skin object
			skin=new pano2vrSkin(pano);
			// load the configuration
			pano.readConfigUrl("desert_3_000.xml");
			// hide the URL bar on the iPhone
			hideUrlBar();
			
		} else 
		if (swfobject.hasFlashPlayerVersion("9.0.0")) {
			var flashvars = {};
			var params = {};
			params.quality = "high";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "sameDomain";
			params.allowfullscreen = "true";
			var attributes = {};
			attributes.id = "pano";
			attributes.name = "pano";
			attributes.align = "middle";
			swfobject.embedSWF(
				"desert_3_000.swf", "container", 
				"100%", "100%",
				"9.0.0", "expressInstall.swf", 
				flashvars, params, attributes);
			
		}
		</script>
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
	</body>
</html>

A couple of things:

The flash fallback using Firefox/Chrome is not working as it is displaying the HTML5 version in both browsers.
When using Safari, The <font size="9" style="line-height:10px"> used on Top-Right displays a large size font.
The Full-Screen option when using Safari doesn't work, should I remove it from the skin?

Thanks for your help,
Edwin.

janaslani · Wed Jan 25, 2012 12:22 am

Hi Hopki,

I had to revert back to using 3.0. The flash fallback detection on the newly outputted html file is not properly working in 3.2 (see the code in previous post). The 3.0 output includes a p2q_embed_object.js file (3.2 doesn't). That's the only way I could get the flash version to play on my mac using Firefox/Chrome.

Edwin.

Fri Jan 27, 2012 4:28 pm

Hi,
In the HTML5 outputs HTML tab you need to select Prefer Flash so it tries to use this first. If no flash plugin is detected it will use HTML5.
If this is not selected it will look for WebGL or Css3D capabilities first regardless if there is a Flash plugin.

With version 3.1.2 you have to use the new html template and swfobject.js file then this should work fine.
The swfobject.js replaces the older p2q_embed_object.js file.
Regards
Hopki

PORTtours · Tue Jan 31, 2012 4:17 am

Hey 360Texas,

Have you seen the Adobe program called "Adobe Device Central"? My friend showed it to me, and I believe you can actually see the output of your files based on screen sizes and actions. I don't know too much about it, but it was pretty neat looking.

Wed Feb 15, 2012 10:31 pm

Yes, I have Dreamweaver CS5.5 and Photoshop CS5 both with device central suitable for viewing smaller screen sizes.

panox · Fri Feb 24, 2012 9:31 am

Hey 360Texas,

I finally managed with the new Pano2VR 3.1.3 to view HTML5-panos on FF 10.0.2. With the previous version of Pano2VR I always got a black pano. Chrome worked.
Now I wanted to view a panorama on my Samsung Galaxy fit GT-S5670. I have the same problems with all installed browsers IE, Opera and Ninesky: The panorama is loaded and it can be seen for milliseconds, then only one top-cubeface appears and is not draggable.

In FF the panorama is shown as expected:

http://www.szenerien.de/b/p.htm

Is there any solution referring Android?

Thank you!

Fri Feb 24, 2012 3:45 pm

On my HTC Android 2.3.4 browser is webkit/533.1 and Flash Player 11.1.111.6

Observation.
I see your TOP cube face for the sky [UP]. Rotation is frozen and the cube faces do not align at all. I see the demo box, description, author date/time and copyright below. but the pano certainly looks BROKEN.

panox · Fri Feb 24, 2012 6:53 pm

Hi Dave,

thank you for testing. Now what could be the reason for this behaviour?