Add hotspot. HTML5. krpano-1.19-pr16

by Alexandr Mikhailov - novosibpano.ru/Plugins/Add_Hotspot_en.html

Description

• Creating hotspots in browser.
  
• Ability to create, delete, copy hotspots.
  
• Positioning hotspot with mouse, selecting hotspot image in Explorer window.
  
• Enter name of hotspot. Appears when you hover mouse over hotspot.
  
• Advanced settings - ability to change the scale, transparency, rotation along axes x,y,z. Also you can make their actions in onover, onhover, onclick, onout.
  
• Assign hotspots to open URL links in a new window, in the current window, in frame.
  
• Create a list of url links to specific places in a tour with a given viewing angle. Gives able move to a specific place in the tour from external resources.
  
• Prepare a hot spot for opening photos.
  
• Prepare a hot spot for opening video file.
  
• Prepare a hot spot for opening youtube link.
  
• Prepare a hot spot to open the audio file.
  
• Including directional 3D sound with respect to the hotspot.
  
• Insert part of the image extracted in PTGui. Does not require code editing, coordinates are recalculated automatically.
  
• Opening Editor to enter the PIN code allows editing on a remote server (Customer's server).
  
• Plugin has a drop-down list of created hotspots. Click on the name of hotspots opens view of this hotspots.
  
• Possible to search for hotspots using its name.
  
• Easy connection.
  
• Edit and save without editing code in main xml file.
  

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

PIN code.

After connecting the Plugin at first start, press key combination "E+L", a line opens to enter a 4-digit PIN code.
Enter PIN code and press "Enter" (Note uppercase letters), a minimized plugin panel will appear. Open Plugin panel and click " Save". When Explorer window open, specify path to save "add_hotspot/save_hotspot.xml"
When you re-open tour plugin panel will be available, you do not need to enter PIN code.

When editing of tour is complete, press "Delete PIN" Resave file "save_hotspot.xml" Restart the browser - to open the plugin again, you will need to enter PIN code.
Entering PIN code will allow you to leave plugin in tour folder and will allow you to edit hotspots directly on the Customer's server. Changes cannot be saved to the server, you save file with changes and send it to Customer to place the file on his server.

Panel for hotspots creating.

For you convenience, you can move panel with the mouse. Clicking on triangle button turn off and turn on the panel. You can extend the panel by grasping triangle at bottom right, additional tabs will open. The tabs are minimized and open when you click on a triangle inside tab on right.
Tabs are needed to assign an action when you click on hotspots. Selecting a tab is done by pressing corresponding round button, button change color to green when click.

How to change settings.

Select hot spot by clicking on it, name of edited hotspot will appear at a first line. Editable hotspot is moved with mouse and positioning coordinates are immediately displayed on corresponding buttons.
Clicking in an empty area of the screen, reset selection.

• Name - Enter name of hotspot. It appears over hotspots when you hover your mouse.
• drag on - Lock/unlock button for moving hotspots.
• Select image - Clicking on the name or icon will open a file Explorer window to select the hotspots image. You must first upload the selected images to a folder "add_hotspot/picture"
• Crosshair - Enable/Disable crosshair for ease of positioning of created hotspot.
• Copy "+" - Creates a copy of the selected hotspot. Hotkey."+" Name is automatically substituted with name of hotspot.
• Scale - Changes scale of hotspots. Press and move mouse in the pressed state to the left( zoom out) or to the right (zoom in).
• Distorted - On/Off distorted hotspot.
• Add hotspot - Make hotspot.
• "Delete" - Delete selected hotspot. Hotkey "Delete".
• Save - Save all created hotspots and changes in file save_hotspot.xml.
When Explorer window open, specify path to save "add_hotspot/save_hotspot.xml"
• Search (magnifying glass icon) - Hot spot search string. Enter name of hotspot and press "Enter".
• List of hotspots - Drop-down list of names created hotspots. Clicking on the name in the list takes a look at this hotspot.

Advanced option.

More information about purpose of attributes of hotspot can be obtained on website krpano

Press on "Onclick (direct input)", indicator changes color to green. Will be available direct input of the attribute value onclick . Other hotspot options on this tab are available when any tab is active.

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.

alpha - change alpha (0 - 1).

rotate - rotate (-360...360).

ath - horizontal coordinate (-180...180).

atv - vertical coordinate (-90...90).

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).

rz - rotation around its own axis z. (in degrees).

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

Speed - changing speed of main parameters from 0 to 10..

ox - offset along «x»-axis (in px).

oy - oy - offset along «y»-axis (in px).

edge - positioning (9 variant’s).

Clicking on buttons below will activate window with the input line, where you can register or edit actions or functions.

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.

width - changing the width. (in px). Value "prop" - proportionate.

height - изменение высоты. (in px). Value "prop" - proportionate.

To add value "prop" press "p" button

zorder - layer (1-100).

capture - mouse capture (true/falce).

Pressing "Backspace" button clears the digital value of the attribute on button.

Open photo.

(Flash, HTML5)

Copy you photo in folder add_hotspot/photo/.
Create and configure a hotspot. Activate the tab by clicking Open photo.
Click on the thumbnail and in the Explorer window, select the image from folder add_hotspot/photo/.
Clicking on the created hotspots will open selected photo.
Later in this tab you will enter caption text of photo and set scale of opened photo. "Text below photo " - Enter your photo caption. Сaption will be displayed under photo.
You can customize text caption style in file "add_hotspot/plugins_l/style_ed_L.xml"

Open video file.

(Flash, HTML5)

Pre-place the video file in the folder add_hotspot/video/.
Create and configure a hotspot. Activate the tab by clicking Open video.
Press of the thumbnail "Play" and in the Explorer window, select video file from folderadd_hotspot/video/.
Clicking on the created hot spot will open selected video file.
Video player krpano is used to play video videoplayer.
Later in this tab I plan to make volume setting at startup.

Open youtube.

(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.

Open audio file

(Flash, HTML5)

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.

"Вirectional 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 hotspot will start to play file, the icon "speaker" will appear above hotspot. Clicking on "speaker" turns on / off sound. Point to "speaker" mouse - mouse wheel changes sound smoothly. A second click on the hotspot stops playback.




During audio playback, the sound control panel appears in lower right corner.
It is possible to smoothly adjust sound by moving slider or rotating mouse wheel. There is a "play / pause" button.

Audio is played using the krpano plugin Sound Interface Plugin . Sound Interface Plugin .

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). (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".
Try to shorten long links, not all links can open "In frame". You can try entering links here.

Creating a list of url links to specific places on the tour.

This tab creates links like this:
http://novosibpano.ru/VT/Kotlovan/?startscene=0&startactions=lookat(-21.93,37.18,118.11);

It opens a virtual tour on the selected scene with the selected scene in scene and specified viewing angle.
It is necessary to check up efficiency of the link created by you on a server of the Customer. Place, for example, a test tour on the Customer's server.
Activate the tab, set desired view and angle in scene, set name to the view, create a hotspot in this location.
In this case, hotspot is a reference point of the created view and it becomes invisible when edit mode is disabled or panel is minimized. If necessary, change the viewing angle-select the hot spot and click on the button "Save curent fov""
Enter in line "URL 3D tour" address of the virtual tour. This address applies to all hotspots created in this tab. Dropdown list"List of url links to hotspot" contains the names of all created views. Button "Save list" saves a list of references to a file List of external links.xml when Explorer are open, specify save location.

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 onmobile 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.

Example

krpano Forum Discussion Thread

add hotspot

More information

novosibpano.ru/Plugins/Add_Hotspot_en.html