<krpano .... >
    <include url="add_hotspot/plugins_l/add_hotspot.xml" />     
    <include url="add_hotspot/plugins_l/editor/add_hotspot_2.xml" />  	
    .
    .
    </krpano>
	

  <include url="add_hotspot/plugins_l/editor/add_hotspot_2.xml" />

  <krpano>
    <include url="%SWFPATH%/skin/add_hotspot/plugins_l/add_hotspot.xml" /> 
    <include url="%SWFPATH%/skin/add_hotspot/plugins_l/editor/add_hotspot_2.xml" /> 	
  </krpano>

  <addhs_settings FIRSTXML="test" 
		path="%SWFPATH%/skin/"
	/>

Plugin activation.

The plugin will only work with your krpano license.

You need to send me the email that you used to register your krpano. It can be seen in "krpano Tools".

After that, you will receive an email with a link to download the plugin and a key file with activation instructions.

Panel for hotspots creating.

For convenience, panel moves with mouse. Clicking the triangular button opens/closes panel.

Purpose of buttons:

Search.

The list includes all global hotspots and local hotspots of the open scene, including hotspots not created by the plugin.

• List of hotspots - drop-down list of hotspots.
  Hovering over the name in the list rotates the scene to this hotspot. A click on a name in the list activates it and the name appears in the search bar.
• Search - hotspot search string.
  Enter a name and press Enter. A view of this hotspot will be established and it will become active for editing.
  When you click on hotspots (activation), the name of the hotspot appears in this line, it is available for copying via keyboard shortcuts ("Ctrl + C").

Advanced options.

By default, a hotspot image is created without assigning any actions to it. In the tab "Manual setings (direct input)" you can set its parameters manually.

How to change parameters:

Select a hotspot by clicking on it, name of edited access point appears on first line. Edited hotspot is moved by mouse and positioning coordinates are immediately displayed on corresponding buttons.
Clicking in an empty place on screen resets selection!

Changes to parameter are made by pressing left mouse button and moving it to the left (decrease the parameter) and to the right (parameter increase). Farther the mouse is moved away from click location, when faster parameter changes.
The changes are directly applied to hotspots and you can be visually controlled result.
Parameters that have two states (on or off) switch by clicking on button.
Clicking on button highlights it with a green frame, direct keyboard input becomes available - numbers (right on keyboard), percentage ("5" button of top row of keyboard).
Backspace clears the numeric value on the button.
Selected parameter is also displayed in the line above buttons, where you can edit/delete, copy, paste. To enter, press "Enter" button.

You can also edit local hotspots. Make changes and open the active hotspot settings window. Copy the changed parameters and paste into the hotspot.

Attribute window - open a window to display the parameters of the active hotspot.

Select a hotspot by clicking on it - its attributes will be displayed in this window. You can select and copy parameters by pressing "Ctrl + C". The size of the window can be changed by grasping the lower right corner. The text inside the window is automatically distributed across the width. The window can be moved by grasping the top. Entering parameters in the window is not possible.

Action list - open a window with a list of frequently used actions.

You can use it as a draft, you can copy ("Ctrl + C"), paste ("Ctrl + C") actions.
The list is along the way add_hotspot/plugins_l/actionSM.html - you can fill in the required information.

Info "action" - opens the Krpano website with background information on actions and functions .

Info "hotspot" - opens the Krpano website with background information about settings of hotspot.

- Show 3D coordinates and invert control controls.

This tool should be used when working in a 3D model or with depth maps. When you launch it, the model center view from the outside changes. The X Y Z coordinate axes are set. When creating a hotspot in this mode, the following attribute values are set:
ath=0
atv=0
depth=0
distorted=true
Moving the hotspot with the mouse is blocked. The position of the hotspot in space changes in the Cartesian coordinate system by changing the parameters tx ty tz. There are round buttons on the axes. Click on the button and drag - the hotspot will move along this axis.

Hotspots with 3d coordinates are created in the 3D model, in this case, the attribute depth=0.
Dragging the hotspot with the mouse in the 3D model takes place according to the coordinates tx ty tz, if depth=0.

Example of working in a 3D model.

