Publishing 360° views with HotSpots

1) Using individual FSI Viewer configuration files

To publish FSI Viewer instances with HotSpots you need to create a configuration file for each image. This is, because the HotSpot data cannot be provided by HTTP query due to the amount of data and each image will likely contain different HotSpots.

You might want to use the configuration file “hotspot3d.xml” as a sample.

 

Please copy the file to your FSI Viewer configuration directory:

[…]fsi/config/hotspot3d.xml

If you edit the file using a text editor, you will notice that the configuration file contains the “hotspots” plug-in definitions including the individual hotspots nodes only. You might want to add parameters as needed. The sample contains only those parameters required for the HotSpots.

In order to use the configuration file when publishing the image, please:

  • Choose “More Options” then “Publish as FSI Viewer” page
  • At the top right find the “Additional Parameters” text box
  • Enter “cfg=hotspot3d“(note that you need to omit the path to your configuration folder and can optionally omit the extension “.xml”)
    You can use subfolders in your configuration folder as needed. In this case, please add the name of the subfolder(s) and the name of the configuration file, e.g. “cfg=hotspotconfigurations/foo.xml”

You might want to check one of your 3D images with this sample configuration file. As you will see, the sample configuration file contains one(!) HotSpot only. There are multiple nodes in the configuration though – one for each scene (step of rotation of your 3D image) you want the HotSpot to appear.
For 2D images, a single hot spot node per hot spot would be required only.

2) Authoring the HotSpots

Once you know how to use the HotSpot plug-in you need to know how to obtain the value for the “spot” attribute.
Let’s have a look at one HotSpot definition for one scene:

The node name “rect” defines the shape of the HotSpot. Please refer to the “Plug-in Reference” of your FSI documentation for additional shapes. The procedure is all the same for all shapes – except for polygons.

The first attribute here is “spot”. This information tells FSI Viewer where to display the HotSpot.

SceneSet, Scene, left, top ,right, bottom [,rotation]

You do not need to focus on the actual values as you can get and copy the entire value using the “SelectFrame” plug-in. Please see “Getting the spot values” below.
The child node contains the tool tip to display for the HotSpot. Please make sure to enter valid XML tags when using formatting tags or special characters. E.g. you need to use “<br/>” for line breaks rather than “<br>“.

Please refer to the “Plug-in Reference” in your FSI documentation for optional parameters of the HotSpot nodes.

Getting the Spot Values

Especially with HotSpots for 3D views it’s important to use a quick method to get the value for the “spot” attribute. To do so, please:

  • Create or duplicate the FSI configuration file you want to use and open the file in a text editor
  • Open your image in FSI Server web interface
  • Choose “Publish as FSI Viewer” or “Publish as FSI Viewer 3D”
  • In the “Additional Parameters” text box, enter the configuration file you are currently editing, e.g. “cfg=hotspots3d”
  • In the “Plug-ins” tab, enable “SelectFrame”

  • Click “Preview”
  • Click the button with the select frame symbol in the FSI Viewer menu bar
    (the rectangular with a dot in each corner)

Now you can see a small window in the top-left corner of FSI Viewer. The first tab “Selection” displays the value of your currently marked area.
You can click and drag the semi-opaque white area to move the selection. Use the handles to resize the selection. You will notice that the values in the small window to the top-left change accordingly.
For 3D views the first two numbers of the value change if you rotate the view. You might want to use the “7” and “9” keys on your keyboards “num pad” to rotate the view. This might be more convenient than hiding the select frame (by pressing the “select frame button again”) and rotating the image using the mouse.

Now:

  • Create or copy and paste a HotSpot node in your text editor
  • Modify the tool tip (the content of the node) as necessary
  • Now go back to FSI Server web interface
  • Rotate the image and adjust position of the selection to the area of interest
  • Mark the value in the “View & Selection” window using your mouse
  • Right click the selection and choose “copy” from the context menu
  • Switch back to your text editor
  • Paste the value to the value of the “spot” attribute

The result should look like this:

(the part in green is the value you copied from FSI Server web interface)

3) 3D Views with HotSpots

In case a HotSpot is supposed to be visible in multiple scenes (this is: if the user rotates the view) you need to:

  • Rotate the view in FSI Viewer (e.g. using the “7” and “9” keys of your “num pad”. Please make sure FSI Viewer owns the input focus by clicking the menu bar of FSI Viewer first)
  • Drag (and resize) the HotSpot area as needed
  • Follow the steps described above below the word “Now:”

Follow the same procedure for additional HotSpots you want to add to the image. You will notice that it’s far more convenient to author the entire rotation for one HotSpot before continuing with the next one, as you just need to drag the area in this case.