html in different folder

Q&A about the latest versions
Post Reply
byker
Posts: 5
Joined: Thu May 23, 2013 6:41 pm

Hello,
I would like to ask if there is a possibility to run a panorama from .html file which is in a different directory? Which file should I modify and how? I would like to create a virtual tour based on swf and html5 in wordpress. Thank you. Peter
Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Is an iframe what you are looking for?
byker
Posts: 5
Joined: Thu May 23, 2013 6:41 pm

No, I would like to display a pano using the html file generated by Pano2vr. But source files (images,tiles, .js, .swf) will be in different folder. I change paths in .html but it doesn't work. Maybe I should change something more? This is the file:

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></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>
		<script type="text/javascript" src="pano2vrgyro.js">
		</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">
		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(
				"Panorama1_out.swf", "container", 
				"100%", "100%",
				"9.0.0", "expressInstall.swf", 
				flashvars, params, attributes);
			
		} else 
		// check for CSS3 3D transformations and WebGL
		if (ggHasHtml5Css3D() || ggHasWebGL()) {
	
			// create the panorama player with the container
			pano=new pano2vrPlayer("container");
			pano.readConfigUrl("Panorama1_out.xml");
			// hide the URL bar on the iPhone
			hideUrlBar();
			// add gyroscope controller
			gyro=new pano2vrGyro(pano,"container");
			
		}
		</script>
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
	</body>
</html>

Don
Posts: 143
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Oh, before editing the code, check this out. When outputting to Flash, there are at least 4 places in Pano2VR where the output folders can be designated:

1. In the Setting tab of the Flash Output editor, under Tile Settings, select externalize. This designates the folder where your image files will reside. In Flash, if you don't externalize the images, then I believe the images are embedded in the swf file. (I'm not sure, because I rarely use the Flash Output, only html5.)

2. In the Settings tab of the Flash Output editor there is an Output field. This designates the folder where your swf file will reside.

3. In the Settings tab of the Flash Output editor, under Skin, select Externalize and the Image Output Path field will be enabled. This designates the folder where your skin images will reside.

4. In the HTML tab of the Flash Output editor, under Template Output, the Output File field designates the folder where you swf file will reside.

Experiment? If the above settings don't provide your needs, then at least they will offer strong hints as to how the html might look for your specific folder structure?
byker
Posts: 5
Joined: Thu May 23, 2013 6:41 pm

Thank you Don, I managed with the problem by modyfing the name of container- default is "container". This was the reason why pano had not displayed even after modyfing directories. Now I can put the code to wordpress theme and it works fine!
Post Reply