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 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. The Code Element and the Go to URL Action. (Previously the Text Box was used and is now a legacy method.)

Code Element

The Code Element is a dedicated skin element for adding Javascript to the project.

Learn how to add code using the code element..

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... or js: Your JavaScript code...

Like:

javascript: alert("Button clicked!");

Setup

pano.readConfigUrl(url: String, base?: String, defaultView?: String|Object) Read the node/tour configuration from a url. The page waits until the file is loaded, so in most cases readConfigUrlAsync is the better choice. The folder of url becomes the base path. Pass base to use a different one (an empty string means no base path). defaultView replaces the start view of the start node: either a string pan/tilt/fov, where an N or S before the pan makes it relative to north or south, or an object with pan, tilt, fov, and projection. If the file cannot be loaded, an alert is shown.

pano.readConfigUrlAsync(url: String, callback?: Function, base?: String, defaultView?: String|Object) Same as readConfigUrl but asynchronous, so the page does not wait. callback is called once the configuration has been read. It is not called when the file cannot be loaded.

pano.readConfigString(xml: String, defaultView?: String|Object) Read the node/tour configuration from a string. defaultView works as in readConfigUrl.

pano.readConfigXml(xml: Document, defaultView?: String|Object) Read the node/tour configuration from a XML Document object. defaultView works as in readConfigUrl.

pano.startNode: String, pano.startView: String|Object Set these before reading the configuration to start with a different node and view than the ones in the project. startNode takes a node id or a custom node id and works for tours. If no node has that id, the tour opens its first node. startView takes the same values as defaultView in readConfigUrl and takes priority over it. Both are cleared once they are used. The exported HTML page uses them for links that open a specific node and view.

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

pano.getQueryParameter():String, pano.setQueryParameter(query: String) Get/set a query that the player adds to the URL of every file it loads from the project folder, like tiles, images, videos, sounds, 3D models, and the images of the VR skin. For example, "ts=1700000000" makes browsers load the files again after you updated the tour. The configuration file is not included, so add the same query to the URL you pass to readConfigUrl(). An empty string switches it off.

pano.setCrossOrigin(s: String) Set the crossorigin attribute for the panorama images and tiles, sounds, and videos the player loads. Call it before reading the configuration, because files that are already loading keep the old setting. It does not apply to the configuration file or to image media. The default is anonymous.

pano.setElementIdPrefix(prefix: String) Give the images, videos, sounds, and web elements of your media an HTML id made of prefix and the media id, so your page can find them with document.getElementById(). Call it before reading the configuration.

pano.setContainer(id: String) Move the player into the HTML element with this id. The previous content of that element is removed. If the new element has a different size, call pano.updateViewerSizeNow() afterwards.

pano.destroy() Completely shut down the player: stops the render loop, releases GPU and media resources, and removes its listeners and DOM elements. Use this in single-page applications when the player is no longer needed. The instance cannot be reused afterwards.

skin.removeSkin() Remove the skin’s elements, styles, and listeners from the page. If you created a skin object, call this before pano.destroy().

Viewing direction

pano.getPan() Return the current pan angle.

pano.getPanN():Number Return the current pan angle, normalized to between -180.0 and +180.0. For a flat image, the value is converted to degrees using the image’s Horizontal FoV, while pano.getPan() and pano.setPan() work in the image’s own units, where the image height is 100 units.

pano.getPanNorth():Number Return the current pan angle relative to the node’s north direction (the pan angle minus the node’s north offset), between -180.0 and +180.0. It is 0 when the view faces north, and it is the same kind of value that pano.setPanNorth() takes.

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, smooth?: Boolean) Change the current pan angle by the offset. A positive offset turns the view to the left. If you set the optional smooth to true, the view keeps turning afterwards and slows down gradually, like after a mouse drag, so it ends up further than the offset. This only works while inertia is enabled (see pano.setInertia()).

pano.changePanLog(offset_in_degrees: Number, smooth?: Boolean) Like pano.changePan(), but the step gets smaller when you zoom in, so the view moves at a similar speed on screen at any zoom level. The skin’s Pan Left and Pan Right actions use this.

pano.getTilt() Returns the current tilt angle.

pano.setTilt(angle_in_degrees: Number) Sets the current tilt angle.

pano.changeTilt(offset_in_degrees: Number, smooth?: Boolean) Change the current tilt angle by the offset. A positive offset tilts the view up. If you set the optional smooth to true, the view keeps moving afterwards and slows down gradually, the same way as with pano.changePan().

pano.changeTiltLog(offset_in_degrees: Number, smooth?: Boolean) Like pano.changeTilt(), but the step gets smaller when you zoom in. The skin’s Tilt Up and Tilt Down actions use this.

pano.getFov() Return the current Field of View, depending on the FoV mode.

pano.setFov(angle_in_degrees: Number):Boolean Set the current Field of View, depending on the FoV mode. Returns true when the view changed. A value the projection cannot show is ignored and returns false: it must be more than 0 and less than 170 for Rectilinear, 355 for Stereographic, and 360 for Fisheye. The node’s limits are applied when the view is next drawn.

pano.changeFov(offset_in_degrees: Number, smooth?: Boolean):Boolean Change the current Field of View, depending on the FoV mode. With smooth, and inertia turned on, the zoom carries on and slows down, as after a mouse-wheel zoom. Returns false if the Field of View did not change, for example because the new value is outside what the projection can show.

pano.changeFovLog(offset: Number, smooth?: Boolean) Zoom by a factor instead of a fixed number of degrees, as the skin’s Zoom In and Zoom Out actions do. A negative offset zooms in, a positive one zooms out, and a step feels about the same however far you are zoomed in. With smooth, and inertia turned on, the zoom carries on and slows down.

pano.setFovMode(mode: Number) Set the FoV mode that getFov, setFov, and changeFov use, like the project’s FoV Mode setting: 0 – Vertical, 1 – Horizontal, 2 – Diagonal, 3 – Max (the vertical Field of View of a 4:3 frame just large enough to cover the viewer). The current value is kept, so the visible view changes, and the node’s limits are applied right away.

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

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

