novosibpano@yandex.ru  

Add hotspot v1.4.


  • HTML5. krpano-1.19-pr16.



  • Futures.

    • 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.
    • Prepare a hot spot for opening photos.
    • Назначение хотспоту открытия видеофайла с панелью управления(тайм линия, отображение текущего и общего времени).
    • Creating a video hotspot. Including directional 3D sound with respect to the hotspot.
    • 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.
    • 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.
    • Insert part of the image extracted in PTGui. Does not require code editing, coordinates are recalculated automatically.
    • Creating a text hotspot.
    • 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.



    Example creation of hotspots, which opening URL links.
    YouTube



    How to connect.

    Place the folder "add_hotspot" in root folder in tour and write in file "tour.xml":

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

    An example of entering a PIN code and saving.
    YouTube



    Panel for hotspots creating.


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

  • Purpose of buttons:
    • 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.



    Extending the panel to the width will appear additional buttons:

  • Drag on - Disables movement of each hotspot separately. If hotspot is selected, indicator notifies status.
  • "Delete PIN" - Delete pin code and save project.








  • Grasping triangle at bottom right, you can expand panel, additional tabs will open. Tabs are in a minimized state and are opened by clicking on triangle inside tab on right.
    Tabs are needed to assign a hotspot action.The tab is selected by pressing the corresponding round button, the button turns green.



    Advanced option.

    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.

  • 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).
  • handcursor - показ руки при наведении мыши на хотспот (true/falce).
  • 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.



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

  • Example of creating a list of url links to certain places in a tour.
    YouTube



    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.




    Create a video hotspot.

    (Flash, HTML5)

    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!

  • "Directional 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.

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





  • Open 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.




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



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





    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 separately - 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 hot spot 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 hot spot 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.



    Example in 3D tour.





    Get the hotspots creation plugin.

    Test the plug-in by this link. If you liked the plugin, You can get it by making a donation through PayPal.
    Do not forget to specify the e-mail address and specify the 4-digit desired Pin code.
    I will send to this address a link to download the archive with the files of Hotspot editor within one day.
    You will receive plug-in updates for free!

    Make a donation of 34 EUR.

    Archive includes:
    • Working example of use.
    • In example, folder with Plugin "add_hotspot"



    Changes

    09.11.2018

    Version 1.4

    • Added tab for creating text hotspots.
    • Created panel for color editing.
    23.10.2018

    Version 1.3

    • Added tab for creating video hotspots.
    • Added indicator (red dot) in edit mode, which is located on the anchor point of the active hotspot.
    • In the opening video player added the ability to rearrange the slider and play from anywhere, added the display current and full play time.
    • Slightly changed interface.
    • Fixed some bugs and errors.
    20.09.2018

    Version 1.2

    • The tab for inserting images extracted from PTGui or Hugin is added. How to extract a part of the image is described in detail on krpano forum.
    • The tabs are scrolled.
    • Audio hotspots operate in VR mode.

    01.09.2018

    Version 1.1

    Added tab for creating audio hotspots.

    22.05.2018

    Version 1.0



    Notice

    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.