* Disclaimer: This document is collected by the author, not all original, if there is infringement, please contact to delete! In addition, Krpano itself has a lot of content, so it is impossible to gather all of them together. If there is any deficiency, please kindly comment. Read the original for the latest document

An overview of the

This document is based on version 1.19PR13.

Website: krpano.com

concept

Panorama (English: Panorama) technology allows experiencers to switch viewing angles in the panoramic space constructed by panoramic images. It is through shooting panoramic images, and then the use of computer graphics image technology to build a panoramic space, so that users can control the direction of browsing, or left or right, or up or down to watch objects or scenes, as if immersive general. Compared with traditional 3D modeling, panoramic roaming technology is simple to make, has small data amount, low system consumption and is more realistic.

Early 270° or 360° panoramic roaming (cylindrical panoramic) :

720° Panoramic Tour:

panorama

A panorama (spherical panorama in particular) is an image with an aspect ratio of 2 to 1 that contains 360°x180° space, such as an 8000*4000 JPG image or a tiff image. Note: Aspect ratio 2:1 is horizontal direction (360) : vertical direction (180)

Krpano profile

Krpano is a panoramic roaming creation software and tool. It has the following characteristics:

• Highly flexible and high-performance lightweight panoramic roaming browser.
• Compatible with HTML5 and Flash, support WebVR display under Webgl.
• Using dedicated KRpano XML code to write panorama Tours, you can develop highly customized projects or use KRpano tools to develop online panorama production and presentation platforms.
• Supports various types of panorama as well as panoramic video and circular panorama.
• Multiple projection modes are supported.
• At the same time, it provides a simple and efficient batch processing mode, which can quickly generate a panoramic roaming project with basic functions without code intervention.

How to choose

If you just want to show a simple panorama with no special customization requirements, you can use the default skin or use the Panorama platform for development. If you need to develop panorama platform, customize panorama function or have a strong interest in panorama development, you can learn krpano and have a deep understanding of it.

features

• Compatible with Flash and HTML5
• High performance and high quality rendering
• Highly customizable
• Rich panoramic format and image file format support
• multiresolution
• 3 d projection
• Virtual travel hotspots/scripts
• progressive

The case shows

See download package or official website

---

Document describing

Download the package instructions

Examples folder

This is the Krpano cases folder (1.19 examples is in the Viewer folder), which contains most of the official cases and is a great source for learning krpano code. Note that the viewer used in the case of downloading the package is the default viewer folder for downloading the package itself. Because you cannot simply copy the case folder, you need to set the path of the corresponding viewer, and the viewer must be your own.

Templates folder

The folder that houses the official set of templates, including images, XML, HTML, and related configuration files. With this understanding and modification, we can make our own skin templates and then generate them with one click for batch workflow. Of course, normally you don’t need to copy it from here either, as it will be generated automatically during droplet. Some templates are not used in the default Droplet process.

Viewer folder

Tips:

The viewer (JS and SWF) for its own project is automatically generated in the Droplet process without having to copy it from here

Droplet. Bat file

Krpano Packaging is a shortcut to the Krpano command line tool plus the configuration file Config. The way to use the droplets is very simple: drop a file (usually an image or XML file) directly onto the Droplet icon and release it.

Krpano Droplet (gear-shaped icon file in the image)

MAKE PANO (NORMAL) Droplet

Instructions:

• Generates a normal (= single resolution) panorama.
• Create a typical 360-degree panorama.
• The entire panorama will be loaded at once. By default, the maximum side length of the box is 2048 pixels (can be changed in the Config configuration file).
• Includes default navigation skins.
• Support Flash and HTML5.

Droplet description:

• Based on the KmakemulTires tool.
• Configuration file: normal.config
• Default template/skin configuration file: defaultbuttons.skin

 

MAKE PANO (MULTIRES) Droplet   

Instructions:

• Generate a multi-resolution panorama
• Make all types of panoramas
• Only specific slices are loaded when needed. There are no size/resolution limits.
• Contains the default navigation skin.
• Support Flash and HTML5.

Droplet description:

• Based on the KmakemulTires tool.
• Configuration file: multires.config
• Default template/skin configuration file: defaultbuttons.skin

 

MAKE PANO (SINGLESWF) Droplet

Instructions:

• Generate a normal (= single resolution) panorama while embedding all files in a single SWF file. Output only one SWF file and one HTML file.
• Create a typical 360-degree panorama.
• The entire panorama will be loaded at once. The default maximum block length is 2048 pixels (this can be changed in the configuration file).
• Contains the default navigation skin.
• Only support Flash.

Droplet description:

• Based on the KmakemulTires tool.
• Configuration file: singleswf.config
• Default template/skin configuration file: defaultbuttons.skin

 

MAKE PANO (FLAT) Droplet

Instructions:

• Generate plane slice multi-resolution image.
• Make a plane image. Output as a plane image.
• Only specific slices are loaded when needed. There are no size/resolution limits.
• Contains skins with default navigation buttons for specific viewing angles.
• Support Flash and HTML5.

Droplet description:

• Based on the KmakemulTires tool
• Configuration file: flat.config
• Default template/skin configuration file: flat.xml/flatskin.xml

 

MAKE VTOUR (NORMAL) Droplet

Instructions:

• Generate normal (= single resolution) panoramas and integrate them into a virtual tour.
• Create a typical 360-degree panorama.
• The entire panorama will be loaded at once. The default maximum side length of the box is 2048 pixels (this can be changed in the configuration file).
• Includes a default skin that includes navigation buttons, scrollable thumbnails, and optional Bing maps and gravity sensing plug-ins.
• Support Flash and HTML5.

Droplet description:

• Based on the KmakemulTires tool.
• Configuration file: vtour-normal.config
• Default template/skin profile: vtourskin- Thumbnails – Bingmaps-gyro.skin

 

MAKE VTOUR (MULTIRES) Droplet

Instructions:

• Generate multi-resolution panoramas and integrate them into a virtual tour.
• Make all types of panoramic images.
• Only specific slices are loaded when needed. There are no size/resolution limits.
• Includes a default skin that includes navigation buttons, scrollable thumbnails, and optional Bing maps and gravity sensing plug-ins.
• Support Flash and HTML5.

Droplet description:

• Based on the KmakemulTires tool.
• Configuration file: vtour-multires.config
• Default template/skin profile: vtourskin- Thumbnails – Bingmaps-gyro.skin

 

MAKE VTOUR (VR-opt) dropelt

Instructions:

• Generate multi-resolution panoramas and integrate them into a virtual tour.
• Make all types of panoramic images.
• Only specific slices are loaded when needed. There are no size/resolution limits.
• Includes a default skin that includes navigation buttons, scrollable thumbnails, and optional Bing maps and gravity sensing plug-ins.
• Support Flash and HTML5.
• After KRpano 1.19 PR9, it can be generated into VR optimized panoramas. If input of stereo image is included, stereo image is generated for VR use.

Droplet description:

• Based on the KmakemulTires tool.
• Configuration file: vtour-vr.config
• Default template/skin profile: vtourskin- Thumbnails – Bingmaps-gyro.skin

 

MAKE OBJECT Droplet

Instructions:

• Generate several planar multi-resolution images and integrate them into a scalable, rotating 360 object image.
• Make a flat image object. All images of objects must be of the same size.
• Only specific slices are loaded when needed. There are no size/resolution limits.
• A skin that contains a specific control object.
• Only support Flash.

Droplet description:

• Based on the KmakemulTires tool.
• Configuration file: object.config
• Default template/skin configuration file: object.xml/objectskin.xml

 

Convert SPHERE to CUBE Droplet

Instructions:

• Convert a spherical image to a cube image.
• The output cube format, dimensions, and image dimensions can be modified in the configuration file.

Droplet description:

• Based on the KTransform tool.
• Configuration file: converttellection.config

 

Convert CUBE to SPHERE Droplet

Instructions:

• Convert six cube images into a spherical panorama.
• The size and format of the output image can be modified in the configuration file.

Droplet description:

• Based on the kcube2Sphere tool.
• Configuration file: converttellection.config

 

Encrypt XML Droplet

Instructions:

• Drag and drop the XML file into droplet for encryption.
• XML files are automatically compressed during encryption.

Droplet description:

• Based on encrypt tool.

Create a custom Droplet

Built-in packaging is just an example for the most common situations. Making a custom Krpano Droplet is very simple. You simply edit the configuration file, then copy and rename an existing Krpano Droplet and edit the Droplet itself.

• Edit krpano Droplet in Windows
  • Krpano Droplet is actually a batch file (.bat).
  • You can edit it in any text editor.
  • Open krpano Droplet in a text editor and change the name and path of the configuration file to your own.
• Edit krpano Droplet under Mac OSX
  • Droplet is actually ‘AppleScript droplet’.
  • This can be opened using the ‘Apple Script Editor’
  • Open krpano Droplet in the Apple Script Editor and change the name and path of the configuration file to your own.

Two TXT files

Legal notice of Krpano’s license and release notes.

krpanotools

Contains krpanoTools32. exe and krpanoTools64. exe, the two files at the heart of the Krpano project, which are called from the command line.

krpano Testing Server

Krpano comes with a static file local service environment that allows you to view Flash and HTML5 effects through local file case limits, control browser caching, and limit download speeds to simulate network conditions.

krpano tools

The visual tools used to encrypt and protect panoramic projects need to be registered to use, and will not be extended here.

Description of Outcome Document

Vtour folder structure

Here are the default and comparison base file structures and file names, which can be more or fewer depending on Droplet, and file names aren’t necessarily the same.

vtour/
| -- panos/             # Folder for storing panoramic section pictures
| -- skin/              # Store skin-related files
| -- plugins/           Used to store plug-ins
| -- tour.swf           #krpano flash viewer
| -- tour.js            #krpano HTML5 viewer
| -- tour.xml           Generate the configuration of the panorama
| -- tour.html          The local server environment is required to view the panorama page
| -- tour_editor.html   Add an editor for Hotspot and initialization view Settings
| -- tour_testingserver.exe # Open the test server in Windows and open the HTML file for local browsing.
| -- tour_testingserver_macos # Open the test server in MAC system and open the HTML file for local browsing.
Copy the code

Vtour operation mechanism

Krpano uses the Viewer engine to create a “3d” effect when viewing still images, all through the entry file tour.html.

Filter out some useless code, you can see the main entry file code is as follows:

<div id="pano"></div>
<script src="tour.js"></script>
<script>
    embedpano({
        swf: "tour.swf"If html5:only is set, this value is not required. XML:"tour.xml"// The target configuration file at startup:"pano"// Target container ID to render to html5:"only"// If flash is needed, set it to auto //id:"krpanoSWFObject"// Default krpano object, each viewer has a unique ID, mobilescale is used when interacting with JS: 1.0, // Mobile device zoom, 1 means no zoom, default 0.5 passQueryParameters:false// Whether to accept URL arguments, such as tour.html? html5=only&startscene=scene2 }); </script>Copy the code

---

Load the panoramic

Introducing scripts (HTML5 renderers)

<script src="./tour.js"></script>
Copy the code

Creating an embedded container

<div id="pano" style="width:100%; height:100%;"></div>
Copy the code

Create objects and configure parameters

embedpano({
    swf:"krpano.swf".// Flash renderer
    xml:"krpano.xml".// The master configuration file will call krpano. XML and krpano. SWF by default without loading the setting 0
    target:"pano".// Embed the container ID
    id:"krpanoSWFObject".// The current panorama ID, which is used by the javascript interface call
    bgcolor:"# 000000".// Background color
    html5:"auto".// HTML5 mode (auto: automatic; Prefer: html5 is preferred; Fallback: preferentially flash. Only: html5 only; Always: Always use HTML5 - for testing only; Never: always use flash. Can add WebGL or CSS3D rendering technology, such as Auto + CSS3D)Flash:"auto"./ / flash mode (auto, --, fallback, only, never and HTML Settings)
    wmode:"window".// Flash mode Settings (window: window; Opaque: opaque Opaque-flash: opaque. This parameter is available only to Flash. Transparent: Transparent: transparent, flash only; Direct: Best performance, but may not be compatible with older systems and browsers)
    localfallback:"http://localhost:8090".vars: {},// Set the startup variable after the XML load parsesInitvars: {},// Set the startup variable before the XML is loaded and parsed, which can be queried at the address (our.html? Initvars. Variable = value)
    basepath:...// Base path (relative to krpano.swf)
    consolelog:false.// Whether to print log information on the browser console
    mwheel:true.// Whether to enable the mouse wheel
    focus:true.// Get focus
    webglsettings:{preserveDrawingBuffer:false.depth:false.stencil:false},/ / webgl Settings
    mobilescale:0.5.// Move the device to zoom
    fakedevice:"".// "mobile", "tablet", "desktop"; Analog equipment (test only)
    onready:function(){},// Prepare the callback function, which is normally needed in this method when javascript calls the KRpano interface
    onerror:function(){},// Error callback function
    passQueryParameters:true.// Enable URL query parameters (html5, flash, wmode, mobilescale, fakeDevice, initvars) to be passed as variables, e.g. Tour.html? html5=only&startscene=scene2&initvars.design=flat
    });
Copy the code

Remove the panoramic

removepano(id);
Copy the code

Official website: krpano.com/docu/html/#…

---

Krpano XML syntax

krpano xml

XML itself is a transport format, which means it can only be used to transfer data within krpano Viewer. When XML is parsed, XML elements are transmitted/mapped to krPANo’s internal data structures. This means that when parsing is done, there is essentially no XML left.

Krpano XML is itself an XML language, but with its own specific elements and syntax. Krpano XML includes both static code and dynamic code sections.

The static code is made up of 26 KRpano elements (including the deprecated two) that have their own attributes, usually strings or numbers or Booleans, because the default values of these attributes dictate that only these types be used.

Related numeric types include string, number, int, and Boolean (Boolean, true or false).

• Some properties only make sense in Flash, for examplelayer[name].smoothing;
• Some attributes only make sense in HTML, for examplelayer[name].jsborder
• Some properties are read-only and you can’t just write them in the static code above. You can only get their values by getting (), as inLayer [name].Pressed, Layer [name].imageWidth, Layer [name].imageHeight
• There are also special properties whose value type is Action Event, where the value of the property is actually filled into dynamic code, such as the one we encountered initiallyonclick ="openurl('http://... ');"There are also several on attributes, such as

onover =""
onhover =""
onout =""
onclick =""
ondown =""
onup =""
onloaded =""
Copy the code

XML tags/nodes

<element></element> // Has child elementsCopy the code

attribute

An XML element can have one or more attributes, consisting of attribute names and attribute values, which must be enclosed in single or double quotation marks, and attributes cannot be repeated

<element attribute="value">
   <childrenelement test1 ="value1" test2 ="value2" />
</element>
Copy the code

The root element krpano

All elements need to be inside krpano elements

<krpano onstart="...">... <preview url="..." />
   <image>
     <cube url="..." />
   </image>
   ...
</krpano>
Copy the code

annotation

Cannot contain two hyphens —
Case XML element names and XML attributes are all converted to lowercase, so case insensitive encoding to avoid character encoding problems, All XML files should be saved as UTF-8 or UTF-16 files. Custom elements KrPANo allows you to add custom elements, and allow you to add custom attributes to system-defined elements to facilitate other operations. Krpano ignores custom elements when loading XML files to parse static code. In addition to the syntax, custom elements and attributes cannot violate krpano rules, and have more freedom in setting attribute values. Spaces, tabs, and newlines between other XML elements are ignored

Reserved word, cannot be used directly, need to use escape

Occurrences of elements with the same name overwrite the preceding ones

Note: HTML5 mode is stricter than Flash mode, and both modes require debugging

---

Official documentation: krpano.com/docu/xml/sy…

Krpano XML built-in elements

XML structure of KRpano

<krpano>
    <include>
    <preview>
    <image>
    <view>
    <autorotate>
    <plugin>
    <layer>
    <hotspot>
    <events>
    <action>
    <scene>
</krpano>
Copy the code

All XML elements and attributes in KRpano XML are optional and can be defined multiple times. When two or more of the same elements will be defined again, the later/declaration will override the previous one.

The < krpano > root element can also contain a < krpano > element

XML itself is just a transport format — meaning it will only be used to transport krpano View data. When the XML parses, then the XML elements transform/map to the KRPANo internal data structure. This means that the XML is parsed and gone.

Official documentation: krpano.com/docu/xml/#t…

Special attributes

name

<xmlelement name="...". />Copy the code

The name attribute is defined by Array elements.

When an XML element has a name attribute, the element is interpreted as an Array of elements. The Array of neme’s name is the element itself.

When no Array name already exists, it will be created automatically.

When the element already exists, then the defined XML element will still be created, but will overwrite the existing element.

Name attribute name specification:

1. Must start with English letter, cannot use number, Chinese character!
2. When a name still starts with a numeric character, it is then interpreted as an Array index name.
3. All names are automatically converted to lowercase, allowing direct case-insensitive access!

url

<xmlelement url="...". />Copy the code

Resource path for importing plug-ins, images, audio, and so on.

Use the following placeholders as needed:

%FIRSTXML% - the path to the first loaded XML file. %CURRENTXML% - the path to the currently loaded main XML file (non-embedded file). %SWFPATH% - The path of the viewer file. %HTMLPATH% - HTML file path. %BASEDIR% - The path to use BASEDIR. %$VARIABLE% - Using the specified "VARIABLE" - this can be any KRpano VARIABLE, but must be defined before the current XML or scene is fully loaded, such as already in an HTML file or before loadpano(), loadscene() calls.Copy the code

devices

<xmlelement ... devices="...">
    <childrenelement ... />
    ...
</xmlelement>
Copy the code

If an XML element is rendered or ignored on a device, you can set the devices attribute to the element. You can set more than one. It can be set on each XML element, and the devices attributes of each XML element are checked when the XML file is parsed and converted into a KRPANO internal data structure. When the current device does not match the devices attribute, the XML element and all its children are ignored.

+) and) and |. The or. Or! No - noCopy the code

