News Examples Documentation Download Buy Forum Contact

Documentation

Plugins

XML Extensions

Tools


Third Party Software
for krpano

krpano Javascript Interface Version 1.21

To get access to krpano from Javascript the krpano Javascript-Interface object will be required. This interface is the same for the krpano HTML5 Viewer and the krpano Flash Viewer and can be used to control both viewers the same way.

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) where the id parameter is the unique id of the viewer, which can be set in the embedding script (and is krpanoSWFObject by default).

The krpano Javascript-Interface object

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

Direct Access to krpano using Javascript (HTML5 only)

When Flash-support is not requiered, it would be possible to get a more direct access to krpano using this call:
krpano = krpano.get("global");
The global object is the root-level object of the whole krpano API structure and from there all variables, objects and functions are directly accessible. For performance this would be the fastest way of using krpano.

Usage Example

Using the krpano Javascript-Interface (for Flash and HTML5):
embedpano({..., html5:"auto",onready:function(krpano)
{
    var is_flash = krpano.get("device.flash");
    ...
    krpano.set("view.hlookat", 40);
    krpano.set("view.vlookat", 30);
    krpano.set("view.fov", 120);
    krpano.call("loadpano(image.xml,null,MERGE|KEEPVIEW)");
    ...
    krpano.call("addhotspot(spot1)");
    krpano.set("hotspot[spot1].url", "spot.png");
    krpano.set("hotspot[spot1].ath", 123.4);
    krpano.set("hotspot[spot1].atv", 12.3);
    krpano.set("hotspot[spot1].onclick", "loadpano(pano2.xml,null,MERGE,BLEND(0.5)");
});

Using direct acccess (HTML5 only):
embedpano({..., html5:"only", onready:function(krpano)
{
    krpano = krpano.get("global");
    
    krpano.view.hlookat = 40;
    krpano.view.vlookat = 30;
    krpano.view.fov = 120;
    krpano.actions.loadpano('image.xml',null,'MERGE|KEEPVIEW');
    ...
    var hs = krpano.addhotspot();
    hs.url = "spot.png";
    hs.ath = 123.4;
    hs.atv = 12.3;
    hs.onclick = function()
    {
        krpano.actions.loadpano('pano2.xml',null,'MERGE','BLEND(0.5)');
    }
});
Javascript Examples

Javascript Polyfills

Note - the krpano viewer automatically installs Polyfills for these Javascript functions when they are not available in the Browser: