Skip to main content

JavaScript API (Pano2VR)

Since Pano2VR 2.1b4 Flash 9 panoramas can be controlled with JavaScript from the HTML page. The API is similar to the Flash API.

First of all you need to enable the external Flash interface. It is disable by default to avoid error messages. To do this you need to set the FlashVars parameter externalinterface to 1. Also you need to assign a name/id to the Flash object within the HTML page. If you are using the p2q_embed_object.js (version 2.2 and higher) the code:

<script type="text/javascript" src="p2q_embed_object.js">
</script>
<script type="text/javascript">
<!--
  p2q_EmbedFlashId('pano','test.swf','640','480','allowFullScreen','true','FlashVars','externalinterface=1');
//-->
</script>

will expose the Pano2VR JavaScript API.

If you enable the option "JavaScript interface" in HTML Template "normal.ggt" the code will be created for you.

Contents

JavaScript API calls

Viewing direction

pano.getPan(); // returns the current pan angle
pano.setPan(angle_in_degrees:Number); // sets the current pan angle
pano.changePan(offset_in_degrees:Number); // change the current pan angle
 
pano.getTilt(); // returns the current tilt angle
pano.setTilt(angle_in_degrees:Number); // sets the current tilt angle
pano.changeTilt(offset_in_degrees:Number); // change the current tilt angle
 
pano.getFov(); // returns the current FoV
pano.setFov(angle_in_degrees:Number); // sets the current FoV
pano.changeFov(offset_in_degrees:Number); // change the current FoV
 
pano.moveTo(pan:Number, tilt:Number, fov:Number, speed:Number ); // move to position

Other calls

pano.setAutorotate(<speed:Number>,<delay:Number>,<return to horizon:Number>,<only in focus:Boolean>);
pano.setLocked(<value:Boolean>); // Allow interaction with the panorama (mouse/keyboard)
pano.isComplete(); // Check if the panorama is loaded completely
pano.stop(); // stop automatic movement
pano.openNext(<url:String>,<parameter:String>); // Open next panorama

You can see a small demo at this Pano2VR example.

Complete example

<!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="p2q_embed_object.js">
		</script>
		<style type="text/css" title="Default">
			body, div, h1, h2, h3, span, p {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				color: #000000; 
			}
			body {
			  font-size: 10pt;
			  background : #ffffff; 
			}
			table,tr,td {
				font-size: 10pt;
				border-color : #777777;
				background : #dddddd; 
				color: #000000; 
				border-style : solid;
				border-width : 1px;
			}
			h1 {
				font-size: 18pt;
			}
			h2 {
				font-size: 14pt;
			}
			.warning {
				font-weight: bold;
			}
		</style>	
	</head>
	<body>
		<h1></h1>
		<p>
		<script type="text/javascript">
<!--
			function getFlashMovie(movieName) {
				var isIE = navigator.appName.indexOf("Microsoft") != -1;
				return (isIE) ? window[movieName] : document[movieName];
			}
			if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
				var flashvars="";
				// enable javascript interface
				flashvars+="externalinterface=1&pan=22";
				p2q_EmbedFlashId('pano','test.swf','640','480','allowFullScreen','true','FlashVars',flashvars);
 
				// Check to see if the version meets the requirements for playback
				if (!DetectFlashVer(9,0,0)) {
					document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '
								 + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');
				}
			} else {
				document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!');
				document.writeln(' Please copy this file into your html directory.<\/p>');
			}
//-->
		</script>
		<noscript>
			<p class="warning">Please enable Javascript!</p>
		</noscript>
		<br>
		<a onClick="pano.moveTo(140,-40,70,10);" href="#">Move To 140,-40</a>
		<a onClick="pano.moveTo(-100,40,70,3);" href="#">Move To -100,40</a>
		<a onClick="pano.moveTo(-140,30);" href="#">Move To -140,30</a>
		<a onClick="pano.stop();pano.setPan(-100);pano.setTilt(-50);" href="#">Jump To -100,-50</a>
	</body>
</html>

See also

Pano2VR - Flash API