Attribute values (can be combined with logical operators)

devices="all"(Default) Devices ="html5"
devices="flash|webgl" 
devices="flash.or.webgl"
Copy the code

attribute.devicecheck

<xmlelement attribute.devicecheck="..."
            attribute.devicecheck="...". />Copy the code

Set different property values in different Settings, property values are the same as device

+) and) and |. The or. Or! No - noCopy the code

example

scale.normal="1.0" 
width.desktop="200"
visible.fullscreensupport="true"
visible.html5.and.webgl.or.flash="true"
visible.html5.and.no-webgl="false"
Copy the code

if

<xmlelement ... if="condition">
    <childrenelement ... />
    ...
</xmlelement>
Copy the code

Render elements according to conditions

example

embedpano({... , initvars:{design:"flat"}, ...});
<include url="design_default.xml" if="design == default" />
<include url="design_flat.xml"    if="design == flat"    />
Copy the code

style

<style name="stylename" attributes ... />
<xmlelement ... style="stylename". />Copy the code

The styleneme attribute set is called and applied to the element, with priority lower than inter-row and overridden by inter-row attributes

example

<style name="spotstyle" url="spotimage.png" />
<hotspot name="spot1" style="spotstyle". /> <hotspot name="spot2" style="spotstyle". />Copy the code

The get, calc

<xmlelement attribute="get:variable". /> <xmlelement attribute="calc:expression". />Copy the code

Gets and evaluates property values

Example:

<settings width="100" height="50" />
...
<layer ... 
       width="get:settings.width"
       height="calc:settings.height * 2"
       />
Copy the code

keep

Whether the Layer element, hotspot element, and Events elements are retained during transitions between scenes (both inside and outside the scene). Default is false.

Note:

• In fact, we usually start each project from outside the scene to inside the scene, so there is a scene switch at the beginning. Therefore, the Layer element, hotspot element and event element that you write outside of the scene should be set to keep= “true” so that these elements or events will not be removed when the scene switches.
• Static elements inherit the parent element’s Keep attribute; Dynamically created false and will not inherit.

krpano

The krpano root element, which removes this tag when the XML enters the parse data structure phase, allows you to define another KRPANO within the current KRpanO

<krpano version="1.19"// Version onstart=""Basedir = action performed after XML is loaded and parsed when roaming is entered"%FIRSTXML%"// Set the program root directory bgcolor=""// Panorama player background color, if not set to transparent idleTime ="0.5"// No user interaction operation after the onidle action colorCorrection ="default"// Change Flash Player 10 color correction Settings (Flash only)&emsp; Optional values: default, ON, and off Logkey ="true"// When true, press O to viewlogLog strict ="false"// Strict code mode showerrors="true"// Whether to output error information debugmode="false"// When True, displays the text message from trace(0,text) in the plugin >... </krpano>Copy the code

Krpano as the only root element of the XML file must be set!

Advanced hint – The main tag “krpano” is removed when the XML enters the parsed data structure phase. So you can define another KRpano element within the current KRpano tag, define new Settings or redefine previous Settings.

Sample:

