News Examples Documentation Download Buy Forum Contact
NOTE: This page is from an older version, see the latest version here.

krpano Javascript Interface Version 1.19-pr14

To get access to krpano from Javascript the krpano Javascript-Interface object will be required.

This object can be get either:
  • by using the onready callback-function of the embedding script - the recommended way!
  • or by using the Javascript call: document.getElementById(id).
    The id parameter is the unique id of the viewer (which is "krpanoSWFObject" by default) and which can be set in the embedding script.

The krpano Javascript-Interface object

The interface object provides these Javascript functions:
  • set(variable,value) - set the given krpano variable to the given value.
  • get(variable) - return the value of the given krpano variable.
  • call(action) - call and execute any krpano action code.
  • spheretoscreen(h,v) - directly call the spheretoscreen action.
  • screentosphere(x,y) - directly call the screentosphere action.
The spheretoscreen / screentosphere functions will return an object with x, y properties.

Usage Example

Get the krpano HTML DOM Element - either by the onready callback (recommended):
var krpano = null;

embedpano({..., onready:krpano_onready_callback});

function krpano_onready_callback(krpano_interface)
{
  krpano = krpano_onready_callback;
}
or by using document.getElementById (but note - that would only work when the embedding itself is already finished):
var krpano = document.getElementById("krpanoSWFObject");

Get and set a variable:
var fov = Number( krpano.get("view.fov") );
fov += 10.0;
krpano.set("view.fov", fov);

Call a krpano action, e.g. to load an other pano.
krpano.call("loadpano('pano2.xml',null,MERGE,BLEND(1));");

Examples

  • Javascript API Examples
    Several examples that show the usage the Javascript API of the krpano viewer: loading other panos, loading xml strings, setting the view, lookto animation, getting the current view, adding and removing hotspots, callback from hotspot event to JS, tracking the mouse at spherical pano coordinates.
  • Add and remove panos via Javascript
    This example shows how to dynamically add (=embedpano call) either Flash or HTML5 viewer elements and then remove (=removepano call) them again from the webpage.
These examples are also included in the krpano download package in the folder viewer/examples/javascript-interface/.