pano.getHFov(vfov?: Number, projection?: Number):Number Return the current horizontal Field of View. With arguments, return the horizontal Field of View that a vertical Field of View of vfov degrees has in the current viewer, for the given projection (4 – Rectilinear, 9 – Stereographic, 12 – Fisheye; the current projection if you leave it out).

pano.setHFov(angle_in_degrees: Number) Set the current horizontal Field of View.

pano.getDFov(vfov?: Number, projection?: Number):Number Return the current diagonal Field of View. The optional arguments work as for getHFov.

pano.setDFov(angle_in_degrees: Number) Set the current diagonal 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) Set the pan and tilt angles at once. Pass NaN, or leave the tilt out, to keep that angle.

pano.setPanTiltFov(pan: Number, tilt: Number, fov: Number) Set the pan, tilt, and Field of View at once (the Field of View depending on the FoV mode, as with setFov). Instead of pan you can pass the short form pan/tilt/fov or pan/tilt as one string. Pass NaN for a value you want to keep.

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. setProjection switches at once. changeProjection moves smoothly into the new projection at the given speed (0 switches at once), keeps the viewing direction, and narrows the Field of View if it is wider than the new projection can show. Other values are ignored.

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. speed defaults to 1, and so does a speed of 0 or less. Pass NaN, or leave a value out, to keep the current pan, tilt, Field of View, or roll. A Field of View outside 0 to 180 also keeps the current one. projection: 4 – Rectilinear, 9 – Stereographic, 12 – Fisheye. Without it, the current projection stays. pano.moveTo("pan/tilt/fov", speed) is a short form that passes the view as one string.

pano.moveToEx(params: Object) Move the view to a position with an animation. params can contain pan, tilt, fov, projection (4 – Rectilinear, 9 – Stereographic, 12 – Fisheye), speed (default 1; 0 jumps to the view at once) and timingFunction (0 – ease out (default), 1 – ease in and out, 2 – ease out with overshoot, 3 – linear). A value you leave out is not taken from the current view: pan and tilt become 0, the Field of View 70, and the projection Rectilinear. In a 3D model, xPos3D, yPos3D, and zPos3D move the camera’s cursor (see get3dCursorPos) and camMode3D sets the camera mode (the values of setCameraMode). If you leave them out, the camera keeps its cursor and mode.

pano.moveToDefaultView(speed?: Number) Move the view to the node’s default view (pan, tilt, Field of View, and projection). In a 3D model, the camera moves to the model’s default view. speed defaults to 1.

pano.moveToDefaultViewEx(speed: Number, timingFunction: Number) Move the view to the node’s default view with an animation. In a panorama, a speed of 0 jumps there at once. timingFunction: 0 – ease out, 1 – ease in and out, 2 – ease out with overshoot, 3 – linear. Pass both values.

pano.getPanDest():Number, pano.getTiltDest():Number, pano.getFovDest():Number Return the pan angle, tilt angle and field of view that the current or most recent pano.moveTo() or pano.moveToDefaultView() is moving to.

pano.getInertia():Boolean, pano.setInertia(value: Boolean) Get or set whether the view keeps gliding for a moment after the visitor releases a drag or stops zooming with the mouse wheel.

pano.getZoomCenterCursor():Boolean, pano.setZoomCenterCursor(value: Boolean) Get or set whether zooming in a panorama with the mouse wheel or a pinch keeps the point under the mouse pointer (or between your fingers) in place. With false, the view zooms around its center.

Limits

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. The view moves inside the new limits right away. If the tilt range is narrower than the Field of View, the view zooms in to fit. If it is even narrower than the smallest Field of View allowed, for example when the minimum and maximum tilt are the same, the Field of View stays and the tilt is held in the middle of the range. The limits apply to panoramas. A flat image always stays inside its own borders.

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

Auto Rotation

pano.startAutorotate(speed?: Number, delay?: Number, rth?: Number) Start (and enable) autorotation. Arguments you leave out keep their current values, and so does a speed of 0. delay is the time in seconds without user input after which autorotation starts again. rth is how strongly the view is pulled back to the horizon and the default Field of View (0 – not at all).

pano.toggleAutorotate() Toggle autorotation. When it is not running, it starts (and enables) it with the current speed, delay, and return to horizon. When it is running, it stops (and disables) it.

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, or the current one when you leave out the name. Always starts at the beginning of the sequence. If the sequence does not include the current node, the player first opens the node where the sequence begins.

pano.resumeAnimation(animsequence?: String) Play the given animation sequence, or the current one when you leave out the name. If that sequence was playing and the user interrupted it, it continues from the point where it was interrupted. Any other sequence starts from its beginning, as with pano.startAnimation().

Media elements

In the media functions, the media id * stands for every media element. An id that starts with # is a regular expression, for example #^voice for every element whose id starts with voice. Functions that return a value use the first matching element. The background sound has the id _background, and the video panorama has the id _videopanorama. In pauseSound, stopSound, mute, unmute, and toggleMuted, the id _main stands for every sound and video. In setVolume and changeVolume, _main is the global volume.

pano.playSound(id: String, loop?: Number):Promise Start the sound or video with this media id. If it is already playing, it starts over. If it is paused, it continues where it stopped. loop sets how often it plays (1 – once, n – n times). Leave it out or pass 0 to keep the element’s own loop setting. Returns a promise that is rejected when the browser blocks playback, so you can catch a blocked autoplay. Returns null when nothing was started, for example while the player is muted.

pano.pauseSound(id: String) Pause the sound or video with this media id. The id _main pauses every sound and video.

pano.stopSound(id: String) Stop the sound or video with this media id and rewind it to the start. The id _main stops every sound and video.

pano.playPauseSound(id: String, loop?: Number) Toggle between play and pause for the sound or video with this media id. When it starts playing, loop sets how often it plays, as in playSound.

