Plugin "Hotspot Editor" v1.31

only HTML5.


  • Changing the main parameters of the hotspot visually controlling the result.
  • Move the hotspot with the mouse.
  • The original system of changing the parameters "click and move".
  • Output of parameters to the window for editing, copying, pasting. Enter parameters directly on the buttons.
  • Change all the parameters of the text hotspot - colors, shadows, borders, radii, transparency, input and editing of HTML text, editing CSS style.
  • The ability to make actions in the attributes onover, onhover, onclick, ondown, onnout, onup, onloaded.
  • Ability to create, delete, copy hotspots.
  • Ability to edit and save changes without opening files xml.

Editing text hotspots (version 1.3).

Description of the editor panels.

The editor consists of three panels:
1. It is a panel with inside buttons for changing the basic parameters of the hotspot, creating, copying and deleting hotspots. For convenience, the panel moves with the mouse, moves apart in height and has a scrolling of the buttons. By clicking on the top of the panel, it collapses.
2. A window in which the current hotspot parameters are displayed. This is a line in which you can edit, copy and paste data. Entering data by pressing a key "Enter".
3. The panel for editing all parameters of the text hotspot: at the bottom there are two buttons of help on
text hotspot on the site krpano and description of the hotspot editor with a link to the current page. Appearance is the same as that of the first panel.

How to change settings.
Select the hotspot by clicking on it, the name of the edited hotspot appears at the top of the panel. The edited hotspot is moved by the mouse and the positioning coordinates are immediately displayed on the corresponding buttons.
Parameter changes occur by pressing the left mouse button on the button and shifting to the left to the left (decrease the parameter), to the right (increase the parameter). The further the mouse is taken from the point of pressing, the faster the parameter is changing.
Changes are immediately applied to the hotspot and you can visually control the result.
Parameters that have two states (on/off) are switched by clicking the button.
Clicking on the button highlights it with a green frame, direct input from the keyboard becomes available-all digits, percent (button "5" of the upper row of the keyboard), letters A, B, C, D, E for entering the color value in the sysnatural system and entering "prop" (proportionally). In case of an input error, the" Backspace" key clears the button.
The selected option is also displayed in the panel with the input line, in which editing is available - delete, copy, paste. To enter, press "Enter".

Panel with a line for editing parameters.

Pressing the button in the editing panel displays the parameter of the corresponding element in the line. The name of the edited parameter appears above the line.
Select, copy, paste, delete operations are available. To enter parameters, press the "Enter" key.

The panel for editing the basic parameters of the hotspot.

View documentation on hotspot on the site of krpano.

  • on-off - disable-enable editing mode.
  • type - displays the active hotspot type (text, image).
  • url - if the type is "image", then displays the path to the image that you can edit directly in the window.
  • style - displays the hotspot style in the window, which can be changed directly in the window.

    The "enabled", "visible" parameters are activated with the "on-off" button turned off. In edit mode, the zbuttons display their status, which will be active after the editor is turned off.

  • enabled - enabled or disabled (true, false).
  • visible - visibility (true, false).
  • scale - rescaling.
  • width - change of width (in px.).
  • height - change of height (in px.).
  • alpha - change of transparency (from 0 to 1).
  • rotate - rotation (in degrees).
  • ath - horizontal coordinates (in degrees).
  • atv - vertical coordinates (in degrees).
  • edge - positioning of a point of a binding in a hotspot (9 variants).

    The parameters "rx", "ry", "rz" change only when the parameter "distorted" is on .

  • rx - rotation around own axis x. (in degrees).
  • ry - rotation around own axis y (in degrees).
  • rz - rotation around own axus z (in degrees).
  • ox - shift on an axis x (in px.).
  • oy - shift on an axis y (in px.).
  • depth - The internal depth of the 3D rendering is the distance of the 3D object to the screen. For 2D viewing, this has no apparent effect, but for stereo 3D / VR viewing it can be an important setting.
  • zorder - ordering elements of "hot spots" (from 0 to 100).
  • distorted - on/off distortion (true, false).
  • capture - mouse capture (true, false).
  • keep - show on all panoramas or only on the current (true, false).
  • handcursor - type of cursor in the form of a hand when hovering over a hotspot (true, false).
  • maskchildren - cut off affiliated elements (true, false).
  • mipmapping - smoothing (true, false).

