Skip to main content

JavaScript API

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

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

How to use JavaScript in the Skin Editor

There are 2 ways of using JavaScript code in the Skin Editor:

Textbox:

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

You need to start the text with ‘javascript:’. Everything that follows the ‘:’ will be put into the innerHTML of the textbox.

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

But you can misuse this to run any JavaScript code: put ‘javascript:”“; Your JavaScript code…‘ 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 textbox, set the source to ‘Mouse Click’, the action to ‘Go to URL’, and in the URL field put ‘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.

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.

player.setPanTilt(pan:Number,tilt:Number)
player.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.

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

pano.moveTo(pan:Number,tilt:Number,fov:Number,speed:Number,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.getIsAutorotating()
If autorotation is currently running.

pano.startAnimation(animsequence:String)
Play the given animation sequence.

pano.stop()
Stop automatic movement.

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

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

Media elements

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

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

pano.playPauseSound(id:String, 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)
Pop out the image or video.

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

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

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

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

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:

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

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.

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.getNodeTitle(id:String):String
Get the node title for node id. If the id is empty the current node data is returned.

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

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

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

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

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

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.

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.getUseGyro(), pano.setUseGyro(v:Boolean, useRoll:Boolean)
If the gyroscope is used on a mobile device.

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

pano.getBrowser():String
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.

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.

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:
- “configloaded”: as soon as the configuration file has loaded.
- “beforechangenode”: before switching to another panorama.
- “changenode”: after switching to another panorama.
- “sizechanged”: when viewer size changes.
- “viewmodechanged”: when the view mode changes.
- “polymodechanged”: when the polygon mode changes.
- “gyrochanged”: when use of the gyroscope on mobile devices is enabled/disabled.
- “autorotatechanged”: when autorotation is started/stopped.
- “imagesready”: when the panorama has finished loading.
- “timer”: a continuous timer.
- “positionchanged”: when the position (pan/tilt/fov) of the panorama has changed.
- “projectionchanged”: when the current projection has changed.
- “fullscreenenter”: when entering fullscreen mode.
- “fullscreenexit”: when exiting fullscreen mode.
- “repaint”: every time the panorama is updated.
- “tilesrequested”: when multi-resolution tiles start loading.
- “tilesready”: when multi-resolution tiles finished loading.
- “videostarted”: when a video element was started.
- “videopaused”: when a video element was paused.
- “videoended”: when a video element has ended.
- “hotspotsremoved”: when hotspots have been removed from the current panorama.
- “clonerchanged”: whenever a cloner in the skin updates.
- “varchanged_” + varname: whenever the value of a certain variable changes.


See also

2018-11-20 14:48:19