pano.playStopSound(id: String, loop?: Number) Toggle between play and stop for the sound or video with this media id. Stopping rewinds it to the start. When it starts playing, loop sets how often it plays, as in playSound.

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

pano.soundGetTime(id: String):Number, pano.soundSetTime(id: String, time: Number) Get/set the position, in seconds, of a sound or video, also while it is paused. soundSetTime keeps the position within the length of the media. soundGetTime returns 0 for an unknown id.

pano.soundSetPlaybackRate(id: String, rate: Number) Set the playback speed of the sound or video with this media id. 1.0 is normal speed, 0.5 half speed, and 2.0 double speed.

pano.setVolume(id: String, volume: Number) Set the volume (between 0.0 and 1.0) for this element to a fixed value. The global volume scales it. The id _main changes the global volume, and _videopanorama sets the volume of the video panorama.

pano.changeVolume(id: String, delta: Number) Change the volume of this element by delta, for example 0.1 to make it louder or -0.1 to make it quieter. The result stays between 0.0 and 1.0. The id _main changes the global volume, and _videopanorama changes the volume of the video panorama.

pano.mute(id: String), pano.unmute(id: String), pano.toggleMuted(id: String) Mute, unmute, or toggle muting for the sound or video with this media id. A muted sound pauses and plays on when it is unmuted. A muted video keeps playing without sound. The id _main mutes every sound and video, including the video panorama, and _videopanorama mutes only the video panorama. The id _all mutes the whole player, and no sound or video starts until it is unmuted (see the mutedchanged event).

pano.getPlayerMuted():Boolean Check if the whole player is muted, by mute, unmute, or toggleMuted with the id _all.

pano.getHasSounds():Boolean Check if the tour contains sound.

pano.getSoundsPermitted():Number Check if the browser lets the tour play sound: -1 – not known yet, 0 – blocked, 1 – allowed. See the soundspermittedchanged event.

pano.startAutoplayMedia() Start the sounds and videos that are set to play automatically, and the video panorama, with sound. Call it from a click or tap, for example on a button that enters the tour, so that browsers that block autoplay let them play. The Start Autoplay Media action does the same.

pano.disableSoundLoading() Prevents loading of sound elements in the panoramas opened after the call. To skip all sounds, call it before the tour loads. Videos and images still load.

pano.activateSound(id: String, state: Number) Pop the pinned image, video, or web element with this media id out of the panorama, or back in, when its Click Mode is a pop-out mode. state: 0 – pop back in, 1 – pop out, 2 – toggle. A video starts playing when it pops out. For a video with the Play/Pause click mode, 0 pauses it, 1 plays it, and 2 toggles it.

pano.setMediaVisibility(id: String, state: Number, transitionTime: Number) Show or hide the pinned image, video, or web element with this media id with a fade. state: 0 – hide, 1 – show, 2 – toggle. transitionTime is the length of the fade in milliseconds.

pano.getMediaObject(id: String):DomElement Returns the DOM element of the media element with this id: the audio, video, or image element, or the container of a web element. This also works for skin video elements, and _videopanorama returns the video element of the video panorama. If there is no such element, you get null.

pano.registerVideoElement(id: String, video: DomVideoElement) Make a video element of your own, for example one that you create in a Code element, a media element with this id. Then you can use it with playSound, pauseSound, isPlaying, getMediaObject, and attachSubtitleTrack, and it triggers the videostarted, videopaused, and videoended events. If the player is muted, the video is muted too.

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

Subtitles

pano.attachSubtitleTrack(id: String, options: Object) Attach a WebVTT subtitle track to the video with this media id, or to the video panorama with the id _videopanorama. A video has one subtitle track, so this replaces a track the video already has. In the options object, you can set:

• url: the URL of the .vtt file (required)
• kind: subtitles (the default) or captions
• presentation: skin (the default; the cue text is provided through a skin variable) or native (the browser draws the cues on the video)
• variable: the name of the skin variable that receives the active cue, ready for a skin text element: the cue’s formatting from the WebVTT file (bold, italic, underline, ruby text) is kept. getSubtitleText and the subtitlechanged event give the plain text instead.
• label: the track’s label
• srclang: the language code of the track file

pano.getSubtitleText(id: String):String Returns the currently active subtitle text of this media element.

pano.setSubtitlePresentation(id: String, presentation: String) Change how the subtitles are shown: native, skin, or off.

Hotspots

pano.addHotspot(id: String, pan: Number, tilt: Number, div: DomElement) Adds a DomElement as a point hotspot to the current node, at pan and tilt in degrees. The player wraps your element in a positioned div, and that div is what getHotspot(id).div and getCurrentPointHotspots() return.

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

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

pano.removeHotspots() Removes the elements of all point hotspots of the current node from the view and triggers the hotspotsremoved event. The hotspots themselves stay: getPointHotspotIds() still lists them, and getHotspot(id) still returns their information, but without a div. Polygon hotspots are not affected; on a 3D model node, the model’s 3D hotspots go too. The point hotspots appear again the next time the node opens. To remove a hotspot completely, use removeHotspot(id).

pano.getPointHotspotIds():Array<String> Returns the ids of all point hotspots of the current node as strings, including those you added with addHotspot. Polygon hotspots are not included.

pano.getCurrentPointHotspots():Array<DomElement> Returns an array of all point hotspot divs.

pano.getHotspot(id: String):Object Returns the information of a hotspot of the current node as a new object: id, pan, tilt, pxp and pyp (its position on screen, in percent of the viewer size), url, target, distance, title, description, skinid and, if it has one, div (its element). Hotspots with a custom image also have customimage, customimagewidth, customimageheight, use3D, and distance3D. Polygon hotspot ids work too. Returns undefined if the current node has no hotspot with that id.

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.setActiveHotspot(hotspot: String|Object) Makes a hotspot of the current node the active hotspot, the one that has the mouse over it, and triggers the activehotspotchanged event. Pass its id, or the hotspot object from the activehotspotchanged event. Skin variables of custom hotspot properties then read and write this hotspot’s values. Pass null, or an id the current node doesn’t have, to reset it. Hotspots you add with addHotspot don’t become active by themselves, so call this from their mouse handlers if you need it.