ath - horizontal coordinate (-180...180).
atv - vertical coordinate (-90...90).
alpha - change alpha (0 - 1).
rotate - rotate (-360...360).
speed - changing speed of main parameters from 0 to 10.
rx - rotation around its own x axis (in degrees).
ry - rotation around its own axis y (in degrees).
rz - rotation around its own axis z (in degrees).


ATTENTION!
parameters "rx", "ry", rz " are changed only when the parameter "distorted" is enabled".


ox - offset along «x»-axis (in px).
oy - oy - offset along «y»-axis (in px).
width - width change (pixels.) The value of "prop" is proportional (by default, pixels).
height - height change (pixels). The value "prop" is proportional (by default "prop"). To enter the "prop" value, press the "p" key.
scale - changes scale of hotspots. Press and move mouse in the pressed state to the left ( zoom out) or to the right (zoom in).
edge - positioning (9 variants).
zorder - display sequence number (visibility). A higher value brings to the foreground (1-100).
capture - mouse capture. if the value is" false", clicking on the hot spot and shifting to the side does not prevent moving the panorama (true/falce).
distorted - on/off distorted hotspot.
zoom - should the size of the hotspot image change together with the pano when zooming.
flying - this setting interpolates automatically the ath/atv and scale values to the current viewing values. The value range is from 0.0 to 1.0. At 1.0 the hotspot image will be locked always to the middle to screen and it's size will be relative to 1000 pixel in screen height.

actions/functions to be called when.

• onover - user hovered the mouse pointer.
• onhover - user hovered the mouse pointer, called 15 times per second while cursor over the hotspot.
• onout - user has removed cursor from the hotspot.
• onclick - user clicked on the hotspot.
• onloaded - the hot spot is loaded.

handcursor - show hand when hovering hotspot (true/falce).
enabled2 - all generated hotspots are global and the values "enabled" and "visible" become active in the scene that is listed in the hotspot. If enabled2="falce", then regardless of the prescribed scene hotspot will be turned off. In edit mode enabled2="true" (true/falce).
visible2 - if visible2 = "falce", then regardless of the registered scene, the hotspot will be invisible. In edit mode visible2="true" (true/falce).
depth - the internal 3D rendering depth - that's the distance of the 3D object to the screen. For 2D viewing this has no visible effect, but for stereo 3D/VR viewing this can be important setting. E.g. use smaller values for a stronger 'pop-out' effect. When a hotspot image should be infinity far away (like the pano image itself, e.g. to pixel-perfectly match the pano-background) then an 'invalid' value (e.g. a String like "off") should be used for the depth setting - e.g. depth="off".

url - the path/url to the hotspot image file.
html - the text (in the text of the hotspot).
tx - 3D x offsets (only available for distorted hotspots).
ty - 3D y offsets (only available for distorted hotspots).
tz - 3D z offsets (only available for distorted hotspots).
renderer - the visualization for the hotspot (webgl/css3d). By default - "webgl"
torigin - the position of the access point.
world - the position of the hotspot is "global" / "world». This means that the position will always be the same, regardless of the panorama or the user's viewing position.
image - the position of the hotspot will be relative to the current position of the panoramic image.
view - the hotspot position will be relative to the current viewing position.
By default - "world".
depthbuffer - when this option is enabled, hotspots can cross other hotspots (with deepbuffer = true) or depth map geometry in 3D space (true/falce).
alphachannel - Setup the alpha-channel / transparency-channel usage and source. For images and videos. Usage case: there is currently no browser-support for transparent videos, so as alternative a video with the alpha-channel as extra image on the right (Side-by-Side) or at the bottom (Top-Bottom) can be used. Example
chromakey - With the chromakey setting a certain color in the hotspot image or video can be used as alpha / transparency mask. The typical usage would be Greenscreen or Bluescreen videos. Example.
Pressing "Backspace" button clears the digital value of the attribute on button.
More information on assignment of hotspot attributes can be obtained on website krpano.
group - assign or change group of the hotspot.
keep - make a hotspot local or global. When set to "true", the hotspot will appear in the panorama where it is registered and will not disappear when switching to other panoramas.

Open scene.

Create and configure hotspot.
Activate tab by clicking Open scene.
Click on the thumbnail and select desired scene from list by clicking on thumbnail of scene.
Now created hotspot when clicked will open the selected scene.

