JavaScript API

The Pano2VR player has an external API so that 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!"); 

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. 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(pan: Number, tilt: Number, fov: Number) Changes the default view for this node.

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.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.

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, 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.

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

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

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.

player.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.

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

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

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().

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.

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

VR

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.

Miscellaneous

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 definer margins around the player that you would normally define in the skin editor.

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

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

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.

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.

Events

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)

To register a function to a certain event. 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:

See also…

• HTML Template

• Web Output Properties

• Skin Editor