Skip to main content

JavaScript API

The HTML5 and Flash Pano2VR player has an external API so that it can be controlled with Javascript.

The HTML5 Skin uses exactly this API by itself. As the skin files are not minified you can simply peek into a skin file to figure out how some things are done internally.

Special notes on Flash

If you want to use the javascript Flash interface, you need to enable it. 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 enable the option “JavaScript interface” in the normal.ggt HTML template, the code will be created for you.

✭ Note: Not all API calls are implemented in Flash.

Setup

pano.readConfigUrl(url:String,base:String="")
Read the node/tour configuration from a url. The base parameter defines a different base path.

pano.readConfigUrlAsync(url:String,callback:Function,base:String="")
Same as readConfigUrl but asynchronous

pano.readConfigString(xml:String)
Read the node/tour configuration from a string

pano.readConfigXml(xml:Document)
Read the node/tour configuration from a XML Document object

pano.getBasePath()
pano.setBasePath(path:string)
Get/set the base path. The base path is added to relative file names and urls. This is useful, if the HTML file has a different base then the xml configuration file.

Viewing direction

pano.getPan()
Return the current pan angle

pano.getPanNorth()
Return the current pan angle including the nodes north offset

pano.setPan(angle_in_degrees:Number)
Sets the current pan angle

pano.setPanNorth(angle_in_degrees:Number)
Sets the current pan angle, taking the nodes north offset into account

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()
Return the current Field of View, depending on the FoV mode

pano.setFov(angle_in_degrees:Number)
Set the current Field of View, depending on the FoV mode

pano.changeFov(offset_in_degrees:Number)
Change the current Field of View, depending on the FoV mode

pano.getVFov()
Return the current vertical Field of View

pano.setVFov(angle_in_degrees:Number)
Set the current vertical Field of View

pano.getRoll()
Return the current roll angle

pano.setRoll(angle_in_degrees:Number)
Set the current roll angle

player.setPanTilt(pan:Number,tilt:Number)
player.setPanTiltFov(pan:Number,tilt:Number,fov:Number)
Convenience functions

player.setDefaultView(pan:Number,tilt:Number,fov:Number)
Changes the default view for this node

pano.moveTo(pan:Number,tilt:Number,fov:Number,speed:Number);
Move the view to a position

pano.moveToDefaultView()
Move the view to the default position

pano.setAutorotate(speed:Number,delay:Number,rth:Number)
Set the autorotation parameters

pano.startAutorotate(speed:Number,delay:Number,rth:Number)
Start autorotation

pano.toggleAutorotate(speed:Number,delay:Number,rth:Number)
Toggle autorotation

pano.stopAutorotate()
Stop autorotation

pano.stop()
Stop automatic movement

pano.changeProjection(projection:Number, speed:Number)
Change the project of the view.
The projection can have the following values:

  • 4 = rectilinear
  • 9 = stereographic
  • 12 = fisheye

Media elements

pano.playSound(id:String)
Start the sound with this media id

pano.pauseSound(id:String)
Pause the sound with this media id

pano.playPauseSound(id:String)
Toggle between play and play the sound with this media id

pano.activateSound(id:String)
Pop out the image or video

pano.stopSound(id:String)
Stop the sound with this media id

pano.isPlaying(id:String):Boolean
Check if this media element is currently playing

pano.setVolume(id:String,volume:Number)
Set the volume (between 0.0 and 1.0) for this element to a fixed value. The id _ main changes the global volume.

pano.changeVolume(id:String,volumen:Number)
Change the volume for this element. The id _ main changes the global volume.

Hotspots

pano.addHotspot(id:String,pan:Number,tilt:Number,div:DomElement)
Add a DomElement as hotspot to the panorama

pano.updateHotspot(id:String,pan:Number,tilt:Number)
Update the hotspot position

pano.removeHotspot(id:String)
Remove a single hotspot

pano.removeHotspots()
Remove all hotspots

pano.getPointHotspotIds():Array<String>
Get all hotspot Ids as array of strings

pano.getHotspot(id:String):Object
Get the position of a hotspot

Example code:

pano.addHotspot("myid",0,90,document.getElementById("test"));
console.log(pano.getPointHotspotIds());
pano.updateHotspot("myid",0,-90);
console.log(pano.getHotspot("myid"));
pano.removeHotspot("myid");
console.log(pano.getPointHotspotIds());

Virtual Tour

pano.getNodeIds():Array<String>
Get a list of all node ids

pano.getNodeUserdata(id:String):Object
Get the user data for node id. If the id is empty the current node data is returned

pano.getNodeLatLng(id:String):Object
Get the GPS data for node id. If the id is empty the current node data is returned

pano.getNodeTitle(id:String):String
Get the node title for node id. If the id is empty the current node data is returned

pano.getCurrentNode():String
Get the node id of the current node

pano.getNextNode()
Get the node id of the next node in the tour list. If the current node is the last node, the first node id is returned.

pano.getPrevNode()
Get the node id of the previous node in the tour list. If the current node is the first node, the last node id is returned.

pano.nodeVisited(id:String):Boolean
Returns true if the node has been visited. For the current node false is returned on the first visit.

pano.openNext(url:String,parameter:String)
Open next panorama, if the url is in the from of {nodeid} it will change the node in the tour.

Fullscreen

The method names speak for themselves.

pano.setFullscreen(flag:Boolean)
pano.enterFullscreen()
pano.exitFullscreen()
pano.toggleFullscreen()
pano.getIsFullscreen()

Video panorama

pano.videoPanoPlay(), pano.videoPanoStop(), pano.videoPanoPause()
Play/Stop/Pause the video panorama

pano.getVideoPanoTime():Number, pano.setVideoPanoTime(t:Number)
Get/set the current time for the play head of the video panorama

pano.getVideoPanoObject():DomVideoElement
Get a reference to the DOM video element

Miscellaneous

pano.isComplete()
Check if the panorama is loaded completely

pano.setLocked(value:Boolean)
Disable all interaction with the panorama

pano.setLockedMouse(value:Boolean)
Disable mouse interaction with the panorama

pano.setLockedKeyboard(value:Boolean)
Disable keyboard interaction with the panorama

pano.setLockedWheel(value:Boolean)
Disable mouse wheel interaction with the panorama

pano.getPositionAngles(x:Number,y:Number):Object
Returns an object with the pan and tilt values for a given screen position.

pano.getPositionRawAngles(x:Number,y:Number):Object
Same as getPositionAngles but the current position of the panorama is ignored, so the angles are as if pan=0 and tilt=0.


See also…

2017-03-14 10:04:05