• Template - pattern opening scene. Default "loadscene (scene_name,null,MERGE,BLEND(0.5));". You can set your scene opening values by typing them in a line. Cannot change scene name variable "scene_name".
• Info - help on "loadscene" action on site krpano .
• Default transition - when clicked, default template is set.
• Krpano default transition - set transition as default to "krpano" when creating a tour.

Open a photo.

Pre-place the photos in a folder add_hotspot/photo/.
Create and configure a hot spot. Activate the tab by clicking Open photo.
Click on the thumbnail and in the explorer window that opens, select an image from the folder add_hotspot/photo/.
Clicking on the created hotspot will open the selected image.
When you hover over the image, it is zoomed in by rotating the mouse wheel. The zoom occurs relative to the cursor position. If the photo is larger than the viewing window, then a thumbnail of the photo with the selected viewing area will appear in the lower right corner. By shifting the viewing area, the photo moves accordingly. The photo is moved with the mouse or finger on mobile devices.
In VR mode, the image opens as a hotspot.

• Text below photo - enter a caption for the photo displayed under the open photo.
  You can customize the style of the caption text in the file "add_hotspot/plugins_l/plugin_a/style_addhs.xml"
• Height relative to window - the height of the window relative to the screen in percentage. A photograph will open no larger than its true size!
• Clicking on an empty space closes window - close the window by clicking in an empty area of the screen.

You can use the action of opening a photo even with the editor disabled. Set it to some action. The code:
OpenPhotoSM(path, signature, height in %);

• path - full path to image location, e.g.: %SWFPATH%/photo/test.jpg
• signature - image caption displayed above open photo.
• height in % - the height of the window relative to the screen in percent (specify without the "%" icon). A photograph will open no larger than its true size!

Example:
OpenPhotoSM(%SWFPATH%/photo/test.jpg, TEST, 50);

Open a video file.

Pre-place the video file in a folder add_hotspot/video/.
Create and configure hotspot. Activate the tab by clicking Open video.
Click on the "Play" thumbnail and in the Explorer window that opens, select the video file from the folder "add_hotspot/video/".

• Volume at start - set the desired video volume when playing with the slider or by entering a numeric value from 0 (min) to 1 (max). Default - 0.5.
• Loop - select the play mode. Green light - looped, gray - play once.
• Select a poster image - images (typical screen shot of the first video frame), which should be displayed until the video is loaded and will not be ready to play.
• Height relative to window - the height of the window relative to the screen in percentage.
• Clicking on an empty space closes window - close the window by clicking on the blank screen.

At the moment of launching the video file, a hint appears on the right (in the video playback window) for a few seconds. At the time of playback, 15% of the width of the window to the right is the volume control zone. On mobile devices, slide your finger up and down to adjust the volume.

Adding a poster is highly recommended! The poster image must have the same pixel size as the video itself!
All parameters are local and tied to the edited hotspot. For another hotspot, set your own settings. Clicking on the created hotspot will open the selected video file.
Krpano video player is used to play video. Videoplayer.
In VR mode, the video opens as a video hotspot.

You can use the action of opening a video file, even with the editor disabled. Set it to some action. Video and poster must be in folder add_hotspot/video. The code:
VideoPlaySM(video file name, poster file name, volume, loop, video window height);

• video file name - example: test.mp4
• poster file name - example: test.jpg (recommended)
• volume - the value is from 0 to 1. (optional, default is 1).
• loop - play video in a loop - true/false (optional, default is false).
• video window height - the height of the video relative to the height of the browser window in percent without the sign "%" is 0/100 (optional, default is 90).

Example:
VideoPlaySM(test.mp4, test.jpg, 0.5, true, 80);

Create a video hotspot.

Pre-place the video file in the add_hotspot/video/ folder.

Activate the tab by clicking Video hotspot.
Click on the icon and in the Explorer (provider?). window that opens, select the video file from the "add_hotspot/video/" folder.
Volume at start - set the desired video volume when playing with the slider or by entering a numeric value from 0 (min) to 1 (max). The default is 0.5.
Loop - select the playback mode. Green indicator - looped, gray - play once.
Select a poster image - an image (a typical screenshot of the first video frame) that should be displayed until the video is loaded and ready to play.

Adding a poster is highly recommended! The poster image must have the same pixel size as the video itself!
pausedonstart - Suspended at the beginning.
Automatically pause the video when the browser tab/window gets hidden.
Automatically resume the video when it was paused before by hiding the browser tab/window.