pano.getHotspotsVisible():Boolean Returns false while the player hides the point hotspots: during a transition to another node and, in a panorama, while a projection other than Rectilinear is shown or two projections are being blended.

pano.getPolygonMode():Number, pano.setPolygonMode(v: Number, toggle: Number) Gets or sets how polygon hotspots appear: -1 – Disabled (hidden and can’t be clicked), 0 – Always Hidden (not visible, but still clickable), 1 – Always Visible, 2 – Show Current (on hover), 3 – Show All (on hover). If toggle is 1 and polygons are currently visible (mode 1 to 3), it switches to Always Hidden. Otherwise it sets the mode v. Setting Disabled also hides any polygons you showed with showOnePolyHotspot.

pano.showOnePolyHotspot(id: String), pano.hideOnePolyHotspot(id: String), pano.toggleOnePolyHotspot(id: String) Fade a polygon hotspot of the current node in or out, whatever the polygon mode. Use * for all polygon hotspots, or # followed by a regular expression (for example #Poly0[2-4]) to target several. With the mode Disabled (-1), only polygons you show this way react to the mouse, until you hide them again. With Always Hidden (0), a polygon you hide follows the mode again once it has faded out. With a mode that shows polygons, a polygon you hide stays hidden until you show it again. Toggling hides a polygon that is visible, whether the mode or showOnePolyHotspot shows it.

pano.changePolyHotspotColor(id: String, bgColor: Number, bgAlpha: Number, borderColor: Number, borderAlpha: Number) Sets the background and border color of a polygon hotspot of the current node. Use an empty string or * for all polygon hotspots of the current node, or # followed by a regular expression (for example #Poly0[2-4]) to target several. Polygon hotspots of other nodes keep their colors. To change those too, call it again after the node changes, for example in a changenode listener.

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

Use a hexadecimal 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) Shows (true) or hides (false) the hand cursor over a polygon hotspot of the current node. Use an empty string or * for all polygon hotspots of the current node, or # followed by a regular expression to target several.

pano.getHotspotPropValue(nodeId: String, hsId: String, varname: String):Any Returns the value of a custom hotspot property of the hotspot hsId in node nodeId (use an empty string for the current node), in the property’s type: a number, a boolean, or a translated text. If the hotspot has no value of its own, you get the property’s default value, and null if the project has no property with that name.

pano.setHotspotPropValue(nodeId: String, hsId: String, varname: String, value: Any) Sets the value of a custom hotspot property of the hotspot hsId in node nodeId (use an empty string for the current node). Pass a value of the property’s type, or its text form such as "12" or "true". When the value changes, the player triggers the varchanged_varname event.

pano.getCustomPropertyDefaultValue(varname: String):String Returns the default value of the custom property varname as defined in the project, as text, or null if the project has no property with that name. To reset a hotspot’s value, pass it to setHotspotPropValue.

Virtual Tour

pano.getIsTour():Boolean Returns true if the project is a tour, false if it is a single panorama.

pano.getNodeIds():Array<String> Get the node ids of the tour list, in order. Nodes with Hide in Node List selected are not included.

pano.getNodesCount():Number Get the number of nodes in the tour list. Nodes with Hide in Node List selected are not counted. A single panorama counts as one node.

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

pano.getNodeUserdataPropValue(id: String, varname: String):Any Get the value of a custom user data property, defined in Pano2VR, for node id (the current node if empty). The value has the property’s type: text, number, or boolean, with text translated to the current language. It is null if the node has no value for the property.

pano.setNodeUserdataPropValue(id: String, varname: String, value: Any) Set the value of a custom user data property, defined in Pano2VR, for node id (the current node if empty). Numbers and booleans are accepted as well as text. Triggers the varchanged_varname event when the value changes.

pano.getNodeLatLng(id: String):Array<Number> Get the GPS position of node id as [latitude, longitude], or an empty array if the node has no GPS data. 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, or -1 if one of them has no GPS data. An empty id is the current node.

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.getStartNode():String Get the node id of the tour’s start node.

pano.getNextNode(id?: String):String Get the node id of the node after node id in the tour list, or after the current node if id is empty. After the last node, the first node id is returned. Nodes with Hide in Node List selected are skipped.

pano.getPrevNode(id?: String):String Get the node id of the node before node id in the tour list, or before the current node if id is empty. Before the first node, the last node id is returned. Nodes with Hide in Node List selected are skipped.

pano.getNodesWithTag(tag: String):Array<String> Get the ids of the nodes in the tour list that have a certain tag in their user data. Nodes with Hide in Node List selected are not included.

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.clearVisitedNodes() Mark all nodes as not visited, and trigger the changevisitednodes event.

pano.openNext(url: String, parameter?: String|Object) Open the next panorama. If the url is in the form of {nodeid} (a custom node id works too), it changes the node in the tour. If that node is already the current node, the view moves to the new start view instead. A url ending in .xml loads that project. parameter is the start view as pan/tilt/fov/node/projection. Empty fields keep the node’s default view, node is the start node of an .xml project, and projection is a number as for setProjection. You can also use the placeholders $(cur) to keep the current view, $(fwd) to keep looking in the same compass direction, and $(bwd) to look the opposite way. parameter can also be an object with pan, tilt, fov, projection, transition, and transitionTime. transition (a type as for setTransition) and transitionTime (in seconds) apply to this node change only.

pano.openUrl(url: String, target: String) Open a URL like the Go to URL action does. A node in the form {nodeid} or a project file ending in .xml opens in the player, with target as its start view (see openNext). Any other URL opens in the browser window target, for example _blank or _self. Relative URLs are relative to the base path (see setBasePath).

