Pano2VR 7.1 Docs / Javascript API

JavaScript API

The player has an external API so it can be controlled with JavaScript.

The skin uses this exact API. Since the skin files are not minified, you can simply peek into a skin file to figure out how some things are done internally.

All the examples below use pano as the object. However, if you use JavaScript in the skin, you must use player as the object.

Using JavaScript in the Skin Editor

There are two ways of using JavaScript in the Skin Editor:

Text Box

You can put JavaScript code into the text field of the Text Box skin element:

Start the text with javascript:. Everything that follows the : will be put into the innerHTML of the text box.

Normally, you would use this to do simple calculations. For instance, putting javascript:5+5 would display as 10.

But, you can misuse this to run any JavaScript code: put javascript:""; your JavaScript code goes here into the text element. This will then be executed when the skin is loaded. You could, for instance, register functions to certain player events:

javascript: ""; player.on("imagesready", function () {  alert("Panorama loaded!"); }); 

Go to URL Action

This lets you trigger JavaScript code by an action in the skin. For instance, add an action to a text element, set the source to Mouse Click, the action to Go to URL, and in the URL field add javascript: Your JavaScript code.... Like:

javascript: alert("Button clicked!"); 


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. Also note that the placeholder $(r) gets replaced by the player’s base path.

pano.setCrossOrigin(s: String) Set the crossorigin attribute for all external files like the config, images, tiles and embedded videos. The default is anonymous.

Viewing direction

pano.getPan() Return the current pan angle.

pano.getPanN() Return a normalized current pan angle (between -180.0 and +180.0).

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.getHFov() Return the current horizontal Field of View.

pano.getRoll() Return the current roll angle.

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

pano.setPanTilt(pan: Number, tilt: Number), pano.setPanTiltFov(pan: Number, tilt: Number, fov: Number)

Convenience functions.

pano.setProjection(v: Number), pano.getProjection():Number, pano.changeProjection(v: Number, speed: Number) To get or set the current projection. 4 – Rectilinear, 9 – Stereographic, 12 – Fisheye.

pano.setDefaultView() Sets the view to the default view.

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

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


pano.getViewerLimits():Object, pano.setViewerLimits(limits:Object) To retrieve or set the current viewer limits of the player. The limits object contains objects for ‘pan’ and ’tilt’. These objects in turn have values for ‘min’ and ‘max’. If you use the set function, you only need to provide the values you intend to change.

Here are example calls, to set viewer limits, and to reset the viewer to have no limits:

pano.setViewerLimits({  pan: { min: -100, max: 100 },  tilt: { min: -30, max: 70 }, }); pano.setViewerLimits({  pan: { min: 0, max: 360 },  tilt: { min: -90, max: 90 }, }); 

Auto Rotation and Animation

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

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

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

pano.stopAutorotate() Stop (and disable) autorotation.

pano.pauseAutorotate() Pause autorotation. This will stop autorotation if it is currently active. It will not disable autorotation, so after the timeout it will start again.

pano.resumeAutorotate() Resume autorotation. This will start autorotation if it is currently enabled. It will not affect the ’enabled’ state.

pano.setAutorotateNodeFilter(tag: String) This tag specifies which nodes will be considered when autorotation automatically switches nodes.

pano.getIsAutorotating() If autorotation is currently running.

pano.startAnimation(animsequence: String) Play the given animation sequence. Always starts at the beginning of the sequence.

pano.resumeAnimation(animsequence: String) Play the given animation sequence. If the animation sequence was previously playing and interrupted by the user, it will continue from the point where it was interrupted.

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, loop: Number) Toggle between play and pause the sound with this media id.

pano.playStopSound(id: String, loop: Number) Toggle between play and stop the sound with this media id.

pano.soundGetTime(id: String):Number, pano.soundSetTime(id: String, time: Number) To get/set the position of a currently playing sound.

pano.activateSound(id: String, state: Number) Pop out the image or video with id. state: 0 – hide, 1 – show, 2 – toggle.

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, volume: Number) Change the volume for this element. The id _ main changes the global volume.

pano.disableSoundLoading() Prevents loading of sound elements.

pano.setMediaVisibility(id: String) To change the visibility of a pinned image or video. 0 – hide, 1 – show, 2 – toggle.

pano.getMediaObject(id: String) Returns the source object of a specific pinned media element.

pano.changeLensflares(v: Number) To set the visibility of lens flares. 0 – show, 1 – hide, 2 – toggle.


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.getCurrentPointHotspots():Array<DomElement> Returns an array of all point hotspot divs.

pano.getHotspot(id: String):Object Get all the information of a hotspot as an object.

Example code:

var element = document.createElement("img"); element.setAttribute("src", "hsimage.png"); element.onclick = function () {  pano.openNext("{node10}"); }; pano.addHotspot("myid", 0, 90, element); console.log(pano.getPointHotspotIds()); pano.updateHotspot("myid", 0, -90); console.log(pano.getHotspot("myid")); pano.removeHotspot("myid"); console.log(pano.getPointHotspotIds()); 

