Pano2VR - Flash - JavaScript API

From GardenGnomeSoftware

Jump to: navigation, search

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

[edit] JavaScript API calls

[edit] 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(); // sets 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

[edit] 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

You can see a small demo at this Pano2VR example.

[edit] 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! 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>
Retrieved from "http://gardengnomesoftware.com/wiki/Pano2VR_-_Flash_-_JavaScript_API"
Personal tools