pano.goBack(target?: String) Go back one node in the order the nodes were visited, like the Go Back One Node option of the Open Next Panorama action. Each call goes one node further back. When there is no earlier node left, nothing happens. target is the start view, as for openNext.

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

pano.setTransition(v: Object) Set the transition parameters when moving between panoramas. Calling it also turns transitions on. Settings you leave out keep their values, and values out of range are ignored. During a node change, the new settings apply once the change is done.

• type: cut, crossdissolve, diptocolor, irisround, irisroundcenter, irisrectangular, irisrectangularcenter, wipeleftright, wiperightleft, wipetopbottom, wipebottomtop, wiperandom, mesh (Morph), or model
• before: the before effect (0 – none; 2 – zoom in; 6 – zoom in to center; 7 – zoom in to pan)
• after: the after effect (0 – none; 2 – zoom in; 3 – zoom out; 4 – fly in)
• transitiontime: the transition time in seconds (0 to 50)
• waitfortransition: true if the after effect should wait for the transition to finish
• zoomedfov: the fov to zoom to for a zoom-in before effect (0.01 to 50)
• zoomafterinfov: the fov to start from for a zoom-in after effect (70 to 120)
• zoomafteroutfov: the fov to start from for a zoom-out after effect (0.01 to 70)
• zoomspeed: the zoom speed (0.01 to 99)
• dipcolor: the color to use if diptocolor is the chosen type, as a hexadecimal number, for example 0x000000 for black
• softedge: the width of the soft edge in pixels for the iris and wipe types (0 to 1000, 0 for a hard edge)

Fullscreen

The method names speak for themselves.

pano.setFullscreen(flag:Boolean)

pano.enterFullscreen()

pano.exitFullscreen()

pano.toggleFullscreen()

pano.getIsFullscreen():Boolean If the player is in fullscreen mode. Where the browser does not allow fullscreen (for example on the iPhone, or in an iframe without allowfullscreen), entering fullscreen makes the viewer fill the browser window (or the iframe) instead, and this still returns true.

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: Number|String) Switch the video panorama to another video file. A number picks one of the current node’s video files (0 is the first). Any other value is the URL of the video. A value that starts with a digit counts as a number, so write a URL like 360.mp4 as ./360.mp4. The play position is kept, and the video continues playing if it was playing.

VR

pano.enterVR(ignoreXR?: Boolean):boolean To enter VR mode. Set ignoreXR to true to show the VR view in the browser window instead of on a headset. In this view pano.isInVR() stays false. Call pano.exitVR() to leave it.

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 browser supports immersive VR (WebXR) and VR is enabled in the web output settings. The browser reports its VR support shortly after the tour starts, so check again when the vrchanged event fires.

pano.setVRSkinVisibility(state: Number):boolean Hides (0), shows (1), or toggles (2) the VR skin. When the skin is shown, it is placed in front of the viewer. Call it only after VR has been entered.

pano.getVRCamera():Object Returns the three.js camera of the VR view: the headset’s camera while in VR, otherwise the camera of the VR scene. Available once VR has been entered for the first time.

pano.getVRRenderer():Object Returns the three.js WebGLRenderer that draws the VR view, not the normal view. Its xr property gives you access to the WebXR session and camera. Available once VR has been entered for the first time.

pano.setVRColorSpace(texture: String, output: String) Sets the three.js color spaces used in VR, for example srgb or srgb-linear. texture applies to images loaded afterwards, output to the VR display. The output color space only takes effect when you set it before VR is entered for the first time. Pass an empty string to keep a value unchanged.

pano.getVRTextureColorSpace():String Returns the color space used for images in VR: srgb unless you changed it with pano.setVRColorSpace().

3D Models

pano.is3dModel():Boolean Returns true if the current node is a 3D model.

pano.get3dModelType():Number The type of the current node’s 3D model. 0 – no model, 1 – mesh model, 2 – Gaussian splat.

pano.playModelAnimation(animationName: string, loops: number):Boolean Plays the animation of the model with the given name from its start. loops is how often it plays (1 to 99), after which it stops on its last frame. 0 repeats it endlessly. Other animations that move the same objects are stopped. Returns false if the current node has no model animation with that name.

pano.stopActiveModelAnimation():Boolean Stops the active animation: the one last started, or the model’s first animation if none was started. The objects it moved go back to their pose from the model file. Returns false if the current node has no model animation.

pano.playPauseActiveModelAnimation() Plays or pauses the currently running animation.

pano.getModelAnimationAction(animationName: string) Returns the three.js AnimationAction object of the animation with the given name.

pano.getCameraMode():Number, pano.setCameraMode(mode: Number, keepPosition: Boolean=true) Get or set the camera mode in a 3D model. 0 – Panorama, 1 – Walk, 2 – Fly, 16 – Orbit, 17 – Fly Over.

pano.getCameraOptions():Object Returns the camera settings of the current 3D model: mode (orbit, walk, fly, flyover, or panorama), walkSpeed, heightFromFloor, collisionDetection, hitTestRadiusMeter, unitsPerMeter, pan, tilt, fov, cursor (see get3dCursorPos), and camera with its position and rotation (in radians). Positions are in model coordinates. On a panorama node, camera is empty.

pano.setCameraOptions(options: Object) Changes how the camera moves in a 3D model: walkSpeed (meters per second), flySpeed, heightFromFloor (meters), collisionDetection (Boolean), hitTestRadiusMeter (how close, in meters, collision detection lets the camera come to the model), unitsPerMeter (how many model units make a meter), and flipPrimarySecondary (Boolean, swaps what dragging with the primary and secondary mouse button does). Options you leave out keep their values. Opening a 3D model node sets unitsPerMeter and flySpeed back to the project’s values. The object can also carry the options of setCameraView.

