<krpano> <include> <image> <preview> <cube> <cubestrip> <sphere> <cylinder> <flat> <fisheye> <depthmap> </image> <view> <area> <display> <control> <cursors> <autorotate> <languages> <plugin> <layer> <layer> ... </layer> <hotspot> <style> <events> <action> <contextmenu> <network> <memory> <security> <data> <cssstyles> <scene> <set> <if> <debug> </krpano>
<xmlelement name="..." ... />
<xmlelement url="..." ... />
<xmlelement ... devices="..."> <childrenelement ... /> ... </xmlelement>
<xmlelement attribute.devicecheck="..." ... />
<layer name="layout" ... devices="normal"> ... a layout for desktop and tablet devices ... </layer> <layer name="layout" ... devices="mobile"> ... a layout for mobile devices ... </layer>
<include url="iphone_fullscreen_swipe.xml" devices="iphone" />
<layer ... url="image.jpg" scale.desktop="1.0" scale.tablet="0.75" scale.mobile="0.5" />
<layer name="enter_vr_button" ... devices="mobilevr" />
<layer name="enter_fullscreen_button" ... visible.fullscreensupport="true" visible.no-fullscreensupport="false" />
videourl.desktop="video-high-profile.mp4" videourl.mobile.or.tablet="video-baseline-profile.mp4"
<xmlelement ... if="condition"> <childrenelement ... /> ... </xmlelement>
embedpano({..., initvars:{design:"flat"}, ...});
In the xml file:
<include url="design_default.xml" if="design == default" /> <include url="design_flat.xml" if="design == flat" />
<xmlelement attribute.typedef="..." ... />
<xmlelement attribute="...any.value..." attribute.onchange="...code..." ... />
x="0.5"React on changes:
x.onchange="x=clamp(x,0.0,1.0);"
design="default"Do more complex things when some settings change:
design.onchange="change_the_design();"
<settings maps="false"
maps.onchange="if(maps, load_map(), remove_map() );"
...
<style name="stylename" attribute="value" attribute="link:..." attribute="relink:..." ... />Usage:
<xmlelement ... style="stylename" ... />
<xmlelement ... style="link:stylename" ... />
<style name="spotstyle" url="spotimage.png" />
<hotspot name="spot1" style="spotstyle" ... />
<hotspot name="spot2" style="spotstyle" ... />
<xmlelement attribute="get:variable" ... />
<xmlelement attribute="calc:expression" ... />
<settings width="100" height="50" /> ... <layer ... width="get:settings.width" height="calc:settings.height * 2" />
<xmlelement attribute="link:variable" ... />
<xmlelement attribute="link:variable:expression" ... />
<xmlelement attribute="link:var1|var2:expression" ... />
<xmlelement attribute="link:event.NAME:expression" ... />
<xmlelement attribute="link:event.NAME1|event.NAME2:expression" ... />
text="link:view.fov"Link with formating the value using an expression:
text="link:view.fov:roundval(view.fov,2)"Link with multiple variables:
text="link:view.hlookat,view.vlookat:'Lookat:'+roundval(view.hlookat,2)+'/'+roundval(view.vlookat,2)"Link to events:
text="link:event.onfullscreen,event.onexitfullscreen:fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"Use linking for responsive design:
scale="link:stagewidth:stagewidth LT 400 ? 0.7 : 1.0"
<include url="..." />
<include url="path/name.xml" />
<include url="settings.xml" />
<include url="skin/skin.xml" />
<include url="%VIEWER%/plugins/depthmap_navigation.xml" />
<krpano> ... </krpano>
<krpano version="1.22.3" onstart="" basedir="%FIRSTXML%" bgcolor="" language="..." defaultlanguage="en" idletime="0.5" strict="false" usestrictjs="true" showerrors="true" logkey="true" debugmode="false" debugkeys="false" debugkeeplog="true" debugjsactions="false" debugjsplugins="false" deprecatedwarnings="true" > ... </krpano>
Attribute name | Variable name | Type | Default value |
version | xmlversion | String | "1.22.3" |
---|---|---|---|
Information about the krpano version that was used when creating the xml file. It allows handling compatibility-related changes between different versions. Depending on the set version, the behavior of functions or the default values of settings might differ. |
|||
Variable name | Type | ||
onstart | Action Event | ||
The onstart event will be called directly at the start after the xml loading and parsing. | |||
Variable name | Type | Default value | |
basedir | String | "%FIRSTXML%" | |
The basedir setting defines the base directory for all following loadpano() action calls. This can be a relative or an absolute path and it's also possible to use the url placeholders here. The defaultvalue is %FIRSTXML% and that means that all relative xml paths of all following loadpano() action calls are relative to the first loaded xml file. |
|||
Variable name | Type | Default value | |
bgcolor | String | ||
The viewer background color.
That background color can be only seen before a pano image will be loaded or when
using partial panos / flat images that are not covering the full view.
|
|||
Variable name | Type | Default value | |
language systemlanguage defaultlanguage |
String String String |
en |
|
The language settings for using the translate() expression:
|
|||
Variable name | Type | Default value | |
idletime | Number | 0.5 | |
The time in seconds without any user-interaction before calling the onidle event. | |||
Variable name | Type | Default value | |
strict | Boolean | false | |
Enable or disable the 'strict mode' of the expression parser. When enabled variables will no longer 'automatically' resolve to their value inside expressions. This avoids accidentally mix-ups between variables and strings. Additionally some special backward-compatibility workarounds (like when comparing empty %N parameters) will be disabled. See also here: Strict / non-strict comparisons |
|||
Variable name | Type | Default value | |
usestrictjs | Boolean | true | |
Use the Javascript Strict Mode. All Javascript code that will be directly called by krpano (e.g. in Javascript-Actions or by jscall, jsget, js:... or when loading Javascript files by loadjs() will use the Strict Mode when enabled. This can help finding coding errors like undeclared variables, but therefore works slightly different in some cases and so can cause backward-compatibility problems when enabled. If necessary the Javascript Strict Mode can be disabled globally here or individually per action[].usestrictjs. |
|||
Variable name | Type | Default value | |
showerrors | Boolean | true | |
Set if the krpano output/log window should get opened automatically when an error happens to show the error message to the user. Note - When using the Branding Free License the default value will be false. |
|||
Variable name | Type | Default value | |
logkey | Boolean | true | |
Enable or disable the keyboard key that will show or hide the krpano output/log window. The location on the keyboard - always the top-left most key below the ESC-key (independent of the keyboard-language or keyboard-mapping): On Touch-devices there are no keys, therefore there the log-window can be opened by touching at the right-bottom corner of the viewer-window and swiping-up there. Note - When using the Branding Free License the default value will be false. |
|||
Variable name | Type | Default value | |
debugmode | Boolean | false | |
Enable or disable the special debug-mode. When enabled:
|
|||
Variable name | Type | Default value | |
debugkeys | Boolean | false | |
Enable or disable the special debug-keyboard-keys.
These keys are only active when
the debugmode setting is enabled
and when the krpano log is currently opened. The debug-keys:
|
|||
Variable name | Type | Default value | |
debugkeeplog | Boolean | true | |
Keep/store the history of the log-input.
That means the previous input in the debug input-field will be still there are reloading the page.
The log will be stored only locally (in the Browsers localStorage memory)
and so only in the current Browser and only for the current domain/origin. Note - works only when the debugmode setting is also enabled. |
|||
Variable name | Type | Default value | |
debugjsactions | Boolean | false | |
Allow browser-debugging of type="Javascript" <action> code. With that enabled, Javascript errors will not get captured by krpano and will be normally processed by the browser. This can help during development, e.g. for locating an error, but for normal usage this setting should be kept disabled! |
|||
Variable name | Type | Default value | |
debugjsplugins | Boolean | false | |
Allow browser-debugging of Javascript-krpano-plugins. With that enabled, Javascript errors will not get captured by krpano and will be normally processed by the browser. This can help during development, e.g. for locating an error, but for normal usage this setting should be kept disabled! |
|||
Variable name | Type | Default value | |
deprecatedwarnings | Boolean | true | |
Show deprecated warnings when using actions that are outdated and might be not supported anymore in future versions. |
<preview>
<image> <preview> </image>
<preview type="" url="previewpano.jpg" striporder="LFRBUD" />
Variable name | Type | Default value | |
preview.type | String | ||
---|---|---|---|
Variable name | Type | Default value | |
preview.url | String | ||
The url / path to the preview image. This can be a spherical, cylindrical or a cubestrip (1x6, 6x1, 3x2 or 2x3) image. When the main <image> is a partial pano, then the preview pano will use automatically the same hfov / vfov / voffset settings. |
|||
Variable name | Type | Default value | |
preview.striporder | String | "LFRBUD" | |
Defines the order of the images in the cubestrip image. |
<preview url="preview.jpg" />
<preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" />
<image type="..." hfov="360.0" vfov="360.0" voffset="0.0" ox="0.0" oy="0.0" oz="0.0" objectsize="1000.0" crop="" stereo="false" stereolabels="1|2" stereoformat="TB" stereooffset="0.0" prealign="0|0|0" multiresthreshold="0.025" baseindex="1" tileoverlap="0" cubelabels="l|f|r|b|u|d" cubemapmode="false" cubemapsize="4096" frame="1" frames="1" > <TYPE ... multires="" striporder="LFRBUD" mapping="" mjpegstream="" /> ... </image>
<image> <cube url="pano_%s.jpg" /> </image>
<image> <cube url="pano_%s_%l_%v_%h.jpg" multires="TILESIZE,LEVELSIZE1,LEVELSIZE2,..." /> </image>
<image tilesize="..."> <level tiledimagewidth="..." tiledimageheight="..."> <cube url="..._%s_%v_%h.jpg" /> </level> <level ...> <cube ... /> </level> ... </image>
<image stereo="true" stereolabels="1|2"> <cube url="pano_%t_%s.jpg" /> </image>
<image> <cubestrip url="pano.jpg" /> </image>
<image prealign="0|0|0"> <cubestrip url="pano.jpg" striporder="LFRBUD" /> </image>
<image> <sphere url="pano.jpg" /> <cylinder url="pano.jpg" /> <flat url="pano.jpg" /> </image>
<image hfov="120" vfov="40" voffset="0"> <sphere url="pano.jpg" /> <cylinder url="pano.jpg" /> <flat url="pano.jpg" /> </image>
<image> <sphere url="pano_%l_%v_%h.jpg" multires="TILESIZE,LEVELSIZE1,LEVELSIZE2,..." /> <cylinder url="pano_%l_%v_%h.jpg" multires="TILESIZE,LEVELSIZE1,LEVELSIZE2,..." /> <flat url="pano_%l_%v_%h.jpg" multires="TILESIZE,LEVELSIZE1,LEVELSIZE2,..." wraparound="false" /> </image>
<image tilesize="..." wraparound="false"> <level tiledimagewidth="..." tiledimageheight="..."> <sphere url="..._%v_%h.jpg" /> <cylinder url="..._%v_%h.jpg" /> <flat url="..._%v_%h.jpg" /> </level> <level ...> <sphere ... /> <cylinder ... /> <flat ... /> </level> ... </image>
For one file that contains both stereo images: <image stereo="true" stereoformat="TB"> <sphere url="pano.jpg" /> <cylinder url="pano.jpg" /> <flat url="pano.jpg" /> </image> For separated left/right image files: <image stereo="true" stereolabels="1|2"> <sphere url="pano_%t.jpg" /> <cylinder url="pano_%t.jpg" /> <flat url="pano_%t.jpg" /> </image> For Multi-Resolution: <image stereo="true" stereolabels="1|2"> <sphere url="pano_%t_%l_%v_%h.jpg" multires="TILESIZE,LEVELSIZE1,LEVELSIZE2,..." /> <cylinder url="pano_%t_%l_%v_%h.jpg" multires="TILESIZE,LEVELSIZE1,LEVELSIZE2,..." /> <flat url="pano_%t_%l_%v_%h.jpg" multires="TILESIZE,LEVELSIZE1,LEVELSIZE2,..." /> </image>
<image> <sphere url="plugin:video" /> <cylinder url="plugin:video" /> <flat url="plugin:video" /> </image> <plugin name="video" url="videoplayer.js" videourl="video.mp4|video.webm" />
<image> <fisheye url="fisheye.jpg" fov="180.0" align="yaw|pitch|roll" crop="left|right|top|bottom" lenscp="a|b|c|d|e" /> </image>
<image stereo="true" stereoformat="TB"> <fisheye url="fisheye.jpg" fov="180.0" align="yaw|pitch|roll" crop="left|right|top|bottom" lenscp="a|b|c|d|e" /> </image>
<image> <fisheye url="plugin:video" /> </image> <plugin name="video" url="videoplayer.js" videourl="video.mp4|video.webm" />
Variable name | Type | Default value | |
image.type | String | ||
---|---|---|---|
The type of the panorama image. Available values (always in lower-case):
|
|||
Variable name | Type | Default value | |
image.hfov | Number | ||
Defines the horizontal field of view (hfov) of the pano image in degrees.
The default value is 360 for all pano types except for flat panos, for flat panos the default is 1.0. Note - when dynamically changing this setting (only possible for sphere, cylinder and flat panos), the updateobject() action need to be called to update the pano image. |
|||
Variable name | Type | Default value | |
image.vfov | Number | ||
Defines the vertical field of view (vfov) of the pano image in degrees. By default (when no value was set), this value will be calculated automatically by using the hfov, the type of the pano and the side aspect of the pano image. Note - when dynamically changing this setting (only possible for sphere, cylinder and flat panos), the updateobject() action need to be called to update the pano image. |
|||
Variable name | Type | Default value | |
image.voffset | Number | 0.0 | |
Defines the vertical offset of the pano image in degrees. By default the pano image will be vertically centered. This means the viewing range will be from -hfov/2 to +hfov/2 and from -vfov/2 to +vfov/2. Now when using a partial pano image where the horizon is not in the middle of image (not at 0 degree), then this image will be displayed distorted. The voffset can be used to shift the image up or down to center it correctly. How to get the correct voffset value: When the vertical from-to range of the pano image is known, then it can be calculated: voffset = (vfov_min + vfov_max) / 2 e.g. for a 240x90 pano with the field of view from -70° (up) to +20° (down): vfov_min = -70 vfov_max = +20 voffset = (-70 + 20) / 2 = -25or see the result for a 360x180 pano with -90 to +90: vfov_min = -90 vfov_max = +90 voffset = (-90 + 90) / 2 = 0.0 When the vertical range is unknown - just try out some values (negative and positive ones in the range from -90 to +90). Additionally it can be helpful here to set <view limitview="off" />in the xml to allow viewing the whole partial image without viewing limitations. Note - when dynamically changing this setting (only possible for sphere, cylinder and flat panos), the updateobject() action need to be called to update the pano image. |
|||
Variable name | Type | Default value | |
image.crop | String | ||
Crop / cut out a rectangular area of the source image or video. Can be only used only with single images or videos, no tiled or multires images. Syntax: crop="x-position|y-position|width|height"The values will be relative ones in the range 0.0 to 1.0. Examples: to use the full image: 0.0|0.0|1.0|1.0, to use only the right half of the image: 0.5|0.0|0.5|1.0. Note - using crop will not affect the automatic fov calculation, so the fov ranges might need to set manually. |
|||
Variable name | Type | Default value | |
image.prealign | String | "0|0|0" | |
With the prealign setting the pano image itself can be aligned / rotated. This can be used to correct miss-aligned pano images. The syntax: prealign="X|Y|Z"where X, Y, Z defines the rotation about these axis in degrees. The prealign setting rotates only to the pano-image itself, but by using hotspot[name].prealign=true it would be possible to rotate certain hotspots as well. |
|||
Variable name | Type | Default value | |
String String String String |
|||
Variable name | Type | Default value | |
Number | 0.025 | ||
The multiresthreshold value controls, depending on the fov/zoom, when to switch from one multi-resolution level to the next one. Suitable values are from -1.0 to +1.0. | |||
Variable name | Type | Default value | |
image.wraparound | Boolean | false | |
When enabled, flat images can horizontally wrap around.
Note - works only with multi-resolution flat images where all multi-resolution levels are fully divisible by the tilesize! |
|||
Variable name | Type | Default value | |
image.baseindex | int | 1 | |
The index base (numbering start) for the tile- and level-indicies. Used for generating the tile-filenames based on the placeholder. |
|||
Variable name | Type | Default value | |
image.tilesize | int | ||
Define the tile-size for multires images (long syntax). | |||
Variable name | Type | Default value | |
image.tileoverlap | int | 0 | |
Optionally for using custom tiles that have a tile-overlap-border around the tile-image. Only supported for cubical images at the moment. |
|||
Variable name | Type | Default value | |
image.cubelabels | String | ||
The labels for the %s cube side url placeholder. The default labels are l|f|r|b|u|d (left, front, right, back, up, down). | |||
Variable name | Type | Default value | |
String | "LFRBUD" | ||
Defines the order of the images in the cubestrip image. | |||
Variable name | Type | Default value | |
Boolean int |
false 4096/2048 |
||
By default krpano uses internally for every tile an separate texture for rendering.
When enabling the cubemapmode setting,
internally only one large cubemap texture will be used and the tiles be rendered into it.
On very draw-call limited systems, this can improve the rendering performance. When using cubical depthmap panos with rendermode=3dmodel this rendering mode will be used too automatically (an internal requirement). In this mode the maximum cube-size is limited to the given cubemapsize setting. Larger images will get automatically downscaled to that size. Note - on iOS devices the default size is 2048. iOS is very sensitive to GPU memory usage and when hitting some limit, iOS Safari will crash the webpage. A lower setting here will reduce the memory need and better prevents crashes. |
|||
Variable name | Type | Default value | |
Boolean String String Number |
false "1|2" "TB" 0.0 |
||
Enables the usage of stereo images. When using cube images, then the image urls should contain a %t placeholder. This placeholder will be replaced by the values from the stereolabels setting. For the left image the first value will be used and for the right image the second one. For spherical or cylindrical images or videos it is possible to use 'frame-packed' stereo images. The stereoformat setting defines the packing order:
Example - stereoscopic cube image:
<image stereo="true" stereolabels="1|2"> Example - stereoscopic panoramic video:
<image stereo="true" stereoformat="TB"> The stereooffset setting can be used to adjust/align the stereo images. Technically this rotates the left/right images horizontally apart or together by the given value in degrees. Can be used to correct wrong-aligned stereo-images or to change the stereo-focal-plane. |
|||
Variable name | Type | Default value | |
String | |||
Define the mapping / projection of the spherical input image. Possible settings:
|
|||
Variable name | Type | Default value | |
Number String String String |
|||
Fisheye image support (WebGL only). For correctly straighten and aligning the fisheye image, it's necessary to know some parameters about it. A good tool for getting these parameters is PTGUI. Fisheye settings:
PTGUI Screenshots for getting the fisheye parameters: ![]() ![]() |
|||
Variable name | Type | Default value | |
String | |||
MJPEG image streaming over HTTP support (WebGL only). With this setting it's possible to use HTTP MJPEG video streams as source for the pano image. The supported images types are: <sphere>, <cylinder> and <flat> and <fisheye>. The image url needs to point directly to to MJPEG stream source. Possible settings:
Browser support:
|
|||
Variable name | Type | Default value | |
image.ox image.oy image.oz |
Number Number Number |
0.0 0.0 0.0 |
|
A 3D offset / translation for the pano image.
Can be used to place panos in 3D space. For usage with depthmaps and animated 3D-transitions. The pano will be viewed from its center (which means normal, undistorted viewing) when the view.tx/ty/tz coordinates are the same as the image.ox/oy/oz coordinates. |
|||
Variable name | Type | Default value | |
image.objectsize |
Number |
1000.0 |
|
Size of the internal 3D-Model of the pano-image. When set to 0 or an invalid Number (e.g. by using the String "infinity") then the 3D-Model will be rendered infinity far away. This can be used for background panos that shouldn't move with the view. |
|||
Variable name | Type | Default value | |
image.frames image.frame |
int int |
1 1 |
|
Current frame and number of frames of the pano. It's possible to use several frames for a pano image, there the %f placeholder must be used in the image urls. That placeholder will be replaced with the current set frame number. When changing the frame number, the tiles from that frame will get loaded. |
|||
Variable name | Type | Default value | |
image.loadstate | int | 0 | |
The current loading state of the image:
See also the onviewloaded and onviewreloading events for more information about the current loading state of the current view. |
|||
Variable name | Type | Default value | |
image.hres image.vres |
int int |
0 0 |
|
The resolution / pixel-size of the pano-image. When the pano is a multi-resolution image, then this is the size of the largest level. |
|||
Variable name (read only) | Type | Default value | |
image.hlookatmin image.hlookatmax image.vlookatmin image.vlookatmax |
Number Number Number Number |
-180.0 +180.0 -90.0 +90.0 |
|
The lookat range of the image. Will be calculated automatically and depends on the image type and the hfov, vfov and voffset settings. |
|||
Variable name (read only) | Type | Default value | |
image.level.count | int | 0 | |
The count / number of all image level elements. | |||
Variable name | Type | Default value | |
int int |
|||
The full / total size of the tiled image for this level. | |||
Variable name | Type | Default value | |
int | |||
This setting will overrule the main image.tilesize setting for this level. | |||
Variable name | Type | Default value | |
Boolean | false | ||
Use this level as preview image. This also forces the whole level to be fully loaded. |
<image ... ox="0" oy="0" oz="0"> ... <depthmap> </image>
<depthmap url="..." texurl="" enabled="true" hittest="false" hittestmode="cpu" rendermode="auto" textured="auto" background="none" backgroundurl="" mapmode="1" offset="0.0" curve="1.0" scale="1.0" farscale="1.0" encoding="gray" axis="+x+y+z" cull="front" origin="0|0|0" align="0|0|0" subdiv="" />
Variable name | Type | Default value | |
depthmap.url | String | ||
---|---|---|---|
The path/url to the depthmap file. (see also the url notes) Supported image file types: JPG, PNG and GIF. Supported 3D-object file types: STL (.stl), Wavefront OBJ (.obj) and DEPTH (.depth). When the server setup doesn't allow .stl, .obj or .depth file extensions, it would be possible to add for example '.txt' at the end, e.g. '.depth.txt'. or '.stl.txt'. krpano itself detects the file-type by analyzing the file content. |
|||
Variable name | Type | Default value | |
depthmap.texurl | String | ||
The path/url to a texture image file. (see also the url notes) Optionally - define a custom texture image for the 3D-model (.obj files only). When not set, the .obj file can refer to a .mtl material library file to load one or more textures. |
|||
Variable name | Type | Default value | |
depthmap.enabled | Boolean | true | |
Enable or disable the depthmap rendering mode. Can be changed also anytime dynamically at runtime. |
|||
Variable name | Type | Default value | |
depthmap.hittest depthmap.hittestmode |
Boolean String |
false "cpu" |
|
Variable name | Type | Default value | |
depthmap.rendermode | String | "auto" | |
The rendermode setting defines how to use 3D-Models as Depthmap:
Note - this setting can not be changed at runtime as it controls how the depthmap gets loaded and processed. |
|||
Variable name | Type | Default value | |
depthmap.textured | String | "auto" | |
Should the 3D-Model use the texture-mapping stored in the file (only for .obj files). Available settings:
|
|||
Variable name | Type | Default value | |
depthmap.background | String | "none" | |
Render something at the 'background' behind the 3D-Model,
e.g. to fill empty / undefined areas from the 3D-Model. Available settings:
Works only when using a 3D-Model as depthmap and rendermode="3dmodel". |
|||
Variable name | Type | Default value | |
depthmap.backgroundurl | String | ||
Use a separate pano image as 'background' behind the 3D-Model. Currently only spherical (360x180) images are supported here. Works only when using a 3D-Model as depthmap and rendermode="3dmodel". |
|||
Variable name | Type | Default value | |
depthmap.mapmode | int | 1 | |
The pixel-to-depth mapping modes for depthmap-images:
For further fine-tuning the offset and curve settings can be used. |
|||
Variable name | Type | Default value | |
depthmap.offset depthmap.curve |
Number Number |
0.0 1.0 |
|
Addtionally to mapmode these are very important settings a correct depthmap-images usage.
The offset value defines the offset to the nearest depthmap value and the
curve value an exponential curvature of the depthmap values. The values to use depend how the depthmap image was created and mapped. Typical offset values for mapmode=1 are in the range 0.06 to 0.30. There is an example with an interactive helper tool for adjusting the depthmap-image mapping settings included: Depthmap-Image Helper Tool. |
|||
Variable name | Type | Default value | |
depthmap.scale | Number | 1.0 | |
Scale the depthmap 3D representation. Invert the depth: for depthmap images that use black for near and white for far a negative scale value could be used to invert the depth. |
|||
Variable name | Type | Default value | |
depthmap.farscale | Number | 1.0 | |
This setting defines how far the 'background' should be away from the object foreground. Only related to 3D-Models rendered with rendermode="depthmap". |
|||
Variable name | Type | Default value | |
depthmap.encoding | String | "gray" | |
Set the encoding of the input depthmap image:
|
|||
Variable name | Type | Default value | |
depthmap.axis depthmap.cull depthmap.origin depthmap.align |
String String String String |
"+x+y+z" "front" "0|0|0" "0|0|0" |
|
Import settings for the 3D-Model.
|
|||
Variable name | Type | Default value | |
depthmap.subdiv | Number | ||
The subdiv setting controls the sub-division of the 3D-Model into smaller triangles. The value of the setting defines the maximum length of a triangle edge that is allowed. That means lower values cause smaller and more triangles. That will be good for a more accurate display when using spherical images or optional view fisheye-distortions but also require more setup-time and rendering power. Defaults: 14.25 on desktop devices, 17 on mobile and tablet devices. To disable the sub-division, set the setting to 0. |
|||
Variable name | Type | Default value | |
depthmap.bytesize depthmap.buildtime |
int Number |
||
Extra information for optimizing: the memory need of the internal 3D-Model data and the time in seconds to build it. |
<view hlookat="0.0" vlookat="0.0" camroll="0.0" fovtype="VFOV" fov="90.0" hfov="" vfov="" dfov="" mfov="" sfov="" fovmin="1.0" fovmax="179.0" maxpixelzoom="" mfovratio="1.333333" distortion="0.0" distortionfovlink="0.5" stereographic="true" pannini="0.0" architectural="0.0" architecturalonlymiddle="true" longexposure="0.0" limitview="auto" hlookatmin="" hlookatmax="" vlookatmin="" vlookatmax="" rx="0" ry="0" tx="0" ty="0" tz="0" ox="0" oy="0" oz="0" />
Variable name | Type | Default value | |
view.hlookat | Number | 0.0 | |
---|---|---|---|
The horizontal looking direction in spherical coordinates in degrees. The typical range is from -180° to +180°. The value will not wrap around 360° but the view itself will. The value 0.0 points to the center of the pano image. |
|||
Variable name | Type | Default value | |
view.vlookat | Number | 0.0 | |
The veritcal looking direction in spherical coordinates in degrees. The typical range is from -90° upward at the zenith down to +90° at the nadir. |
|||
Variable name | Type | Default value | |
view.camroll | Number | 0.0 | |
The roll / rotation of the view camera in degrees. |
|||
Variable name | Type | Default value | |
view.fovtype | String | ||
Defines the type of the field of view that the fov value represents. This is important when resizing the viewer window to decide what fov should change. Possible settings:
Default setting: on desktop devices VFOV, on mobile and tablet devices MFOV. |
|||
Variable name | Type | Default value | |
view.fov | Number | 90.0 | |
The current field of view in degrees - from almost 0.0 to 179.0. Based on the fovtype setting. |
|||
Variable name | Type | Default value | |
view.hfov view.vfov view.dfov view.mfov view.sfov |
Number Number Number Number Number |
||
Directly set or get the particular field-of-view based on the related fovtype. The value will be converted to or converted from the view.fov value, the view.fovtype will not change. |
|||
Variable name | Type | Default value | |
view.fovmin | Number | 1.0 | |
The minimum fov value, this will limit the zooming into the pano. Note - maxpixelzoom setting can be used instead! |
|||
Variable name | Type | Default value | |
view.fovmax | Number | 179.0 | |
The maximum fov value, this will limit zooming out of the pano. |
|||
Variable name | Type | Default value | |
view.maxpixelzoom | Number | ||
The maximum pixel zoom factor of the pano image. This will limit the fov automatically depending on the pano resolution and the current viewing window, e.g. 1.0 = limit to 100% zoom, no pixel scaling of the source image will be visible. Note - when set, this setting will overrule the fovmin setting, the fovmin value will be dynamically updated in this case. |
|||
Variable name | Type | Default value | |
view.mfovratio | Number | 1.333333 | |
The size ratio for the maximum screen size calculation when using the fovtype=MFOV setting. By default the ratio of a 4:3 screen (4/3 = 1.333) will be used. | |||
Variable name | Type | Default value | |
Number Number |
0.0 0.0 |
||
Fisheye distortion effect (0.0 - 1.0). This value contolls the interpolation between the normal rectiliniear view and the distorted fisheye view. 0.0 = no distortion / rectiliniear 1.0 = full distortion There are two fisheye modes: - normal (view.stereographic="false") - stereographic (view.stereographic="true") |
|||
Variable name | Type | Default value | |
Number Number |
0.5 0.5 |
||
The fov and fisheye distortion settings are linked together (e.g. when zooming in - the fisheye effect will be reduced). This setting controls the correlation link between these two values: (0.0 - 3.0), 0=linear correlation, 3=dynamic correlation. | |||
Variable name | Type | Default value | |
view.stereographic | Boolean | true | |
Enables/disables the stereographic fisheye projection. The 'strongness' of the projection it is controlled by the fisheye setting. The stereographic projection allowes very interessting panorama views like the Little Planet Views. |
|||
Variable name | Type | Default value | |
view.pannini | Number | 0.0 | |
Apply a Pannini/Vedutismo projection (0.0 to 1.0). The 'strongness' of the projection it is controlled by the fisheye setting. |
|||
Variable name | Type | Default value | |
view.architectural | Number | 0.0 | |
Architectural projection (0.0 - 1.0). This value interpolates between the current projection (0.0) and the architectural projection mode (1.0). |
|||
Variable name | Type | Default value | |
Boolean | true | ||
When enabled, the architectural projection will be only used in the 'middle' area of the view. When looking more up and down then the architectural projection will slowly switch back to normal projection. | |||
Variable name | Type | Default value | |
view.longexposure | Number | 0.0 | |
Simulate a photography long-exposure / slow-shutter / motion-blur effect. The value range is 0.0 (off) to 0.99 (extreme). |
|||
Variable name | Type | Default value | |
view.limitview | String | auto | |
Limit the viewing range in the pano. Possible values:
when the "hlookatmin", "hlookatmax", "vlookatmin", "vlookatmax" values were not set, they will be automatically calculated from the size of the pano image. |
|||
Variable name | Type | Default value | |
view.hlookatmin view.hlookatmax view.vlookatmin view.vlookatmax |
Number Number Number Number |
-180.0 +180.0 -90.0 +90.0 |
|
The view looking ranges. How they behave depends on the limitview setting. When limitview is set to auto, these will be set automatically to the limits given by the pano-images fov-coverage. Note - when 'hlookatmax-hlookatmin >= 360', then no horizontal limiting will be done. |
|||
Variable name | Type | Default value | |
view.haschanged |
Boolean | ||
A boolean flag to check or set if the current view has been changed. By setting it to true, this could be used to request a redraw in the next frame. |
|||
Variable name | Type | Default value | |
view.pixelzoom |
Number | ||
The current zoom level relative to the size of the pano image. A value of 1.0 means a 100% zoom of the source pixels. Note - setting or getting this value works only when the pano image is loaded or its size information are available (that means after the onnewpano event). |
|||
Variable name (read only) | Type | Default value | |
view.hlookatrange view.vlookatrange |
Number Number |
||
The current maximum horizontal looking range (same as hlookatmax - hlookatmin). The current maximum vertical looking range (same as vlookatmax - vlookatmin). |
|||
Variable name | Type | Default value | |
view.rx view.ry |
Number Number |
0.0 0.0 |
|
An additional viewing rotation in screen-space (in degrees). That means that rotation will be applied at the end of all other viewing transformations. Can be used to implement a follow the mouse effect (example) that helps indicating that this is an interactive image. |
|||
Variable name | Type | Default value | |
view.tx view.ty view.tz |
Number Number Number |
0.0 0.0 0.0 |
|
A 3D translation of the viewpoint. For usage with depthmaps, 3D-viewpoint changes, WebVR position tracking and animated 3D-transitions. The pano will be viewed from its center (which means normal, undistorted viewing) when the view.tx/ty/tz coordinates are the same as the image.ox/oy/oz coordinates. |
|||
Variable name | Type | Default value | |
view.ox view.oy view.oz |
Number Number Number |
0.0 0.0 0.0 |
|
An additional 3D translation offset of the viewpoint.
But the viewing rotation will be still from the non-offset point. This can be used together with depthmaps to make a kind of 'dollhouse' effect. |
|||
Variable name (read only) | Type | Default value | |
view.ox_rotated view.oy_rotated view.oz_rotated |
Number Number Number |
||
The view.ox / view.oy / view.oz 3D translation offset, but inverse rotated by the current viewing rotation. | |||
Variable name (read only) | Type | Default value | |
view.dir.x / y / z view.dir.rx / ry / rz view.dir.ux / uy / uz |
Number Number Number |
||
x,y,z - a 3D unit-vector that points into the current viewing direction. rx,ry,rz - a 3D unit-vector that points to the right, based on the current viewing rotations. ux,uy,uz - a 3D unit-vector that points upwards, based on the current viewing rotations. |
|||
Function name | Type | return | |
view.syncto(otherview) | Action | ||
Copy the view settings from the view element from an other krpano viewer. Could be used in onviewchange event to synchronize the pano view changes. Note - the viewing range limits are not copied. Parameters:
|
|||
Function name | Type | return | |
view.unproject(x, y, d, rotated) | Action | {x,y,z} | |
Unproject a 2D screen point to a 3D vector. Parameters:
|
|||
Function name | Type | return | |
Action | Number | ||
Remaps a fov value from one fovtype to another. Parameters:
|
|||
Function name | Type | return | |
view.fovtoscale(fov,fovtype,w,h) | Action | Number | |
Convert a fov value (and its fovtype) to a linear scale factor. Parameters:
|
|||
Function name | Type | return | |
view.resetlimits() | Action | ||
Resets the hlookatmin, hlookatmax, vlookatmin and vlookatmax values back to default (depending on the current pano and its size/fov). | |||
Function name | Type | return | |
view.update() | Action | ||
Updates and recalculates all view dependent variables (e.g. limit hlookat/vlookat/fov to the current defined limits). Can be used when requiring intermediate or updated values now and not after the next frame update. |
<view hlookat="0" vlookat="0" fov="80" />
<view hlookat="0" vlookat="90" distortion="1.0" fov="150" fovmax="150" />
<view hlookat="0" vlookat="0" maxpixelzoom="1.0" limitview="fullrange" />
Variable name | Type | Default value | |
area.mode | String | "align" | |
---|---|---|---|
Select the area positioning / sizing mode. Possible settings: "align" or "border". Align mode: <area mode="align" align="lefttop" x="0" y="0" width="100%" height="100%" cliplayers="true" /> Border padding mode: <area mode="border" left="0" top="0" right="0" bottom="0" cliplayers="true" /> |
|||
Variable name | Type | Default value | |
area.align | String | "lefttop" | |
Alignment / origin-point position of the area window on the screen. Possible values: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom. |
|||
Variable name | Type | Default value | |
area.x area.y |
String String |
"0" "0" |
|
The x / y distance from the align point to the area window (only for mode=align). This can be either an absolute pixel values or a percent values that are relative to the screen width / height. |
|||
Variable name | Type | Default value | |
area.width area.height |
String String |
"100%" "100%" |
|
The width / height of the area (only for mode=align). This can be either an absolute pixel values or a percent values that are relative to the screen width / height. |
|||
Variable name | Type | Default value | |
area.left area.top area.right area.bottom |
String String String String |
"0" "0" "0" "0" |
|
The distances from the left / top / right / bottom edges of the screen to the area window (only for mode=border). This can be either an absolute pixel values or a percent values that are relative to the screen width / height. |
|||
Variable name | Type | Default value | |
area.cliplayers | Boolean | true | |
Clip/cut off layers outside the area. When disabled (set to false) layer elements outside the area will be visible. Could be used together with parent="OVERLAY" to place elements outside the area and with relative coordinates to the viewer-area. |
|||
Variable name (read only) | Type | Default value | |
area.pixelx area.pixely area.pixelwidth area.pixelheight |
int int int int |
||
The resulting area position (from left-top) and size in pixels (read-only). |
<area align="center" width="640" height="480" />
<area mode="border" top="10" bottom="100" />
<area width="75%" />
<events onresize="fixaspectresize(16,9);" /> <action name="fixaspectresize"> div(aspect, %1, %2); mul(destwidth, stagewidth, aspect); copy(destheight, stagewidth); if(destwidth GT stagewidth, div(dwnscale, stagewidth, destwidth); , set(dwnscale, 1.0); ); mul(destwidth, dwnscale); mul(destheight, dwnscale); if(destheight GT stageheight, div(dwnscale, stageheight, destheight); , set(dwnscale, 1.0); ); mul(destwidth, dwnscale); mul(destheight, dwnscale); sub(destx, stagewidth, destwidth); sub(desty, stageheight, destheight); mul(destx, 0.5); mul(desty, 0.5); copy(area.x, destx); copy(area.y, desty); copy(area.width, destwidth); copy(area.height, destheight); </action>
<display autofullscreen="true" stereo="false" stereooverlap="0.0" stereoscale="1.0" stereoseparation="6.5" monoside="1" anaglyph="false" safearea="auto" mipmapping="auto" loadwhilemoving="auto" framebufferscale="1.0" hotspotvrrendering="natural" hotspotvrzoom="true" hotspotvrflying="500" hotspotworldscale="2.0" depthmaprendermode="depthmap" depthmapcachesize="3" depthbuffer="false" depthrange="0.1,100000" surfacesubdiv="100" nofullscreenfallback="true" wireframe="false" wirecolor="0x00FF00" chromesubpixelantialiasing="false" />
Variable name | Type | Default value | |
Boolean | true | ||
---|---|---|---|
Automatically switch to fullscreen mode when rotating the mobile device to landscape mode (Android only). | |||
Variable name | Type | Default value | |
Boolean Number Number Number |
false 0.0 1.0 6.5 |
||
Enable the side-by-side Stereo-rendering mode. When the <image> is defined as stereo-image, then the left side will show the left image and the right side the right image. Without stereo-image both sides will show the same image. The stereo-rendering mode can be used for VR displays. The WebVR plugin will enable this mode automatically when entering the VR mode. The stereooverlap setting defines the overlapping of the left and right images: 0.0=no overlap, 1.0=full overlap. The stereoscale setting defines the horizontal scaling:
The stereoseparation setting defines the distance between the eyes in cm. Only for non-VR usage, e.g. anaglyph-rendering or 3D-TV (in VR the distance defined by the headset will be used). |
|||
Variable name | Type | Default value | |
int | 1 | ||
Define which side from stereo-images should be used for the normal monoscopic rendering: 1 = left, 2 = right. | |||
Variable name | Type | Default value | |
Boolean | false | ||
Enable the 3D-Anaglyph (red/cyan) Stereo-rendering mode. |
|||
Variable name | Type | Default value | |
String | auto | ||
Set how the 'Safe-Area' of the device display should be handled (currently iOS only):
Notes:
Comparison - without Safe-Area support (an iPhone with a Notch): and with Safe-Area support (using safearea="h-only"), same Layout but more to see: |
|||
Variable name | Type | Default value | |
display.safearea_inset | Object | null | |
When the display of the device has a 'safe-area' and the browser supports the safe-area-inset CSS variables,
then this variable will be an Object with information about that safe-area. Otherwise it will be null. When set, the Object has these member variables: • l - left safe-area-inset • t - top safe-area-inset • r - right safe-area-inset • b - bottom safe-area-inset • x - offset from the left screen edge to the safearea • y - offset from the top screen edge to the safearea • w - the width of the safearea • h - the height of the safearea • sw - the total-width of the pano-display • sh - the total-height of the pano-display When the value of one of l,t,r,b variables is positive, then this is the safearea size outside of the krpano viewport. When it is negative, then the safearea is inside the viewport. These values can change anytime when the device will be rotated, so they should be used only in the onresize event. |
|||
Variable name | Type | Default value | |
String | "auto" | ||
Define if mipmapping should be used when displaying panos with WebGL. Mipmapping can give a better visual quality and reduce aliasing. Technically mipmapping is only possible on images/tiles that have power-of-two sizes.
|
|||
Variable name | Type | Default value | |
String | |||
Control the tile reloading during movement (panning, zooming).
The loading and adding of new tiles can interrupt smooth movements on slow devices.
|
|||
Variable name | Type | Default value | |
Number | 1.0 | ||
Adjust / scale the size of the WebGL frame buffer. A smaller number mean a lower resolution and fewer pixel to calculate. This could be used on slower mobile devices to increase the rendering performance. |
|||
Variable name | Type | Default value | |
String | "natural" | ||
Define the appearance of non-distorted hotspots in VR mode. Possible settings:
Note - see also the related hotspotvrzoom setting. |
|||
Variable name | Type | Default value | |
Boolean | true | ||
Define the appearance/scale of non-zooming and non-distorted hotspots in VR mode. Possible settings:
Note - see also the related hotspotvrrendering setting. |
|||
Variable name | Type | Default value | |
Number | 500.0 | ||
The 3D- distance / depth for flying hotspots in VR. |
|||
Variable name | Type | Default value | |
Number | 2.0 | ||
A global scale factor for all hotspots. By default the hotspot-sizes use a double unit scale (2x) compared to all the other krpano 3D coordinates. That's required of the initial definition of 1000 width/height units with 1000 depth units should result in 90 degree field-of-view coverage. For using the same units for the hotspot-sizes and the 3D coordinates, then either the hotspotworldscale setting can be set to 1.0 or the individual hotspot scale to 0.5. |
|||
Variable name | Type | Default value | |
String | "depthmap" | ||
Define the default rendering mode when using 3D-Models as depthmap. Can be defined also individually per pano by the depthmap.rendermode setting. Possible settings:
|
|||
Variable name | Type | Default value | |
Number | 3 | ||
The size of the depthmap-3D-Model cache in MB. When loading 3D-Models their internal data-structures will be cached for re-usage. This can extremly speedup the loading when using the same 3D-Model for several panos. Note - to be able to re-use a cached 3D-Model, the depthmap.axis, the depthmap.cull, the dethpmap.subdiv and the dethpmap.hittest/hittestmode settings need to be the same. |
|||
Variable name | Type | Default value | |
Boolean | false | ||
Manually enable the use of the depth-buffer for rendering
(when using Depthmap-panos this will be enabled automatically). Using the depth-buffer would be neccesary when using hotspots with their depthbuffer setting enabled. When enabled the hotspots can intersect other hotspots or the depthmap-geometry in 3D-space. |
|||
Variable name | Type | Default value | |
String | 0.1,100000 | ||
Define the depth range in CM for rendering 3D content (like depthmapped-panos or 3D-Models or hotspots).
Content outside this range will get clipped/cutted-off. The unit for the range is centimeter. The default range is from 1mm to 1km. |
|||
Variable name (read only) | Type | Default value | |
display.havedepthmap | Boolean | false | |
A state variable that reports if the current pano is using a depthmap. | |||
Variable name | Type | Default value | |
int | 100 | ||
When rendering non-flat surfaces, e.g. spherical or cylindrical panos, fisheye-distorted
panos or depthmapped-panos, krpano internally needs to subdivide the surface of the pano
into many smaller parts for rendering. This settings control how much the surface should be subdivided. Large settings means more subdivision and so smaller parts and more accurate rendering but therefore also more processing-need and slower rendering. Smaller settings mean the opposite: fewer subdivision and less accuracy but therefore faster rendering. |
|||
Variable name | Type | Default value | |
display.nofullscreenfallback | Boolean | true | |
Use a fallback solution when the browser/device doesn't support the HTML5 fullscreen-mode API (e.g. iOS).
In this case krpano will try to make the pano HTML element covering the full webpage by modifying its CSS style (size and position). But in some cases this can conflict with custom CSS styles, therefore it's possible to use this setting to disable that fallback. |
|||
Variable name | Type | Default value | |
display.iphonefullscreen | int | 0 | |
The state of the iPhone Safari-browser landscape fullscreen mode when the pano-webpage is covered or moved-out
by the browsers url- and tab-bars. Possible states (read-only):
Normally this is only a read-only state variable, but by setting this variable to -1 it would be possible to disable that fullscreen handling. The events.oniphonefullscreen event will be sent when this state changes. |
|||
Variable name | Type | Default value | |
Boolean | false | ||
Show the wireframe / polygons of the image-tiles and/or the internal 3D geometry. | |||
Variable name | Type | Default value | |
int | 0x00FF00 | ||
The color of the wireframe. The default is 0x00FF00 (green). | |||
Variable name | Type | Default value | |
Boolean | false | ||
Enable LCD subpixel antialising of texts in the Chrome browser (more details). By default a gray-scale antialising is used. Even when enabled the LCD subpixel antialising works only when the textfield has an opaque / non-transparent background color (bgalpha=1.0). The setting is disabled by default to avoid an inconsistent text-display when some texts have a background and some not. |
|||
Variable name (read only) | Type | Default value | |
display.istransparent | Boolean | ||
Check if rendering with a transparent viewer background. | |||
Variable name (read only) | Type | Default value | |
display.currentfps | Number | ||
The current average framerate. | |||
Variable name (read only) | Type | Default value | |
display.refreshrate | Number | ||
The refreshrate of the display (e.g. typical values are 60, 30, 120). It can be different to the framerate, depending on the rendering or cpu load. |
|||
Variable name (read only) | Type | Default value | |
display.frame | int | ||
The current frame number. | |||
Variable name (read only) | Type | Default value | |
display.rframe | int | ||
The number of rendered/drawn frames. | |||
Variable name (read only) | Type | Default value | |
display.viewerwidth display.viewerheight |
int int |
||
The current size of the krpano viewer in CSS pixels. | |||
Variable name (read only) | Type | Default value | |
display.windowwidth display.windowheight |
int int |
||
The current size of the inner Browser window in CSS pixels. | |||
Variable name (read only) | Type | Default value | |
display.screenwidth display.screenheight |
int int |
||
The total size of the device screen in CSS pixels. | |||
Variable name (Javascript only) | Type | Default value | |
The HTML element where the krpano viewer is embedded. Given by the target embedding setting in the HTML file. |
|||
Variable name (Javascript only) | Type | Default value | |
The main HTML element of the krpano viewer. Can be used to add custom HTML elements to krpano, which handle their user interaction theirself. |
|||
Variable name (Javascript only) | Type | Default value | |
An inner HTML element of the krpano viewer, that handles the user-inputs (mouse, touch).
Has the size and position defined by the <area> settings. Can be used to add custom HTML elements to krpano. |
|||
Variable name (Javascript only) | Type | Default value | |
undefined | |||
Use a custom HTML element for the fullscreen mode. When set, the given HTML element will be used as fullscreen-element when requesting the fullscreen mode. By default the krpano viewer element itself will be used. This can be used to include custom HTML elements, that were put above, but hierarchically 'outside' the krpano viewer, also to the fullscreen mode. |
|||
Variable name (read only) | Type | Default value | |
display.layout.root display.layout.stage display.layout.bglayer display.layout.overlay display.layout.hotspots |
Array Array Array Array Array |
||
Arrays of 'root-level' layer elements:
|
|||
Function name | Type | ||
display.requestresize() | Action | ||
Request a resize of the viewer in the next frame. Forces a resize calculation even if the actual viewer size hasn't changed. Triggers also the onresize event. |
|||
Function name | Type | ||
display.layout.update() | Action | ||
Instantly process all changes and update the layout of all layer and hotspots elements. Normally that processing will done automatically in the next frame, but when certain layout results (e.g. pixel positions and sizes) are required now, that recalculation can be forced by this call. |
<control mode="drag" ☞ drag control draginertia="0.1" dragfriction="0.9" ☞ moveto control movetoaccelerate="1.0" movetospeed="10.0" movetofriction="0.8" ☞ keyboard control keybaccelerate="0.5" keybspeed="10.0" keybfriction="0.9" keybinvert="false" keybfovchange="0.75" keycodesleft="37" keycodesright="39" keycodesup="38" keycodesdown="40" keycodesin="" keycodesout="" keydownrepeat="true" ☞ mouse control mousefovchange="1.0" zoomtocursor="false" zoomtocursor_fovlimit="360.0" zoomoutcursor="true" disablewheel="false" panomousebuttons="1" layermousebuttons="1" eventmousebuttons="7" ☞ touch control touchzoom="true" trackpadzoom="true" capturetouch="true" ☞ settings for all control modes usercontrol="all" fovspeed="3.0" fovfriction="0.9" frictionstop="0.01" invert="false" bouncinglimits="false" />
Variable name | Type | Default value | |
control.mode | String | drag | |
---|---|---|---|
Set the control mode. Available settings:
|
|||
Variable name | Type | Default value | |
control.draginertia | Number | 0.1 | |
The inertia of the dragging control. The higher the value, the fewer the momentum of the view rotation when releasing the control. That setting applies to the drag and follow control modes. | |||
Variable name | Type | Default value | |
control.dragfriction | Number | 0.9 | |
The friction of the view rotation momentum of the dragging control mode. The lower the value, the quicker the movement will stop. That setting applies to the drag and follow control modes. | |||
Variable name | Type | Default value | |
Number | 1.0 | ||
The movement acceleration of the moveto control mode. The higher the value, the quicker the pano will start rotating. | |||
Variable name | Type | Default value | |
control.movetospeed | Number | 10.0 | |
The maximum moving / rotating speed of the moveto control mode. | |||
Variable name | Type | Default value | |
control.movetofriction | Number | 0.8 | |
The friction of the view rotation momentum of the moving control mode. The lower the value, the quicker the movement will stop. | |||
Variable name | Type | Default value | |
Number | 0.5 | ||
The acceleration of the keyboard / button controlled moving. |
|||
Variable name | Type | Default value | |
control.keybspeed | Number | 10.0 | |
The maximum moving speed of the keyboard / button controlled moving. | |||
Variable name | Type | Default value | |
Number | 0.9 | ||
The moving friction of the keyboard / button controlled moving. | |||
Variable name | Type | Default value | |
control.keybinvert | Boolean | false | |
Invert the keyboard / button up and down moves. | |||
Variable name | Type | Default value | |
Number | 0.75 | ||
The keyboard / button fov (zoom) change in degrees (=zoom sensibility). | |||
Variable name | Type | Default value | |
control.keycodesleft | String | "37" | |
Keyboard keycodes for moving left (separated by commas). Default="37" (arrow left) |
|||
Variable name | Type | Default value | |
control.keycodesright | String | "39" | |
Keyboard keycodes for moving right (separated by commas). Default="39" (arrow right) |
|||
Variable name | Type | Default value | |
control.keycodesup | String | "38" | |
Keyboard keycodes for moving up (separated by commas). Default="38" (arrow up) |
|||
Variable name | Type | Default value | |
control.keycodesdown | String | "40" | |
Keyboard keycodes for moving down (separated by commas). Default="40" (arrow down) |
|||
Variable name | Type | Default value | |
control.keycodesin | String | ||
Keyboard keycodes for zooming-in (separated by commas). Example: to allow zooming-in with the Shift-key, the A-key, and the Plus-key: keycodesin="16,65,107" |
|||
Variable name | Type | Default value | |
control.keycodesout | String | ||
Keyboard keycodes for zooming-out (separated by commas). Example: to allow zooming-out with the CTRL-key, the Y/Z-keys, and the Minus-key: keycodesout="17,89,90,109" |
|||
Variable name | Type | Default value | |
Boolean | true | ||
Enable or disable the auto-repeating of the onkeydown event when a key is hold down. The auto-repeating delay and repeating interval depends on the system keyboard settings. | |||
Variable name | Type | Default value | |
Number | 1.0 | ||
The mouse-wheel fov (zoom) change in degrees (=mouse-wheel zoom sensibility). | |||
Variable name | Type | Default value | |
Boolean | false | ||
When enabled and zooming in by the mouse-wheel the pano will zoom toward the position of the mouse cursor. | |||
Variable name | Type | Default value | |
Number | 360.0 | ||
Limit the zoomtocursor mode to panos that have a lower hfov. This can be used to use the zoomtocursor mode automatically only on partial panos. |
|||
Variable name | Type | Default value | |
Boolean | true | ||
When zoomtocursor and this setting are enabled and zooming out by the mouse-wheel the pano will zoom away from the position of the mouse cursor. Otherwise the pano will zoom away from the center of the screen. | |||
Variable name | Type | Default value | |
control.disablewheel | Boolean | false * | |
Disable mouse-wheel support. Note - when the mouse-wheel support is disabled and the webpage is a 'non-full-height-webpage' then using the mouse-wheel might scroll the page. * The default value depends on mwheel embedding setting. |
|||
Variable name | Type | Default value | |
control.panomousebuttons control.layermousebuttons control.eventmousebuttons |
int int int |
1 1 7 |
|
Define which mouse buttons ...
The values for these settings are bit-flags with combinations of:
|
|||
Variable name | Type | Default value | |
control.touchzoom | Boolean | true | |
Enable or disable the 2-finger zoom gesture. | |||
Variable name | Type | Default value | |
control.trackpadzoom | Boolean | true | |
Enable support for multi-touch-trackpad-gestures. When doing a zoom-gesture on a trackpad, the browser translates this internally to a mouse-wheel event with the CTRL-key pressed (more details here). And when the trackpadzoom setting is enabled, this case will be detected and mapped to a continuous zoom in the viewer. But a side-effect of this is that the mouse-wheel zooming behavior is different when using a normal mouse-wheel and holding the CTRL-key. So if mouse-wheel zooming while holding the CTRL-key should work normally, this setting would need to be disabled. But then also trackpad-zooming-gestures are not working correctly, so it is an individual trade off. |
|||
Variable name | Type | Default value | |
control.capturetouch | Boolean | true * | |
Capture touch events. Note - when disabled and the webpage is a 'non-full-height-webpage' then the touches might scroll the page. * The default value depends on capturetouch embedding setting. |
|||
Variable name | Type | Default value | |
control.usercontrol | String | all | |
User controls for changing the pano view:
|
|||
Variable name | Type | Default value | |
control.fovspeed | Number | 3.0 | |
The maximum fov change / zooming speed (for mouse-wheel and keyboard / button control). | |||
Variable name | Type | Default value | |
control.fovfriction | Number | 0.9 | |
The friction of fov (zoom) changes. | |||
Variable name | Type | Default value | |
control.frictionstop | Number | 0.01 | |
That setting is a relative factor that defines at what movement speed the movement should completly stop. The lower the value the smoother the movement will fade out. | |||
Variable name | Type | Default value | |
control.invert | Boolean | false | |
Invert the dragging / panning direction. | |||
Variable name | Type | Default value | |
Boolean | false | ||
Bounce back when hitting the panning or zooming limits (drag control only). |
<control mode.desktop="moveto" />
<control zoomtocursor="true" />
<control keycodesin="16,65,107" keycodesout="17,89,90,109" />
<cursors standard="default" dragging="move" moving="move" />
Variable name | Type | Default value | |
cursors.standard cursors.dragging cursors.moving |
String String String |
default move move |
|
---|---|---|---|
Select the native CSS mouse cursor for the current state. |
<autorotate enabled="false" waittime="1.5" accel="1.0" speed="10.0" horizon="0.0" tofov="off" oneroundrange="360.0" zoomslowdown="true" interruptionevents="userviewchange|layers|keyboard" />
Variable name | Type | Default value | |
autorotate.enabled | Boolean | false | |
---|---|---|---|
Enable / disable the automatic rotation. | |||
Variable name | Type | Default value | |
autorotate.waittime | Number | 1.5 | |
The time in seconds to wait after the last user-interaction before starting the automatic rotation. | |||
Variable name | Type | Default value | |
autorotate.accel | Number | 1.0 | |
The rotation acceleration in degrees/second. | |||
Variable name | Type | Default value | |
autorotate.speed | Number | 10.0 | |
The maximum rotation speed in degrees/second. Use a negative value for a rotation to left. |
|||
Variable name | Type | Default value | |
autorotate.horizon | Number | 0.0 | |
Move / rotate to the given horizon (0.0 = middle of the pano). Set the value to "off" or any other non-number value to disable it. |
|||
Variable name | Type | Default value | |
autorotate.tofov | Number | NaN | |
Zoom to the given field of view (fov). Set it to "off" or any other non-number value to disable it. |
|||
Variable name | Type | Default value | |
Number | 360.0 | ||
The degrees to automatically rotate before sending the onautorotateoneround event. | |||
Variable name | Type | Default value | |
Boolean | true | ||
Slow down the autorotation speed relative to the current zoom / field-of-view to get the same visual speed at all zoom distances. | |||
Variable name | Type | Default value | |
String | ... | ||
Variable name (read only) | Type | Default value | |
autorotate.isrotating | Boolean | false | |
Is the pano currently auto-rotating? | |||
Variable name (read only) | Type | Default value | |
autorotate.ispaused | Boolean | false | |
Is the auto-rotating currently paused? | |||
Function name | Type | ||
autorotate.start() | Action | ||
Enable and directly start the autorotation now (without autorotate.waittime). | |||
Function name | Type | ||
autorotate.stop() | Action | ||
Stop the current autorotation and disable it. | |||
Function name | Type | ||
autorotate.interrupt() | Action | ||
Stop/interrupt the current autorotation - same as an user interaction interrupt (and so will also interrupt the idletime for the onidle event). The autorotation itself will kept enabled and will start again after waittime seconds without user interaction. | |||
Function name | Type | ||
autorotate.pause() | Action | ||
Either pause the current autorotation,
or when the autorotation is currently not running, then don't start it as long as it is paused. E.g. could be used when the mouse hovers a hotspot to pause there. | |||
Function name | Type | ||
autorotate.resume() | Action | ||
Resume a previously paused autorotation. |
<autorotate enabled="true" />
<autorotate enabled="true" waittime="5.0" speed="-3.0" horizon="0.0" tofov="120.0" />
onclick="switch(autorotate.enabled);"
onclick="autorotate.start();"
onover="autorotate.pause();"
onout="autorotate.resume();"
<languages name="en" enterfullscreen="Fullscreen" exitfullscreen="Exit Fullscreen" ... /> <languages name="de" enterfullscreen="Vollbild" exitfullscreen="Vollbild Modus Beenden" ... /> <languages name="fr" enterfullscreen="Plein écran" exitfullscreen="Quitter le plein écran" ... />
<contextmenu enterfs="link:translate(enterfullscreen)" exitfs="link:translate(exitfullscreen)" >
text="link:event.onenterfullscreen,event.onexitfullscreen:fullscreen ? translate(exitfullscreen) : translate(enterfullscreen)"
<plugin>
<plugin api="NAME" ... />
<plugin api="soundinterface" url="soundinterface.js" ... />It is possible to link to it using the api name:
<layer ... height="link:soundinterface.volume,..." ...Instead of using the full plugin path:
<layer ... height="link:plugin[soundinterface].volume,..." ...
<layer>
<hotspot>
<layer name="..." ☞ basic settings type="image" url="..." keep="false" preload="false" style="" cssclass="" cssstyle="" ☞ layering, flowing parent="" childorder="0" zorder="0" flowchildren="" flowchildrenexpand="false" flow="true" flowexpand="false" flowoverflow="false" flowspacing="" childflowspacing="0" childmargin="0" enablechildren="true" scalechildren="true" maskchildren="false" ☞ user control enabled="true" capture="true" capturewheel="false" capturefocus="true" cursor="pointer" nativecontextmenu="false" tabindex="" ☞ appearance visible="true" alpha="1.0" autoalpha="false" ☞ position and size safearea="true" align="lefttop" edge="" x="0" y="0" ox="0" oy="0" width="" height="" minwidth="0" maxwidth="0" minheight="0" maxheight="0" autowidth="" autoheight="" scalemode="scale" scale="1.0" scalex="1.0" scaley="1.0" rotate="0.0" gridfit="true" gpu="true" ☞ image cropping crop="" onovercrop="" ondowncrop="" scale9grid="" ☞ background, borders and shadows bg="true" bgcolor="0x000000" bgalpha="0.0" bgborder="0" bgbordermode="outside" bgborderblend="true" bgroundedge="0" bgshadow="" bgcapture="false" ☞ background filters bgbrightness="1.0" bgcontrast="1.0" bgsaturate="1.0" bghue="0.0" bginvert="0.0" bgsepia="0.0" bgblur="0.0" ☞ foreground filters colorize="0xFFFFFF" colormatrix="" brightness="1.0" contrast="1.0" saturate="1.0" hue="0.0" invert="0.0" sepia="0.0" blur="0.0" dropshadow="" ☞ special layer type settings krpanobgcolor="" iframeurl="" html="" css="" htmlautosize="false" htmloverflow="hidden" htmllinkcolor="inherit" ☞ control events onover.addevent="" onhover.addevent="" onout.addevent="" ondown.addevent="" onup.addevent="" onclick.addevent="" onsingleclick.addevent="" ondoubleclick.addevent="" onwheel.addevent="" ontabindex.addevent="" onfocus.addevent="" onblur.addevent="" ☞ state events oncreate.addevent="" ondestroy.addevent="" onloaded.addevent="" onresize.addevent="" onlayout.addevent="" onaddchild.addevent="" onremovechild.addevent="" />
<hotspot name="..." ☞ basic settings type="image" url="..." keep="false" preload="false" style="" cssclass="" cssstyle="" ☞ spherical position ath="0.0" atv="0.0" depth="1000.0" prealign="false" ☞ 3D position torigin="world" tx="0.0" ty="0.0" tz="0.0" ☞ 3D rotation rotationorder="yxz" rx="0.0" ry="0.0" rz="0.0" oref="2" inverserotation="false" twosided="false" ☞ 2D/3D appearance zoom="false" distorted="false" zoomscalebase="1.0" flying="0.0" scaleflying="true" camroll="true" ☞ special WebGL rendering settings renderer="auto" mipmapping="false" premultipliedalpha="false" depthbuffer="false" depthwrite="true" depthoffset="0" ☞ special effects (WebGL only) blendmode="normal" alphachannel="auto" alphahittest="0.0" stereo="" chromakey="" ☞ special HTML/CSS3D rendering settings zorder2="1" ☞ layering, flowing parent="" childorder="0" zorder="0" childmargin="0" enablechildren="true" scalechildren="true" maskchildren="false" ☞ user control enabled="true" capture="true" capturewheel="false" capturefocus="true" cursor="pointer" nativecontextmenu="false" tabindex="false" hittest="false" ☞ appearance visible="true" alpha="1.0" autoalpha="false" blending="true" ☞ position and size edge="center" ox="0" oy="0" width="" height="" minwidth="0" maxwidth="0" minheight="0" maxheight="0" autowidth="" autoheight="" scalemode="scale" scale="1.0" scalex="1.0" scaley="1.0" rotate="0.0" gridfit="auto" ☞ image cropping crop="" onovercrop="" ondowncrop="" scale9grid="" ☞ background, borders and shadows bg="true" bgcolor="0x000000" bgalpha="0.0" bgborder="0" bgbordermode="outside" bgborderblend="true" bgroundedge="0" bgshadow="" bgcapture="false" ☞ control events onover.addevent="" onhover.addevent="" onout.addevent="" ondown.addevent="" onup.addevent="" onclick.addevent="" onsingleclick.addevent="" ondoubleclick.addevent="" onwheel.addevent="" ontabindex.addevent="" onfocus.addevent="" onblur.addevent="" ☞ state events oncreate.addevent="" ondestroy.addevent="" onloaded.addevent="" onresize.addevent="" onlayout.addevent="" />
<hotspot name="..." ☞ basic settings keep="false" style="" prealign="false" zorder="0" ☞ polygon type (filled area or line) polyline="false" ☞ polygon appearance fillcolor="0xAAAAAA" fillalpha="0.5" borderwidth="3.0" bordercolor="0xAAAAAA" borderalpha="1.0" bordergradient="" borderzoom="0.0" borderwidth3d="false" ☞ 3D position/rotation torigin="world" twosided="false" ☞ special WebGL rendering settings renderer="auto" depthbuffer="false" depthwrite="true" depthoffset="0" subdiv="false" borderhittest="false" ☞ special effects (WebGL only) blendmode="normal" ☞ special HTML/SVG rendering settings svglayer="below" ☞ user control enabled="true" capture="true" capturewheel="false" capturefocus="true" cursor="pointer" hittest="false" ☞ appearance visible="true" alpha="1.0" autoalpha="false" blending="true" ☞ control events onover.addevent="" onhover.addevent="" onout.addevent="" ondown.addevent="" onup.addevent="" onclick.addevent="" onsingleclick.addevent="" ondoubleclick.addevent="" onwheel.addevent="" ☞ state events oncreate.addevent="" ondestroy.addevent="" onloaded.addevent="" > ☞ coordinates for spherical points: <point ath="..." atv="..." /> <point ath="..." atv="..." /> <point ath="..." atv="..." /> ... ☞ coordinates for 3D hotspots (alternative to spherical): <point x="..." y="..." z="..."/ > <point x="..." y="..." z="..."/ > <point x="..." y="..." z="..."/ > ... </hotspot>
Global Variables (read only) | Type | Default value | ||||||||||
layer.count hotspot.count |
int int | 0 0 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
The total count of all layer/plugin or hotspot elements. Note - for traversing the elements hierarchically the display.layout Arrays can be used. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
name | String | |||||||||||
The name of the layer/hotspot element. Notes:
| ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
path | String | |||||||||||
The 'full path' for accessing / getting the element. E.g. layer[NAME] or hotspot[NAME]. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
index | int | |||||||||||
The Array index of the current layer/hotspot element. | ||||||||||||
Layer Variable (read only) | Type | Default value | ||||||||||
iscontainer | Boolean | false | ||||||||||
A boolean read-only variable to check if the element is container element. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
ishotspot | Boolean | false | ||||||||||
A boolean read-only variable to check if the element is a hotspot or a layer. Always false for layers, always true for hotspots. | ||||||||||||
Hotspot Variables (read only) | Type | Default value | ||||||||||
ispoly is3dpoly |
Boolean Boolean |
false false |
||||||||||
State variables to check if the hotspot is a polygonal hotspot or even a 3D polygonal hotspot. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
type | String | "image" | ||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
url | String | |||||||||||
The path/url to an image file. See also the url notes! All image formats that the browser supports can be used. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
keep | Boolean | false | ||||||||||
Should this element be kept or automatically removed when loading a new pano? Settings: true or false (default). This can be used to define a kind of 'global' elements that will be defined once and the stay there even when loading new stuff, or to define elements that should be 'local' only to the current pano/scene and automatically get removed when loading something else. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
preload | Boolean | false | ||||||||||
Preload the url before loading the pano and before executing any actions. This
can be used to force some element to be there and ready before everything else starts. Note - the onloaded event doesn't work / can't be used when preloading is enabled! | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
cssclass | String | |||||||||||
Assign CSS styles from one or more CSS classes to the element. The setting is a space-separated list of CSS classes (same as in html). Limitations when using the cssclass setting:
Note - for defining CSS styles/classes directly in the xml file, the <cssstyles> element can be used. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
cssstyle | String | |||||||||||
Directly set CSS styles to the element. Note - some CSS styles might already be set or be used by other layer settings. And using styles that would change the position or size are not recommended, they could break the krpano controlled layout. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
renderer | String | "auto" | ||||||||||
Select the renderer for displaying the hotspot. Possible settings:
| ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
parent | String | |||||||||||
Assign the element to be a child element of an other layer or hotspot element. Syntax:
Beside of using other layers or hotspots there are these special parent settings:
Notes:
| ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
childorder | int | 0 | ||||||||||
A setting to sort the children layers within a parent element.
Any integer numbers can be used.
Layers with higher numbers will above layers with lower numbers. When changing this setting, then in the next processing loop all children elements of the parent element will get sorted by their given childorder values. This order will affect the flowing- and draw/stacking-order. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
zorder | int | 0 | ||||||||||
A setting to change the draw/render-order.
Any integer numbers can be used.
Elements with higher numbers will above elements with lower numbers. The layers can be only sorted within their parent-layer. Moving a children-layer out or above the parent layer is not possible. Different to the childorder setting, this will only effect the draw-order, but not sort the elements within a parent and so have no effect on the flowing order of children elements. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
zorder2 | int | 1 | ||||||||||
A special setting for Safari / Apple-Webkit-based browsers. These browsers have a special and unique behavior when rendering CSS 3D-elements, they are always rendering these elements with a 'z/depth-buffer' and ignoring the CSS-zindex. The setting is only relevant for non-distorted CSS-rendered hotspots and only when mixing them with distorted CSS-rendered hotspots:
| ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
flowchildren | String | "" | ||||||||||
Enable an automatic flowing / ordering of children layers:
Features:
Parent related settings: flowchildren, flowoverflow, childflowspacing, childmargin. Child related settings: flow, flowexpand, flowspacing. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
flowchildrenexpand | Boolean | false | ||||||||||
Expand the flowing children elements to the parent size (in the non-flowing direction). E.g. to give all vertical flowing elements the same width. Note - this can't be used together with flowoverflow=true. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
flow | Boolean | true | ||||||||||
Enable automatic flowing / ordering within the parent layer (has only an effect when the parent layer has the flowchildren setting enabled). When enabled the layer position (the x and y settings) will be automatically calculated and updated depending on the other children layers within the parent. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
flowexpand | Boolean | false | ||||||||||
When enabled the width or height of the layer (depending on the flowchildren setting of the parent layer)
will automatically be adjusted to fit the remaining / available space within the parent layer.
The parent layer need to have a given size for this (no auto / self-adjusting size of the parent). When multiple layers have the flowexpand setting enabled, the available space will be divided proportionally based on their given width or height value (regardless if an absolute or percent value). | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
flowoverflow | Boolean | false | ||||||||||
Should children layers automatically 'overflow' to the next row or column when reaching the width or height of the parent layer. | ||||||||||||
Layer Attributes | Type | Default value | ||||||||||
childflowspacing flowspacing |
String String |
"0" "" |
||||||||||
Set the spacing / distances between flowing layers in pixels. The childflowspacing is a setting at the parent and affects all children layers and the flowspacing setting is at the child to overwrite the parent childflowspacing setting and set an individual spacing. When flowspacing is set to "" or null, then the value from the parent layer's childflowspacing setting is used. Syntax: 1 to 4 space-separated values: flowspacing="allsides" flowspacing="topbottom leftright" flowspacing="top leftright bottom" flowspacing="top right bottom left" The spacing will be only between the flowing layers. For a spacing around all children layers the childmargin setting can be used. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
childmargin | String | "0" | ||||||||||
Add a marging / space around all children layer elements in pixels.
As a result, the space available for the children layers is correspondingly smaller. Syntax: 1 to 4 space-separated values: childmargin="allsides" childmargin="topbottom leftright" childmargin="top leftright bottom" childmargin="top right bottom left" | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
enablechildren | Boolean | true | ||||||||||
Enable the children elements of the current element to be active. When disabled the children elements will be inactive and don't receive any user events like clicks or touches. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
scalechildren | Boolean | true * | ||||||||||
Should children layer elements also get scaled when the layer itself gets scaled. Note - the default value depends on the version set in the xml! When the version is 1.21 or higher, then the default is true. For older versions the default is false. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
maskchildren | Boolean | false | ||||||||||
When set to true then children elements that are outside the boundaries of the current element will be clipped / masked out. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
enabled | Boolean | true | ||||||||||
Enables or disable the layer/hotspot. When disabled the element will be inactive and don't receive any user events like clicks or touches. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
capture | Boolean | true | ||||||||||
Capture the user events. When disabled, elements below the current element will receive the user events too. This could be used to click on an element and still be able to control the pano below it. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
capturewheel | Boolean | false * | ||||||||||
Should mouse-wheel events by captured by this element? * for type="html", type="iframe" or type="krpano" elements, the default is true! See also the onwheel event. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
capturefocus | Boolean | true | ||||||||||
Capture the input/keyboard focus when clicking or touching on the element. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
cursor | String | "pointer" | ||||||||||
Use a custom mouse cursor when hovering the element. Any CSS cursor setting can be used, although the exact appearance and support depends on the browser and the system. Common settings:
| ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
hittest | Boolean | false | ||||||||||
Use the hotspot for 3D-hit-testing (raycasting),
e.g. when doing 3D-collision-tests or 3D-measurements. Works only for distorted hotspots and for polygonal hotspots with WebGL rendering. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
nativecontextmenu | Boolean | false | ||||||||||
When enabled the browsers native/default contextmenu will appear when right-clicking (or long-touching) on the element. Note - this works only when the capture setting is also set to true! | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
tabindex | Integer | null | ||||||||||
Make the layer sequentially focusable by using the Tab-key.
When the focused layer gets activated by using the Enter-key, then either the ontabindex event will be triggered (only when it is set) - or the normal ondown (as long as holding the Enter key), onup and onclick (when releasing the Enter key) events. When enabled (set to valid value), then the onfocus and onblur events will get triggered when the focus changes. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
visible | Boolean | true | ||||||||||
Visibility of the element. When set to false, the element will be not shown and also not be processed. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
alpha | Number | 1.0 | ||||||||||
Alpha transparency of the element:
From 0.0 = fully transparent to 1.0 = fully visible. Note - even when set to 0.0 - the element will be still there and interactive - to hide it completely set the visible setting to false! | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
autoalpha | Boolean | false | ||||||||||
Change the visible setting automatically depending on the alpha value. When enabled the visible setting will be automatically set to false when alpha is 0.0 and back to true when alpha is greater then 0.0. This could be used when tweening the alpha value and the element should automatically become inactive once fully transparent. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
blending | Boolean | true | ||||||||||
Set if the hotspot should be rendered during the pano/scene blending. When disabled and keep is false, then the hotspot will get instantly removed when loading another pano. When enabled, the hotspot will be kept and still be rendered during the blending and then removed when the blending is done. The hotspot will get renamed (by adding "_blending" plus a unique number to its name) during the blending to avoid naming-conflicts with new added hotspots. The isblending variable can be used to check if the hotspot is currently in this blending state. For hotspots that are getting constantly updated (even during blending) and are independent of the pano/scene, this setting can be disabled to avoid side-effects. | ||||||||||||
Hotspot Variable (read only) | Type | Default value | ||||||||||
isblending | Boolean | false | ||||||||||
A variable to check if the hotspot is currently used for the pano/scene-blending. That means this hotspot is going to be automatically removed once the blending is done. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
blendmode | String | "normal" | ||||||||||
Hotspot blending / mixing mode. Supported settings with WebGL rendering:
| ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
svglayer | String | "below" | ||||||||||
Define 'where' polygonal hotspots with renderer="svg" (non-WebGL) should be drawn. Available settings:
| ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
alphachannel | String | "auto" | ||||||||||
Setup the alpha-channel / transparency-channel usage and source for the hotspot. For images and videos. Usage case: there is currently no browser-support for transparent videos, so as alternative a video with the alpha-channel as extra image on the right (Side-by-Side) or at the bottom (Top-Bottom) can be used. Available settings:
Note - The setting need to set once on loading the image/video, changing it later at runtime will not work. Here an Example with using a SBS-image and TB-video. Only available for WebGL rendering. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
alphahittest | Number | 0.0 | ||||||||||
Use the actual alpha value of the hotspot image for hit-testing. When set to a value higher than 0.0, then the alpha-value from the pixel where the cursors hits the hotspot is compared to the alphahittest value - and when larger, the mouse-over will be detected as hit. Works for images, textfields, videos - and supports also the alphachannel and chromakey settings. Only available for WebGL rendering. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
chromakey | String | |||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
mipmapping | Boolean | false | ||||||||||
Should the hotspot image get mip-mapped during rendering (to avoid aliasing when being rendered in a scaled-down format). When enabled, this works only when the pixel-sizes (width and height) of the hotspot image are power-of-two sizes (e.g. 256, 512, 1024, ...). Only available for WebGL rendering. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
premultipliedalpha | Boolean | false | ||||||||||
Indicate that the colors of the image are 'pre-multiplied' with the alpha channel. Only available for WebGL rendering. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
safearea | Boolean | true | ||||||||||
Should the layer be relative to the safe-area of the display or to the full-display-area. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
align | String | * | ||||||||||
Alignment position / origin-point of the element. Possible values:
* The default value:
Note - on hotspots this setting has only an effect when using flying. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
edge | String | * | ||||||||||
Edge position / anchor-point of the element. Possible values:
* The default value:
| ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
x y |
String String |
"0" "0" |
||||||||||
The x, y position / offset of the layer.
| ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
ath atv depth |
Number Number Number |
0.0 0.0 1000.0 |
||||||||||
Spherical coordinates in degrees and a depth-distance in cm to define the position of the hotspot in 3D-space. For normal panos the depth value could be ignored, but for stereo- or 3D-panos it can be used to define an actual 3D-position. The larger the depth value, the farther away the hotspot is. For VR/stereo-rendering there exists a special case: when the hotspot should be drawn at 'infinity' distance without any stereo-separation (like a normal, non-stereo, non-depthmapped pano image), then an 'invalid' Number value (e.g. a String) need be used as the depth value, e.g. depth="off". As alternative for using ath/atv+depth to define the 3D-position, it is also possible to set depth to 0.0 and then use the tx/ty/tz settings for defining an XYZ-based 3D-position. | ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
prealign |
Boolean | false | ||||||||||
Apply the image.prealign rotation also to the hotspot. | ||||||||||||
Layer / Hotspot Attributes | Type | Default value | ||||||||||
ox oy oref |
String String int |
"0" "0" 2 |
||||||||||
An additional x, y position offset.
The oref setting defines the reference for the offsets (distorted hotspots only): | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
torigin | String | "world" | ||||||||||
The hotspot translation origin - that means to what reference the tx/ty/tz translation is relative to. Available settings:
| ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
tx ty tz |
Number Number Number |
0.0 0.0 0.0 |
||||||||||
Hotspot 3D translation offsets (will be added to the spherical ath/atv/depth position). For directly using an absolute 3D position set the depth setting to 0.0! | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
twosided | Boolean | true | ||||||||||
Should the hotspot be visible from both sides (front and back). Relates to hotspots with a 3D position and/or 3D rotations. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
flying | Number | 0.0 | ||||||||||
Let the hotspot 'fly' from its current pano/3D-position (0.0) to a screen-space-based position and projection (1.0). The 'flying'-hotspot will get aligned at the given align position. WebVR notes: in VR the the flying will always get aligned in the center, because there are no 'edges' or 'screen-borders' in VR. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
scaleflying | Boolean | true | ||||||||||
Scale the hotspot from 'pano-space-size' to 'screen-space-size' when flying out. WebVR notes: for VR usage it would be recommended to disable that setting, because in VR there is no real 'screen-space' or 'screen-size'. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
camroll | Boolean | true | ||||||||||
Should non-distorted hotspots be affected by view.camroll rotations? | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
width height |
String String |
null null |
||||||||||
The size of the element:
| ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
autowidth autoheight |
Boolean Boolean |
|||||||||||
Explicitly set if auto-sizing should be used, or check if auto-sizing is currently used. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
minwidth maxwidth minheight maxheight |
Number Number Number Number |
0 0 0 0 |
||||||||||
Limit the resulting element size. Only absolute pixel values are possible for these settings. When the value for a min/max setting is 0, it will be disabled/ignored. Dynamic changes of these settings will not trigger an instant update of the element. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
loaderwidth loaderheight |
int int |
|||||||||||
These variables contain the original unscaled pixel size of the loaded url image. These information are first available after the onloaded event. | ||||||||||||
Layer / Hotspot Variables (read only) | Type | Default value | ||||||||||
sourcewidth sourceheight |
int int |
|||||||||||
These variables contain the original unscaled pixel size for the element. This can be size of a cropped-image or the size from a container element. These information are first available after the onloaded event. | ||||||||||||
Layer / Hotspot Variables (read only) | Type | Default value | ||||||||||
pixelwidth pixelheight |
Number Number |
|||||||||||
These variables contain the final pixel size of the element (within the scaling of its parent element). Note - these values don't get updated immediately when changing any related variables, the update happens after a redraw (e.g. in the next frame) or when manually calling display.layout.update(). | ||||||||||||
Layer Variables (read only) | Type | Default value | ||||||||||
pixelx pixely |
Number Number |
|||||||||||
These variables contain the final pixel position of the element (within the scaling of its parent element). Note - these values don't get updated immediately when changing any related variables, the update happens after a redraw (e.g. in the next frame) or when manually calling display.layout.update(). | ||||||||||||
Layer Variables (read only) | Type | Default value | ||||||||||
stagex stagey |
Number Number |
|||||||||||
Get the left-top pixel-position on the screen. Note - these values don't get updated immediately when changing any related variables, the update happens after a redraw (e.g. in the next frame) or when manually calling display.layout.update(). | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
scalemode | String | "scale" * | ||||||||||
Define the behavior of the scale settings:
Note - the default value depends on the version set in the xml! When the version is 1.21 or higher, then the default is "scale". For older xml files the default is "sizescale". | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
scale scalex scaley |
Number Number Number | 1.0 1.0 1.0 | ||||||||||
Scaling of the element. Use scale to set the scale for the x and y axis at once or scalex and scaley to set them individually. | ||||||||||||
Layer Variables (read only) | Type | Default value | ||||||||||
childscalex childscaley |
Number Number | |||||||||||
The scaling that will get applied to children layer elements. Depends on the combined scale and scalechildren settings from all parent layers. Could be used e.g. via parentobject.childscalex to convert screen-based x/y coordinates or sizes to layer relative ones. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
zoom | Boolean | false | ||||||||||
Change the size of the hotspot when zooming or keep a fixed/absolute size? | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
distorted | Boolean | false | ||||||||||
Should the hotspot image be distorted in the 3D space together with the current pano/viewing distortion.
When distorted use the rotationorder and rx / ry / rz settings
to rotate the hotspot in 3D space. Note - When enabled, a size of 1000 pixels will be used as reference for pixel sizes. And this 1000 pixels are covering a field of view of 90 degrees in 3D space. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
zoomscalebase | Number | 1.0 | ||||||||||
This is an additional scale factor, but only for hotspots with zoom=true. This could be used for hotspots on flat panos to adpot their size to the flat pano rendering (which is using a very small view fov), while keeping the same scale values as for zoom=false hotspots. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
rotate | Number | 0.0 | ||||||||||
Rotation of the element in degrees. The rotation is done around the edge point. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
rotationorder | String | "yxz" | ||||||||||
Define the order of the distorted hotspot 3D rx / ry / rz rotations. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
rx ry rz |
Number Number Number |
0.0 0.0 0.0 |
||||||||||
3D rotation for distorted hotspots in degrees over the X / Y / Z axes. The order of the rotations can be defined by the rotationorder setting. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
inverserotation | Boolean | false | ||||||||||
Inverses the rotation and the axis order of the rx / ry / rz settings. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
gridfit | String | * | ||||||||||
Pixel-grid-fitting. When enabled, the pixel positions and sizes will be rounded to the nearest full pixel coordinates. This can avoid a blurry displaying, especially when the coordinates, sizes or scales are not integer values. Typically pixel-grid-fitting is recommended, but for smoother animations (especially zooming/scaling animations) it can be better to disable it. Possible settings (*):
Note - some browsers don't support sub-pixel-precise coordinates and therefore automatically do a kind of pixel-grid-fitting. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
gpu | Boolean | true | ||||||||||
When enabled (the default) the resulting position on the screen will be set by CSS transforms.
That should allow hardware-accelerated rendering and be also faster to calculate by the browser because this doesn't cause HTML layout changes. When disabled, the resulting position will by set by CSS left/top absolute position settings. Rotation and scaling will be not supported in this case. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
stereo | String | |||||||||||
Define if the hotspot image is a stereoscopic image (WebGL only). Possible settings:
| ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
depthbuffer depthwrite |
Boolean Boolean |
false true |
||||||||||
depthbuffer - use the depth-buffer for the hotspot-rendering (WebGL only). When enabled the hotspots can intersect with other hotspots (that also have depthbuffer=true) and the 3D-model/depthmap-geometry. depthwrite - additionally to checking for the depth-intersection also write the resulting new depth of the hotspot to the depthbuffer. Can be used for decals that were rendered on top of something else but shouldn't change the depthbuffer itself. Note - depth-buffered hotspot-rendering is only possible when using Depthmap-panos or enabling the display.depthbuffer setting. | ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
depthoffset | Number | 0.0 | ||||||||||
Add an 'offset' to the rendering-depth. This can be used to render a hotspot above (or behind) a 3D-model, even when they use the same 3D-space. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
crop onovercrop ondowncrop |
String String String |
|||||||||||
Crop / cut out a rectangular area of the source image. Usefull to use only one single image
for serval image elements. onovercrop / ondowncrop - different crop areas for mouse over and mouse button down states. Syntax: crop="x-position|y-position|width|height" | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
scale9grid | String | |||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
bg | Boolean | true | ||||||||||
Use a background shape (only for containers and textfields). Setting bg=false is the same as setting bgalpha to 0.0. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
bgcolor | int | 0x000000 | ||||||||||
Background color for containers and textfields. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
bgalpha | Number | 0.0 / 1.0 | ||||||||||
Alpha transparency of the background color. The default it 0.0 for container layers and 1.0 for textfield layers. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
bgborder bgbordermode bgborderblend |
String String Boolean |
"0" "outside" true |
||||||||||
Add borders around the element. Syntax: bgborder="widths color alpha style" Parameters:
Additional settings:
| ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
bgroundedge | String | "0" | ||||||||||
Define rounded edges for the element. A value sets the edge rounding radius in pixels. Four values can be set, one for each edge (separated by space characters). They are given in the order: top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
bgshadow | String | |||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
bgcapture | Boolean | false | ||||||||||
Capture user events on the background shape. This would need to be enabled to make an container element itself active and clickable. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
bgbrightness bgcontrast bgsaturate bghue bginvert bgsepia bgblur |
Number Number Number Number Number Number Number |
1.0 1.0 1.0 0.0 0.0 0.0 0.0 |
||||||||||
Background Filters (CSS Backdrop Filters) Apply graphical effects such as blurring or color shifting to the area behind the element. Because it applies to everything behind the element, to see the effect the background must be at least partially transparent (see bgalpha). | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
colorize colormatrix brightness contrast saturate hue invert sepia blur dropshadow |
int String Number Number Number Number Number Number Number String |
0xFFFFFF 1.0 1.0 1.0 0.0 0.0 0.0 0.0 |
||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
polyline | Boolean | false | ||||||||||
Draw a line-polygon instead a filled-polygon. The start and end points will not be joined. | ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
fillcolor fillalpha |
int Number |
0xAAAAAA 0.5 |
||||||||||
The fill-color and alpha (transparency) of a polygonal hotspot area. | ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
borderwidth bordercolor borderalpha |
Number int Number |
3.0 0xAAAAAA 1.0 |
||||||||||
The width, the color and the alpha (transparency) of a polygonal hotspot border line. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
bordergradient | String | |||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
borderzoom | Number | 0.0 | ||||||||||
Should the borderwidth line zoom/scale when zooming in the pano?
| ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
borderwidth3d | Boolean | false | ||||||||||
Should the borderwidth change itself depending its the 3D-position. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
borderhittest | Boolean | false | ||||||||||
Should the border line also be used for hit-testing? By default this is disabled for performance reasons and should be only enabled for hotspots that especially need this. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
subdiv | Boolean | false | ||||||||||
Enable or disable sub-division of the polygonal shape. Sub-division will be necessary when using distorted projections (fisheye/stereographic views). Disabling can slightly improve the initial setup time for the hotspot when using very large polygons. | ||||||||||||
Hotspot Attribute | Type | Default value | ||||||||||
point.count | int | 0 | ||||||||||
Number of polygon points. | ||||||||||||
Hotspot Point Attributes | Type | Default value | ||||||||||
point[...].ath point[...].atv |
Number Number |
|||||||||||
Spherical coordinates in degrees for a polygonal hotspot point. | ||||||||||||
Hotspot Point Attributes | Type | Default value | ||||||||||
point[...].x point[...].y point[...].z |
Number Number Number |
|||||||||||
3D coordinates for a 3D polygonal hotspot point. Notes:
| ||||||||||||
Hotspot Attributes | Type | Default value | ||||||||||
points points3d |
String String |
|||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
krpanobgcolor | int | |||||||||||
Set a background color as hex-color value (e.g. 0xFFFFFF for white) for an embedded krpano viewer (type=krpano). By default (when this setting is not set) a transparent background is used. But when transparency is not required, a background color should be set! A non-transparent background allows faster rendering and requires fewer GPU memory. Additionally a non-transparent background allows using all pano-blending-modes. | ||||||||||||
Layer Variable | Type | Default value | ||||||||||
krpanoembedsettings | Object | |||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
krpano | Object | null | ||||||||||
The direct krpano API of a krpano layer. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
iframeurl | String | |||||||||||
The iframe url for an iframe layer. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
iframe | HTML-Element | null | ||||||||||
The iframe HTML-element of an iframe layer. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
html | String | |||||||||||
The raw HTML code string for the html layer. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
css | String | |||||||||||
CSS styles (direct styles, no CSS declarations) for the html layer. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
htmlautosize | Boolean | false | ||||||||||
Should the layer automatically resize itself depending on the html content? | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
htmloverflow | String | "hidden" | ||||||||||
Html layer content overflow. Settings:
Note - can be only used when htmlautosize is set to false. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
htmllinkcolor | String | "inherit" | ||||||||||
The default color of <a href="..."> links in
textfields and HTML-layers.
| ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
htmlelement | HTML Element | |||||||||||
The HTML-element of a html layer. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
rawEvent | Event Object | |||||||||||
The rawEvent Object provides access to the original Javascript Event
that was sent by the browser when a certain event get triggered (for usage in Javascript code). E.g. a layer onclick event could be caused by a Javascript mouseup Mouse-Event or by touchend or pointerup Touch-Events or even a WebXR select Event when triggered by a VR-conroller. This could be used for checking additional properties, e.g. like if the shiftKey is currently also pressed when clicking somewhere. Note - when there is no actual browser event, e.g. for 'synthetic' over/out events for WebGL hotspots, then the rawEvent object is set to null. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
loading | Boolean | false | ||||||||||
A boolean variable that indicates that the given url file is still loading. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
loaded | Boolean | false | ||||||||||
A boolean variable that indicates that the given url file has been loaded. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
loadedurl | String | |||||||||||
The parsed full url of the currently loaded url file. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
ready | Boolean | false | ||||||||||
A boolean variable that indicates that the element is 'ready' for layout. This is the case when the element either has a predefined size (using width, height or crop), or when the element is loaded and has a known size from the loaded image. | ||||||||||||
Hotspot Variable | Type | Default value | ||||||||||
needredraw | Boolean | false | ||||||||||
A boolean variable that indicates that the hotspots need to be redrawn. Could be manually set to true to request a recalculation and a redraw of the hotspot. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
hovering | Boolean | false | ||||||||||
Is the mouse cursor currently over the element? | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
pressed | Boolean | false | ||||||||||
Was the mouse-button or the touch-screen pressed on the element and is still pressed? | ||||||||||||
Layer / Hotspot Variable | Type | Default value | ||||||||||
stopeventflow | Boolean | false | ||||||||||
A dynamic setting to stop the current event flow. It is always false by default and can be changed only in the onover or ondown events. When set to true, the current event flow will be stopped and further elements will not receive this event. | ||||||||||||
Layer / Hotspot Variables (read only) | Type | Default value | ||||||||||
hitx hity hitd |
Number Number Number |
|||||||||||
The relative 'hit-point' of the mouse or touch-point inside the element when hovering or pressing it.
The value range for hitx and hity is from 0.0 to 1.0 and from top-left to bottom-right. The variable hitd is the 3D-distance from the hit-point to the screen (hotspots only). Limitation: These hitpoint information are only available for layers and for WebGL-rendered hotspots (not for CSS3D-rendered hotspots). | ||||||||||||
Hotspot Variables (read only) | Type | Default value | ||||||||||
hit | Object | |||||||||||
An object with information about the current 3D hitpoint on the hotspot
(the same hit object as from a
raycast call). The object should be only checked on direct interactions, e.g. in the ondown or onclick events. Properties:
Note: These hitpoint information are only available for WebGL-rendered hotspots and only when hittest is enabled. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onover | Action Event | |||||||||||
Actions / functions that will be called when the mouse moves over the element. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onhover | Action Event | |||||||||||
Actions / functions that will be called in intervals (once per frame) when the mouse stays over (hovers) the element. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onout | Action Event | |||||||||||
Actions / functions that will be called when the mouse moves out of the element. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
ondown | Action Event | |||||||||||
Actions / functions that will be called when the mouse-button or the touch-screen will be pressed down on the element. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onup | Action Event | |||||||||||
Actions / functions that will be called when the previously pressed mouse-button or touch-screen will be released. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onclick | Action Event | |||||||||||
Actions / functions that will be called when there is a mouse click or touch on the element. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onsingleclick ondoubleclick |
Action Event Action Event |
|||||||||||
| ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onwheel | Action Event | |||||||||||
Actions / functions that will be called when using the mouse-wheel over the element. The delta of the mouse-wheel usage will be stored in the wheeldelta and wheeldelta_raw variables. See also the capturewheel setting. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
ontabindex | Action Event | |||||||||||
This event will be called when layer has a tabindex setting,
got focused by using the Tab-key and then the Enter-key is pressed. When this event is not set, then the normal ondown (as long as holding the Enter key) and onup and onclick (when releasing the Enter key) events are called instead. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onfocus onblur |
Action Event Action Event | |||||||||||
Actions / functions that will be called when the elements gets or loses the focus. Only for elements that have a tabindex set or for editable-textfields. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
oncreate ondestroy |
Action Event Action Event | |||||||||||
Actions / functions that will be called when the element will be created or destroyed. Could be used for initializing or cleaning up. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onloaded | Action Event | |||||||||||
Actions / functions that will be called when either the loading of the url is done or when the layer is ready for usage. | ||||||||||||
Layer / Hotspot Attribute | Type | Default value | ||||||||||
onresize | Action Event | |||||||||||
Actions / functions that will be called when the size of the element has been changed. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
onlayout | Action Event | |||||||||||
Actions / functions that will be called when the layout (position, size, scale, ...) of the layer has been changed. | ||||||||||||
Layer Attribute | Type | Default value | ||||||||||
onaddchild onremovechild | Action Event Action Event | |||||||||||
Actions / functions that will be called when children layer elements will be added or removed. When assigning a Javascript function, the first argument is the parent layer and the second the child layer that was added or removed: function(parent, child){ ... } | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
loader | HTML Image | null | ||||||||||
A HTML Image element. Only when url is set to an image file and that image is loaded. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
sprite | HTML Element | null | ||||||||||
HTML DOM element (div) of the layer element. | ||||||||||||
Layer Variable (read only) | Type | Default value | ||||||||||
parentobject | layer | null | ||||||||||
A direct reference to the parent layer or hotspot object. Only available when a parent setting is set. | ||||||||||||
Layer / Hotspot Variable (read only) | Type | Default value | ||||||||||
childobjects | Array | [] | ||||||||||
A Value Array of layers that were added as children elements to this layer. | ||||||||||||
Add additional events | ||||||||||||
As xml attribute:
eventname.addevent="eventcode"As dynamic call from actions:
layer[name].addevent(eventname, eventcode)hotspot[name].addevent(eventname, eventcode) |
||||||||||||
Layer / Hotspot Function | Type | |||||||||||
removeevent(eventname, eventcode) | Action | |||||||||||
Remove an event listener. | ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
triggerevent(eventname) | Action | |||||||||||
Trigger and process the given event on the element (the direct assigned one and the ones added by addevent). Parameter:
| ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
loadstyle(styles) | Action | |||||||||||
Copy/load the attributes from one or more <style> elements. Parameter:
| ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
linkstyle(styles) | Action | |||||||||||
Link the attributes from one or more <style> elements. Parameter:
| ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
registercontentsize(width,height) | Action | |||||||||||
The registercontentsize action can be used to set / register the 'original / source / unscaled' size of the element. For Javascript Plugins that want to draw custom stuff this function call is necessary to set the source size because Javascript Plugins don't have any information about their size by default. | ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
resetsize() | Action | |||||||||||
An action to set the width and height values back to the source size of the loaded image. This can be used after changing the url value to get the size of the new loaded image. | ||||||||||||
Layer Function | Type | |||||||||||
changealign(align,edge) | Action | |||||||||||
An action to change the alignment and edge of a layer element without changing its current position. The x/y values will be recalculated to keep the current position. | ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
remove(removechildren*) | Action | |||||||||||
Removes the layer element. Parameter:
The same as a removelayer(name, true) call. | ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
z = element.getchildzorder("min" or "max") | Action | |||||||||||
Get the smallest ("min") or the largest ("max") zorder value from the
children elements. This could be used to put a certain element below or above all current elements. | ||||||||||||
Layer / Hotspot Function | Type | |||||||||||
xmlstring = element.getxml(settings) | Action | |||||||||||
Generates a XML String representation of the element. Parameter: settings (optionally) - an Object with the following properties:
| ||||||||||||
Hotspot Function | Type | |||||||||||
p = hotspot.getcenter() | Action | |||||||||||
The function returns the center (in spherical coordinates) of a polygonal hotspot. The returned object has x,y,z properties, where x ≘ ath, y ≘ atv and z ≅ fov. | ||||||||||||
Hotspot Function | Type | |||||||||||
n = hotspot.getnormalvec() | Action | |||||||||||
The function returns the normal vector of the hotspot
(only for distorted hotspots). The returned object has x,y,z properties. |
<events onenterfullscreen="" onexitfullscreen="" onxmlcomplete="" onpreviewcomplete="" onloadcomplete="" onblendstart="" onblendcomplete="" onnewpano="" onremovepano="" onnewscene="" onremovescene="" onxmlerror="" onloaderror="" onkeydown="" onkeyup="" onclick="" onsingleclick="" ondoubleclick="" ondown="" onup="" onwheel="" ongesture="" oncontextmenu="" onidle="" onidleend="" onframe="" onviewchange="" onviewrender="" onviewchanged="" onviewloaded="" onviewreloading="" onresize="" onframebufferresize="" ondisplaystereochange="" oncreateelement="" ondestroyelement="" onparentchange="" onlayoutgraphchanged="" onautorotatestart="" onautorotatestop="" onautorotateoneround="" onautorotatechange="" oniphonefullscreen="" gyro_onavailable="" gyro_onunavailable="" gyro_onenable="" gyro_ondisable="" webvr_onavailable="" webvr_onunavailable="" webvr_onunknowndevice="" webvr_onentervr="" webvr_onexitvr="" />
<events name="..." keep="false" ... any events ... />
Variable name | Type | Default value | |
events[...].name | String | ||
---|---|---|---|
|
|||
Variable name | Type | Default value | |
events[...].keep | Boolean | false | |
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event Action Event |
|||
|
|||
Variable name | Type | ||
events.onkeydown | Action Event | ||
|
|||
Variable name | Type | ||
events.onkeyup | Action Event | ||
|
|||
Variable name | Type | ||
events.onclick | Action Event | ||
|
|||
Variable name | Type | ||
Action Event Action Event |
|||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
events.onup | Action Event | ||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
events.onidle | Action Event | ||
|
|||
Variable name | Type | ||
events.onidleend | Action Event | ||
|
|||
Variable name | Type | ||
events.onframe | Action Event | ||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event Action Event |
|||
|
|||
Variable name | Type | ||
events.onresize | Action Event | ||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event Action Event |
|||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
|||
Variable name | Type | ||
Action Event | |||
|
<action name="..." scope="" args="" autorun=""> action1(); action2(); ... </action>
<action ... args="var1, var2, var3">
<action name="..." type="Javascript" args="" autorun=""><![CDATA[ ... Javascript code ... ]]></action>
Variable name | Type | Default value | |
action[name].name | String | ||
---|---|---|---|
Name of the action. (see the name notes) When no name will be set, an automatic generated name will be used (e.g. could be used for autorun actions that will never be called directly). |
|||
Variable name | Type | Default value | |
action[name].type | String | ||
The type of the krpano action:
|
|||
Variable name | Type | Default value | |
action[name].usestrictjs | Boolean | ||
Explicitly enable or disable the Javascript Strict Mode for this action. When not set, the global usestrictjs setting is used as default. |
|||
Variable name | Type | Default value | |
action[name].scope | String | ||
Define the scope for the new generated variables in the action:
Notes:
Predefined variables in local scope actions:
|
|||
Variable name | Type | Default value | |
action[name].args | String | ||
Variable name | Type | Default value | |
action[name].autorun | String | ||
Should the action run automatically on start. Possible settings:
Note - the automatic running of "onstart" actions can be also controlled by the NOAUTORUN load-flag and the includexml() / includexmlstrings() actions! |
|||
Variable name | Type | Default value | |
action[name].protect | Boolean | false | |
When protect will be set to true, the action[name].content variable will be not accessible. This could be to used to protect and hide the source of custom actions (e.g. when additionally defined in an encrypted xml file). |
|||
Variable name | Type | Default value | |
action[name].secure | Boolean | false | |
When secure will be set to true, the action will be callable by the Javascript interface,
even when the Javascript interface is disabled. This makes it possible to implement custom and secure external interfaces. |
|||
Variable name | Type | Default value | |
action[name].content | String | ||
The inner content of the <action> element. Can be also set or changed dynamically. | |||
Variable name (read only) | Type | Default value | |
action.count | int | 0 | |
The count / number of all <action> elements. |
<krpano onstart="intro();"> ... <action name="intro"> lookat(0,0,90); wait(LOAD); lookto(120,10,110); lookto(-50,40,110); lookto(0,0,90); </action> ... </krpano>
<action name="overaction"> tween(scale, 2.0); tween(alpha, 1.0); </action> <action name="outaction"> tween(scale, 1.0); tween(alpha, 0.5); </action> <plugin name="pic1" ... onover="overaction();" onout="outaction();" /> <plugin name="pic2" ... onover="overaction();" onout="outaction();" />
<network retrycount="2" cachesize="7" maxdownloads="20" maxrequests="9" maxdecodes="4" maxdecodetime_moving="12" maxdecodetime_still="28" />
Variable name | Type | Default value | |
network.retrycount | int | 2 | |
---|---|---|---|
The number of automatic download retries on loading (server) errors before showing an error message. | |||
Variable name | Type | Default value | |
network.cachesize | Number | 7.0 | |
The size of the internal cache buffer in MB for textual files (xml, js, stl, obj, ...). | |||
Variable name | Type | Default value | |
network.maxdownloads network.maxrequests network.maxdecodes |
int int int |
20 9 4 |
|
Settings for the loading / image-decoding performance:
|
|||
Variable name | Type | Default value | |
network.maxdecodetime_moving network.maxdecodetime_still |
Number Number |
12 28 |
|
More settings for the loading / image-decoding performance:
|
<memory maxmem="..." devices="..." />
Variable name | Type | Default value | |
memory.maxmem | int | ... | |
---|---|---|---|
Set the maximum memory usage for the decoded image tiles in MB.
The calculation of the tile memory size in MB is done by: 'tile-image-width * tile-image-height * 4 / 1024 / 1024'
(e.g. a 512x512px tile needs exactly 1 MB memory).
When the maxmem limit will be reached, the memory of currently not used (needed/visible) tiles will be freeed/returned. Note - use this setting with care! It can affect the performance and the browser stability. The current default settings are:
|
<security cors="" cors_sameorigin="false" />
Variable name | Type | Default value | |
security.cors | String | ||
---|---|---|---|
HTML5 CORS (Cross Origin Resource Sharing) Settings.
Allowed values:
For details about enabling CORS on the server please see here: http://enable-cors.org/ http://enable-cors.org/server.html Example: If your Web-server is an Apache-server, the easiest way to enable CORS would be to put a .htaccess named file with the following content into the folder of the files that should be accessible: Header set Access-Control-Allow-Origin "*" |
|||
Variable name | Type | Default value | |
security.cors_sameorigin | Boolean | false | |
Should the CORS setting also be applied when loading files from the same origin? Normally this setting should be not enabled! Enabling can be even contra-productive, as it can make it necessary to load certain files twice. This setting should be only enabled when doing HTTP redirections from the current origin to another origin. |
<data name="..."> ... </data>
<data name="..."><![CDATA[ ... ]]></data>
Variable name (read only) | Type | Default value | |
data.count | int | 0 | |
---|---|---|---|
The count / number of all data elements. | |||
Variable name | Type | Default value | |
data[name].name | int | ||
The name of the data element (see the name notes). When no name will be set, an automatic generated name will be used (e.g. could be used for data elements that will be accessed only via index (e.g. in a for loop) and never directly). |
|||
Variable name (read only) | Type | Default value | |
data[name].index | int | ||
The index of the data element. | |||
Variable name | Type | Default value | |
data[name].content | String | ||
The whole content of the <data> element as text string. |
<cssstyles> any CSS styles... </cssstyles>
<cssstyles><![CDATA[ ... ]]></cssstyles>
<scene name="..." onstart="" autoload="false" ...> ... </scene>
Variable name (read only) | Type | Default value | |
scene.count | int | 0 | |
---|---|---|---|
The count / number of all scene elements. | |||
Variable name | Type | Default value | |
scene[name].name | String | ||
The name of the scene element (see the name notes). This is the name to be used when using the loadscene() action. When no name will be set, an automatic generated name will be used (e.g. could be used for scene elements that will be accessed only via index (e.g. in a for loop) and never directly). |
|||
Variable name (read only) | Type | Default value | |
scene[name].index | int | ||
The index of the scene element (will be set automatically). | |||
Variable name | Type | ||
scene[name].onstart | Action Event | ||
The "onstart" event - here any actions / functions that will be called "on start" of the pano/scene viewing can be defined. | |||
Variable name | Type | Default value | |
scene[name].autoload | Boolean | false | |
When set to true, this scene will get automatically loaded on start. Only one scene can be 'auto-loaded', when several scenes have autoload=true set, then the last-defined-one will get loaded. |
|||
Variable name | Type | Default value | |
scene[name].content | String | ||
The whole unparsed content of the <scene> element as text string. |
<set var="..." val="..." />
Attribute name | Type |
var | String |
---|---|
Any variable name or path. | |
Attribute name | Type |
val | String |
The value that will be set to the variable. Can be any value, text or expression. |
<if check="condition"> ... any other xml elements ... </if>
Attribute name | Type |
check | String |
---|---|
The condition / expression to check. Variables used here need to be already defined. |
<debug>
<debug trace="..." />
Attribute name | Type |
trace | String |
---|---|
Any text, variable or expression. |