Clicking on the buttons listed below activates a window with an input line in which you can register or edit actions or functions.

actions/functions that will be called when...
  • onover - the user hovered the mouse cursor.
  • onhover - the user hovers the mouse cursor, are called 15 times per second while the cursor over the hotspot.
  • onout - the user has removed the cursor from the hotspot.
  • ondown - the user clicked the hotspot.
  • onup - the user released the hotspot.
  • onclick - the user clicked on the hotspot.
  • onloaded - when uploading a hotspot image.
Create, delete, copy hotspot.
  • aim - turn on/off the sight for the convenience of placing a new hotspot.
  • add hotspot text - create a hotspot type "text".
  • add hotspot image - create a hotspot type"image".
  • remove "Delete" - remove hotspot. When the button is active, the deletion is possible by pressing the key "Delete".
  • copy hotspot "+" - copy hotspot. If no hotspots are selected, the "+" key creates a new text hotspot. When the hotspot is selected, the "+" key creates a copy of it.
  • Drag - block the movement of the selected hotspot (on-off).
  • Speed - сhange in the speed of adjustment of basic parameters from 0 to 10.
  • Display all attributes - open a window with the current hotspot settings for copying.
  • Save XML - save changes to file param_set_hs.xml.

Text Hotspot Editing Panel.

View documentation on text hotspot on the site of krpano.

  • HTML - displays HTML text that can be edited.
  • CSS - displays a CSS style for the HTML text that can be edited.
Color editing tab "Color".

Pressing the button activates the selected item and it becomes possible to change the color settings with the sliders below.

  • bgcolor - filling.
  • border - border.
  • shadow - hotspot shadow.
  • text - text.
  • txtshadow - text shadow.
  • Color adjustment sliders.
    • Tone - change the color tone.
    • Saturation - saturation variation.
    • Brightness - brightness change.
    • Transparency - change transparency.

If the saturation is zero (gray), you can not adjust the tone. First you need to get out of the "gray" by raising the saturation.

  • Width border - change the width of the border (pixels).
Angle change tab (pixels).
  • all - Change in the radius of all angles simultaneously.
  • lefttop - Top left corner.
  • righttop - Top right corner.
  • rightbottom - Bottom right corner.
  • leftbottom - Bottom left corner.
Hotspot shadow change tab (pixels).
  • xoffset - indentation of the shadow along the x axis.
  • yoffset - indentation of the shadow along the y axis.
  • blur - shadow blur.
Shadow text change tab (pixels).
  • xoffset - indentation of the shadow along the x axis.
  • yoffset - indentation of the shadow along the y axis.
  • blur - shadow blur.
Text indent tab (pixels).
  • all - Change the indentation from all sides simultaneously.
  • top - the offset from the top.
  • right - the offset from the right.
  • bottom - the offset from the bottom.
  • left - the offset from the left.

  • oversampling - Quality of text rendering (from 1 to 4).
  • vcenter - vertical centering of text (true, false).
  • wordwrap - auto word wrap on a new line (true, false).
  • bg - change of width (in pix.).
  • mergedalpha - by default, the alpha transparency of the background will also apply to the border and shadow, but by disabling this option, you can display the border and shadow with their own and independent alpha transparency (true, false).

How to connect.

After connecting the editor, all the hotspots become available for editing.
To connect the editor, put the folder "edit_hotspot" in the root folder with the tour and set in the main file xml:

    <krpano .... >
    <include url="edit_hotspot /edit_hotspot.xml" />
    <include url="edit_hotspot /param_set_hs.xml" />

If the editor is used without saving to an XML file, then you can only write

    <include url="edit_hotspot /edit_hotspot.xml" />


There are three options for saving the changed parameters.

For hotspots registered in the main file tour.xml are all three options for saving. If hotspots are created with the help of the editor, then only the first option of saving them is possible.

1. Saving without editing files xml.
Connect to the main XML file "param_set_hs.xml"
After editing the hotspots, click the button in the panel "Save XML".

The Explorer window opens, in which you need to specify the "edit_hotspot" folder to save the file "param_set_hs.xml".
We select the file "param_set_hs.xml" in the window, click "save" and confirm "replace file".