pano.setCameraView(options: Object) Move the camera in a 3D model. The options object can contain, among others: mode (the camera mode, as a number or as orbit, walk, fly, flyover, or panorama), pan, tilt, fov, cursor (a point in model space to move the cursor of get3dCursorPos to), lookAt (a point in model space to turn to), target or cameraId (the id of a camera point to move to; a pan, tilt, fov, or mode you pass as well takes precedence over the camera point’s), usePath (move along the node links), delay (the duration in milliseconds, 500 if you leave it out, 0 to get there at once), and timingFunction (0 – ease out, 1 – ease in and out, 2 – ease out with overshoot, 3 – linear).

pano.setCameraSteering(options: Object) Keeps the camera moving until you change it, for joysticks and similar controls. dir: {pan, tilt} turns the view by degrees per second. fwd: {x, y, z} moves along the camera’s own axes (-z is forward into the view). flat: {x, y, z} moves level, turned with the pan. A value of 1 moves at the walk speed in walk mode and at the fly speed in the other modes (see setCameraOptions). Parts you leave out keep their values. Pass zeros to stop.

pano.get3dCursorPos():Object The camera’s cursor in the current 3D model, in model coordinates: the point an orbit or flyover camera turns around, or where a walk, fly, or panorama camera stands. Only call it on 3D model nodes.

pano.get3dCameraPoints(type?: String):Array<Object> Returns the camera points of the current 3D model, each with its id and title, in the order of the project. Pass a type to filter the result: node, waypoint, clusterpoint, or targetcamera. On a panorama node, the list is empty.

pano.alignedWith3dModel():Boolean Returns true if the current panorama node has a camera position in a 3D model of the tour.

pano.set3dMaterialSide(side: String) Set which side of the model’s faces is rendered: FromFile, FrontSide, BackSide, or DoubleSide.

pano.raycastModel(x?: Number, y?: Number):Object Finds what lies under a point of the viewer, given in pixels from the top left (without x and y, the mouse position), in the 3D model of the current node, or in the model a panorama node is aligned with. When something is hit, the result contains hit (the three.js intersection, with point, object, and distance), normal, modelPoint (the point in the model’s own coordinates), and threeGroupPoint, where to put an object in the group of getThreeGroup(). coordinateSpace tells you whether that point is in model or panorama space. In panorama space, it lies one unit from the viewer in the direction of the hit. When nothing is hit, the result contains no hit. Without a model, or while the model is still loading, an empty array is returned. The pointer events below carry the x and y this function takes.

pano.getThree():Object Returns the three.js library the player uses, so you can create your own objects with it.

pano.getThreeGroup(group?: Boolean|String):Object Returns a three.js group that the player draws together with the panorama or model. Objects you add to it are shown in the tour. Without a parameter, the group belongs to the current node and is emptied when the node changes. Pass true or global for a group that stays across all nodes. Pass transition_model for a group placed in the 3D model the current node belongs to: its own model, or the model a panorama node is aligned with. It is drawn only while the current node belongs to a 3D model, and it is not emptied when the node changes. On a 3D model node, all groups use the model’s coordinates. On a panorama node, the other two groups have the viewer at their origin.

pano.getThreeGroupView(group?: Boolean|String):Object Where the viewer looks from, in the coordinates of the group that getThreeGroup returns for the same parameter: camera.position, fov (the vertical Field of View), and unitsPerMeter (for transition_model, how many units of its model make a meter, otherwise 1). On a panorama node, the camera of the current node’s group and of the global group sits at their origin.

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.getIsReady():Boolean Returns true once the current node is completely shown: its panorama images and tiles are loaded and on screen, its 3D model and video panorama are loaded, its image media elements are loaded, and its video and sound media elements that start on their own are ready to play. It stays false during the whole node change, including the zoom-in before a transition. See also the ready event.

pano.transitionRunning():Boolean Returns true while a transition between two nodes is running.

pano.getLastInteraction():Number The time of the last real input by the visitor, a click, a touch, a turn of the mouse wheel, a key press, or a VR controller trigger, in milliseconds as returned by Date.getTime(). Input on skin elements and while interaction is locked counts as well. Moving the mouse without pressing a button, autorotation, animations, the gyroscope, and calls to this API do not change it. Until the first input, it is the time the tour was loaded.

pano.getLastActivity():Number The time of the last activity in the panorama, in milliseconds as returned by Date.getTime(). Besides input by the visitor, it also counts view changes by the gyroscope or by this API (such as setPan() or moveTo()), node changes, and the end of a transition. Autorotation does not change it. See also getLastInteraction(), which counts only real input.

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

pano.setLockedMouse(value: Boolean) Disable mouse and touch interaction with the panorama: dragging with the mouse or a finger, pinch zooming, and clicks or taps on the panorama itself, such as on polygon hotspots. Skin elements and point hotspots keep working.

pano.getLockedKeyboard():Boolean, pano.setLockedKeyboard(value: Boolean) Get or set whether keyboard interaction with the panorama is disabled.

pano.setLockedWheel(value: Boolean) Disable zooming with the mouse wheel and with a two-finger pinch. The mouse wheel then scrolls the page instead.

pano.getPositionAngles(x?: Number, y?: Number, ignoreLevelling?: Boolean):Object Returns an object with the pan and tilt of the point at the screen position x, y, in pixels from the top left of the viewer. Without x and y, it uses the current mouse position. In a node with leveling, set ignoreLevelling to true to get the angles that hotspot positions and the pointer events (playerclick and the others) use. In a spherical panorama, the pan counts the other way round: it is the negative of the pan that getPan(), hotspot positions, and the pointer events use, so compare them with -result.pan.

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.getCurrentPerspective():Number Return the focal length of the current view in pixels, that is, the distance at which the viewer’s height spans the current vertical Field of View. Useful to place your own elements in perspective with the panorama, for example as a CSS perspective value.

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.

Example:

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

