Skip to main content

JavaScript API (Object2VR)

Your object VRs can be controlled with JavaScript from the HTML page. The API is similar to Pano2VR's 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('obj','test.swf','640','480','allowFullScreen','true','FlashVars','externalinterface=1');
//-->
</script>

will expose the Object2VR JavaScript API.

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

JavaScript API calls[edit]

Viewing direction[edit]

obj.getColumn(); // returns the current pan angle
obj.setColumn(angle_in_degrees:Number); // sets the current pan angle
obj.changeColumn(offset_in_degrees:Number); // change the current pan angle
 
obj.getRow(); // returns the current tilt angle
obj.setRow(angle_in_degrees:Number); // sets the current tilt angle
obj.changeRow(offset_in_degrees:Number); // change the current tilt angle
 
obj.getZoom(); // returns the current FoV
obj.setZoom(angle_in_degrees:Number); // sets the current FoV
obj.changeZoom(offset_in_degrees:Number); // change the current FoV
 
obj.getState(); // returns the current viewing state
obj.changeViewState(newstate:Number,speed:Number); // change the current view state with a blend transition 
 
obj.moveTo(column:Number, row:Number, zoom:Number, speed:Number ); // move to position

Other calls[edit]

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

Example: An object with 12 columns 4 rows (0-3), and 1.5x zoom <a onClick="obj.moveTo(5, 3, 150, 1 ); // move to position;" href="#">Move To Column 5, Row 3 and FoV 150 speed 1</a>

Complete example[edit]

<!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('obj','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="obj.moveTo(140,-40,70,10);" href="#">Move To 140,-40</a>
		<a onClick="obj.moveTo(-100,40,70,3);" href="#">Move To -100,40</a>
		<a onClick="obj.moveTo(-140,30);" href="#">Move To -140,30</a>
		<a onClick="obj.stop();obj.setPan(-100);obj.setTilt(-50);" href="#">Jump To -100,-50</a>
	</body>
</html>

See also[edit]

Flash API (Pano2VR)
Flash Output Settings: HTML Tab