pano.getPolygonMode():Number, pano.setPolygonMode(v: Number, toggle: Number) Gets or sets the current polygon mode. If toggle is 1, it toggles between Off and the mode v.

pano.showOnePolyHotspot(id: String), pano.hideOnePolyHotspot(id: String), pano.toggleOnePolyHotspot(id: String) To show/hide a specific polygon hotspot.

pano.changePolyHotspotColor(id: String, bgColor: Number, bgAlpha: Number, borderColor: Number, borderAlpha: Number) Sets the background and border color of a specific polygon hotspot. You can use an empty string for id, to target all polygon hotspots.

For example, for a red, semi-transparent polygon with a solid green border: player.changePolyHotspotColor("Poly01", 0xff0000, 0.5, 0x00ff00, 1);

Use a hexidecimal number for the color, prefixed with 0x. The alpha value is a number between and including 0 and 1.

pano.setPolyHotspotHandcursor(id: String, enable: Boolean) Toggles the hand cursor for a specific polygon hotspot. You can use an empty string for id, to target all polygon hotspots.

pano.getHotspotPropValue(nodeId: String, hsId: String, varname: String) To retrieve the value of a custom hotspot property, defined in the project.

pano.setHotspotPropValue(nodeId: String, hsId: String, varname: String, value: Any) To set the value of a custom hotspot property, defined in the project.

Virtual Tour

pano.getIsTour() If the project is a tour, or just a single panorama.

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.

player.getNodeUserdataPropValue(id: String, varname: String) To retrieve the value of a custom user data property, defined in Pano2VR.

player.setNodeUserdataPropValue(id: String, varname: String, value: String) To set the value of a custom user data property, defined in Pano2VR.

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

pano.getNodeDistance(fromId: String, toId: String):Number Get the distance between 2 nodes (in meters), provided both nodes have GPS data.

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.getNodesWithTag(tag:String)::Array<String> Get an array of nodes that have a certain tag in their user data.

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.

pano.getLastVisitedNode():String Return the id of the last visited node.

pano.setTransition(v: Object) Set the transition parameters when moving between panoramas:

  • type: cut, crossdissolve, etc.
  • before: the before effect (0 – none; 2 – zoomin)
  • after: the after effect (0 – none; 2 – zoomin; 3 – zoomout; 4 – flyin)
  • transitiontime: the transition time
  • waitfortransition: – if the after effect should wait for the transition to finish
  • zoomedfov: the fov to zoom to if zoomin is selected
  • zoomspeed: the speed used if zoomin is selected
  • dipcolor: the color to use if diptocolor is the chosen type
  • softedge: if is soft edge is used for the transition type

pano.getZoomCenterCursor(), pano.setZoomCenterCursor(value:Boolean) Get/set the zoom value at the cursor.

To reveal the zoom value in a text box in the skin, add a Mouse Click with a Set Value action and the following as the value: javascript: player.getZoomCenterCursor().


The method names speak for themselves.






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.

pano.setVideoPanoSource(v) Set the source object for the video panorama.


pano.enterVR():boolean To enter VR mode.

pano.exitVR():boolean To exit VR mode.

pano.toggleVR():boolean To toggle VR mode.

pano.isInVR():boolean Returns true if the player is currently in VR mode.

pano.hasVR():boolean Returns true if the device supports VR mode.


pano.getIsLoading() Check if the panorama is still loading.

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

pano.getPercentLoaded():Number How much of the panorama is loaded (a number between 0.0 and 1.0).

pano.getIsTileLoading() Check if multi-resolution tiles are currently being loaded.

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.

pano.setMargins(l: Number, t: Number, r: Number, b: Number) Lets you define margins around the player that you would normally define in the skin editor.

pano.setMargins(params:Object) Also lets you set margins around the player, like the function above, but gives you more options. The params object can contain (but does not have to contain all):

  • left, top, right, bottom: each an object, containing value and unit, where unit should be either px or %.
  • transition: an object containing duration and delay in milliseconds, and timingfunction. Supported values for timingfunction are: linear, ease, ease-in, ease-out, ease-in-out, step-end.


pano.setMargins({  left: { value: 30, unit: "%" },  transition: { duration: 500, timingfunction: "ease" }, }); 

pano.getViewerSize():Object Returns an object containing the ‘width’ and ‘height’ of the panorama player.

pano.getViewMode():Number, pano.changeViewMode(v: Number) Gets or sets the current view mode. 0 – Continuous Mode, 1 – Drag Mode, 2 – Toggle.

pano.updatePanorama() Repaint the panorama.

pano.isTouching() If the panorama player is currently being touched on a mobile device.

pano.getIsMobile() If the player is currently running on a mobile browser.