pano.getViewerSize(withMargins?: Boolean):Object Returns an object containing the ‘width’ and ‘height’ of the panorama player, without its margins. Pass true to include the margins. The object also contains ‘margins’ with the ’left’, ’top’, ‘right’, and ‘bottom’ margin, each with its ‘value’, ‘unit’, and ‘valueInPx’.

pano.updateViewerSizeNow() Adjust the player to the current size of its container right away. The player follows changes of the browser window by itself, but not a container that changes size on its own, for example when your script resizes it or opens a side panel next to it. Call this function after such a change.

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 immediately. This does not trigger the repaint and renderframe events. Usually you want pano.requestRedraw() instead, which repaints the panorama in the next frame.

pano.repaint(frames?: Number) Repaint the panorama in the next frame and, if you pass frames, in that many frames after it.

pano.requestRedraw() Repaint the panorama in the next frame, the same as pano.repaint(). Use it after you change something the player does not notice by itself, for example objects in the group from pano.getThreeGroup() while the view is not moving.

pano.getWebGlContext():Object Returns the WebGL context the player draws with, or null while there is none yet (see the webglready event). Use it in a renderframe listener to draw on top of the panorama: you get the context in its default state, drawing into the viewer over its full size, and the player sets up its own state again after the listeners have run.

pano.isTouching():Boolean If the visitor is currently touching the player, or holding a mouse button down on the panorama.

pano.getHasTouch():Boolean Returns true once the visitor has touched the player for the first time. Until then it is false, even on a touch device. See also the hastouch event.

pano.getMouseOverPanorama():Boolean Returns true while the mouse is over the panorama itself, and not over a skin element. See also the mouseoverpanoramachanged event.

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

pano.setIsMobile(v: Boolean) Lets the player treat the current browser as a mobile browser (true) or a desktop browser (false), for example to try the mobile version of your skin on a desktop computer. getIsMobile() returns this value from then on. Call it right after you create the player.

pano.getGyroAvailable():Boolean If the gyroscope is available on the current device. Until the browser reports the device’s orientation for the first time, this is a guess: true where the browser asks for motion access first, as on iPhone and iPad, and false elsewhere. The gyroavailable event fires once a gyroscope is found or the value changes.

pano.getUseGyro():Boolean, pano.setUseGyro(v: Boolean, useRoll?: Boolean, alignNorth?: Boolean) If the gyroscope is used on a mobile device. Set useRoll to false to keep the horizon level. It is true when you leave it out. Set alignNorth to true to keep the panorama’s North (its pan north) where the device’s compass says North is, so the view shows what the device is pointed at; it is false when you leave it out, and the view then takes off from where it was. Where the browser asks the visitor for motion access first, as on iPhone and iPad, setUseGyro(true) shows that request, so call it from a click or tap, and getUseGyro() turns true only once the visitor allows it. See also the gyrochanged event.

pano.getOS():Number The operating system the player is currently running on. 0 – Unknown, 1 – Windows, 2 – Mac, 3 – Linux, 4 – iOS (iPhone and iPod), 5 – Android, 6 – iPadOS (every iPad), 7 – visionOS

pano.getBrowser():Number The browser the player is currently running in. 0 – Unknown, 1 – Chrome and other Chromium-based browsers such as Samsung Internet or Opera, 2 – Firefox, 3 – Safari, 4 – Edge, 6 – Meta Quest Browser. 5 was Internet Explorer and is no longer returned.

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

pano.setOverrideCursor(cursor: String) Set the type of mouse cursor over the panorama. See here for a list of cursors types. While it is set to anything other than "default", the player does not switch to the hand cursor over polygon hotspots. Set it back to "default" to get that behavior again.

pano.getVersion():String Returns the Pano2VR version and build number of the player, for example 8.1.0/23431.

pano.getPlayerState():Object Returns the current state of the player as plain data that you can store, for example with JSON.stringify(): currentNode, position (pan, tilt, fov, and projection), variables (each skin variable as { value }, except those set to ignoreInState), hsprops (the custom hotspot property values, per node and hotspot), and polyhotspots (the colors and border width of each polygon hotspot of the current node).

pano.setPlayerState(state: Object):Boolean Restores a state returned by getPlayerState(): the view and projection, the skin variables, the custom hotspot properties, and the polygon hotspot colors. Pass the object as getPlayerState() returned it. It does not open currentNode, so open that node first, for example with pano.openNext("{" + state.currentNode + "}").

Performance

pano.getPerformance():Object, pano.setPerformance(options: Object) To retrieve or change performance-related player settings. If you use the set function, you only need to provide the values you intend to change:

• maxTileCount: the maximum number of multi-resolution tiles drawn in one frame. On desktop computers the player raises the default when it starts up.
• maxDownloads: the maximum number of parallel tile downloads
• nodeCacheSize: the number of recently visited nodes whose images stay in memory. Use -1 for automatic (2 on phones and tablets, 5 on other devices) or 0 to keep all of them. Nodes beyond this number are released right away, or after a running transition ends.
• prefetch: enable or disable prefetching of neighboring nodes
• asyncTileDecode: enable or disable asynchronous tile decoding
• msaa: enable or disable anti-aliasing (MSAA)
• msaaTiles: frames that show nothing but the panorama are drawn without anti-aliasing, which is faster, most of all on phones and high-resolution screens. Frames with polygon hotspots, lens flares or 3D objects keep their anti-aliasing. Set it to true to anti-alias these frames as well (default false)
• resolutionScale: scale factor for the render resolution
• resolutionScaleNearest: use nearest-neighbor scaling for the render resolution
• vrResolutionScale: scale factor for the render resolution in VR, from 0 (automatic) to 2
• vrFoveation: foveation level in VR, from 0 (none) to 1 (strongest), or -1 for automatic
• tileServerNames: an array of tile server names used for the tile-server placeholder

Values outside these ranges are ignored.

pano.releaseNodeResources(id: String):Boolean Frees the images and GPU memory the player still keeps for a panorama node visited earlier. The node loads again when it is opened next. You can also give the id as {id}. Returns false, and keeps the resources, for the current node, for a node that is part of a running transition, for 3D model nodes, and for an id that is not a node of the tour.

