JavaScript API

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

The HTML5 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:

Textbox

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

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

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:""; <i>Your JavaScript code...</i> into the textbox. 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 put javascript: <i>Your JavaScript code...</i>.
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.

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

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

pano.stopAutorotate()
Stop autorotation.

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.

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

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.

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.

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

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.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 in the project.

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

• HTML5 Output Settings

• Skin Editor