All set parameters of the local and bound to the editable hotspot. For another hot spot, set your own settings. Example of creating a video hot spot.
YouTube

Open the YouTube link.

(HTML5)

Create and configure a hotspot. Activate the tab by clicking Open youtube.
Select a video on youtube and click "share". A link will appear, for example https://youtu.be/mMpWL8XM2-k.
Copy code after slash mMpWL8XM2-k and paste in the row, click "Enter"
By clicking on the hotspot, a window opens with video from youtube.
Youtube video window won't open in VR mode!
Height relative to window - the height of the window relative to the screen as a percentage without the "%" sign. (optional, default is 90).
Clicking on an empty space closes window - close the window by clicking in a blank area of the screen.
You can individually use the action of opening youtube, even with the editor disabled. Set it to some action. The code:
YoutubOpenSM(link, youtube window height);

• link - link to youtube. Use the link code as described above!
• youtube window height - the height of the window relative to the screen as a percentage without the "%" sign (optional, default is 90).

Example:
YoutubOpenSM(i92-cHzRNTI, 70);

Open audio file

Attention! If you don't have a sound plugin connected, make sure the soundinterface.js file exists in the plugins folder and include:

 <plugin name="soundinterface" keep="true" url="%FIRSTXML%/plugins/soundinterface.js" />

Create paired audio files, for example "sound1.mp3" and "sound1.ogg", browser will automatically select desired one. Pre-place the audio files in the folder add_hotspot/sound/.
Create and configure a hotspot. Activate tab by pressing Play sound.
Click on icon "sound" and that opens in window , select the audio file with extension "mp3" from folder "add_hotspot/sound/"
Volume at start - set the start volume of the sound with the slider or by entering a numerical value from 0 (min) до 1 (max). The default is 0.5.
In "3D sound" mode, this value is maximum volume.

Loops - enter number of repetitions. A value of 0 is a constant repetition.
Directional 3D sound - enable directional 3D sound with respect to hotspot. When you turn from hotspot vertically and horizontally, volume decreases.
Range of the sound - range of sound in degrees. If you deviate from the hotspot by this amount, the volume decreases to zero.
Clicking on the hotspot will start playing the file, the hotspot image will be replaced by the speaker icon. Clicking on the speaker stops the sound and sets the former picture.

During audio playback, a sound control panel appears.
Play/pause - stop, play sound.
Speaker - click - turns on/off sound. Hovering the cursor opens a panel with a slider to adjust the volume.
Time line - informs about the current playback time. Grabbing the strip you can move the moment of playback.
Time - shows the current and total playback time. At the moment of launching the video file, a hint appears on the right (in the video playback window) for a few seconds. At the time of playback, 15% of the width of the window to the right is the volume control zone. On mobile devices, slide your finger up and down to adjust the volume.

You can individually use the audio opening code with the control panel. Set it to an event. Code:
play_soundSM(sound name, url, volume, loop);

• sound name - use the name "sound_hs_addhs" and when you play another sound, this one will be turned off. If you choose a different name, then the sound will be played simultaneously with the other running ones. For disable it, you will need to use an action with this name. For example: stopsound (name).
• URL - full path to the audio file.
• volume - playback volume(0-1).
• cycle - play continuously(true) or once(false).

For example: play_soundSM(sound_hs_addhs, 'add_hotspot/sound/2.mp3',0.5, false);

You can generate the code directly in the tab, but the audio file must be in the folder add_hotspot/sound/ and by default, the name is used "sound_hs_addhs":

• Select an audio file by clicking on the sound icon in the tab.
• Set the path.
• Set the volume.
• Set the cycle.
• Expand the editor panel to the width and a line with the code will appear.
• Click on the copy to clipboard button and paste the code into your event.

Additional settings in the file add_hotspot/plugins_l/plugin_a/style_addhs.xml

<sound_hs 
		sound_bar="true"
		volume_icon_right="true"
		speaker_icon="true"
	/> 

• sound_bar - show/hide the sound control panel.(true/false).
• volume_icon_right - show/hide volume control on the right side of the screen (with your finger or mouse).(true/false).
• speaker_icon - show/hide the speaker icon on the hotspot when playing sound. (true/false).

Assign hotspots to open URL links.

There are three ways to open a link:

• New window - open link in new window (Flash, HTML5).
• Here - open link in current window (only HTML5).
• In frame - to open a link in a frame (window in a window). Unfortunately, it does not work on IOS yet (only HTML5).

To select, click on the selected option, indicator will turn green.
Choose a hotspot and enter address of site to open (or copy "Ctrl+C" and paste into line "Ctrl+V"), press "Enter".
You can try entering links here.

Insert a patch from PTGui.

(HTML5)

This tab allows you to ideally place part of image (pixel per pixel) extracted from panorama.
How to extract part of image is described in detail on krpano forum, i recommend to carefully read! Next, edit it at your own discretion (insert open door, change color of object, etc.). And you can insert an image using this tab without xml code edits.
Inserting an image:

• Place edited image along path add_hotspot/picture/.
  
• Activate tab by clicking Patgh PTGui.
• Select created earlier image by clicking on icon "Select image" and create a hotspot by tapping "Add hotspot" .
• In tab on "image:" the name of selected file appears.
• If image is large, create a smaller copy for mobile version, click on"Mobile image" and select this image.
• If you extracted an image as described in krpano forum, then you should have these settings saved: "hfov","yaw","pitch","roll". Enter these parameters into corresponding cells, each time pressing "Enter".

If you have done everything correctly, image will be clearly aligned with your place in panorama.

If necessary, select desired predefined actions, activate by clicking on name (indicator turns green):

• onover-show - when you hover mouse, image appears smoothly.
  
• onout-hide - on out mouse - image faded away.
  
• show/hide - clicking on image will toggle visibility.
  

Button action code - if you create a button to control visibility of image, you can generate a visibility control code for created image and paste it into button:

• show - show image.
  
• hide - hide image.
  
• show/hide - toggle visibility.
  

When selected action is activated, corresponding code appears in line, use it for your button.
Copy to clipboard - copy the contents of the line to the clipboard for subsequent insertion.

Create text hotspot.

This tab allows you to create and edit text hotspots. Detailed information about the attributes of the text hot spot is here .
All Windows with digital values allow you to enter parameters from the keyboard, insert, copy. As you enter, press " Enter".

• Create text hotspot - create a text hotspot with default settings.
  

Panel of change of radius of corners and thickness of borders.

• The change in all radii - hover over upper average round point, hint "all round " will appear and button will become green. Press the button and move the cursor to the right (increase the radius of all corners) or to the left (decrease the radius of all corners). The angle radius value will be displayed next to the button.
  
• Changing the radius of each corner - opposite each corner is a similar button. It changes the radius of the corresponding angle by the same principle.
  
• Changing the thickness of the border - the button is located at the bottom of the border. The principle of changing the thickness of the border is the same as changing the radius of the corners.
  

Panel for changing the parameters of the hotspot shadow.

• Shadow hotspot - click on the button and move the mouse without releasing - the shadow of the hotspot will shift accordingly.
• X offset - displays the value of the shadow offset along the x axis.
• Y offset - displays the value of the shadow offset along the y axis.
• Blur - press button and, without releasing, move mouse to right (increase blur of shadow), to left (decrease blur of shadow).
  

Changes in color and transparency.

• Color fill - fill color hotspot.
• Color border - border color hotspot.
• Color shadow - color hotspot shade.

Clicking the button opens the color and transparency editing panel. Clicking on the hotspot displays its value in the upper right square, the color is displayed in the left square. Clicking on the right box returns to the original spot color.

Text

• Html - enter the text displayed in the hot spot. You can use multiple HTML tags, simple CSS styles, or tags to generate text.
• Css - text style. Leave a space between the colon and the "color" and "font-size" parameters!
• Size text - change height of text.
• Shadw text - is the same panel as Shadw hotspot, only the parameters are applied to the text shadow.

Text indent changes.

• Padding - four buttons for changing indent text on four sides.

Change text color and shadow.

• Color text - change text color.
• Text shadow color - shadow color change.

Additional settings.
expand the panel, grabbing the lower right corner, the buttons of additional parameters will open.