Skin Variables

pano.addVariable(varName: String, varType: Number, defaultValue?: Any, options?: Object):Boolean Adds a skin variable of type 0 (text), 1 (number), or 2 (true/false), with an optional default value and the same options as setVariableOptions(). Returns false, and leaves the variable unchanged, if a variable with this name already exists.

pano.getVariableValue(varName: String, hotspotId?: String):Any Returns the value of a skin variable, with text translated into the current language, or undefined if there is no variable with this name. For a variable bound to a custom hotspot property, hotspotId chooses a hotspot of the current node. Without it, the active hotspot is used, and if no hotspot is active you get an empty value. To read a hotspot property of another node, use getHotspotPropValue().

pano.setVariableValue(varName: String, varValue: Any, writeCookie: Boolean=true):Boolean Sets a skin variable. The value is converted to the variable’s type, and the varchanged_varname event is triggered when the value changed. For a variable that is kept in a cookie (see keep below), set writeCookie to false to change the value without storing it. Returns false if there is no variable with this name.

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. If the cookie already holds a value, for example from an earlier visit, the variable takes that value right away
• cookiePath: the cookie path
• cookieExpireDays: a number, specifying how many days until the cookie expires. Without it, the cookie lasts for the browser session
• ignoreInState: when set to true, the variable is left out of getPlayerState()

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. Without it, the super cookie lasts for the browser session

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.getMapContainingNode(id: String):String Returns the id of the first floor plan, in project order, that the given node is located on, or an empty string if it is on none.

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.getMapType(id: String):String Returns web for a map and file for a floor plan. The special ids _firstmap and _firstfloorplan return web and file. An id that is not in the project also returns web.

pano.hasMap():Boolean Returns true if the project has at least one map. Floor plans are not counted. Use hasFloorplan() for those.

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

pano.getFirstMap():String Returns the id of a map in the project. Despite its name, with several maps this is the last one in project order, not the first. Skins and scripts, including the built-in skins, rely on this, so it stays that way. Pano2VR 8.0.10, 8.1 beta 3 and early builds of 8.1 beta 4 returned the first map.

pano.getFirstFloorplan():String Returns the id of a floor plan in the project. Despite its name, with several floor plans this is the last one in project order, not the first, just like getFirstMap(), and it stays that way too. Pano2VR 8.0.10, 8.1 beta 3 and early builds of 8.1 beta 4 returned the first floor plan.

pano.getMapDetails(id:String):Object Returns an object containing all the data of a certain map or floor plan. The special ids _firstmap and _firstfloorplan refer to the map and floor plan that getFirstMap() and getFirstFloorplan() return.

pano.getNodeMapCoords(id: String, mapId: String):Array<Number> Returns the position of a node on a floor plan as [latitude, longitude], in the coordinates the Map element uses to show that floor plan (these are not real-world GPS coordinates), or an empty array if the node is not on that floor plan. If the id is empty, the current node is used. mapId can also be _firstfloorplan. For a node’s GPS position, use getNodeLatLng().

pano.getNodeMapCoordsInPercent(id: String, mapId: String):Array<Number> Returns the position of a node on a floor plan as [x, y], in percent of the floor plan’s width and height measured from its top-left corner, or an empty array if the node is not on that floor plan. Note that x comes first here, while getNodeMapCoords() starts with the latitude. If the id is empty, the current node is used. mapId can also be _firstfloorplan.

Translations

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 switches to the closest language the project offers: the exact code (like ‘de-AT’), otherwise the same language (‘de’, or the project’s own language if it is the same language), otherwise the first of the visitor’s browser languages that the project is translated into, otherwise the project’s own language. In a project without translations, the code is used as given. Use getLanguage() to see which language was chosen. A change of language triggers the languagechanged event.

pano.getProjectTranslations():Array<Object> Returns the languages your visitors can choose from, including the project’s own language, as objects with langCode and langName (for example, to build your own language menu). Only translations that are turned on in the project’s Translations properties are listed. The list is empty for a project without translations.

pano.addTranslations(translations: String|Object) Adds phrases and their translations, as JSON text or as an object like {"projectLanguage": "en", "languages": ["de", "fr"], "translations": {"Hello": ["Hallo", "Bonjour"]}}. Each phrase lists one translation per language, in the order of languages. A phrase that already exists keeps the translations your new set leaves empty. The languages list replaces the one the player has, so in a project that already has translations, list the same languages in the same order. If the project had no translations before, call setLanguage() afterwards so the player picks one of the new languages. This always triggers the languagechanged event, even when the language stays the same, so the texts on screen are translated again.

pano._(text: String, params?: Array<String>):String Returns the translation of text into the current language, or the text itself when there is no translation for it. Placeholders %1, %2, … in the text are replaced by the entries of params, in order, for example pano._("Room %1", ["12"]). Use it in a Code element to translate your own texts with the project’s translations.

Player Events

The player provides an event system where events are triggered at certain points. You can also 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.off(eventName:String, listener:Function) The same as removeEventListener.

pano.triggerEvent(eventName:String, args:Object) To manually trigger a certain event, either a built-in one or one of your own. Every listener of the event is called with args. If one listener fails, the error is logged to the browser console and the other listeners are still called.

A list of available events:

The four pointer events playerclick, playerdblclick, playerdown, and playerup carry the point they happened at twice: pan and tilt are the viewing angles, and x and y are the same point in pixels from the top left of the viewer. The pixel pair is what raycastModel and getPositionAngles take, so you can ask what was clicked on without tracking the pointer yourself. That matters on a touch device, where there is no mouse position to fall back on:

pano.on("playerclick", function (e) {
  var ray = pano.raycastModel(e.x, e.y);
  if (ray.hit) console.log("clicked on", ray.modelPoint);
});

See also…

• Code Element

• HTML Template

• Web Output Properties

• Skin Editor