Reboot! browser window - changes are accepted.
Upon completion of work on the hotspots, you need to leave the files "param_set_hs.xml" and "Install_HS.xml" in the "edit_hotspot" folder and delete the "picture" folder and the files "edit_hotspot.xml", "edit_HText.xml". In the file "tour.xml" leave only "param_set_hs.xml"

    <krpano .... >
	<include url="edit_hotspot /param_set_hs.xml" />
2. Copying from the window with the editing line. Press the "Display all attributes" - all hotspot attributes will be displayed in the window. Select selectively or all the text "Ctrl + A" copy "Ctrl + C" and replace the changed hotspot parameters with those copied to the file tour.xml.

3. Copying from the console.
Open the console (the "O" key). Click on the edited hotspot - the console will display the current hotspot settings.

Select the required parameters with the mouse, copy and replace the changed hotspot parameters with those copied to the file tour.xml.


The file "param_set_hs.xml" stores the created hotspots and parameters of the changed hotspots. When you start from this file, changes are made to existing hotspots, new hotspots are created. The main "tour.xml" does not change. All parameters are updated, which are regulated in the editor even if they were not edited. The other parameters of the hotspots from "tour.xml" are not affected and edited in the file "tour.xml"
Changes made to the hotspot in the file "tour.xml" and modified by the editor on restart will take the editor's settings from the file "param_set_hs.xml" !

If you delete the file "param_set_hs.xml", then the hotspots will take values from the file "tour.xml".
It is important to save the settings before proceeding to another scene, otherwise the settings will not be saved. You need to check the browser save options, by default the save can be in the "download" folder. Change settings.

browser "chrome"

Purchase plugin.

Plug-in price 29 EUR.

Test the plugin by this link . You can purchase the plugin by paying by the methods indicated below.
Do not forget to specify the e-mail address. The archive for download will be sent within 24 hours after payment is received.
Updates plug-in for free!

Pay via Payoneer with any Bank card without registering on the site. Кнопка

If you have questions about the purchase of a plug-in or have difficulties with payment - send me an email at I will surely answer!
You can also use the feedback form (in the lower left corner of the site), or leave information in the "Comments" section.

The archive includes:
Working example of use. In the example, the folder ""edit_hotspot"" with the gallery files in which:
  • picture (folder with icons and file edhssan.js).
  • edit_hotspot.xml (executing file. closed code).
  • edit_HText.xml (executing file. closed code).
  • Install_HS.xml (executing file. closed code).
  • param_set_hs.xml (for saving parameters).



Version 1.31

Fixed bugs in the version of krpano-1.19-pr16.
Added restriction to move and stretch editor panels within the screen.


Version 1.3

This is a cardinally changed editor, in which the functionality is expanded.
Added panel for I/O information with the ability to copy and paste parameters.
Added a panel for editing all parameters of the text hotspot - colors, shadows, borders, radii, transparency, input and editing of HTML text, editing CSS style.
Changed the appearance of the main panel, added scrolling buttons.
Added stretching panels - you can pull, grabbing the bottom right corner.
The attributes of the hotspot were added to the editing: depth, zorder, distorted, capture, keep, handcursor, maskchildren, mipmapping.
Added all the attributes of actions: onover, onhover, onclick, ondown, onnout, onup, onloaded.
Added block for creating, copying and deleting hotspots.
Added a button "on-off" drag mode for each hotspot.
Added buttons for opening help information (go to the site) by text hotspots and by the hotspot editor.
The "Display all attributes" button displays all the parameters of the edited hotspot in the new information input and edit panel.


Version 1.2

Change the connection method. It is not necessary to prescribe the actions for editing in each hotspot. After connecting the plug-in, all hotspots automatically become available for editing. Added a button in the "on/off" panel - disable-enable editing mode.


Version 1.1

Change the save method. Added saving without editing files xml. Fixed bugs with editing hotspots with the same names in different scenes.


Version 1.0


Editing text hotspots (version 1.3).

Saving parameters to an XML file (version 1.2).

Example in the 3D tour (version 1.2).
Expand to full screen.

Example on YouTube (version 1.1).


Plugin is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will author of plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not plugin author have been advised of possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event plugin author will have no liability arising out of this agreement.