Skip to main content

Creating HotSpots

This tutorial will show you how to create hotspots for FSI Viewer.

A full explanation of all the parameters can be found in the FSI Viewer online manual.

We will split an example xml file called notebook_tutorial.xml, which can be found on GitHub with the link below, to explain the various parameters that need to be set.

Camera parameter​

<camera>
    <digitalcropfactor value="1.0"/>
    <focallength value="43"/>
    <position value="0, 100, 1100"/>
    <targetPosition value="0, 100, 0"/>
</camera>

To create hotspots, it is important to know the positions of the camera during the 360° spin. This makes it easier to add the hotspots more accurately.

The digitalCropFactor value depends on the size of the camera's optical sensor chip. For full frame cameras the value is 1.0. Common values are between 1.5 and 1.6. The crop factor is the same factor that affects the focal length of your camera's lens.

For example, the focal length of a lens on a full frame camera is 50mm. With a camera that has a crop factor of 1.5, the effective focal length would be 1.5 x 50mm = 75mm.

focalLength defines the focal length of the camera lens in mm. postion(x,y,z) and targetPosition(x,y,z) define the position of the camera and the target in mm (see figure).

If you are also rotating your object around the x-axis, additional parameters apply which can be found in the FSI Viewer online manual.

Options Parameters​

<options>
    <inplacezoom value="true" />
    <debug value="false" />
    <hideui value="false" />
    <nonav value="false" />
    <skin value="white" />
    <initialviewpersistent value="true" />
    <spinpreviewwhileloading value="false" />
    <nosceneloop value="false" />
    <nosetloop value="true" />

    <drawcube value="true" />
    <drawtable value="false" />
    <tablediameter value="2000" />
    <enablehotspots value="true" />
    <hotspotlinecolor1 value="#9bd2ff" />
    <hotspotlinecolor2 value="#58a8ff" />
    <hotspotdotcolor1 value="#9bd2ff" />
    <hotspotdotcolor2 value="#58a8ff" />
    <hotspotdotradius value="3" />
    <decodehtmlentitiesinhotspottexts value="false" />
    <includeconfig value="spin360/hotspots_notebook.xml" />
</options>

Under the <options> node, the first part of the parameters relate to general viewer settings, such as whether the menu bar is visible (hideui, noNav), which skin is used, etc.

drawcube displays the dimensions defined in cubesize as it draws a 3D cube wireframe representing the object space of the spin. This option can be useful for validating the virtualSpace parameters. This option only works on desktop computers using the HTML canvas element.

drawtable displays the virtual rotating tabletop based on the diameter set in tablediameter. This option only works on desktop computers using the HTML canvas element.

enablehotspots can be set to false if hotspots have been defined but are not to be displayed.

hotspotLineColor1 defines the lighter colour of the lines of the hotspot marker, while hotspotLineColor2 defines the darker colour. hotspotDotColor1 defines the lighter colour of the circle of the hotspot marker, while hotspotDotColor2 defines the darker colour.

hotspotDotRadius sets the radius of the hotspot circle in pixels.

If decodeHTMLEntitiesInHotSpotTexts is set to true, basic HTML entities will be enabled in the hotspot text.

includeconfig includes the xml where the hotspots are defined.

Virtual Space parameter (Optional)​

Using the camera parameters, the viewer calculates the position of the hot spots. You can also optionally add virtual space coordinates.

<virtualspace>
    <cubesizex value="374.3"/>
    <cubesizey value="291.55" />
</virtualspace>

The cube is the bounding box of the spin object in millimeters (see illustration below). For this, you need to know the measurements of the object of the spin.

Cube

The Hotspot XML​

This section explains how to define the hotspots that are set in the XML defined by the includeconfig parameter above. This example uses an XML file called hotspots_notebook.xml. Hotspots consist of a marker line, a marker point and a content area. The content area can contain any type of HTML content, such as formatted text, hyperlinks, images, videos and the like. Each hotspot requires its own hotspot definition node.

A node can also be used to define default parameter values.

Default Parameter​

<defaults>
    <normalClass value="tooltip"/>
    <activeClass value="tooltiphover"/>
    <hoverClass value="tooltiphover"/>
    <interactive value="true" />
</defaults>

normalClass, activeClass and hoverClass define CSS class names to use for the content tag in normal, active or hover state.

The hot spot content area will not react on mouseover, click actions and alike when setting interactive to false.

Hotspot node example​

<hotspot>
    <text value="<div style='text-align: center;'>
      <img src='http://localhost/fsi/server?type=image&source=images%2Fsamples%2Fstar_notebook%2Ficons%2Ffullhd.png&width=61&height=40&format=png'
      width='61' height='40'>
      15.6 hd touchscreen
        <ul>
          <li>LED Full HD anti-reflective screen <br>(1920 x 1080)</li>
          <li>Capacitive Touch technology</li>
          <li>Exceptional picture quality</li>
          <li>Wide viewing angles</li>
          <li>20% brighter than usual notebook <br>screens</li>
        </ul>" />
    <x value="102.63" />
    <y value="176.12" />
    <z value="-149.34" />
    <perimeterangle value="0" />
    <perimeteranglerange value="50" />
    <perimeteranglefadeout value="30" />
    <horizontalmarkersize value="15" />
    <verticalmarkerposition value="0.5" />
    <verticalmarkersize value="50" />
</hotspot>

text contains the HTML content to be displayed for this hotspot. Note that the value must be XML encoded if the content contains invalid characters for XML attribute values.

x, y and z describe the distance in mm on the real object measured from the centre of the object (usually the centre of the turntable). Combined with the required parameters, the viewer calculates the rotated and projected position of the hot spot on the screen.

perimeterAngle is the viewing angle in degrees at which the hot spot is to be displayed. E.g. for a hot spot on the left side of the object use 90 and for a hot spot on the back of the object use 180.

perimeterAngleRange is the angle range within which the hot spot should be visible. For example, a perimeterAngle of 90 and a perimeterAngleRange of 40 would display the hot spot from 70 to 110 degrees (+/- 20°).

perimeterAngleFadeOut defines the angle range in which the hot spot is faded in and out. A value of 0 means that the hot spot is faded in and out immediately when entering or leaving the perimeterAngleRange. Values greater than 0 extend the perimeterAngleRange by the specified degrees in which the opacity of the hot spot changes.

horizontalMarkerSize/ verticalMarkerSize define the length of the horizontal or vertical line of the hot spot's marker. (Range: [-x ... 0 ... x])

horizontalMarkerPosition/ verticalMarkerPosition define the horizontal/vertical position of the marker line on the tooltip.