• oversampling - upscale the internal bitmap rendering target by the given oversampling factor for a higher-resolution (sharper) text.
• vcenter - vertically center the text within the given plugin height.
• wordwrap - set if the text should automatically wrap around (line-break) to new lines when the text doesn't fit into the current line.
• bg - turn on, turn off the background.
• mergedalpha - by default the alpha transparency of the background will be applied also to the border and shadow, but by disabling that setting, it would be possible to render the border and shadow with their own and independent alpha transparency.
• mipmapping - enable mipmapping - this reduces aliasing effects when displaying the text as scaled-down element.

Create polygon hotspot.

This tab allows you to create and edit polygonal hotspots. Detailed information on the assignment of polygonal hotspot attributes here .

Create and edit - mode of creating and editing polygonal hotspots. Active - red button.
To turn the mode on or off, press the button or the "E" key, start and finish drawing the hotspot - press the "space bar", to create a point - click with the left mouse button.
In the edit mode, click on the hotspot - there will be nodal points at the corners. Grabbing the point, you can move the angle. When you hover over a point, two buttons "+" (create point) and "x" (delete point) appear.

There are two tabs in the panel Default settings and Hotspot.

Bookmark "Default settings"

Here you can configure the default settings (polygon hot spots style). These parameters will be applied to newly created hotspots.

• Show text - pop-up text when hovering over the hot spot. enter if necessary. By default, the name of the hot spot is displayed. If the text is not needed - remove from the line.
  
• Polyline - polygon or polygon line creation mode.
  
• Blendmode - the blending mode.

The following parameters have two States and are divided into two columns. The first state is the default, the second state can be applied to the hotspot when hovering, clicking etc. and therefore have the installation code set_pol_1(); и set_pol_2();. By default, the second parameters are set on mouse hover - onover="set_pol_2();" and when the mouse is removed from the hot spot onout="set_pol_1();"
Settings 1 - the parameters of the hotspot 1. Installation code set_pol_1();

• Color fill - fill color. Click on the color indicator to open the color and transparency settings panel.
• Color border - border color.
• Width border - border width (Pix.).
• Alpha - transparency of hotspots (0-1).

Settings 2 - hotspot options 2. Installation code set_pol_2();

• The parameters are the same as in Settings 1.

Bookmark "Hotspot"

When you click on the hotspot, it becomes active and the name of the selected hot spot is displayed in the bookmark name. Here you can configure the parameters of the created hotspot. These parameters will be applied to the selected hotspot.
This tab has the same settings as Default settings,
with four more buttons added on it.

• Copy "Ctrl+C" - copy the parameters of the selected hotspot. Keys "Ctrl+C".
• Paste "Ctrl+V" - insert parameters into the selected hotspot. Keys "Ctrl+V".
• Reset to default - reset settings to default.
• Set to default - to set the hotspot as your default.

Grouping of hotspots.

This tab allows you to combine the hot spots into groups and create a code to show or hide the hotspots of this group.

- Open the panel for assigning a group to a hotspot.

• Click on the hotspot to activate it.
• Enter the name of the group in the line or select it from the list below if the groups were created earlier.
• Click on the round indicator to the right of the line - the hot spot will be assigned to this group, the indicator will turn green.

If the hotspot already belongs to the group, then when you click on this hotspot, the group name is displayed in the line.

Expand the grouping tab by clicking on the triangle to the right in the tab.

• insert a group - click on the hotspot or select a group from the list in the group assignment panel, then click this button, the corresponding group will appear in the row opposite.
  It is possible to add several groups to the list.
  It is possible to enter the group name manually in this line.
• Show selected groups - show group hotspots.
• Hide selected groups - hide group hotspots.
• Enable group - disable group hotspots.
• Hide unselected groups - hide hotspots of other groups.
• Clear - Clear the group input line.

The line below shows the code, which you can assign, for example, to click on a button.

• Copy to clipboard - copy the code to the clipboard.
• Checking - Check. Click to check how the code works.
• Show all - show all hotspots of all groups.

Attention!

The group name must not contain the name of another group!
gr_1...gr_12 - incorrect.
gr_01...gr_12 - right.

Built-in functions.

HideShowHotspot(); - toggles the visibility of all the hotspots created by the plugin. Set it to any button or other action.

FlyoutSM(); - smoothly displays the hotspot to the center of the screen without distortion. Set the action to a hotspot, for example - onclick="flyoutSM();"

Example:

openFrameAdhs(html,get(data[data_html].content),400,300,true); - open HTML from data. Example.

You must have a bluetooth plugin to use "Blur".