This tutorial shows you how you can create hotspots for FSI Viewer.
A full length explanation on all parameters can be found in the FSI Viewer online manual.
We are going to split up an example xml file called notebook_spin.xml in order to explain the various parameters which need to be set.
Parameters
Camera parameter
For creating hotspots, it is important to know the positions of the camera when shooting the 360° spin. This makes it easier to add the hotspots in a more precise way.
The digitalCropFactor value depends on the size of the optical sensor chip of the camera.
For full frame cameras the value is “1.0”. Common values are between 1.5 to 1.6. The crop factor is the same factor that affects the focal length of your camera’s objective. E.g. the focal length of an objective with 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 objective in mm.
postion(x,y,z) and targetPosition(x,y,z) define the position of the camera and the object in mm (see illustration).
If you do rotate your object around the x-axis as well, additional parameters apply which can be found in the FSI Viewer JS online manual.
Options parameter
Under the options node the first part of the parameters apply to general viewer settings such as if the menubar is visible (hideui, noNav), which skin is used, etc.
drawcube shows the measurements which are defined in cubesize as it draws a 3D cube wireframe representing the object space of the spin. This option can be useful to validate the “virtualSpace” parameters. This option only works on desktop computers using the HTML canvas element.
drawtable shows the virtual rotating table plate 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 hot spots have been defined, but shall not be displayed.
hotspotLineColor1 defines the lighter color of the hot spot marker lines, while hotspotLineColor2 defines the darker color. hotspotDotColor1 defines the lighter color of the hot spot marker circle’s gradient, whereas hotspotDotColor2 defines the darker one.
hotspotDotRadius sets the radius of the hot spot marker circle in pixels.
When decodeHTMLEntitiesInHotSpotTexts is set to true, basic HTML entities will be enabled in the hotspot text.
includeconfig includes the xml in which 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.
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.
The Hotspot XML
In this section we will explain how to define the hotspots which are set in the XML defined with the includeconfig parameter above. In this example an XML file called hotspots_notebook.xml is used.
Hot Spots consist of a marker line and a marker dot as well as content area. The content area may contain all kind of HTML content, e.g. formatted text, hyperlinks, images, videos and alike.
Each hotspot requires an individual hot spot definition node.
In addition a node can be used to define default parameter values.
Default Parameter
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
text includes the HTML content to display for this hot spot. Note that the value needs to 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 center of the object (usually equal to the center 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 viewing angle in degrees at which to display the hot spot. E.g. for a hot spot on the left side of the object use “90” and for a hot spot at the back of the object use “180”.
perimeterAngleRange is the angle range in which the hot spot shall be visible. E.g. 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 shall be faded in and out. A value of “0” means that the hot spot will be displayed or hidden immediately when entering or leaving the perimeterAngleRange. Values greater than 0 extend the perimeterAngleRange by the given degrees in which the hot spot’s opacity 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.