JavaScript API (Pano2VR)
From Garden Gnome Software
(Redirected from Pano2VR - Flash - JavaScript API)
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>