<krpano> <! Preview the panorama using only the grid (save download space --> < Previewtype="The grid (cube, 16,16,512,0 xCCCCCC, 0 XFFFFFF, 0 x999999);"
details ="16" />
</krpano>
Copy the code

Grid (type, xsteps, ysteps, res, LINcol, bkcol, pntcol) Optional parameters: Xsteps = horizontal distance between row pixels, default = 10 ysteps = vertical distance between row pixels, default = 10 res = resolve gridimage, Default = 400 lincol = hex-format linecolor (default = 0 x666666) bkcol = background color (default = 0 x222222) pntcol = dot color (default = linecolor)

<krpano version="1.17" onstart="loadscene(scene1);">
  <scene name="scene1">... </scene> </krpano>Copy the code

preview

Set preview to specify a panorama preview so that during reading, the transition display, that is, the blurred image before the panorama is fully loaded, is generally generated automatically

<preview type=""// The type of panorama (SPHERE, CYLINDER, CUBESTRIP, grid(type, xsteps ysteps res, linecol bgcol, url = pntcol))"previewpano.jpg"// Panorama path striporder="LFRBUD"// Define the image sequence details="16"// Adjust the image detail quality, the bigger the clearer />Copy the code

Sample:

<preview url="pano_preview.jpg" />
<preview type="The grid (CUBE, 16,16,512,0 xCCCCCC, 0 XFFFFFF, 0 x999999);" />
<preview type="SPHERE" url="spherepreview.jpg" details="16" />
<preview type="CUBESTRIP" url="cspreview.jpg" />
Copy the code

image

* Image panorama setting, including panorama type, progressive resolution slice display, etc

<image type="CUBE"Panorama type (hexahedron) CUBE, CUBESTRIP, SPHERE, CYLINDER tiled="false"Whether to use tileDiMageWidth ="..."Tiled image width tiledimageHeight ="..."Tile image height tilesize="..."Tile image size baseIndex ="1"Image reads the default index number (first) frames="1"Current image frame="1"
       prealign=""Prealign, USES the X | Y | Z axis alignment hfov =""Horizontal visual field VFOV =""Vertical view multires=""Multiresthreshold = "0.025" STEREO =""Three-dimensional stereolabels =""
        stereoformat=""             
        fisheye.fov=""Fisheye fisheye. The align =""
	fisheye.crop=""
	fisheye.lenscp=""Voffset = "0.0" progressive="false"Multi-resolution load (flash) only cubelabels =" u r f b l | | | | | d '" sphere. The mapping definition/projection of spherical mapping of the input image (only HTML 5) mjpegstream Mjpeg stream (HTML5 and WebGL only) > <cube URL ="pano_%s.jpg" />
</image>
Copy the code

The above is the digital index way to read the slice image, the following is to read the slice by defining the six directions of the picture path, file suffix to add _L, _f…. Way to identify. Relevant methods

Image. layer Only AS3 Usage image.level.count Read-only level[..] .tiledimagewidth level[..] .tiledimageheight level[..] .tilesize level[..] .aspreviewCopy the code

<image type="CUBE"
       tiled="false"
       tiledimagewidth="..."
       tiledimageheight="..."
       tilesize="..."
       baseindex="1"
       frames="1"
       frame="1"
       prealign=""
 >
    <left  url="pano_l.jpg" rotate="0" flip="" />
    <front url="pano_f.jpg" rotate="0" flip="" />
    <right url="pano_r.jpg" rotate="0" flip="" />
    <back  url="pano_b.jpg" rotate="0" flip="" />
    <up    url="pano_u.jpg" rotate="0" flip="" />
    <down  url="pano_d.jpg" rotate="0" flip="" />
</image>
Copy the code

example

<image>
    <cube url="pano_%s.jpg" />
</image>
Copy the code

<image>
    <cubestrip url="cubestrip.jpg" />
</image>
Copy the code

<image type="SPHERE" multires="true" tilesize="...">
  <level tiledimagewidth="..." tiledimageheight="...">
    <sphere url="pano_%v_%h.jpg" />
  </level>
</image>
Copy the code

<image type="CYLINDER" multires="true" tilesize="...">
  <level tiledimagewidth="..." tiledimageheight="...">
    <cylinder url="pano_%v_%h.jpg" />
  </level>
</image>
Copy the code

<image>
    <fisheye url="fisheye.jpg" fov="180.0" />
</image>
Copy the code

<image type="CYLINDER" hfov="1.0" multires="true" tilesize="...">
  <level tiledimagewidth="..." tiledimageheight="...">
    <cylinder url="image_%v_%h.jpg" />
  </level>
</image>
Copy the code

<plugin name="video"
        url.flash="videoplayer.swf"
        url.html5="videoplayer.js"
        videourl="video.m4v|video.webm"
        />
<image>
    <sphere url="plugin:video" />
</image>
Copy the code

view

The View element controls the field of view of the panorama, such as the starting position, field of view, zoomable range, whether it is restricted, the area restricted for viewing, and so on. When you want to set a restricted view or set a specific initial view, you need to set it yourself or use a plug-in to get the code.

The viewing direction is defined by the hlookat/vlookat attribute, and the current field of view is defined by the FOV attribute. To limit the field of view of a partial panorama, use the LimitView property.

<view hlookat="0.0"Horizontal viewing Angle - between 180 and 180 vlookat="0.0"Vertical viewing Angle -90 to 90 camroll="0.0"Lens rotation Angle fovtype="VFOV"Define field of view type • VFOV - Vertical field of view, based on screen height •HFOV - Horizontal field of view, based on screen width •DFOV - View diagonal field, based on screen diagonal •MFOV - Maximum field of view (dynamic hybrid VFOV and HFOV) Note: On mobile and tablet devices the default value will be MFOV! fov="90.0"Default viewing Angle zoom hfov=""Current horizon (read only) vFOv =""Current vertical view (read only) fovmin="1.0"Default maximum zoom fovmax="179.0"Default minimum zoom value for the view maxPixelZoom =""The maximum zoom ratio of the default viewing Angle is mFOvRatio ="1.333333"The maximum screen size is the ratio of width to height of Distortion ="0.0"Fisheye Angle distortion set between 0.0 and 1.0 (degree of distortion) fisheye="0.0"     # Fisheye Angle set between 0.0 and 1.0 (distortion) (old)
      distortionfovlink="0.5"Fov value associated with fisheye Angle of view, default 0.5(between 0.0 and 3.0) fisheyeFOvlink ="0.5"  # foV value associated with fisheye Angle of view, default 0.5(0.0-3.0)
      stereographic="true"Whether to enable stereo fisheye projection effect (asteroid) pannini="0.0"Set "Pannini/Vedutismo" Projection effect Architectural ="0.0"Architectural perspective set between 0.0 and 1.0 architecturalonlyMiddle ="true"Whether to implement building projection limitView = only for images in the middle area"auto"View limit types • OFF -- not limited at all • Auto -- Automatic limit (default) • Lookat -- Limit view variables directly "hlookatmin", "hlookatmax", "vlookatmin", "Vlookatmax" • Range -- Limits the locale Settings by "hlookatmin", "hlookatmax", "vlookatmin", "vlookatmax", and only within this range, • Allows viewing •fullrage-- locale Settings by "hlookatmin", "hlookatmax", "vlookatmin", "vlookatmax", but allows zooming in to see the entire image • Offrange -- limited locale Settings by "hlookatmin", "Hlookatmax", "vlookatmin", "vlookatmax", but does not limit the zoom in any way. hlookatmin=""Minimum horizontal viewing range (-180.. +180). hlookatmax=""Maximum horizontal viewing range (-180.. +180). vlookatmin=""Minimum vertical viewing range (-90.. +90). vlookatmax=""Maximum vertical viewing range (-90.. +90). hlookatrange=""(Read only) Current maximum horizontal range (equivalent to hlookatmax - hlookatmin) vlookatRange =""(read only) Current maximum vertical range (equivalent to vlookatmax - vlookatmin) />Copy the code

Default view parameter Settings and view limit Settings

Sample:

normal: <view hlookat="0" vlookat="0" fov="80" />

little planet view:

<view hlookat="0"
      vlookat="90"
      fisheye="1.0"
      stereographic="true"
      fov="150"
      fovmax="150"
      />
Copy the code

flat pano:

<view hlookat="0"
      vlookat="0"
      maxpixelzoom="1.0"
      limitview="fullrange"
      />
Copy the code

area

Area Specifies the size of the panorama displayed in the browser, which defines the area/window for displaying the panorama. There are two modes for defining the location and size of an area:

• By defining size and position (mode=align)
• Define border margins (mode=border)

These Settings can be changed/adjusted dynamically in the onresize event. If the area Settings are changed outside of the onresize event, an onresize event will be called on the next screen refresh in response to the new area/window size.

Note – all

/ elements need to be placed in this area. To place the

/ element outside the zone, set the STAGE property of the Layer/Plugin.

Alignment:

<area mode="align"Define the pattern of the region, align and border two; Optional values: align, border align="lefttop"Coordinate reference frame for alignment of [X,Y] & EMSP; Optional values: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom x="0"The offset X coordinate based on the permutation y is equal to"0"Y coordinate offset based on permutation width="100%"Area width, either pixel value or percentage height="100%"Area height, either pixel value or percentage />Copy the code

Boundary filling mode:

<area mode="border"Define the pattern of the region: border left="0"The number of pixels to the left top="0"Number of pixels from the top right="0"Number of pixels to the right bottom="0"Number of pixels from bottom />Copy the code

Sample:

<area align="center" width="640" height="480" /> <area mode="border" top="10" bottom="100" /> <area x="25%" width="75%" / > < events onresize = "fixaspectresize (16, 9);" />

display

* Display panorama display quality, define rendering quality and performance

Display quality Settings in HTML5 state

<display  stereo="false"Three-dimensional stereooverlap ="0.0"
			hardwarelimit=""• Desktop with WebGL-4096 • Desktop with CSS3D-2560 • Android/BlackBerry/Kindle/Windows Phone - • iPhone 5/5s and HIGHER - 1024 • iPhone (Retina) with iOS 5.1 (or higher) - 1024 • iPhone 5/5s and higher - 1024 • iPhone (Retina) • iPhone/iPod Touch (Non-Retina) -600 Usedesktopimages =""Set whether to use HTML5 output mipMapping = on PC desktop"auto"Defines slice output modes. Optional values: Auto, force, off loadWhilemoving ="auto"Controls smooth display mode while moving (Auto \true\false) framebufferscale ="1.0"Resize/resize the WebGL frame buffer. />Copy the code

Display quality Settings in Flash state

<display fps="60"The flash frame rate is 60 (30-100) details= by default"24"The higher the value, the more delicate the Flash rendering (Flash only) tessmode="1"Set the Flash material arrangement mode. -1 indicates automatic (0 for sphere; 3 for cube)(Flash only)&emsp; Available values: -1, 1, 2, 3, 4, 5 MoveQuality ="LOW"Display quality while moving (Flash only)& EMsp; Optional values: LOW, HIGH, BEST, HIGHSHARP Stillquality ="HIGH"Static rendering quality (Flash only)& EMsp; Optional values: LOW, HIGH, BEST, HIGHSHARP flash10="on"Start flash10 rendering, the last two items (moveQuality, StillQuality) set invalid moveQuality10 ="HIGH"Display quality while moving (valid when Flash10 is enabled)(Flash only)& EMsp; Optional values: LOW, HIGH, BEST, HIGHSHARP StillQuality10 ="HIGH"Display quality at rest (valid when Flash10 is enabled)(Flash only)& EMsp; Optional values: LOW, HIGH, BEST, HIGHSHARP ="12"Image sharpness, valid only when image quality is HIGHSHARP, range 0-14(Flash only) StillTime ="0.25"Wait time before moving to Rest (Flash only) showpolys="false"Display 3D geometry line (Flash only) />Copy the code

Sample:

<display flash10="off" details="28" />
<display flash10="off" stillquality="HIGHSHARP" />
<display html5rendermode="1" devices="iPad+Retina" />
<display hardwarelimit="512" devices="Android" />
<display usedesktopimages="true" hardwarelimit="1800" devices="iPad+Retina+iOS6" />

Copy the code

control

Control Sets the panoramic browsing control mode for the mouse, keyboard, and touch device

<control usercontrol="all"User control mode (all,mouse,keyb,off) mouse="drag"Controls (Drag, moveto, drag3D (Flash only)) Touch ="drag"Control methods (Drag, moveto, drag3D (Flash only)) dragrelative="true"Draganaesthetist ="0.1"Inertial dragfriction ="0.9"The friction drag_oldmode ="false"Old model (HTML5) moveTorelative ="true"Parameter Settings moveToaccelerate ="1.0"Acceleration movetospeed ="10.0"Maximum speed movetofriction="0.8"The friction movetoyfriction ="1.0"Vertical friction keybaccelerate="0.5"Acceleration keybspeed ="10.0"Speed keybfriction ="0.9"The friction keybinvert ="false"Reverse keybfovchange ="0.75"Button to change perspective mousefovchange="1.0"Mouse wheel changes perspective fovspeed="3.0"Change Angle speed fovfriction="0.9"Change the friction zoomtocursor="false"Enlarge zoomoutcursor ="true"Narrow touchzoom ="true"Gesture scaling keyCodesLeft ="37"Left-click keycodesright ="39"Right-click keycodesup ="38"The key keycodesdown ="40"The key keycodesin =""Zoom in key keycodesout =""The narrow key keydownrepeat ="true"Bouncinglimits = continuous keys"false"Rebound (HTML5 only) />Copy the code

<control mouse="drag"
         touch="drag"
         dragrelative="true"
         draginertia="0.1"
         dragfriction="0.9"
         movetorelative="true"
         movetoaccelerate="1.0"
         movetospeed="10.0"
         movetofriction="0.8"
         keybaccelerate="0.5"
         keybspeed="10.0"
         keybfriction="0.9"
         keybfovchange="0.75"
         mousefovchange="1.0"
         fovspeed="3.0"
         fovfriction="0.9"
         zoomtocursor="false"
         zoomoutcursor="true"
         touchzoom="true"
         bouncinglimits="false"
         />
Copy the code

• The mouse, touch
• drag – drag the pano image.
• moveto – move the pano image.
• drag3d – free-axis 3d dragging (Flash only)

Mouse and keyboard control Settings

Sample:

<control mousetype="drag2D" />
<cursors url="drag-cursors.png"
         type="drag"
         move="2 | 0 | | 30 32"
         drag="37 30 | | | 0 32"
         />
<control mousetype="moveto" />
<cursors url="arrow-cursors.png"
         type="4way"
         move="112 28 | | | 0 28"
         drag="112 28 | | | 0 28"
         arrow_r="28 | | | 0 0 28"
         arrow_d="28 28 | | | 0 28"
         arrow_l="56 28 | | | 0 28"
         arrow_u="84 28 | | | 0 28"
         />
Copy the code

cursors

Cursors mouse cursor style HTML5 can be used to call system style using Standard, DRAGGING and moving, flash mode can be used to customize the image

<cursors  standard="default"Standard dragging ="move"Drag the moving ="move"Mobile url =""Cursor picture addresstype="8way"In cursor direction mode, whether to change the image in 4 directions or all 8 directions (drag, 4way, 8way) move=""Set cursor movement to display picture drag=""Set mouse down to display images arrow_l=""Here are the mouse images displayed in 8 directions arrow_r=""
         arrow_u=""
         arrow_d=""
         arrow_lu=""
         arrow_ru=""
         arrow_ld=""
         arrow_rd=""
         />
Copy the code

Custom cursor style example:

<control mousetype="drag2D" />
<cursors url="drag-cursors.png"
         type="drag"
         move="2 | 0 | | 30 32"
         drag="37 30 | | | 0 32"
         />
<control mousetype="moveto" />
<cursors url="arrow-cursors.png"
         type="4way"
         move="112 28 | | | 0 28"
         drag="112 28 | | | 0 28"
         arrow_r="28 | | | 0 0 28"
         arrow_d="28 28 | | | 0 28"
         arrow_l="56 28 | | | 0 28"
         arrow_u="84 28 | | | 0 28"
         />
Copy the code

autorotate

Autorotate automatically rotates

<autorotate enabled="false"Whether to enable automatic rotation waitTime ="1.5"The wait time for automatic rotation to begin after the user does not operate the screen accel="1.0"Rotation acceleration: Angle/second Speed ="10.0"Automatic rotation speed: Angle/second Horizon ="0.0"For example, -45 indicates a 45 degree upward view. 45 means 45 degrees down looking down tofov="off"Zoomoslowdown = to a particular viewport"true"Relative to the current zoom/field speed, slow down the auto rotation speed to get the same visual speed at all zoom distances. interruptionevents="userviewchange|layers|keyboard"Define which events will interrupt automatic rotation (and onidle events), which can be combined with />Copy the code

Relevant properties

Autorotate. Isrotating (read-only) Autorotate. Ispaused (read-only) autorotate.Copy the code

Related setting methods, events

Autorotate.start () directly starts the automatic rotation (without waiting for Autorotate.waittime) Autorotate.stop () stops the current automatic rotation and disables it autorotate.interrupt() interrupts the automatic rotation, However, the auto-rotation function itself is still available and will be paused after autoratate.waittime starts autorotate.pause() again. For example, if the mouse is hovering over a hot spot, it is necessary to pause the rotation. Autorotate.resume () restarts the rotationCopy the code

onautorotatestart, 
onautorotatestop, 
onautorotateoneround
onautorotatechange
Copy the code

When there is no user interaction. Automatic rotation, twist/move, zoom

Start to rotate:set(autorotate.enabled,true); Stop rotation:set(autorotate.enabled,false); Alternate rotation: switch(Autorotate.enabled);Copy the code

Sample:

<autorotate enabled="true" />
<autorotate enabled="true"
            waittime="5.0"
            speed="3.0"
            horizon="0.0"
            tofov="120.0"
            />
Copy the code

plugin/layer

Plugin /layer has the same function, can call plug-in, can also insert pictures or containers, similar to div, used to system plug-in with plugin, insert pictures and videos or containers with layer

Note: The parent and keep attributes automatically inherit their parent attributes

<plugin name="..."Defines the name of the introduced elementtype="image"The type of the imported element can be image, container, or text (Textfield). Container is a container. Multiple media elements url= can be added to the container"..."Path to import elements (supported formats: SWF, JPG, PNG, GIF.) HTML =""Keep = displays the contents of the text"false"Whether the parent= element remains displayed when jumping into a new scene""Set the parent container name, either the name of the plugin or the full name: parent="layer[name]"Or the parent ="hotspot[name]"
       alturl=""          # Path to import elements (supported formats: SWF, JPG, PNG, GIF.), only used in HTML5 browsers
       devices="all"Set the device type to display (see device list) visible="true"Sets whether the inserted element is visible enabled="true"Sets whether the inserted element accepts the mouse event handCursor ="true"If the mouse moves over the element, it becomes small hand maskchildren="false"Sets whether to mask child controls. When set to TRUE, scalechildren= is not displayed in the area between the child control border and the parent control border, except for the child control range"false"Sets whether the subspace scales with the parent control zorder=""The order index of the inserted elements, which can be either characters or numbers. The HTML5 output must be an integer between 0 and 100 capture="true"It's just that the element accepts events,falseThe time child element can also accept the event children="true"Enable children of the current element to receive mouse events. preload="false"Preload, load the layer/plugin URL before loading the pano, and then do anything. blendmode="normal"Mix/mix modes (Normal, Layer, screen, Add, Subtract, Difference, multiply, Overlay, lighten, Darken, hardlight, Invert) only flash style=""Call the name align= of the style defined in the file""Element in screen alignment, leftTop, left, leftbottom, top, Center, bottom, righttop, right, rightbottom (see schematic) Edge =""The alignment of the element's edge or stroke point layer, lefttop, left, leftbottom, top, Center, bottom, righttop, right, rightbottom (see diagram) x=""The transverse distance of X from the aligned boundary to the aligned point is y=""The y transverse distance from the aligned boundary to the aligned point ox=""Offset oy =""Offset rotate ="0.0"Rotation degree of insert element display width=""Display width of inserted element (prop: adaptive) height=""Display height of the inserted element minWidth ="0"
		maxwidth="0"
		minheight="0"
		maxheight="0"
        autowidth="false"Adaptive width autoheight= based on content"false"Adaptive height scale= based on content"1.0"Insert element scale pixelhitTest ="false"Only flash smoothing ="true"Smooth flash accuracy only ="0"Accuracy of alpha ="1.0"Opacity of the inserted element autoalpha="false"Automatic transparency usecontentSize ="false"Full canvas flash scale9Grid = only""Define a 9-grid (Scale9Grid ="x-position|y-position|width|height|prescale*") crop =""Define the element coordinates and width/height crop="x-position|y-position|width|height"
       onovercrop=""Set the coordinate and width of the element onDownCrop = after the mouse moves over it""Set the coordinates and width and height mask= of the element after the mouse-down state""Mask only Flash effect=""Bitmap effects apply to layer/plugin images only flash background=""You can set thefalseRemove the background bgcolor="0x000000"      type="container"The background color in the container state is invalid in the non-container state bgalpha="0.0"Background opacity BGBORDER ="0"(bgborder ="widths color alpha") border bgroundedge ="0"The rounded bgshadow =""(Basic: bgShadow ="xoffset yoffset blur color alpha"; High: gshadow ="xoffset yoffset blur spread color alpha inset, ..."Bgcapture = shadow)"false"Whether to catch events on the background container (type="container"Onover =""Perform the action onhover= when the mouse passes over""Perform the action onout= when the mouse is over""Perform the action onclick= when the mouse stops and moves out of the range""Perform the action onDown = when the mouse stops and clicks""Perform the action onUP = when the mouse is pressed down""Perform action onloaded= when mouse button is released""Perform the action background= after the element is loaded"false" 
	backgroundcolor="0xFFFFFF" 
	backgroundalpha="1.0"
    border="false" 
    bordercolor="0x000000" 
    borderalpha="1.0" 
    borderwidth="1.0" 
           roundedge="0"
           shadow="0.0" 
           shadowrange="4.0" 
           shadowangle="45" 
           shadowcolor="0x000000" 
           shadowalpha="1.0"
           textshadow="get:skin_settings.design_text_shadow" 
           textshadowrange="6.0" 
           textshadowangle="90" 
           textshadowcolor="0x000000" 
           textshadowalpha="1.0"/>
Copy the code

Relevant methods

Layer [name].index Index (read only) Layer [name].imageWidth (read only) Layer [name].imageHeight (read only) Pixelwidth width (read only) Layer [name].PixelHeight (read only) Layer [name].pixelX x coordinates (read only) Layer [name].pixely coordinates (read only) Layer [name]. Loading ="false"(read only) Whether layer[name].loaded="false(read only) whether either layer[name]. Loadedurl (read only) loadedurl layer[name]. Hovering ="false(Read only) Hover layer[name].pressed="false(Read-only) Whether to press Layer [name].loader layer[name].sprite layer[name].loadStyle (stylename) to load the property set Layer [name].registerContentSize (width, height) Sets the width and height layer[name].resetSize () size change callback Layer [name].updatepos() update callback Layer [name].changeOrigin (align,edge) update alignment,edge layer[name].getFullPath () return fullpath(pluginInterface only)Copy the code

Load other Flash programs, images, or buttons and ICONS.

<layer name="logo"
       url="logoimage.png"
       align="rightbottom" x="20" y="20"
       onclick="openurl('http://... ');"
       />
       <layer name="imagebar" type="container" width="100%" height="200" align="leftbottom" bgcolor="0x000000" bgalpha="0.5">
  <layer name="item1" url="image1.jpg" align="left" x="10" />
  <layer name="item2" url="image2.jpg" align="left" x="110" />
  <layer name="item3" url="image3.jpg" align="left" x="210" />
</layer>
Copy the code

hotspot

Hot spot, can insert pictures in 3D space, make it move with 3D space, can make a lot of special effects.

• General hot spots:

<hotspot name="..."Defining a hotspot nametype="image"Define the hotspot type, image, text (textField.) URL ="..."Hot image path, SWF, JPG, PNG, GIF alturl="..."            # image path displayed in html5 state
         keep="false"Whether to keep renderer= displayed after the next scene jump"webgl"Render mode WebGL, CSS3D Devices ="all"Support device type Visible ="true"Whether it is visible enabled="true"Sets whether the hotspot receives mouse events handcursor="true"Set whether mouse over to display small hands maskchildren="false"Sets whether the child control becomes a mask zorder=""The order index of the inserted elements, which can be either characters or numbers. The HTML5 output must be an integer between 0 and 100 zorder2="0.0"(HTML5 only) set to 0.0 and 1.0, corresponding to capture= when the current hotspot is under and above the distortion control, respectively"true"Used together with Enabled, both aretruePass actions only to hot spots, capture="false"The action children= can be passed to child controls"true"Sets whether the child control receives the hot mouse event blendMode ="normal"Set the blending mode, optional: normal, layer, screen, add, subtract, difference, multiply, overlay, lighten, darken, hardlight, invert. mipmapping="false"Hotspot images should be rendered zoomed-out during MIP-Mapped (e.g. to avoid confusion) only HTML5 premultiplyAlpha ="false"Transparent channel only HTML5 style=""Read the set style name ath="0.0" atv="0.0"Spherical coordinates edge ="center"The boundary alignment point of the hotspot ox="0"The offset from the boundary to the alignment point oy="0"
         zoom="false"Set whether the hotspot follows the zoom brighter = when the scene is scaled"false"Set whether the hotspot follows the scene for 3D distortion rx="0.0" ry="0.0" rz="0.0"Three-dimensional rotation degree, final ="true"Use the depth ="1000"Depth only HTML5 TX ="0.0" ty="0.0" tz="0.0"3d offset details="8"The number of details displayed in the hotspot, default is 8 only flash Inverserotation ="false"Set whether reverse rotation 3D twist flying="0.0"Automatically set ath/ ATV /scale value, 0.0-1.0, 1.0 hotspot will be locked in the middle of the screen, height 1000 scaleflying="true"Whether to scale width= when hotspot goes from pano-space-size to screen-space-size"" height=""Set the hotspot width scale="1.0"Set the hotspot zoom to rotate="0.0"Set hotspot rotation Angle pixelhitTest ="false"Whether to enable precise pixel testing only Flash Smoothing ="true"         # set whether to smooth when zooming
         accuracy="1"Set the pixel rendering value (under Flash) accuracy2="1"Set accuracy control (html5 under) alpha="1.0"Set transparency autoalpha="false"Set whether to automatically change transparency usecontentSize ="false"Whether to use user-specified Flash size. DefaultfalseOriginal size scale9GRID =""Defines whether vector scaling is supported, scale9Grid ="x-position|y-position|width|height|prescale*"         
         stereo=""SBS, TB only HTML5 and WebGL crop=""Define the element coordinates and width/height crop="x-position|y-position|width|height"
         onovercrop=""Set the coordinate and width of the element onDownCrop = after the mouse moves over it""Scalechildren = sets the coordinates and width of the mouse-down state of the element"false"Whether the child element follows the scaling mask=""                 #mask="name" mask="layer[name]" mask="hotspot[name]"
         effect=""                Effect of 3 # hot bitmap: glow (color and alpha, range, strength);
                                  dropshadow(depth,angle,color,range,strength);
                                  blur(radius);

         onover=""Perform the action onhover= when the mouse passes over""Perform the action onout= when the mouse is over""Perform the action onclick= when the mouse stops and moves out of the range""Perform the action onDown = when the mouse stops and clicks""Perform the action onUP = when the mouse is pressed down""Perform action onloaded= when mouse button is released""Execute action after loading elements />Copy the code

• Polygonal hot spot

<hotspot name="..."
         keep="false"
         visible="true"
         enabled="true"
         handcursor="true"
         zorder=""
         capture="true"
         blendmode="normal"
         style=""
         alpha="1.0"
         autoalpha="false"
         fillcolor="0xFFFFFF" fillcolorhover="0xFFFFFF"Fill color and color after mouse move up fillalpha="0.0" fillalphahover="0.1"Fill color opacity and color opacity after mouse over borderWidth ="0.0" borderwidthhover="4.0"Border width and mouse over the border width borderColor ="0xFFFFFF" bordercolorhover="0xFFFFFF"Borderalpha ="0.0" borderalphahover="0.8"Border transparency and border transparency after mouse up fadeinTime ="0.15" fadeincurve="1.1"Hover state change time and form fadeoutTime ="0.3" fadeoutcurve="0.7"
         polyline="false"
         onover=""
         onhover=""
         onloaded=""
         onout=""
         onclick=""
         ondown=""
         onup="">
    <point ath="..." atv="..."/ > <! -- Polygon hotspot coordinates --> <point ath="..." atv="..." />
    <point ath="..." atv="..." />
    ...
</hotspot>
Copy the code

• Available methods

Hotspot. Count Number of hotspots (read only) hotspot. Layer (AS3 Usage only) hotspot[name].index Index (read only) hotspot[name].point.count Number of polygons (read only) hotspot[name].point[..] .ath hotspot[name].point[..] .atv hotspot[name].loading (read only) Whether hotspot[name].loaded (read only) Whether hotspot[name].loadeDurl (read only) loaded the URL Hovering [name]. Hovering [name]. Imagewidth (read-only) Picture wide hotspot[name].. Imageheight (read only) image high hotspot[name].pressed (read only) whether to press hotspot[name].loader hotspot[name].sprite diagram Hotspot [name].loadStyle (stylename) loads the property set hotspot[name].resetSize () size change callback hotspot[name].getFullPath () returns the fullpath (pluginInterface only) hotspot[name]. Getcenter (ath, ATV) getCenter locationCopy the code

events

Events can invoke various types of events, such as different behaviors triggered by different phases of the loading process, to set the response of the event.

Global KRPANO events:

An event defined by a

element that does not have a name attribute is a global event. There is usually only one global event. When another

tag defines the same event, the same event previously defined is overwritten.

Note – when loading another XML file or other scenario, all global events remain and do not change unless they are defined again in a new XML file or scenario.

<events 	name=""
			keep="false"
		onenterfullscreen=""To enter fullscreen, execute onexitFullscreen =""Execute onXMLComplete = when exiting full screen""Onpreviewcomplete = is executed when the XML file is loaded""Execute onloadComplete = when the preview is loaded""When the panoramic section is loaded, execute onnewpano=""Execute onRemovepano = to start a new panorama scene""Execute onnewScene = when the scene is removed (before loading a newscene)""Onloaderror = is executed when the new scene is loaded""Execute when loading error. After execution is set, the screen will not display the default error message onKeyDown =""Onkeyup = when the keyboard is pressed""Execute onclick= when the keyboard is lifted""Execute onSingleclick = when the mouse clicks""Click the ondoubleclick =""Double-click the onmousedown =""Execute onmouseup= when the mouse is down""Execute onmouseWheel = when the mouse is released""Execute onContextMenu = while mouse wheel is scrolling""Right-click onidle=""Execute onViewChange = when there is no interaction idle""Onviewchanged = is executed when the scene view changes (when rendering starts)""Execute after the scene view changes (when rendering is complete) onresize=""Perform onautorotatestart= when the panorama size changes""Automatic rotation starts when onautorotatestop= is performed""Execute onautorotateoneround= when auto rotation stops""Onautorotatechange = is performed on automatic rotation""Automatic rotation when the state changes />Copy the code

Independent local Krpano events:

Events defined by a

element with a name attribute are independent events. It can contain all types of events, but they do not override global events; they are called separately. These “named”

elements also have the keep attribute (the default is false). This means that

elements without keep= “true” will be automatically removed when the new panorama loads.

Tip – Named events can act in separate plug-ins and code without affecting other plug-ins or XML code.

<events name="..." keep="false". any events ... />Copy the code

action

Action custom dynamic code, similar to function in JS only loaded on demand

<action name="..."   
autorun=""Automatically run scope= at start"global" ( global,local,parent) scope type args=""Parameter list Secure ="false"Security will be set totrueThe action will be called by Javascript to the interface, even if the Javascript interface is disabled. protect="false"Protection fortrueVariables will not be accessibletype=""> Secure calls action1() for javascript interface support; Action function name (); action2(); . </action>Copy the code

Parameters can be passed in two ways:

1. % placeholders (available in all versions) arguments can be represented by “% number” placeholders, ranging from %0 to %99, where %0 represents the name of the action itself, %1 is the first argument, %2 is the second, and so on. Placeholders are replaced by values passed in when the code is parsed and executed. If no arguments are passed in, Will be replaced with “0” (except for %0, which is always the name of the action itself) and replaced with %% with the % symbol.
2. Args variable mapping (1.19- PR13 + available).
3. Caller can be replaced with caller placeholder,For example, caller. Linkedscene is equivalent to linkedScene

<action name="test" scope="local" args="var1, var2, var3">
  showlog();
  trace('var1=',get(var1));
  trace('var2=',get(var2));
  trace('var3=',get(var3));
</action>
Copy the code

With unpassed arguments, ‘0’ is used instead, and each argument maps to a new variable inside the action. Variable mapping is useful when using values that contain quotes or comma characters. In this case, the % placeholder mode can be problematic.

Using javascript

With JavaScript manipulation, you can use JavaScript code directly for action code. For more complex things, this is probably faster, but only available in HTML5

<! -- Use JS, HTML5 only --> <action name="..." type="Javascript"> <! [CDATA[ ... Javascript code ... ]]></action>Copy the code

Define the behavior. It needs to be interpreted by a scripting language interpreter

Available methods

Ction [name]. Content Indicates the obtained content action.count Indicates the obtained quantity Read-onlyCopy the code

Sample:

<krpano onstart="intro();">... <action name="intro"> lookat,0,90 (0);wait(LOAD); Lookto,10,110 (120); 50,40,110 lookto (-); ,0,90 lookto (0); </action> ... </krpano>Copy the code

<action name="overaction"> tween (scale, 2.0); Tween (alpha, 1.0); </action> <plugin name="pic1". onover="overaction();"
        onout="outaction();"
        />
Copy the code

contextmenu

Contextmenu Custom right-click menu

<contextmenu fullscreen="false"Whether to display [full screen] menu items native="false"Whether to use local menu mode. If False, html5-compatible menu mode will be enabled. (Flash only) versioninfo="true"Whether to display krPano Viewer and Flash Player version information touch="true"Whether customStyle = is available on touch devices""Custom menu style (HTML5 only) CustomStyle ="font|fontsize|lineheight|backgroundcolor|textcolor|disabled-textcolor|borderwidth|bordercolor|borderradius|shadow-x-off set|shadow-y-offset|shadow-blur-range|shadow-color|innerborder|innerbordercolor|padding-top|padding-bottom|seperator-mar gin|seperator-color|seperator-second-line-color|item-padding|item-borderwidth|item-bordercolor|item-borderradius|item-ma rgin|item-hover-backgroundcolor|item-hover-bordercolor|item-hover-textcolor|item-text-left-margin|item-text-right-margin "
             enterfs="Fullscreen"Enter the full-screen menu text exitfs="Exit Fullscreen"Exit the full-screen menu text > <item name="..."Custom project name Caption ="..."The title displayed enabled="true"Whether to hit Effect visible="true"Separator = is visible"false"Whether to display the separator bar showif=""         showif="view.vlookatrange GE 180"This item displays onclick= only if the condition is true"..."Click and execute /> <item name="..."
          caption="..."
          onclick="..."
          />
    ...
</contextmenu>
Copy the code

Related method: contextmenu.item.count

network

Network image download, caching and decoding

<network  retrycount="2"Number of retries before an error message is displayed when the server or network fails />Copy the code

memory

Memory Memory allocation (unit: MB)

<memory maxmem="..."Maximum memory allocation devices="..."Equipment / >Copy the code

Maxmem default Settings:

Flash: 350 MB
HTML5
Desktop: 150-400 MB (depending on the full screen size)
Tablet / Mobile: 50 MB (Android, Windows, Silk, Blackberry, ...)
iOS (before 7.1): 40 MB
iOS (7.1 and above): 50 MB
iPhone 4/4S: 40 MB
Copy the code

Set memory usage

Sample:

<memory maxmem="350" devices="Desktop+Flash" />
<memory maxmem="150" devices="Desktop+HTML5" />
<memory maxmem="50"  devices="Mobile|Tablet" />
<memory maxmem="40"  devices="iOS" />
<memory maxmem="50"  devices="iOS7.1" />
Copy the code

security

Security FlashPlayer and HTML5-related security/cross-domain Settings

<security cors=""> Set whether to enable cross-network authentication, off\anonymous\use-credentials < crossDomainxml url=""/> Set the url (flash only) to load the file < allowDomain domain=""/> Allow access to domain name set to read-only </security>Copy the code

lensflareset

Define a lensflare style for lensflare element calls (flash only)

<lensflareset name="." url="%SWFPATH%/krpano_default_flares.jpg"> define the style name, specifying the light photo <flare pixsize="128"Flare size is set pixupos="0"Flare horizontal pixel position pixvpos="0"Flare vertical pixel position color="0xFFFFFF"Flare color Pos ="0.0"Flare initial position scale="0.1"Flare size ratio to screen (0.01 -- 0.10) /> <flare... /> <flare ... / >... </lensflareset>Copy the code

Related methods:

Lensflareset [name] index lensflareset [name] flare. Count lensflareset [name] flare [...]. .indexCopy the code

lensflare

Define a lens flare (Flash only)

<lensflare name="..."Define the nameset="DEFAULT"Set the default style, still defined lensFlareSet style visible="true"If you can see keep="false"Whether ath= is continuously displayed during the scene switch"0.0"The horizontal position of the spherical coordinates in the panorama atV ="0.0"The vertical position of spherical coordinates in the panorama size="0.8"Flare size set blind="0.6"Flare blindcurve="4.0"Flare Curve Intensity Setting />Copy the code

Related methods:

lensflare.count
lensflare[name].index
Copy the code

data

Data can place any data, krpano will not parse its contents, and the contents of the entire Data element will be stored in the Data [neme] object. Load as needed

<data name="...">... </data>Copy the code

Avoid XML parsing CDATA:

 <data name="..."> <! [CDATA[ ... ]]></data>Copy the code

• The number of all data elementsdata.count
• The indexdata[name].index
• contentdata[name].content

CDATA avoids XML parsing and the contents of the package are not parsed:

<! [CDATA[ ... ]]>Copy the code

scene

Scene scene, which can place any element, will not be parsed or used in any case, unless it is called by loadScene and is loaded by the browser for parsing. When the browser loads the XML file, its contents and attributes are not loaded, which is equivalent to a closed container to the browser, which only knows its attributes.

When the external XML file is loaded with loadpano(), the scene element currently defined is removed.

You can store any custom attributes in the Scene element — the viewer itself ignores these attributes, but you can use these elements with custom actions.

<scene name="..." onstart=""> onstart loads the action when the scene starts rendering... </scene>Copy the code

content

scene[name].content
scene.count
scene[name].index
scene.onstart
Copy the code

Sample:

<scene name="scene_1" onstart="" heading="0.0" lng="103.76300000" title="t1" thumbx="75" lat="31.51229500" thumburl="panos/1.tiles/thumb.jpg" thumby="10">
    <view fovtype="DFOV" maxpixelzoom="2.0" fov="90" vlookat="80" fisheye="0.35" hlookat="0" fovmin="70" fovmax="140" limitview="range" hlookatmin="90" hlookatmax="90"/>
    <preview url="panos/1.tiles/preview.jpg" />
    <image multires="true" tilesize="512" type="CUBE" progressive="false">
        <level tiledimageheight="1592" tiledimagewidth="1592">
            <cube url="panos/1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />
        </level>
        <level tiledimageheight="796" tiledimagewidth="796">
            <cube url="panos/1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
        </level>
        <mobile>
            <cube url="panos/1.tiles/mobile_%s.jpg" />
        </mobile>
    </image>
    <hotspot atv="7.482" name="spot1" style="skin_hotspotstyle" ath="32.158" linkedscene="scene_22" />
</scene>
Copy the code

style

A collection of style attributes, similar to class styles in CSS

<style name="...". any plugin or hotspot or self defined attributes ... Insert plugin or hotspot or custom attribute /> <style name="skin_glow"
   ondown="copy(skin_lockglow,name); skin_buttonglow(get(name)); if(ondown2, ondown2() );"
   onover="if(skin_lockglow === null, copy(skin_lockglow,name); Skin_buttonglow (get (name), 0.3)); "
   onout="if(skin_lockglow === name, ifnot(pressed, skin_buttonglow(null); delete(skin_lockglow); ) );"
   onup="If (hovering, skin_buttonglow get (name), (0.3), skin_buttonglow (null); delete(skin_lockglow); ) ; if(onup2, onup2() );"
/>
Copy the code

Get an attribute in style plus global:

trace(global.style[mystyle].bgborder);
Copy the code

include

Include elements can be used to load and import other XML files. Before parsing an XML file, Krpano searches for all XML elements of the include, then loads the corresponding XML content, inserts it into the current XML file, and replaces the include elements. When all

loads are parsed, the main XML is parsed.

<include url="path/name-of-the-other-xml-file.xml" />
<include url="skin/vtourskin.xml" />
<include url="%SWFPATH%/global.xml" />
Copy the code

/
/

are special elements that will be ignored during XML parsing. The contents of these elements are stored as strings in variables.

Progress (obsolete)

Progress Load progress (deprecated), no longer officially documented as a built-in element

<progress showload="auto"Set progress bar styles none or Auto or bar(...) .  bar(origin,width,height,offsetx,offsety,style,backcolor,loadcolor,decodecolor,bordercolor,borderwidth,glowcolor,glowwid th) showwait="loopings()"None or Auto or loopings(...) showreloads="false"Whether to redisplay the scrollbar in the new scene parent=""Set the parent element name and path />Copy the code

Textstyle (obsolete)

Textstyle textstyle for the third argument to showtext (deprecated), new showtext.xml

<textstyle name="..."Define the style name font="Times"Define the text font fontsize="12.0"Define the text size bold="true"Whether bold italic="false"Whether to italic background="true"Whether to load text background backgroundcolor="0xFFFFFF"Background color border="true"Whether to load the border borderColor ="0x000000"Border color textColor ="0x000000"Text color alpha="1.0"Text opacity blendMode ="normal"Select blend mode:"normal"."add"."difference"."multiply"."screen"
           effect=""Select load effects, glow (color and alpha, range, strength); Dropshadow (the depth, Angle, color range, strength); • the blur (radius); origin="cursor"Text origin position CURSOR, lefttop, left, leftbottom,top, Center, bottom, RightTop, right, RightBottom Edge ="bottom"Bottom shadow effect textalign="none"Text alignment None, left, Center, right xoffset="0"Text origin position X offset yoffset="- 3"The Y offset of the text origin position showtime="0.1"Time to display text fadetime="0.0"Fadeintime = text fadeout display time"0.0"Text fades to show the time noclip="true"Whether to avoid text beyond the screen edge />Copy the code

Defines text styles that only work with Flash playback

Sample:

<textstyle name="DEFAULT"
           font="Arial" fontsize="12"
           bold="true" italic="true"
           textcolor="0x000000"
           background="false" border="false"
           blendmode="layer"
           effect="Glow (0 XFFFFFF, 0.85, 4, 4); Dropshadow (2,45,0 x000000, 4, 1);"
           origin="cursor" edge="bottom"
           xoffset="15" yoffset="- 5"
           showtime="0.1" fadeintime="0.1" fadetime="0.1"
           />
Copy the code

Action script syntax

Grammar and Usage

actionname(parameters); .

• Syntax: Action name (parameter);
• The action name can be one of the following:

1. Built-in Krpano action name…
2. Action element name defined anywhere in XML…
3. The variable/property name that contains the action code.

• Whitespace characters (such as Spaces, tabs, new lines) that are not in quotation marks (single or double quotation marks) are ignored.
• You can write several actions at once by adding ‘to the end of each action; ‘character.
• The actions will be executed one by one.
• White space (such as Spaces, tabs, and newlines) between action calls and parameters is ignored.
• The number of arguments depends on the action entity being called.
• Arguments need to be separated by commas ‘,’.
• To use whitespace or commas in an argument, the argument needs to be enclosed in single or double quotation marks.
• All given arguments are treated as characters. When variable names are used as arguments, they are not automatically resolved to corresponding values. Some actions can handle variable name arguments automatically, but that depends on the action body itself. To pass variables as parameters, you must use the GET action. Note – Some actions can automatically resolve the values of variable parameters, but this is limited to a few actions themselves.

expression

Expressions will be used in: if statements; Conditional loop (for,loop) statements; And calC action. Used to determine whether logical conditions are true or not, and to evaluate mathematical expressions or concatenated strings.

• Basic syntax: operator A b
• Where a or B items can be variables, values, or strings.
• The operators can be listed in the following table.
• The order of operations depends on the operator, but within an equivalent operator the order of operations is left to right.
• You can use parentheses to implement a custom order of operations – for example, the (a operator b) operator (c operator D)

.gt. Greater than.ge. Greater or equal to.lt. Less than.le. EQ. Is equal to.ne. Is not equal to.and. Logic AND.or. Logic or.not. Logic.EQV. The precedence of logical inequality operators in descending order is :()→**→* or /→+ or -→.GT. Or.GE. Or. Lt. or. LE. Or.eq. Or. NE. - > NOT. - >.. To.. OR - >. EQV. OR. NEQVCopy the code

An array of

• Each XML element with a name is an element/item of an array.
• The name of an XML element is the name of the array and the name attribute defines the name/item of the array element.
• An array in KRpano is always an array of objects.
• Such an array item object can contain any type of custom property/attribute.
• Arrays can be predefined or defined to dynamically set an array item value at run time. When the item value is set for the first time, an array is automatically created.

Static XML syntax: (defined in XML structure)

Array_name [item_name]. Value Array_name [item_name].

Count Statistics sortby(Attribute, parameters*) sort removeArrayItem (name or index) RemoveCopy the code

The event

Onclick: mouse click onover: mouse over onhover: mouse hover onout: mouse away onDown: mouse down onUp: mouse upCopy the code

count

lensflareset[name].flare.count

index

lensflareset[name].flare[...] .index

---

Official documentation: krpano.com/docu/action…

The global variable

version

Version :(read-only) version information

Xmlversion :(read-only) XML version

Build :(read only) build time

Mouse, keyboard

Mouse.x (read only) Relative to the region, the coordinate origin is the upper-left corner of the area

Mouse. Y (read only)

Mouse.stagex (read only) Relative to the screen, the coordinate origin is the upper-left corner of the screen

Mouse. Stagey (read only)

Mouse.downx (read-only) Stores the location (right click or right click) of the last mouse press, relative to the area, starting from the upper-left corner of the area.

Mouse. Downy (read only)

Mouse.clickx (read only) relative to the region

Mouse. Clicky (read only)

Keycode: 0 (read only) keycode

Wheeldelta: 0 (read only) Standard roll value for a wheel, usually +3(roll forward) or -3(roll back) on most systems

Wheeldelta_raw: Number.NaN (read only) Original scroll value before scaling and integer. Note: In Flash mode, it only works if the default embedding script is used in window mode (non-full screen). With HTML5, it always works.

Wheeldelta_touchscale: 0.0 (read Only) Although touch devices do not have a mousewheel, the onMouseWheel event may still be triggered when both fingers are zooming, and this variable will provide relative scale details.

Note: Only for touch devices! The value on other devices will always be 0.

Screen info/Settings

Fullscreen: false This variable can be used to check or change the current state of full-screen mode. If the variable is changed, the full-screen mode is changed.

example

Toggle full screen onclick="set(fullscreen,true);"
onclick="toggle(fullscreen);"
Copy the code

Note:

• Before using this setting, you should check whether the current device/browser supports full-screen mode. This can be done using devices=”fullscreensupport” in static XML or using the device.fullscreensupport variable in dynamic statements.
• Due to Flash Player and HTML5 security restrictions, switching to full-screen mode requires user action (such as clicking a mouse or pressing a keyboard), which means switching to full-screen mode needs to happen in an onclick or onKeyDown event.
• When HTML5 browsers do not support full-screen mode (such as iOS), the full-screen setting will only change the size of the viewer to match the size of the entire browser window. Does not work in IFRAME and nested HTML due to technical limitations.
• If you try to use full-screen mode from within an IFRAME, it is necessary to include allowFullScreen in the declaration of the IFRAME to tell the browser that the IFRAME is allowed to switch to full-screen mode.

Example < iframe… allowfullscreen=”true” mozallowfullscreen=”true” webkitallowfullscreen=”true”>

Stagewidth /stageheight :(read only) the width/ height of the current view window in pixels

Stagescale: 1.0 Global Scale Setting (HTML5) This setting will scale all krpano element sizes.

By scaling all elements, the stage size (screen size/resolution) itself increases inversely, such as 200% when Stagescale =0.5. The default value depends on the device, browser, and JS window.devicePixelRatio. On desktops and tablets, the default value is usually 1.0. On mobile devices it is usually 0.5.

This means that elements on mobile devices are typically half the size of those on desktops and tablets. To disable this behavior (for example, to implement some custom reactive layouts), place the following code in the first XML.

<action name="mobilescale" autorun="preinit" devices="mobile">
mul(stagescale,2);
</action>
Copy the code

example

<action name="mobilescale" autorun="preinit" devices="mobile">
   mul(stagescale,2);
</action>
Copy the code

Bgcolor: The background color of the view. Display color of panorama image before loading; And the display color of the area not covered by the local panorama. When set to a valid hexadecimal color value (for example, “0xFFFFFF” for white), a shape using that color is rendered behind the panorama as the background. If the embedding setting is not set or invalid, it is transparent and the default background color of FlashPlayer is displayed (modified in the HTML file). When the embedding setting is set to wmode=”transparent”, the HTML page is displayed

Flash only: When set, it allows navigation with the mouse “outside” of the panorama image (e.g. when using partial panoramas), and it allows proper mixing between partial panoramas of different sizes.

Equipment information

Browser. userAgent The character string is a useragent character string. Equivalent to JS navigator. UserAgent (read only)

Browser. platform is the platform string in HTML5, which is equivalent to js navigator. Always “Flash” in Flash (read only)

Browser.location Full URL of the current page (read only)

Browser.domain Domain name (read only)

Browser. protocol (read Only)

• Note: The above variables are valid only if the default embedding. Js is used.

if(device.html5, ...) ;if(device.flash, ...) ;if(device.android, if(device.flash, ...) ;) ;if(device. IOSversion GT 5.1,...). ;Copy the code

Time, random value

Timertick (read Only) The number of milliseconds in which the viewer starts up to the current moment

Random 0.0-1.0 (read only) returns a random value in the range 0 to 1

Idletime 0.5 Sets the number of seconds after which an Onidle event is triggered when no one is operating

// example - generate a random number between 1 and 10 muL (val, random, 9); add(val, 1); roundval(val); trace('random value=',val);
Copy the code

Math constants

Value of the mathematical constant π (PI) (3.141592)

Keyboard/button movement

These variables can be used to set the moving view.

Their main use is keyboard or button action control.

Hlookat_moveforce 0.0 < 0 rotate left; We rotate it to the right when it’s greater than 0

Vlookat_moveforce 0.0 < 0 rotates upward; If it’s greater than 0, it’s rotated down

Fov_moveforce 0.0 < 0; It shrinks when it’s greater than 0

These variables return different values (0, 1, or -1) when controlling the panorama with the keyboard. They can be read or set in their own program code, used to judge the keyboard operation state or realize the effect of automatic rotation.

Rotation acceleration, speed, and brake speed are determined by Control. keybaccelerate, Control. keybspeed, and Control. keybfriction, respectively

// Example - Auto left rotation stops after 3 secondsset(hlookat_moveforce,-1);
delayedcall(3,set(hlookat_moveforce,0));
Copy the code

Multiresolution information

Multireslevel Number of current levels (range :0 to image.level.count-1) (read only)

Lockmultireslevel: 1 is restricted to a certain level, unrestricted when -1.

Downloadlockedlevel: True indicates that the currently qualified layer will be downloaded entirely

Loading information

Progress. Progress: 0.0 Current loading progress value (0.0~1.0), which can be used to create custom loading animation, using onXMLComplete event to start loading animation, stopping it in onLoadComplete event, through the value of this variable during loading to affect the content of the progress display.

XML/Scenario (read Only)

Xml. url (read only) Path to the currently loaded XML file

Xml.content (read only) The entire text content of the current XML file. When a scene is loaded using the loadScene () method, the content in this variable will be just elements

Xml.scene (read only) When a scene is loaded using the loadScene () method, this variable stores the name of the current scene

Xml.view (read only) holds a backup of the elements in the current XML or scene. For example, you can get the original view.hlookat with xml.view.hlookat

• Note – only explicitly defined values are stored here, not default values, which means check if the value exists before using it.

Net. viewerPath Krpano renderer path

Network. Htmlpath HTML path

Network.firstxmlpath First loads the XML path

Net. currentxmlpath indicates the currentxmlpath

/ / such asif(xml.view.fov ! == null, ...) ;Copy the code

Debugging/error handling

Debugmode False Displays debugging trace() information when false is true

Showerrors true The error message window is displayed automatically when an error occurs

Lasterror (read only) is used to retrieve information about the lasterror in the onloaderror event.

Haveexternalinterface True (read-only) Used to check whether the extended interface function is valid. Especially when using the openURL () function, it is necessary to use this variable to determine whether the environment supports the extension interface. This variable is always true when browsing panorama on the web server (the extension interface is always valid), but in local Flash mode, the extension interface is valid only when the browser opens the Flash SWF file in the local trusted folder. For trusted folder management, you can do this in the Flasyplayer security option.

Havenetworkaccess True (read only) This variable is used to check whether networkaccess is valid. This can be used to avoid errors such as unknown errors that occur when using Google Maps or Bing Maps without an Internet connection. This variable is always true when viewing panorama on the web server (network access is always valid), but in local Flash mode, network access is only valid when the browser opens the Flash SWF file in the local trusted folder. For trusted folder management, you can do this in the Flasyplayer security option.

The Layers (flash) only

Pano Image Layer Actionscript 3 Sprite object

Layer.enabled/plugin.enabled true Enables all layers or plugins

Layer.visible/plugin.visible True Makes all layers or plug-ins visible or invisible (HTML5 also supports)

Layer. Alpha/plugin. Alpha 1.0 sets the transparency of all layers or plugins

Layer. Layer/plugin. Layer (as3 only) Actionscript 3 Sprite object for layer/plugin

Hotspot. Enabled True Enables all hotspots

Hotspot. Visible True Makes all hotspots visible or invisible

Hotspot. Alpha 1.0 sets the transparency of all hotspots

Hotspot. Layer (AS3 only) Hotspot’s Actionscript 3 Sprite object

Variables, statements

Define a variable or object: def(variable, type, value*)

• Type Specifies the type of the variable. The variable types can be: Boolean – true or false Number – Number type (including integer and decimal) integer – Integer string – Character type Object – Type of the object containing attributes
• Value (Optional) Initial value of the variable When no initial value is attached and the variable already exists, the current value of the variable is converted to the given type. When no initial value is attached and the variable does not exist, the default initial value is automatically the following: Boolean =false number=NaN(Not a number) INTEGER =0 String =null The object type cannot specify an initial value

def(b, boolean, true); Def (n, number, 123.456); def(s, string,'text'); def(obj, object); Def (obj. X, number, 0.0); Def (obj. J y, number, 0.0);Copy the code

Set ({variable},{value}) note – when this is a variable name, the variable is not automatically taken from the name. Instead, get(variable) should be used to get the value of the variable

set(plugin[{name}].{attribute},{value});
set (layer[skin_map].visible, true);
Copy the code

Get ({variable}), array[get(variable)], < xmlElement attribute=”get:variable”… /> Get the actual value of a given variable Note – some built-in actions automatically get the actual value of the variable name in the parameter, so there is no need to use the GET () statement. For example, add() sub() mul()

set(dstvar, get(srcvar));
looktohotspot(get(name));
lookto(get(h), get(v), get(f));
showtext(get(msg));
tween(var,get(dstval));
set(pic, spot1);
set(hotspot[get(pic)].visible, false);
trace('xyz=', xyz, ' get(xyz)=', get(xyz));
txtadd(msg, 'fov=', get(view.fov));
Copy the code

Calculation statement:

calc(variable, expression)
action( calc(expression), ... )
array[ calc(expression) ]  
<xmlelement attribute="calc:expression". />Copy the code

Expression: mathematical or logical expression

set(y_new, calc(y_old - offset1 + offset2));
set(animationtime, calc('% 1'= ='instant'? 0.0:0.5)); <layer url="calc:'%CURRENTXML%/skin/' + settings.image1" />
Copy the code

Variable copy: Copy (destination, source)==set(destination, get(source)) copy the value from the original variable (source) to the target variable (destination) The value of the original variable will be converted to the type of the target variable. Copy ()

copy(dstvar, srcvar);
copy(cur_hlookat, view.hlookat);
copy(layer[text].x, mouse.x);
copy(layer[text].y, mouse.y);
Copy the code

Variable removal: delete(variable,…) Multiple variables are allowed to be removed simultaneously, separated by commas (,)

set(tmp1, ...) ;set(tmp2, ...) ; .do something ...
delete(tmp1, tmp2);
Copy the code

Check statements: If (condition, then-actions, else- Actions *) executes the corresponding THEN statement if the condition is true, else statement otherwise

if(fullscreen, fullscreensetup(), windowsetup() );
if(fullscreen, set(layer[controls].visible, false));if(i LT 10, loop(next) );
if(var === null, set(var,0));
if(hotspot[spot1] === null, trace(there is no spot1 hotspot));
if((varA GT 5) AND (varA LT 10),
    trace('varA is between 5 and 10'));if(varA AND varB AND varC, trace('all vars are true'));if(var1 GT var2,
    trace('condition is true'); Lookto,20,50 (100); , trace('condition is false'); ,0,100 lookto (0); ;if(a*2+b GT (c+3)*1.5 OR teststring == '123',...). ;Copy the code

Reverse judgment: ifNOT (condition, then-actions, else-actions*) is logically the opposite of if and is used in the same way.

Delayed call: Delayedcall (delay, actions)/delayedCall (id, delay, Actions) calls or executes the specified action after a given time and assigns a unique id to the action. You can cancel the execution of the delayed action by stopdelayedCall (ID)

Delayedcall (5.0, hidelogo ()); Delayedcall (id1, 5.0, hidelogo ()); //id is used for other actions to control the delayedCall delayedCall (10, looktohotspot(spot1); loadpano(pano2.xml); ) ;Copy the code

Remove delay callback: stopdelayedCall (ID) Cancels and stops the delay action for the specified ID

<events name="introimage_events"
        onnewpano="Delayedcall (introimage, 5.0, hide_introimage ());"
        onremovepano="stopdelayedcall(introimage);"
        />
Copy the code

Execute after an Action: Nexttick (Actions) Executes the specified action as soon as the current action body (the action set within the node of an action element) completes execution

// The following actions are displayed first"Test nexttick"
<action name="nexttick_test">
showlog();
nexttick(trace("That's k in Nexttic!");
trace("Test nexttick");
</action>
Copy the code

Executes the specified actions when condition is true: Callwhen (condition, actions) When the expression (condition, actions) is true the actions will be executed if the expression (condition, actions) is not true, then the actions will wait, Note – The main difference with the if() statement is that callwhen() has permissible lag, emphasizing that it is executed only once when the expression’s value becomes true

callwhen(plugin.loaded, plugin.playvideo(...) ;) ; callwhen(plugin[maps].loaded, plugin[maps].setcenter(...) ;) ;Copy the code

Loop statement: For (startActions, condition, NextActions, loopActions) If true, loopactions are executed, nextactions are executed for each iteration, and then the expression is checked, if true, the iteration continues… Terminate the loop until the expression is false

for(set(i,0), i LT 10, inc(i), trace('i=',i) ); .for(set(i,0), i LT layer.count, inc(i), 
  trace('layer[',i,'].name=',layer[get(i)].name); ) ;Copy the code

Continuous cycle: loop(condition, loopactions) asyncloop(condition, loopactions, Doneactions *) executes as long as the expression (condition) is true. For loop() statements, subsequent actions are executed only when the body of the loop is finished; While asyncloop() continues with other events and actions during the loop, loopactions are performed once per frame when the expression is true, and optional doneactions can be performed after the asyncloop() loop is completed.

ondown="Asyncloop (pressed, layer [scrollarea] scrollby (+ 2, 0));"
onover="asyncloop(hovering, updatemousepos(), hideinfo() );"
asyncloop(true, framehandler() );
Copy the code

Timer: setInterval (ID, delay, Actions) and clearInterval (id) Perform the specified action at a specified time

Setinterval (time, 1.0, jsget(time, (new Date()).tolocaletimeString (); ; trace('time=',time); ) ; <events onkeydown="Setinterval (get (keycode), 0.1, trace (keycode);) ;"
        onkeyup="clearinterval(get(keycode));"
        />
Copy the code

Toggle: Toggle (variable) toggles between true and false for the value of the specified logical variable

toggle(fullscreen);
toggle(layer[button1].visible);
Copy the code

Alternate true and false: Switch ({variable}), switch({variable},{valueA},{valueB}) changes the value of a variable

• If you give only one variable with no value argument, it is equivalent to toggle() and the variable will be switched between true and false.
• Given two or more value arguments, the value of variable is converted from left to right.

switch(fullscreen); switch(layer[button1].visible); The switch (layer [for]. Alpha, 1.0, 0.5); switch(layer[child].parent, button1, button2, button3); switch(destpos, -100, 0, +100); tween(y,get(destpos));Copy the code

Break () breaks or stops the current action, which, when used in a for() or loop() loop, only stops the loop itself from calling the binding: Callwith (caller, Actions) can use the specified Plugin /layer or hotspot as the caller to directly access the attributes or events of these elements

• Caller this element will act as the caller and can only use the Plugin/Layer or hotspot element
• Action Any action statement that will be executed in the context of the caller, meaning that attributes and events of the element can be accessed directly

// onclick actually refers to layer[test].onclick();
callwith(layer[test], onclick);
callwith(layer[test], trace('test pos=',x,'/',y); ) ; // Where alpha refers to layer[test].alpha
callwith(layer[test], tween(alpha, 0.0); );
Copy the code

Style attribute copying: Assignstyle (elementName, styles)

assignstyle(layer[test].'teststyle');
assignstyle(layer[test].'style1|style2');
Copy the code

Copies attributes from the attributes of one or more style elements to the target element.

Copyattributes (DestObject, srcobject)

Copies all attributes of one object from another. copyattributes(get(layer[test]), get(style[style1]));

Execute the specified event from all

elements: events.dispatch(eventName, INSTANTLY *) INSTANTLY a Boolean value (true or false, the default is false). When set to true, the event will be called and executed immediately, when not set or set to false, the event will be called after the current operation is called.

<events name="events1" myevent="trace(events1...) ;" />
<events name="events2" myevent="trace(events2...) ;" />
...
events.dispatch(myevent);
Copy the code

Computational correlation method

Mathematical operators allow two or three arguments.

add(variable, valueA, valueB*)
 sub(variable, valueA, valueB*)
 mul(variable, valueA, valueB*)
 div(variable, valueA, valueB*)
 mod(variable, valueA, valueB*)
 pow(variable, valueA, valueB*)
Copy the code

• Two parameters

Add (DST,val1) is equivalent to DST = DST + val1 sub(DST,val1) is equivalent to DST = dst-val1 mul(DST,val1) is equivalent to DST = DST * val1 div(DST,val1) Equivalent to DST = DST/val1 Mod (DST,val1) equivalent to DST = DST % val1 Pow (DST,val1) equivalent to DST = DST ^ val1Copy the code

• Three parameters

Add (DST,val1,val2) is equivalent to DST = val1 + val2 sub(DST,val1,val2) is equivalent to DST = val1-val2 MUL (DST,val1,val2) is equivalent to DST = val1 * Val2 div(DST,val1,val2) is equivalent to DST = val1 / val2 mod(DST,val1,val2) is equivalent to DST = val1 % val2 POw (DST,val1,val2) is equivalent to DST = val1  ^ val2Copy the code

Tip – VAR1 and var2 can be concrete values or variables. When they are variables, their real values are automatically used

set(val, 1);
add(val, 1);
trace('val should be 2: val=',val); The mul (doublewidth, width, 2.0); The mul (scale, 0.5); div(result, vala, valb); add(dst,rotate,360); tween(rotate,get(dst),5); add(xpos, mouse.x, mouse_x_offset); sub(destx, stagewidth, destwidth); Div (aspect, 16, 9); mod(cur_hlookat,cur_hlookat,360); Pow (SQRT, val, 0.5);Copy the code

Inc (variable, byvalue*, Max *, min*)

Dec (variable, byvalue*, min*, Max *)

• Variable Specifies the variable
• Byvalue Specifies the amount to be increased or decreased each time. If this parameter is not present, the specified amount will be increased or decreased by 1
• Max/min Limit Maximum and minimum values of a specified variable When a specified variable reaches one of the limits, the variable is set to the value of the other limit. This can be used to make a specified variable fall within a certain range or be clipped within a specific region (using min= Max)

inc(i);
inc(frame,1,get(lastframe),0);
inc(ypos,30);
inc(view.hlookat, 2, 90, -90);
Copy the code

Clamp (variable, min, Max) limits the value of a variable between a given minimum and maximum.

• Variable The variable to be clipped
• Min min – When the specified variable is less than this value, it will be set to the same value
• Max maximum value – When the specified variable is greater than this value, it will be set to the same value

clamp(percent, 0, 100);
screentolayer(bar, mouse.stagex,mouse.stagey, lx,ly);
div(fill, lx, layer[bar].pixelwidth);
mul(fill, 100);
clamp(fill, 0, 100);
txtadd(layer[barfill].width, get(fill), The '%');
Copy the code

Math functions: Math.* The Math object provides constants and actions for mathematical operations; Most Math actions can be used in one of two ways: by providing only one variable as an argument, which is both the object of the operation and the stored variable of the result of the operation; The second is to provide two parameters, the first is used to store the result, the last is an operation object.

Numerical values (rounded) :
roundval(variable, decimalplaces*)

roundval(val);
roundval(val,2);
copy(cur_hlookat,view.hlookat);
mod(cur_hlookat,360);
roundval(cur_hlookat,2);
copy(cur_vlookat,view.vlookat);
roundval(cur_vlookat,2);
txtadd(msg,'looking at ',get(cur_hlookat),'/',get(cur_vlookat));
Copy the code

Character processing correlation

Conversion to hexadecimal: Tohex (variable, prefix*, length*) converts the given variable to a hexadecimal string that can be used to generate HTML/CSS color strings

• Variable Indicates the given variable
• Prefix (optional) leading character (such as ‘0x’ or ‘#’)
• Length (Optional) Length of the returned value

tohex(color,The '#', 6);set(color, ... an_external_integer_input...) ; tohex(color,The '#', 6); txtadd(layer[text1].css,'color:',get(color),'; ');
Copy the code

Case conversion: Tolower (variable), toupper(variable)

Txtadd (destination, txt1, txT2 *, txt3*,…) If there are only two arguments, concatenate the characters in the second argument to the end of the target variable (destination). If there are more than two parameters, all parameters starting from each two parameters are sequentially joined together and stored in the target variable

• Destination The target variable used to store the result of the connection, which is automatically created if it does not exist
• Txt1, txt2, txt3,… (Optional) Strings to be concatenated When there is only one TXT argument, the TXT is concatenated directly to the end of the current target variable (destination). If you use a variable as a TXT argument, be sure to use get() to get the actual value of the variable

txtadd(picfilename,'%CURRENTXML%/pic_',get(pic),'.jpg');
txtadd(crop,'| 0',get(ypos),'| 333 | 285');
txtadd(pname, 'thumbbar_image_', get(i));
txtadd(layer[text].html,'[p]',get(data[txt1].content),'[/p]');
txtadd(msg,get(view.fovtype),'=',get(fov),'°');
Copy the code

Character interception: subtxt(dstvar, srcvar, startpos, len)

• Dstvar is used to store the target variable of the extracted substring, and is automatically created if the variable does not exist
• Srcvar The variable of the source string
• Startpos substring starting position in the source string
• Len wants to extract the length of the substring

Subtxt (newvar, abcdefg, 2, 3) ----> newvar== BCD, the second start interception, interception 3 charactersCopy the code

String search: indexoftxt(index, TXT, searchtxt, startIndex *) Returns the starting position of the search character (searchtxt) in the string (TXT) (index)

• Index is a variable that stores the returned value. If -1 is returned, the search string (searchtxt) does not exist in the string (TXT). The variable is created automatically if it does not exist
• TXT source string
• Searchtxt Substring to search for
• Startindex (Optional) Specifies the starting position for searching substrings from the source string (default: 0)

String substitution: Txtreplace (var, searchText, replacetext), txtreplace(dstvar, srcvar, searchtext, Replacetext) replaces the searchText string in the source string var/srcvar with the string replacetext

• Var/srcvar/dstvar The source string variables used for the search (var, srcvar) and the variables used to store the returned results (var, dstvar). The variable is created automatically if it does not exist
• Searchtxt The old string to be replaced
• Replacetxt The new string to replace the old string

String split: txtsplit(string, separator, resultingArray), TXtSplit (string, separator, VAR1, VAR2,…)

• String The string to be split. It can be an actual character or a string variable
• Separator Separates the tag character
• Resultingarray The name of the array variable used to store the split result when txtsplit() is used with three arguments. The split characters are placed one by one in the ‘value’ property of the array members
• Var1, var2,… When txtsplit() is used with four or more arguments, the split string is stored in these given variables in turn

Split into separate variables:
txtsplit('1 | 2 | 3'.'|', a, b, c);
trace('a=',get(a), ' b=',get(b), ' c=',get(c));
Result:
a=1 b=2 c=3
Split into an array:
txtsplit('x|y|z'.'|', arr);
for(set(i,0), i LT arr.count, inc(i),
  trace('arr[',get(i),'].value=',arr[get(i)].value); ) ; Result: arr[0].value=x arr[1].value=y arr[2].value=zCopy the code

Transcoding: FromCharcode (var, charcode) converts a Unicode character encoding value to a character and stores it in a variable (var)

• Var is used to store the variable that results from the transformation
• Carcode Unicode character code valueEscape and unescape:The escape (var), the escape (var, text),Unescape (var), unescape (var, text)Encode and decode a string
• Var without text – the variable itself will be encoded or decoded; With text – this variable will be used to store text encoded or decoded characters
• Text (Optional) String to be encoded or decoded

animation

Tween (variable, value, time*, tweentype*, donecall*, updatecall*)

Color support When the specified variable name contains the keyword ‘color’, then its value will be automatically resolved to the 32-bit ARGB color value and processing separately for each color channel multivariable support can handle multiple variables simultaneously, When to use ‘|’ to separate these variables (variable), value (value) and action between types (tweentype), when the variables have more than one, and only one value or repair type, then the action between all variables will be using the same type, or be turned to the same value, and for all variables, Time, Donecall, and updatecAll are also the same

• Variable will be variable change | characters used to separate multiple variables When the variable name contains the keyword ‘color’, a variable’s value has to be treated as a 32-bit ARGB color values
• The value of the variable target value If the value is in front of the ‘%’ character, will be effected according to the percentage way | characters used to separate multiple variables corresponding to different values When using a variable as a value parameter, need to use get () action to obtain the actual value of the variable
• Time (optional) The number of seconds required to change from the current value to the target value (0.5 seconds by default) The time can also be dynamically specified by the distance() statement (multivariable tween is not supported). The principle of distance() is to dynamically set the actual time required for the tween by setting the maximum time for the change of the specified range. In this way, the time of the supplement with small variation is short; On the contrary, it takes a long time to change the amount of tween, mainly to improve user experience. Distance () #distance(dvalue,dtime) #dvalue – distance(dvalue,dtime) #dtime – distance(dvalue,dtime
• Tweentype (Optional) Interpolation calculation type of tween action (default easeOutQuad) More tween action types: Tweentypes
• Donecall (Optional) When the tween action is complete and the specified variable has reached the target value, execute the action in this parameter in addition to the normal action, you can also use the special keyword WAIT here, in which case the user interface and subsequent actions are blocked until the specified variable reaches the target value
• Updatecall (Optional) Specifies that the variable performs the action in this parameter every time it is updated (every frame)Warning – Use caution! This will add strain to the system and slow down the frame rate

Tween (view. Vlookat, 90.0, 2.0); Tween (layer[skin_scroll_layer]. Y, get(mh), 0.5, easeOutQuint,set(layer[skin_map].visible,false)); // Change the Y coordinate of the skin scroll bar component to the specified position, the conversion process takes 0.5 seconds, the conversion mode is easeOutQuint, and the conversion is executed after completionset(layer[skin_map].visible,false)
Copy the code

Stop animation: stoptween(variable,…) Stops the current running tween action

• The current tween operation on the variable will be stopped
• … Variable, variable,… (Optional) Other variables that will be stopped tween

ondown="tween(layer[text].y, 10, distance(400,0.7), linear);"
onup="stoptween(layer[text].y);"
Copy the code

Animation type tweentype:

Dynamic loading

Loading new panorama Note – Only layers, plugins, hot spots, events, and halo elements that have the keep= “true” attribute are retained in the new scene

loadpano(xmlpath, vars*, flags*, blend*)
loadscene(scenename, vars*, flags*, blend*)
loadpanoscene(xmlpath, scenename, vars*, flags*, blend*)
loadxml(xmlstring, vars*, flags*, blend*)
Copy the code

Note – if the selected blend mode is not supported by the environment (such as using webGL-only mode in Flashplayer), it will automatically fall back to the default NOBLEND mode.

loadpano(pano2.xml);
loadpano(pano2.xml, null, MERGE, BLEND(1));
loadscene(scene1);
loadscene(scene1, null, MERGE, BLEND(1));
loadxml('<krpano><image><sphere url="pano.jpg"/></image></krpano>');
loadxml(get(data[xml].content), null, KEEPALL);
loadpano('%SWFPATH%/pano.xml', null, MERGE, BLEND(2)); Loadpano (sphere. The XML, image. Hfov = 1.0 & the limitview = fullrange);Copy the code

Openurl (url, target*)

• Url Indicates the URL to be opened
• Target (optional) _blank – Open in a new window (default) _self – open in the current frame of the current window _parent – open in the parent window of the current frame _top – open in the top frame of the current windowNote when in Flash mode – This action requires the Flashplayer extension interface support, which is only valid within the browser, and requires Flashplayer security Settings when working offline or using the “File:” local URL

openurl('http://krpano.com',_self);
openurl('help.html');
Copy the code

Eval (this.location=”{url}”)

View, camera control

View Settings: Lookat (H, V, FOV *, Distortion *, Architectural *, Pannini *) specifies the position to view the panorama

• Horizontal Angle in H – spherical coordinates (-180 to +180)-view.hlookat
• Vertical Angle in V-spherical coordinates (-90 to +90)-view.vlookat
• Fov (Optional)- View degree (0 to 179)-view.fov
• Distortion (Optional) – Fish-eye distortion setting -view. Distortion
• Architectural (Optional) – Architectural Projection Settings -view.architectural Pannini1)(Optional) – Pannini Projection Settings -view.pannini

Lookat (0, 0); Lookat,0,90 (0); loadpano(pano.xml); Lookat (45.1, 20.2, 110.0);Copy the code

View changes:

lookto(toH,toV,fov*,motiontype*,shortestway*,nonblocking*,donecall*)
 looktohotspot(hotspotname*, fov*, motiontype*, shortestway*)
 moveto(toH, toV, motiontype*)
 zoomto(fov, motiontype*)
Copy the code

Moves the view to the given position from its current position

Note – all UI and other actions are blocked during movement, meaning that other actions can only be performed after the current action has completed. You can use oninterrupt() to allow the user to interrupt this action

Moveto (100.0, 5, linear (10)); zoomto(130,smooth()); Lookto (33-22, 30, smooth,50,20 (100)); looktohotspot(hotspot1); looktohotspot(hotspot2, 40); Looktohotspot (hotspot3, 25, smooth,50,20 (100)); looktohotspot(get(name));Copy the code

Adjust view: adjusthlookat(desthlookat) Adjust view.hlookat value

Solve the shortest path to the desired horizontal position (desthlookat) in a 360 degree surround

• When desthlookat is 0, the correct value of the current horizontal position can be obtained from viet.hlookat: If -180 to +180 is any value from 0 to 360, the shortest movement from the current position to the horizontal position will be corrected. You can use the variable directly, and the actual value will be automatically obtained. The current view.hlookat will be adjusted to the value adjacent to this parameter (without changing the current view).

Adjusthlookat (0); adjusthlookat(0); trace(view.hlookat); Adjusthlookat (140); adjusthlookat(140); adjusthlookat(140); tween(view.hlookat, 140);Copy the code

Getlooktodistance (result, toH, toV, fromH*, fromV*) Gets the Angle between two positions in spherical coordinates (0 to 180 degrees)

Stop the lookto/Looktohotspot/moveto/zoomto event:
stoplookto()

Stop user actions: Stopmovements () Immediately stop all panning projection and scaling actions triggered by the user (via mouse, keyboard, or trackpad)

Wait: Wait (parameter) A number of seconds to wait or to wait for a specific event (LOAD or BLEND) Note – the user interface and all subsequent actions are blocked, meaning subsequent actions can only be executed after the current action has completed. You can use oninterrupt to give the user the ability to interrupt

• Parameter can be any of the following: the number of seconds to wait LOAD – wait until the BLEND is loaded – wait until the BLEND is processed

oninterrupt(break); Lookto,30,70 (150);wait(3); Lookto,0,150 (242); Lookto (280-10, 50);wait(3); loadpano(pano2.xml,null,MERGE,BLEND(2)); Lookat,50,5 (100);wait(BLEND); Lookto,50,150 (100);Copy the code

Oninterrupt: Before processing actions that block the user interface (such as lookto(), looktohotspot(), moveto(), zoomto(), wait(), and tween() using wait as the donecall argument), Using this statement, the user can terminate the execution of these actions at any time by manipulating the interface (such as clicking on actions) and executing the actions in the parameter content.

• Action Command to execute if the user interrupts. There is also a special command: break – To break only the current action (no additional commands).

Coordinate related

Conversion between screenToSphere (X, Y, H, V) and Spheretoscreen (H, V, x, Y,y, stereoside*) screen coordinates and spherical coordinates

• Screentosphere – Converts x/ Y on the screento H/V on the sphere
• Spheretoscreen – Converts h/ V in the sphereto X/Y on the screen

• X /y – Screen pixel coordinates starting at the top left corner
• H/V-Azimuth Angle on the sphere (380×180)
• Stereoside stereoside (optional) For split SCREEN VR – define which side of the screen coordinates there are two possible Settings: L-left; R – screen to the right, Or do not set the normal coordinates that indicate no split screen
• Note: x,y,h,v must be variable names. Exact values are not allowed. If the variable is not defined, it will be created automaticallyscreentosphere(mouse.x, mouse.y, toh, tov);

Transition between screen and sphere coordinates, layer coordinates: Screentolayer (layer, screenx,screeny, layerx,layery), layertoscreen(layer, layerx,layery), Screenx,screeny) transitions between the real screen and the relative layer coordinates

• Layer – Name of the layer element
• Screenx/Screeny – The coordinate pixel value variable on the screen relative to the upper left corner
• Layerx/Layery – The layer coordinate variable relative to the upper-left corner

Note: The screen coordinates are from the upper-left corner (x=0; Y =0) to the lower right corner (x=stagewidth; Y =stateheight) If scalechildren is enabled, the layer coordinates will also be scaled. Layer parameters that do not support rotation must be variables, constants are not allowed. When a variable does not exist, it will be created

screentolayer(bar, mouse.stagex,mouse.stagey, lx,ly);
div(fill, lx, layer[bar].pixelwidth);
mul(fill, 100);
clamp(fill, 0, 100);
txtadd(layer[barfill].width, get(fill), The '%');
Copy the code

Remapfovtype: Remapfovtype (FOv, srcfovType, dSTFOvType), remapfovType (fov, srcfovType, dSTFOvType, width, height) The current field of view (lens zoom) does not change when changing the fovType and recalculating the corresponding FOV

• Fov The new value returned by the foV variable to be changed will also be stored in that variable
• Srcfovtype The current FOvtype can be HFOV,VFOV,DFOV, or MFOV
• Dstfovtype The new FOvtype can be HFOV,VFOV,DFOV, or MFOV
• Bwidth (Optional) Specifies the number of pixels in the width of the view area. Default is the current view size
• Height (Optional) Specifies the number of pixels in the height of the view area. Default is the current view size

set(view.fovtype, HFOV);
set(view.fov, 90); .set(view.fovtype, VFOV);
remapfovtype(view.fov, HFOV, VFOV);
Copy the code

Update to redraw

Update/rebuild the internal 3D model of the PanO object: updateObject (updateall*, updatefov*) Rebuild the 3D model of the panorama object

You must use this statement to update the panorama after dynamically changing display. Details and display. Tessmode while browsing. When changing the image.hfov,image.vfov, or image.voffset Settings in the interaction mode, try calling this statement with updatefov=true to get the updated panorama object

Caution – This statement consumes system resources, use it with caution!

• Updateall (optional) for multiple resolutions – whether to updateall layers with possible Settings: true or false (default is false)
• Hfov,image.vfov, and image.voffset can be set to true or false (default is false).

set(image.hfov,1);
updateobject(true.true);
Copy the code

Screen repainting: Updatescreen () forces the current screen content to be redrawn directly

Redraw the screen and reset the idleTime counter: Invalidatescreen () forces the redraw of the current screen directly and resets the idleTime count (no user interaction time count)

Adding and removing hotspots

Dynamically create and add:

addlayer(name)
 addplugin(name)
 addhotspot(name)
 addlensflare(name, ath*, atv*)
Copy the code

Dynamically create a new layer, plug-in, hot spot, or flare

• Name – The name of the new element to be created (preferably in lower case, do not start with a number or other character)
• Ath/ATV (for halo only) – The spatial position of the halo

addlayer(button);
addhotspot(newspot);
addhotspot(polyspot);
addlensflare(sun, 20, -60);
Copy the code

Removed:

removelayer(name, removechildren*)
 removeplugin(name, removechildren*)
 removehotspot(name)
 removelensflare(name)
Copy the code

Dynamically remove a layer, plug-in, hot spot, or flare

• Name – Name of the element to be deleted
• Removechildren (Optional) – When set to true, all children of the element are also removed

Layer/plugin/hotspot exclusive:

layer / plugin / hotspot[name].loadstyle(name)
layer / plugin / hotspot[name].registercontentsize(imagewidth,imageheight)
layer / plugin / hotspot[name].resetsize()
layer / plugin / hotspot[name].updatepos()
layer / plugin / hotspot[name].changeorigin(align,edge)
layer / plugin / hotspot[name].getfullpath()
hotspot[name].getcenter(ath,atv)
Copy the code

JS extension

Call js function: js(“Javascript function (parameter)”)

Call a Javascript function whose arguments will be pre-parsed by KRpano before actually calling the JS code. Remember to use the GET (var) statement to get the exact value of the variable when in Flash mode – this statement requires the extension interface of Flashplayer, It only works inside the browser and online, when browsing offline or at a local URL, then Flashplayer’s security Settings need to be set

// Here is the Javascript code that exists in a JS or HTML filefunction test(p1, p2, p3)
{
  alert(p1 + ":" + p2 + "/"+ p3); } // The calling code in the panorama project is js(test('Lookat', get(view.hlookat), get(view.vlookat)) );
Copy the code

Call js code: jscall(“… Any Javascript code… “)

– This statement needs to use the Flashplayer extension interface, which is only valid inside the browser and online. When browsing offline or at a local URL, you need to set Flashplayer’s security Settings

// Change the style of the HTML element'document.getElementById("test").style.display="none"; '); // Build js statements with calc() statements and use krpano variable jscall(calc()'console.log("krpano version: ' + version + '"')); // return to the previous page'history.back()');
Copy the code

Get the value of a Javascript variable or return value of a Javascript function: jsget(variable,… Javascript code…)

Gets the value of a Javascript variable or Javascript function that can read and write krpano interface objects in JS code

• Variable The name of the variable used to store the returned value automatically created if the variable does not existNote when in Flash mode – this statement needs to use the Flashplayer extension interface, which is only valid within the browser and online. When browsing offline or at a local URL, you need to set the Flashplayer security Settings

Jsget (ret,'location.href');
trace('Address:', get(ret)); Jsget (passwort,'prompt(" Please enter password ")');
if(password == 'hidden',...). ; // Get the current date (YYYY-MM-DD): jsget(date,'new Date (). ToISOString () slice (0, 10); ');
trace('Date:', get(date)); Js web redirect: js(eval(this.location="{url}")) call soft window: js (openWindow ({url}, {width}, {height}, {name}, {yes/no})); Call search query window: js(openWindow(search.html,290,330, search query,no)); Alert window: js(alert({pop-up window}));Copy the code

debugging

Whether to display output logs: showlog(state*) Displays or hides logs

• State (Optional) true – Displays log information (default) False – Hides log information

Variable trace: Debugvar (varName) displays/traces details (value and type) about variables in the output log, and also displays all object attributes when the variable is an object.

Printing Debugging Information

debug(...)
 trace(...)
 warning(...)
 error(...)
Copy the code

Outputs text or variables to log information

• Trace – Message starts with “INFO:” (white type)
• Error – Messages start with “error:” (yellow font)
• Warning – Messages start with “Warning:” (blue font)
• Debug – The message starts with “debug:” (in green) and is displayed only when debugmode=trueNote – entering too much trace information can affect the rendering efficiency of the panorama, especially not having trace information in every frame

 trace('view.maxpixelzoom=', view.maxpixelzoom);
<events onkeydown="trace('keycode=',keycode);" />
onresize="trace('size=',stagewidth,'x',stageheight);"
onclick="trace('mouse clicked at ', mouse.x, ' / ', mouse.y);"
trace('xyz=',xyz,' get(xyz)=',get(xyz));
Copy the code

Displays an errormessage and blocks user interaction :fatalerror(errormessage)

• Errormessage indicates the errormessage to be displayed

The text

Display text(deprecated) : showtext(text, textstyle*) displays string content on the screen

• Note:

1. What used to be a built-in statement is now implemented by showtext.xml, the default included plug-in
2. Only one string can be displayed at a time. When a new string is displayed again, the current character is erased

onhover="showtext(you are hovering me);"
onhover="showtext(style text,TEXTSTYLE);"// Style calls onhover="showtext(line 1[br]line 2[br]line 3);"Onhover = / / branch"showtext([b]bold[/b] [i]italic[/i]);"/ / fontCopy the code

summary

Official address: krpano.com/docu/quickr…

Common operations

Hierarchy problems

Method 1. Use the maximum Z-index: 2147483647 in HTML to avoid the problem of full screen popovers being covered. Method 2: Generate popovers in panoramic containers

music

Preload MP3 files: preloadSound ({MP3});

playsound: playsound({voice},{mp3},*{Cycle},*{execution});

playsound2D:   playsound2D({voice},{mp3},*{Volume},*{Track },*{Cycle},*{execution}); 

playsound3D:   playsound3D({voice}, {mp3},{ath},{atv},*{range},*{Volume},*{Cycle},*{execution});

playsound3DHS:   
playsound3DHS({voice},{mp3},*{range},*{Volume },*{Cycle },*{execution}); 
Copy the code

Pausesound ({voice});

Resumesound ({voice});

Pause/resume sound: pausesoundtoggle({voice});

Stopsound: stopsound({voice});

Stopallsounds: stopallsounds();

Hot video

The internal control

Playvideo ({video}); Closevideo (); Stop: stop (); Suspended: pause (); Play: play (); Play/stop: togglePause ();Copy the code

External control

Hotspot [{name}].playvideo({video}); Closevideo: hotspot[{name}]. Closevideo (); Stop: hotspot [{name}]. Stop (); Suspended: hotspot [{name}]. Pause (); Play: the hotspot [{name}]. Play (); Play/Stop: hotspot[{name}].togglePause ();Copy the code

Full screen

Switch (fullscreen,true);

Enter fullscreen: set(fullscreen,true);

To exit fullscreen: set(fullscreen,false);

Keyboard mouse

Mouse type:

Move to:set(control.mousetype,moveto); 2 d drag:set(control.mousetype,drag2d); 3 d drag:set(control.mousetype,drag3d); 
Copy the code

Rotation scaling:

Zoom:set(fov_moveforce,-1); Contract:set(fov_moveforce,1); Stop scaling :(fov_moveforce,0); To the left:set(hlookat_moveforce,-1); To the right:set(hlookat_moveforce,1); Stop around:set(hlookat_moveforce,0); Up:set(vlookat_moveforce,-1); Down:set(vlookat_moveforce,1); Stop up and down:set(vlookat_moveforce,0);
Copy the code

Mouse control type: control.mouseType

scenario

_loadpano(%FIRSTXML%GigaMap/{scene_id}/scene.xml,MERGE,{blend})

_loadScene (get(sset.next_scene_id)); Scenario call:

loadpano(%FIRSTXML%scene/{scene_id}/scene.xml,MERGE,{blend})
loadpano(pano2.xml);
loadpano(pano2.xml, null, MERGE, BLEND(1));
loadscene(scene1);
loadscene(scene1, null, MERGE, BLEND(1));
loadxml('<krpano><image><sphere url="pano.jpg"/></image></krpano>');
loadxml(get(data[xml].content), null, KEEPALL);
loadpano('%SWFPATH%/pano.xml', null, MERGE, BLEND(2)); Loadpano (sphere. The XML, image. Hfov = 1.0 & the limitview = fullrange);Copy the code

Matrix map call: loadpano(%FIRSTXML%GigaMap/{scene_id}/scene.xml,MERGE,{blend})

JS communications

JavaScript calls the Krpano object

Embedpano ({// omit other unrelated Settings... id:"krpanoSWFObject",
    onready: krpanoReady
});
function krpanoReady() {
    var krpano = document.getElementById('krpanoSWFObject');
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        krpano.call("webvr.enterVR()"); // enter VR}; }Copy the code

The default KRpano object ID is krpanoSWFObject, but to make sure you can get it properly each time, handle it in the OnReady function of Embedpano.

Krpano JavaScript interface object

set(variable, Call (Action) - Calls and executes any KRPANo action code spheretoscreen(h, V) - Directly call SphereToScreen Action ScreenToSphere (x,y) - Directly call ScreenToSphere actionCopy the code

Krpano invoke JavaScript

jscall("Any JS code")
jscall("alert('11')")
jscall("window.funName()")
jsget(variable, "javascript code") // Return the name of the krpano variable stored by the value, created if the variable does not existCopy the code

Js gets the attributes of any tag

function Getinfo() {
 
var krpano = document.getElementById("krpanoSWFObject");
 
var ath = krpano.get('hotspot[hotspot1].ath');
var atv = krpano.get('hotspot[hotspot1].atv');
alert("ath:" + ath+" atv:" + atv);
 
}

<hotspot name="hotspot1" url="http://www.new720.com/images/logo.png"  onclick="js(Getinfo())"  ath="0" atv="0" ondown="draghotspot();" />
Copy the code

Flash Precautions This action requires the external interface of Flashplayer, so that it can be used when the browser is running. Use Flashplayer’s local/offline call Settings when using the file // path locally or offline.

JS call panorama Action (with arguments)

Write an action in XML, such as:

<action name="layerinfo">
trace(%1);
</action>
Copy the code

Write js scripts in the page, such as:

Precautions The ID name in Embedpano must be the same as the ID name obtained by JS

<script type="text/javascript">
 var krpano = document.getElementById("krpanoSWFObject");
 krpano.call("layerinfo('New720.cn');");
</script>
Copy the code

Get center coordinates

Method one:

Var krpano = document. GetElementById (" krpanoSWFObject "); Krpano. Set (" curscreen_x "window. The innerWidth / 2); Krpano. Set (" curscreen_y "window. The innerHeight / 2); Krpano. Call (" screentosphere (curscreen_x curscreen_y, curscreen_ath, curscreen_atv);" ); Ath = krpano. Get (" curscreen_ath "); Atv = krpano. Get (" curscreen_atv ");Copy the code

Method 2:

var ath = krpano.view.hlookat;
var atv = krpano.view.vlookat;
Copy the code

Panoramic video

<krpano> <! -- include the videoplayer plugin --> <plugin name="video"
            url.flash="videoplayer.swf"
            url.html5="videoplayer.js"
            videourl="video.mp4|video.webm"/ > <! -- define the pano image and refer to the videoplayer plugin --> <image> <sphere url="plugin:video" />
    </image>
</krpano>
Copy the code

Methods: the plugin playvideo (‘ are. Mp4 | are. Webm ‘);

Krpano tools used

Please refer to krpano.com/tools/ for details

Common plug-in

Krpano provides a small and simple interface to develop your own plug-ins, which can be Flash(.swf),Javascript(JS), XML (XML) plug-ins.

Official website: krpano.com/docu/plugin…

You can develop your own plug-ins, and only the official free plug-ins are introduced here

advice

In the daily development, need to customize Suggestions according to the plug-in to develop advanced functionality, each plug-in can be configured individually, low coupling, in need of introducing file, not affect other functions, the following is a personal development structure, in order to reduce the number of requests, automatically by the build tools to monitor the file changes, eventually merged into one master file, This file is all you need to go online. If you have a better plan or other ideas can also be discussed together.

Combobox

Create static list boxes:

<combobox name="box1" design="default" ...any layer settings...>
    <item name="item1" caption="Item 1" onclick="..." />
    <item name="item2" caption="Item 2" onclick="..." />
    <item name="item3" caption="Item 3" onclick="..." />
</combobox>
Copy the code

Create list box dynamically:

<action name="test">       
    addComboboxLayer(box1, default);
    set(layer[box1].align, 'lefttop');
    set(layer[box1].x, 20);
    set(layer[box1].y, 20);
    layer[box1].addItem('Item 1', trace(Item 1 clicked) );
    layer[box1].addItem('Item 2', trace(Item 2 clicked) );
    layer[box1].addItem('Item 3', trace(Item 3 clicked) );
</action>
Copy the code

Size position:

• Position is set by align, edeg, x, y, parent like layer
• If the width is not set, the maximum width in item is taken
• There is no need to set the height; the height is always adaptive

Properties/events

design="default"Selecteditemindex Index of the selecteditem (read-only) onchange=""Item = is called when the selected item changes""Included items, array format, Item [itemName].*/ Layer [cbName].item.count item[itemName]. Item [ItemName]Copy the code

Plug-in operation

AddComboboxLayer (name, design*) Adds a list box (name, RemoveComboboxLayer (name) remove layer[name]. AddItem (caption, onclick) addItem. AddNamedItem (name, onclick) Caption, onclick) Add item, Select layer[name]. SelectItemByName (name) select Layer [name].removeall () Layer [name].openList() opens the list layer[name].closelist () closes the listCopy the code

Custom designs are defined by the < combobox_design > element and have the following properties

margin="2"Margin open_close_speed ="0.25"Open/close speed (seconds)Copy the code

It contains three style elements that set the container, mask, and project styles

<combobox_design name="default" margin="2" open_close_speed="0.25">
    <style name="combobox_container_style"
           bgalpha="1.0"
           bgcolor="0xFFFFFF"
           bgborder="1 0 XFFFFFF 0.5"
           bgroundedge="1"
           bgshadow="0 1 3 0x000000 1.0"
           />
    <style name="combobox_marker_style"
           css="color:#FFFFFF;"
           bg="false"
           txtshadow="0 0 2 0x000000 1"
           />
    <style name="combobox_item_style"
           css="color:#222222;"
           padding="4 4"
           bg="false"
           bgcolor="0xC7E4FC"
           bgalpha="1.0"
           bgroundedge="1"
           txtshadow=0 0 1 0xFFFFFF 1.0"
           />
</combobox_design>
Copy the code

The cb variables in combobox and action (calc_POS_FROM_hFOv_yaw_pitch_roll) conflict

• Combobox cannot be placed inside another layer. Parent can be used to specify the parent
• If you use both the latest combobox plugin (1.19PR13) and the calc_POS_FROm_hFOv_yaw_pitch_roll action, an error will occur because they both use the same variable cb. Just change the name of the variable in calc_POS_FROM_hFOv_yaw_pitch_roll.

---

Official documentation: krpano.com/plugins/com…

Videoplayer

Layer:

<layer name="video"
       url.flash="videoplayer.swf"
       url.html5="videoplayer.js"
       videourl="video.m4v|video.webm"
       posterurl="videoposter.jpg"
       align="center" x="0" y="0"
       pausedonstart="false"
       loop="false"
       volume="1.0"
       onvideoready=""
       onvideoplay=""
       onvideopaused=""
       onvideocomplete=""
       onerror=""
       />
Copy the code

3 D – Bright hot spot:

<hotspot name="video"
         url.flash="videoplayer.swf"
         url.html5="videoplayer.js"
         videourl="video.m4v|video.webm"
         posterurl="videoposter.jpg"
         ath="0.0" atv="0.0"
         distorted="true"
         scale="1.0" 
         rx="0.0" 
         ry="0.0" 
         rz="0.0" 
         pausedonstart="false"
         loop="false"
         volume="1.0"
         directionalsound="true"
         range="90.0"
         rangefalloff="1.0"
         outofrangevolume="0.0"
         onvideoready=""
         onvideoplay=""
         onvideopaused=""
         onvideocomplete=""
         onerror=""
         />
Copy the code

Panoramic image:

<plugin name="video"
        url.flash="videoplayer.swf"
        url.html5="videoplayer.js"
        videourl="video.m4v|video.webm"
        posterurl="videoposter.jpg"
        panovideo="true"
        pausedonstart="false"
        loop="false"
        volume="1.0"
        onvideoready=""
        onvideoplay=""
        onvideopaused=""
        onvideocomplete=""
        onerror=""
        />

<image hfov="360" vfov="180">
   <sphere url="plugin:video" />
</image>
Copy the code

Properties:

Videourl: 'Video address, usually MP4+ webM, from left to right, can be adjusted in preferredformat (MPEG4 / H264). Mp4,. M4v. Mov)- Flash Player/Firefox(Windows 7 +)/ Safari and Chrome/IE Android/iOS/WebM (.webm) -- Firefox and Chrome Ogg Theora (. Ogg,.ogv)- Firefox and Chrome Flash Video (. FLV,.f4v) -- Flash player RTMP Video stream (RTMP :/ / URL)- Flash player HTTP Live streaming (. M3u,.m3U8) -- iOS,Mac Safari is only -- and only < layer > used, not because of Panos -- because of this video iOS error!) Posterurl (HTML5) : cover, default first frame panovideo (use_AS_videopano old) :falseWhether to use as a panorama video pausedonstart:falseWhether to pause the loop at first:falseReduced volume: 0.0-1.0 muted (HTML5) : 1.0 playback speed DirectionalSound (Flash) : 3D sound range (Flash) : muted 90.0 rangefalloff (flash) : 1.0 outofrangevolume (flash) : 0.0 preferredformat (HTML5) : autopause (HTML5) :trueAuto pause video when browser tabs/Windows are hidden autoResume (HTML5) :falseAuto Restore video pauses for a moment and then hides html5Controls (HTML5) from the browser TAB/window:falseWhen enabled (set totrue) to display the browser's built-in video control. Html5preload (HTML5) : auto preload BufferTime (Falsh) : 0.1 Time at which video should be loaded/buffered before it startsfalsePlaysinline (HTML5) :truePlay video inline KRPANO on mobile devices (iPhone, iPad, Android). When disabled, then the browser can finally play video on its own internal video player iphoneworkarounds (HTML5) :trueMake the workspace iPhone video support (iOS version iOS Top 10). Touchworkarounds (html5) :trueEnable playback via touch cell phone and tablet device solutionCopy the code

Events:

Onvideoready: ready onVideoPlay: play onVideopaused: pause onVideoComplete: play complete onError: error onNeedTouch: needto touch ongottouch: when touchCopy the code

Status (read only) :

isvideoready 
ispaused 
isseeking
iscomplete
isautopaused 
needtouch
videoerror
time
totaltime
videowidth 
videoheight
loadedbytes 
totalbytes
Copy the code

Operation:

playvideo(url, posterurl, pausedonstart, starttime)
play()
pause()
togglepause()
stop()
seek(time)
Copy the code

---

Liverpoolfc.tv: krpano.com/plugins/vid…

Scrollarea

<layer name="scrollarea"
       url="scrollarea.swf" alturl="scrollarea.js"
       parent="..."
       align="..." width="..." height="..."
       direction="all"// direction h/v/all draggable="true"// Allow dragging mwheel="true"// scroll onhover_autoscrolling="false"//hover autoscroll ="1.0"// Roll out of friction="0.95"/ / friction acceleration ="0.08"// Acceleration returnAcceleration ="0.15"/ / rebound momentum ="0.06"// Dynamic acceleration onscroll=""// scroll back />Copy the code

Read-only properties:

Loverflow (read-only) LoverFlow = Left overflow RoverFlow (read-only) RoverFlow = Overflow toverFlow (read-only) ToverFlow = overflow at the top Boverflow (read-only) Boverflow = overflow at the bottom Woverflow (read Only) woverflow = Total Width overflow hoverFlow (read only) Hoverflow = Total height overflowCopy the code

Onscroll setcenter(x,y) // set the center scrolltocenter(x,y) // set the center scrollby(dx,dy) // set stopscrolling() // stopscrolling

---

Official documentation: krpano.com/plugins/scr…

Gyro2 (new)

Use the gyroscope and acceleration sensor of the mobile phone/tablet device to control the direction of panorama viewing. Compared to the old version (Gyro plug-in), this version is faster, more timely, accurate and smooth. Use the new version.

Support: ios, Android, Windows Phone can be used as long as the device itself has hardware support

<plugin name="gyro" 
		devices="html5" 
        keep="true"
        url="gyro2.js"// Introduce the plug-in enabled="false"// Enable the gyro camroll="true"// Adjust viewing position according to device rotation"0.0"0.0-0.99 or auto friction, auto is related to zoom/fov/frame-rate touch_mode="full"Off (close)/horizontaloffset (horizontal)/ full (all)/ disablegyro (), sensor_mode="1"Sensor type SoftStart ="0.5"When gyro is enabled, the time for direction changes to 0 will be immediately followed by a Gyro-tracked value of autocalibration="false"Automatic calibration gyroscope onavailable=""
        onunavailable=""
        onenable=""
        ondisable=""
        />
Copy the code

Property: sensor_mode: indicates the sensor type

• 0 = Directly use the latest available sensor data. There is no interpolation or extrapolation. The browser motion can be uneven or smooth according to the sensor-time intervals.
• 1 = Latest smooth insertion between available sensor data. This will give a very smooth but delayed motion.
• 2 = Predict rotation between device sensor data, then insert.
• 3 = Deduce the time of the current frame of the latest available sensor data. This will give a fast response and smooth motion, but there can be twitches when the extrapolated/predicted data and the actual motion do not match.
• 4 = Spin device that predicts current frame. This will give a fast response and smooth motion, but there can be twitches when the extrapolated/predicted data and the actual motion do not match.
• 5 = Predict device rotation and infer sensor data from the latest event current frame time.state isavailable="false"Whether the device supports gyroscopesThe event

Onavailable: Invoke onUnavailable ona device that supports gyroscopes: Invoke onEnable ona device that does not support gyroscopes: invoke ondisable when gyroscopes are enabled: Invoke ondisable when gyroscopes are disabledCopy the code

Operation resetSensor(hlookat, vlookat*) : Reset gyroscope orientation

MoreTweenTypes Plugin

This plug-in is used as an argument to the tween method. Ease Out and In:

• easeOutInQuart
• easeOutInQuint
• easeOutInSine
• easeOutInBounce
• easeOutInCirc
• easeOutInCubic
• easeOutInExpo Ease In and Out:
• easeInOutQuad
• easeInOutQuart
• easeInOutQuint
• easeInOutSine
• easeInOutBounce
• easeInOutCirc
• easeInOutCubic
• easeInOutExpo

The introduction of the plugin

<plugin url.html5="moretweentypes.js"
        url.flash="moretweentypes.swf"
    	preload="true"
        />
Copy the code

Gridmenu

Plug-in properties Configuration

• button  (optional)
  • Whether to display the default buttons to show and hide grid menus
  • The default value = true
• padding_top  (optional)
  • The top margin of the thumbnail scroll area
  • This margin will be set to 0 for mobile phones
  • The default value = 75
• padding_bottom  (optional)
  • The bottom margin of the thumbnail scroll area
  • This margin will be set to 0 for mobile phones
  • The default value = 75
• width_margin  (optional)
  • The left and right margins of the thumbnail scroll area
  • This margin will be set to 0 for mobile phones
  • The default value = 0
• grid_bgcolor  (optional)
  • The background color
  • The default value = 0 x000000
• grid_bgalpha  (optional)
  • Background transparency
  • The default value = 0.7
• display_title  (optional)
  • Show grid menu titles
  • The default value = true
• grid_title  (optional)
  • Grid menu titles
  • Default value =GRID MENU
• grid_title_css  (optional)
  • CSS styles for grid menu titles
  • The default value = color: # FFFFFF; font-family:Raleway; font-size:35px;
• group  (optional)
  • Whether to arrange thumbnails by group
  • Note that scenes that are not in the group are not shown
  • The default value = false
• current  (optional)
  • Show only thumbnails of the current group
  • The default value = false
• cat_container_height  (optional)
  • Group the height of the header container
  • The default value = 35
• cat_container_border  (optional)
  • Group header container border Settings
  • Default value =0,0,1,0 0xffffff 1.00
• cat_container_title_css  (optional)
  • Group the CSS styles of headings
  • The default value = color: # FFFFFF; font-family:Raleway; font-size:25px;
• cat_container_title_align  (optional)
  • Alignment of group headings
  • The default value = left
• cat_container_border_height  (optional)
  • Bottom margin of group headings
  • The default value = 1
• display_cat_desc  (optional)
  • Whether to display the group description
  • The default value = true
• cat_desc_css  (optional)
  • Group description of CSS styles
  • The default value = color: # FFFFFF; font-family:Raleway; font-size:14px; text-align:left
• thumbs_crop  (optional)
  • The CROP property of the thumbnail
  • The default = 0 75 | | 240 | 150
• thumbs_width  (optional)
  • The width of the thumbnail
  • The default value = 240
• thumbs_height  (optional)
  • Thumbnail height
  • The default value = 150
• thumbs_padding   (optional)
  • The margin of the thumbnail
  • The default value = 25
• thumbs_scale   (optional)
  • Maximum thumbnail size in percentage
  • The default value = 100
• active_thumb_border   (optional)
  • Active thumbnail border Settings
  • Default value =3 0xFFFFFF 1.00
• display_thumb_title   (optional)
  • Whether the thumbnail title is displayed
  • The default value = true
• thumb_title_align   (optional)
  • Alignment of thumbnail titles
  • The default value = bottom
• thumb_title_x   (optional)
  • The X position of the thumbnail title
  • The default value = 0
• thumb_title_y   (optional)
  • Y position of thumbnail title
  • The default value = 5)
• thumb_title_css   (optional)
  • CSS styles for thumbnail titles
  • The default value = color: # FFFFFF; font-family:Raleway; font-size:16px; text-align:left;
• thumb_title_roundedge   (optional)
  • Background rounded corner Settings for thumbnail titles
  • The default value = 5)
• thumb_title_background   (optional)
  • Whether the thumbnail title background is displayed
  • The default value = true
• thumb_title_backgroundcolor  (optional)
  • Thumbnail title background color
  • The default value = 0 x000000
• thumb_title_backgroundalpha  (optional)
  • Thumbnail title background transparency
  • The default value = 0.8
• thumb_title_border   (optional)
  • Whether the thumbnail title background border is displayed
  • The default value = false
• thumb_title_borderwidth  (optional)
  • Thumbnail title border width
  • The default value = 1
• thumb_title_bordercolor  (optional)
  • Thumbnail title border color
  • The default value = 0 XFFFFFF
• thumb_title_borderalpha  (optional)
  • Thumbnail title border transparency
  • The default value = 1
• thumb_title_padding  (optional)
  • Thumbnail title margins
  • Default value =3 10
• display_thumb_desc  (optional)
  • Whether to display the scene description on the thumbnail
  • The default value = true
• thumb_desc_css  (optional)
  • CSS style for scene description
  • The default value = color: # FFFFFF; font-family:Raleway; font-size:15px; text-align:center
• thumb_desc_bg_color  (optional)
  • Background color of the scene description
  • The default value = 0 x000000
• thumb_desc_bg_alpha  (optional)
  • Background transparency of the scene description
  • The default value = 0.6
• thumb_desc_padding  (optional)
  • The margin of the scene description
  • Default value =8 15
• loadscene_flags  (optional)
  • Flag parameter of the Loadscene action
  • The default value = the MERGE
• loadscene_blend  (optional)
  • The blend parameter for the Loadscene action
  • The default value = BLEND (1)
• vcenter  (optional)
  • Whether the grid menu is centered vertically
  • The default value = false

Plug-in action

• rg_show_thumbs_grid(true/false)
• Show or hide the grid menu
• You can choose not to use the default button, or override it with the following code
  
  

  <layer name="thumbs_button" url="gridbut.png" keep="true" align="bottom" onclick="rg_show_thumbs_grid(true);" crop="0|0|45|45" y="15" zorder="101"/>

  skin_setting

  <! -- skin_setting custom element, default skin Settings --> maps="false"<! -- Whether to use Bing Maps or Google Maps --> maps_type="bing"<! -- Choose to use Google Maps or Bing Maps --> maps_bing_API_key =""<! Maps_google_api_key = maps_google_api_key=""<! -- Maps_zoombuttons = to obtain API keys for Google Maps"false"<! -- Whether to display the zoom button on the map --> gyro="true"<! -- Whether to use gyroscope --> webVR ="true"<! -- Enable VR --> webVR_gyro_keeplookingDirection ="false"<! -- WebVR_prev_next_mems = keeps watching when entering gyro or VR"true"<! Littleplanetintro = -- whether to enable the link hot spots to navigate to before and after scenes in VR --> littlePlanetintro ="false"<! -- Whether to use asteroid opening --> title="true"<! -- Whether the bottom left corner shows title --> thumbs="true"<! Thumbs_width = --> thumbs_width= --> thumbs_width= --> thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0 40 | | 240 | 160"<! Thumbs_opened = -- thumbnail width, height, spacing, and thumbnail crop range --> thumbs_Opened ="false"<! -- Does thumbs_text pop up on startup --> thumbs_text="false"<! -- Whether to display the name on thumbnail --> Thumbs_dragging ="true"<! Thumbs_onhoverscrolling = --> thumbs_onhoverscrolling="false"<! -- Allows thumbs_scrollbuttons to scroll automatically --> thumbs_scrollbuttons="false"<! -- Whether to show thumbnail scroll button --> thumbs_scrollindicator="false"<! -- Whether to display thumbnail scrollbar --> thumbs_loop="false"<! -- Whether scroll buttons use thumbnail loops --> tooltips_buttons="false"<! Tooltips_thumbs = tooltips_thumbs="false"<! Tooltips_mems = -- tooltips_mems ="false"<! -- Tooltips_mapspots = whether a text prompt will pop up when the mouse hovers over a hot spot --> Tooltips_mapspots ="false"<! -- Whether text prompt pops up when the mouse is hovering over a map hotspot --> deeplinking="false"<! -- Whether to use the deep link fetch function to enable the current page path to get scene and view information --> loadScene_flags ="MERGE"<! -- LoadScene_blend = -- loadScene_blend =OPENBLEND(0.5, 0.0, 0.75, 0.05, Linear)<! -- Thumbnail fusion when switching scenes --> loadScene_blend_prev ="SLIDEBLEND (0.5, 180, 0.75, linear)"<! -- fusion when thumbnail switches to previous scene --> loadscene_blend_next="SLIDEBLEND (0.5, 0, 0.75, linear)"<! -- Thumbnail fusion when switching to the next scene --> loadingText ="Loading..."<! -- Text displayed when the panorama is loaded --> layout_width="100%"<! -- Navigation bar container percentage of screen width --> layout_maxWidth ="814"<! -- Navigation bar container maximum width pixel --> controlbar_width="- 24"<! -- Navigation bar background width pixel --> controlbar_height="40"<! -- Height pixel of navigation bar background --> controlbar_offset.normal="20"<! -- Distance between navigation bar background and bottom of screen --> ControlBAR_offset_CLOSED ="- 40"<! -- Distance between navigation bar hidden state and bottom of screen --> Controlbar_overlap. No -fractionalscaling="10"<! - don't support the grading scale page and set pixel than equipment navigation overlap pixels - > controlbar_overlap. Fractionalscaling ="0"<! Design_skin_images = -- supports hierarchical scaling of the page and sets the pixel ratio of the device's navigation bar overlap pixels"vtourskin.png"<! -- Source image for the skin --> Design_bgColor ="0x000000"<! -- Background color of skin --> Design_bgalpha ="0.5"<! -- Skin transparency --> Design_bgBORDER ="0 0 XFFFFFF 1.0"<! -- Skin border --> Design_bgroundedge ="1"<! -- Skin border rounded corner Settings --> Design_bgSHADOW ="0 0 9 0xFFFFFF 0.5"<! -- Skin background shadow --> Design_thumbBORDER_bgBORDER ="4 0 XFFFFFF 1.0"<! -- Skin thumbnail border --> Design_thumbborder_padding ="2"<! Skin thumbnail border spacing --> Design_thumbborder_bgroundedge ="5"<! Rounded corner of skin thumbnail border --> Design_text_css ="color:#FFFFFF; font-family:Arial; font-weight:bold;"<! -- Skin text Style --> design_text_shadow="1"<! -- Skin text shadow --> <! If you want to change the skin style, you can change the skin_settings value above, or optionally include a preset design below, by removing the specific include elementifProperty or add initvar:{design: 'flat_light'} to the HTML file embedpano(). --> <include url="skin/vtourskin_design_glass.xml"       if="design === 'glass'"       />
  <include url="skin/vtourskin_design_flat.xml"        if="design === 'flat'"        />
  <include url="skin/vtourskin_design_flat_light.xml"  if="design === 'flat_light'"  />
  <include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" />
  <include url="skin/vtourskin_design_117.xml"         if="design === '117'"         />
  Copy the code