Skip to main content

Synchronizing Panoramas

If you would like to show two panoramas side by side for example for stereo panoramas you can synchronize the viewpoint with a little javascript. First of all you need to embed both panoramas into the same HTML page. This example assumes that the panorama objects are called pano_left and pano_right. The same code works for HTML5 and Flash, however in Flash you need to enable the Javascript interface.

<script type="text/javascript">
function syncPanos() {
	try {
		pano_right.setPan(pano_left.getPan());
		pano_right.setTilt(pano_left.getTilt());
		pano_right.setFov(pano_left.getFov());
	} catch(e) {}
}
setInterval ( "syncPanos()", 10 );
</script>

If you have 2 panoramas "left.swf" and "right.swf" the full HTML code for 2 Flash panormas may look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<script type="text/javascript" src="swfobject.js">
		</script>
		<style type="text/css" title="Default">
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
			}
			table,tr,td {
				border-style : none;
				border-width : 0px;
			}
		</style>	
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%;">
			<tr>
				<td style="width:50%;height:100%;"><div id="container_left"  style="width:100%;height:100%;"></div></td>
				<td style="width:50%;height:100%;"><div id="container_right" style="width:100%;height:100%;"></div></td>
			</tr>
		</table>	
		<script type="text/javascript">
			var flashvars = {};
			// enable javascript interface
			flashvars.externalinterface="1";
			var params = {};
			params.quality = "high";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "always";
			params.allowfullscreen = "true";
 
			var attributes = {};
			attributes.id = "pano_left";
			attributes.name = "pano_left";
			attributes.align = "middle";
			swfobject.embedSWF(
				"left.swf", "container_left", 
				"100%", "100%", 
				"9.0.0", "expressInstall.swf", 
				flashvars, params, attributes);
 
			var attributes2 = {};
			attributes2.id = "pano_right";
			attributes2.name = "pano_right";
			attributes2.align = "middle";
			swfobject.embedSWF(
				"right.swf", "container_right", 
				"100%", "100%", 
				"9.0.0", "expressInstall.swf", 
				flashvars, params, attributes2);
 
			// syncronize both panoramas
			function syncPanos() {
				try {
					pano_right.setPan(pano_left.getPan());
					pano_right.setTilt(pano_left.getTilt());
					pano_right.setFov(pano_left.getFov());
				} catch(e) {}
			}
			setInterval ( "syncPanos()", 10 );
			syncPanos();
		</script>
		<div id="flashContent">
			<p><a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a></p>
		</div>
	</body>
</html>


and for HTML5 with 2 panorama XML files "left.xml" and "right.xml":

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css" title="Default">
			html {
				height:100%;
			}
			body {
				height:100%;
				margin: 0px;
				overflow:hidden; /* disable scrollbars */
			}
			table,tr,td {
				border-style : none;
				border-width : 0px;
			}
		</style>	
	</head>
	<body>
		<script type="text/javascript" src="pano2vr_player.js">
		</script>
		<table border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%;">
			<tr>
				<td style="width:50%;height:100%;"><div id="container_left"  style="width:100%;height:100%;"></div></td>
				<td style="width:50%;height:100%;"><div id="container_right" style="width:100%;height:100%;"></div></td>
			</tr>
		</table>	
		<script type="text/javascript">
			// create the panorama player with the container
			pano_left=new pano2vrPlayer("container_left");
			pano_left.readConfigUrl("left.xml");
			pano_right=new pano2vrPlayer("container_right");
			pano_right.readConfigUrl("right.xml");
			// syncronize both panoramas
			function syncPanos() {
				try {
					pano_right.setPan(pano_left.getPan());
					pano_right.setTilt(pano_left.getTilt());
					pano_right.setFov(pano_left.getFov());
				} catch(e) {}
			}
			setInterval ( "syncPanos()", 10 );
		</script>
		<noscript>
			<p><b>Please enable Javascript!</b></p>
		</noscript>
	</body>
</html>


See also[edit]

JavaScript API (Pano2VR)