pano.getGyroAvailable():Boolean If the gyroscope is available on the current device.

pano.getUseGyro(), pano.setUseGyro(v:Boolean, useRoll:Boolean) If the gyroscope is used on a mobile device.

pano.getOS():Number The operating system the player is currently running on. 0 – Unknown, 1 – Windows, 2 – Mac, 3 – Linux, 4 – iOS, 5 – Android

pano.getBrowser():Number The browser the player is currently running in. 0 – Unknown, 1 – Chrome, 2 – Firefox, 3 – Safari, 4 – Edge, 5 – IE ,6 – Meta Quest Browser

pano.getBrowserTheme():Number The theme of the browser the player is currently running in. 0 – Light Theme, 1 – Dark Theme

Skin Variables

pano.getVariableValue(varName: String):Any, pano.setVariableValue(varName: String, varValue: Any) To access skin variables.

pano.setVariableOptions(varName: String, options: Object):Boolean In the options object, you can set:

  • keep: when set to true, the variable is stored in a browser cookie, and will be updated from there when the project is opened again later
  • cookiePath: the cookie path
  • cookieExpireDays: a number, specifying how many days until the cookie expires

Returns true if successful.

pano.setSuperCookie(superCookieName: String, options: Object) In the options object, you can set:

  • cookiePath: the cookie path
  • cookieExpireDays: a number, specifying how many days until the cookie expires

Once a super cookie is defined, and you later set a variable to be stored in a cookie (with the setVariableOptions() function), this variable will not be stored in a separate cookie, but all such variables will be collected and stored in the one super cookie. This allows you to omit the 50 cookies per domain limit.

Maps and Floor Plans

pano.getMapsContainingNode(id: String):Array<String> Returns a list of map ids (floorplans) the given node is located on.

pano.getMapIDs():Array<String> Returns a list of all map ids (maps and floor plans) in the project.

pano.getFloorplanIDs():Array<String> Returns a list of all floor plan ids in the project.

pano.hasMap():Boolean Returns true if the project has at least one map.

pano.hasFloorplan():Boolean Returns true if the project has at least one floor plan.

pano.getFirstMap():String Returns the id of the first map in the project.

pano.getFirstFloorplan():String Returns the id of the first floor plan in the project.


pano.getLanguage():String Returns the code of the language currently used by the player (like ’en’ or ’en-US’).

pano.setLanguage(langCode:String) Tells the player which language to use.


The player provides an event system, where events are triggered at certain points, and you can register your own functions to those events.

pano.addListener(eventName:String, listener:Function)

pano.on(eventName:String, listener:Function)

Example code:

pano.on("changenode", function () {  alert("Node changed!"); }); 

pano.removeEventListener(eventName:String, listener:Function) To remove a previously registered function from a certain event.

pano.triggerEvent(eventName:String) To manually trigger a certain event.

A list of available events:

Eventname Description Arguments
configloaded the configuration file has loaded none
viewerinit the configuration file has loaded, and the player is ready none
downloadprogress whenever download of image progresses percentLoaded
beforechangenode before switching to another panorama none
beforechangenodeid before switching to another panorama oldNodeId, nodeId
changenode after switching to another panorama none
changevisitednodes to signal when the list of visited nodes has changed none
sizechanged viewer size changed w, h
viewmodechanged the view mode changed none
polymodechanged the polygon mode changed none
gyroavailable when a gyroscope on the device was or was not detected available
gyrochanged the gyroscope on mobile devices is enabled/disabled none
autorotatechanged autorotation is started/stopped none
imagesready the panorama has finished loading none
timer a continuous timer none
positionchanged the position (pan/tilt/fov) of the panorama has changed none
projectionchanged the current projection has changed none
fullscreenenter entering fullscreen mode none
fullscreenexit exiting fullscreen mode none
playerstatechanged one of many player states changed, like hasGyro, hasVR,.. none
repaint every time the panorama is updated none
tilesrequested multi-resolution tiles start loading none
tilesready multi-resolution tiles finished loading none
videostarted a video element was started video
videopaused a video element was paused video
videoended a video element has ended video
hotspotsremoved hotspots have been removed from the current panorama none
clonerchanged whenever a cloner in the skin updates none
varchanged_varname whenever the value of a certain variable changed none
webglready the WebGL context is created none
renderframe attach to this event if you want to paint on top of the panorama. Use the player function getWebGlContext() to obtain the WebGL context none
languagechanged whenever the player is set to use another language language
hotspotsupdated whenever the hotspots are updated because of some interaction in the panorama none
activehotspotchanged the active hotspot, the one that currently has mouse-over, changed hotspot
doubleclick when a double-click in the panorama happened pan, tilt
panoclick when the panorama is clicked pan, tilt
hastouch detected that the device has touch events none
hotspotsremoved when the hotspots of a panorama are removed, ahead of a node change none

See also…

Last modified: Nov 28, 2023