Embedding into HTML Version 1.22

Select Version:

• 1.22
• 1.21
• 1.20.11
• 1.20.10
• 1.20.9
• 1.20.8
• 1.20.7
• 1.20.6
• 1.20.5
• 1.20.4
• 1.20.2
• 1.20.1
• 1.20
• 1.19-pr16
• 1.19-pr15
• 1.19-pr14
• 1.19-pr13
• 1.19-pr12
• 1.18
• 1.17.4
• 1.16.4
• 1.0.8.15
• 1.0.8.14
• 1.0.8.12

• Note - when using a transparent background, only normal crossfade pano-blending is possible (other blending modes will automatically fallback to this).

var settings = {};
settings["onstart"] = "trace('on start...')";
settings["view.hlookat"] = 30;
embedpano({xml:"pano.xml", target:"pano", vars:settings});

embedpano({..., initvars:{mypath:"./panos1/"} });

url="%$mypath%image.jpg"

tour.html?initvars.variable=value

• true - Only use WebGL (the default).
• false - Don't use WebGL, always use CSS 3D-transforms.
• "auto" - Use WebGL when available, otherwise use CSS 3D-transforms.

• Spherical, Cylindrical and Fisheye Panos (only Cubical and Flat Panos)
• Video-Panos
• Viewing Projections (Little-Planet-View)
• Depthmap / 3D-Model Panos
• Pano-blending modes
• Mipmapping
• Postprocessing
• Chromakey and alphachannel hotspots
• Hotspot blendmodes
• VR and Stereo support

• webgl2
  • Use the WebGL 2.0 API when available (true by default).
  • If WebGL 2.0 will be available can be checked using the device.webgl2 variable and the devices xml filter.
  • WebGL2 advantages in krpano:
    • Non-power-of-two textures also can use mipmapping.
    • Non-power-of-two textures can use repeatable texture-coordinates (needed for some .obj 3D-Models) without shader-workarounds.
    • Better ThreeJS support.
• depth - Create a depth buffer. Required for depthmap support and 3D-object rendering. Set to true by default, but could be disabled when not needed.
• stencil - Create a stencil buffer. Required for a correct line rendering of polygonal-hotspots when using an alpha-transparent line-border color. Set to true by default, but could be disabled when not needed.
• preserveDrawingBuffer - Keep the drawing buffer content. Would need to be enabled for when trying to make screenshots of the WebGL canvas via toDataURL or readPixels in some Browsers. Set to false by default for better performance.
• failIfMajorPerformanceCaveat - Don't use WebGL when the rendering performance would be dramatically lower than the OpenGL rendering performance of a native application. Set to false by default.
• antialias - Set if anti-aliasing should be used - true or false.
  When not set, krpano decided itself for optimal performance because some device/Browser/gpu combinations are performing very bad (e.g. half framerate) with enabled anti-aliasing. This setting should be used only for internal testing or very special cases.

• auto (the default)
  • Use the WebXR API only on desktop Browsers and dedicated VR systems/Browsers. On Android mobile systems the alternative krpano MobileVR support has a currently a better and wider device support.
  • When the WebVR API and the WebXR API are both available the same time, then prefer the WebVR API. In such cases the WebVR API is typically the better choice.
• preferwebvr
  • Prefer the WebVR API when WebVR and WebXR are both available.
• prefer or true
  • Prefer the WebXR API when WebVR and WebXR are both available.
• no or false
  • Don't use the WebXR API at all, always use the WebVR API or the krpano MobileVR support for VR display.

• auto (the default) - Automatically enable the Safe-Area support when the viewer gets embedded into a 'full-page' html-element.
• true - Always enable the Safe-Area support. Could be used when the embedding-target-html-element is not full-page-sized during embedding.
• false - Disable enable the Safe-Area support.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

• false - don't pass any parameters (the default).
• true - pass all parameters to the viewer. Deprecated! Will be removed in future versions due security implications. There will be a console message when enabled.
• "param1,param2,param3,..." - define a custom list of comma-separated parameters that are allowed to be passed.

tour.html?startscene=scene2&initvars.design=flat

embedpano({target:"...", onready:function(krpano)
{
  console.log("krpano is ready - version="+krpano.version);
  krpano.actions.loadpano("pano.xml",null,null,null,function()
  {
    var hs = krpano.addhotspot();
    hs.type = "text";
    hs.text = "Test Hotspot";
    hs.ath = 20;
    hs.atv = 10;
    hs.onclick = function()
    {
      alert("Test");
    }
  });
}});