NeptuneLabs FSI Viewer JS, FSI Showcase JS, FSI TouchZoom, FSI Pages JS, FSI QuickZoom User Manual
...
FSI VIEWER
Let your website visitors have a closer look
User Manual
Version 2017
FSI Viewer JS
FSITouchZoom
FSIQuickZoom
FSIImageFlow
FSIShowcase JS
FSIPages JS
Developed by:
NeptuneLabs GmbH
Lagesche Str. 32
D-32657 Lemgo
Germany
© 2009-2017 NeptuneLabs. Allrights reserved.
Last updated:
FSITouchZoom
FSIViewer JS
FSIPages JS
FSIImageFlow
FSIQuickZoom
Manual Revision
All brands and product names are trademarks orregistered trademarks of the respective producers.
FSI Viewer,FSIServer andNeptuneLabs are registered trademarks of NeptuneLabs GmbH, Germany.
February 2017
17.02
17.02
17.02
17.02
17.02
055
Table of Contents
1 Introduction
2 FSI ViewerJS
2.1 How it works
2.2 Using FSIViewer JS
2.2.1 The Menu Bar
2.2.2 Mouse Modes
2.2.3 Additional Buttons
2.2.4 Using the navigator window
2.3 Index structure of FSI Viewer JS
2.4 Configuration
2.4.1 Using XML Configuration Files (*.xml)
2.4.2 Hierarchy of Configuration Parameters
2.4.3 Retrieving Parameters from FSIServer
2.4.4 Using Custom Language Files
2.4.5 Enabling the Debug Mode
2.5 FSI Viewer JS Parameters
2.5.1 Global Parameters for Hot Spots
2.5.2 <camera> Section
2.5.3 <virtualSpace> Section
2.5.4 <hotspots3d> Section
2.5.5 <video> Section
2.5.6 Plugin Parameters
2.6 Creating and using Spin Videos
2.7 Embedding the viewer at runtime via JavaScript
2.8 JavaScript Interface
2.8.1 Public Methods
2.8.2 Callbacks
8
10
11
12
13
13
14
15
15
15
15
17
19
19
20
20
39
42
49
51
63
67
70
71
73
73
81
3 FSI TouchZoom
3.1 Initializing FSI TouchZoom manually
3.2 FSI TouchZoom Parameters
3.3 Initializing FSI TouchZoom manually
3.4 JavaScript Interface
4 FSI QuickZoom
4.1 How it works
4.2 FSI QuickZoom Parameters
4.3 Initializing FSI QuickZoom manually
4.4 JavaScript Interface
88
89
90
93
95
98
99
99
105
106
5 FSI ImageFlow
5.1 How it works
5.2 FSIImageFlow Parameters
5.3 Embedding the viewer at runtime via JavaScript
5.4 JavaScript Interface
110
111
111
126
128
6 FSI Showcase JS
7 FSI Pages JS
7.1 How it works
7.2 Usage
7.2.1 Defining Image Collections
7.2.2 Aspect Ratio of the Pages
7.2.3 Printing Pages
7.2.4 Special URL Values
7.2.5 FSI Pages JS Presets in FSI Server Interface "Publish to Web"
7.3 FSI Pages JS Parameters
7.3.1 General Parameters
7.3.2 Layout/ Appearance Parameters
7.3.3 Link Parameters
7.3.4 Plug-in Parameters
7.4 JavaScript Interface
7.4.1 Public Methods
7.4.2 Callbacks
8 FSI Viewer
8.1 Compatibility and User System Requirements
8.2 Using FSIViewer
8.3 The Menu Bar
8.4 Mouse Modes
8.5 Additional Buttons
8.6 Using the navigator window
8.7 Keyboard Shortcuts
8.8 Index structure of FSI Viewer
8.8.1 Licensing FSIViewer
8.9 Integration into HTML Pages
8.9.1 Required HTML-Source Code
8.10 Configuration
8.10.1 Using XML Configuration Files (*.xml)
8.10.2 Using HTTP Queries
8.10.3 Hierarchy of Configuration Parameters
8.10.4 Default Configuration
132
134
134
134
136
138
138
139
140
140
141
148
160
165
170
170
176
182
182
182
183
183
184
185
185
186
186
187
187
188
189
191
192
193
8.10.5 Configuration Files
8.10.6 Passing Parameters by HTTP Query
8.10.7 Retrieving Parameters from Imaging Servers
8.10.8 Parameters
8.10.9 Applying Effects to Specific Images Only
8.10.10 Using Custom Language Files
8.11 Virtual 360° Presentations
8.11.1 Parameters for Virtual 360° Presentations
8.12 Debug Mode
8.12.1 Enabling the Debug Mode
8.12.2 Using the Debug Window
8.13 Automated Implementation of Images
8.14 Plug-ins
8.14.1 Deactivating Plug-ins
8.14.2 Defining Plug-in Parameters
8.14.3 Defining Plug-in Parameters dynamically
193
194
194
195
218
226
226
230
236
236
237
238
241
242
243
243
9 FSI Pages Add-on
9.1 Using FSIPages
9.2 FSI Pages Converter
9.3 Aspect Ratio of the Pages
9.4 Layout and Skins
9.5 Cropping
9.6 Defining Image Collections
9.7 Page Reading Order
9.8 Printing Pages
9.9 Saving Pages
9.10 Saving PDF or other document types
9.11 Searching in FSI Pages
9.12 Hyperlinks
9.13 Publishing PDF Documents with Links using FSI Pages Converter and FSI
Server
9.14 Providing XML page data to FSI Pages
9.15 Link Parameters and Hierarchy of Link Parameters
9.16 Relative and Absolute Links
9.17 Special URL Values
9.18 Modifying Link Values at Runtime
9.19 Page Overlays
9.20 FSI Pages Presets in FSI Server Interface "Publish to Web"
9.21 Event Notifications and Actions
9.22 Parameters to retrieve Image Collections
246
246
247
247
248
249
250
252
253
254
254
256
258
259
259
265
267
268
269
270
271
272
274
9.23 Basic Parameters
9.24 Parameters for the Front- and Backcover
9.25 Parameters defining Layout and Appearance
9.26 Parameters for Links on Pages
9.27 Parameters for FSI Pages Thumbnails
9.28 Parameters for Statistics
9.29 Advanced Parameters
10.1 FSI Pages mobile
10.1.1 Pages Mobile Parameters
10.1.2 Pages Mobile Plug-in Attribute targetdevice
277
284
287
297
303
307
309
328
329
331
11 FSI Showcase Add-on
11.1 Using FSI Showcase
11.2 Defining Image Lists
11.3 FSI Showcase Layout
11.4 Showcase Parameters
11.5 Basic Parameters
11.6 ImageList Parameters
11.7 Advanced Parameters
12 Plug-in Reference
12.1 AddThis
12.2 BackgroundImage
12.3 Chapters
12.4 ClockProgress
12.5 ColorAdjust
12.6 ContextMenu
12.7 CustomButton
12.8 Fullscreen
12.9 History
12.10 HotSpots
12.11 Imprint
12.12 JavaScript Bridge
12.13 LargeToolTips
12.14 Magnifier
12.15 MaxZoom
12.16 Measure
12.17 Mousemodes
12.18 MousemodeSelect
12.19 Music
12.20 NavExtension
332
332
332
335
337
338
344
346
362
363
369
371
376
380
383
385
390
392
394
408
411
424
429
432
433
442
444
446
449
12.21 Notepad
12.22 PagesLibrary
12.23 PagesMirror
12.24 PageSounds
12.25 PagesThumbBar
12.26 PrintSave
12.27 Resize
12.28 SelectFrame
12.29 ShoppingList
12.30 SoftwareCursor
12.31 StickyNotes
12.32 Synchronize
12.33 ZoomMeter
451
463
467
469
470
478
482
484
489
495
496
501
503
13 Appendix
A Escaping or URL-encoding parameter values
B HTML Tags available in FSI Viewer
C Example of a _default.xml file for FSIViewer Flash
D Example of an image specific FSI configuration file
E Example of a FSIViewer JS skin css file
13 Appendix
F Escaping or URL-encoding parameter values
G HTML Tags available in FSI Viewer
H Example of a custom skin CSS file
Index
506
506
506
507
507
508
508
508
509
509
515
1 Introduction
1 Introduction
The JavaScript based viewers FSIViewer JS, FSITouchZoom, FSI QuickZoom,
FSIShowcase JS and FSIImageFlow bring outstanding zoom qualities to almost all
devices. They are highlycustomizable and work independently fromFSIViewer Flash.
FSI ViewerFlash and its Add-ons FSI Pages and FSI Showcase are based on Adobe
Flash and have been designed to display high resolution images on the internet
requiring low bandwidth only.
FSIServer is the basis of all viewers which request the image data from it. By using
FSIServer, only one high resolution source image is required for each image to be
displayed.
Thank you for using NeptuneLabs software!
www.neptunelabs.com
Visit
www.neptunelabs.com
and downloads.
: Online Resources for FSI Viewer
for software updates, regularly updated samples, tutorials
NeptuneLabs - FSIViewer 8
2 FSI ViewerJS
2 FSI ViewerJS
FSI Viewer JS is a JavaScript based tool to display 2D image zoom and 360° Object spins
on desktop computers and mobile devices. Depending on the device capabilities it offers
in place zoom or pinch zoom support. FSIViewer JS also supports optional multiple axis
spin.
Using an optional video, the rotation ofthe 360° object can be displayed extremely
smooth on devices that support video capturing.
Optional hot spots with HTML content can be added by providing 3Dcoordinates (x,y,z)
in millimeters.
Imaging Servers
FSI products covered by this manual can at present securely be run with FSI Server
from version 2016.
Supported devices
l iOS 4 or higher
l Android 4.xbased devices
l Windows Phone 8 and Windows RT devices
l Windows 8 with touch enabled browsers
l Mouse zoom: desktop or laptop computers &all major browsers
Usage
I) add the fsiviewer.js script to the head of your document:
Adding the script
<head>
[…]
//adding the fsiviewer.js script
<script src="viewer/applications/viewer/js/fsiviewer.js"
type="text/javascript"></script>
</head>
II) Add a <fsi-viewer> tag to the part of your document body where the zoom and/or
the 360° product spin should be displayed. Add the desired dimension and the
imagesource/ directory to it:
NeptuneLabs - FSIViewer 10
2 FSI ViewerJS
Integrate FSI Viewer JS
<body>
[…]
<fsi-viewer width="500" height="600" src="/images/foo.tiff">
//here you can place the fallback content in case the browser
// cannot display the viewer, e,g,:
<b>Sorry</b>, your browser is not capable of running FSI Viewer
JS
</fsi-viewer>
Parameters are added to the <fsi-viewer> tag. Note that you can as welluse FSI
Viewer configuration files (required when using hot spots):
Adding Parameters to the viewer
<head>
[…]
//adding the fsiviewer.js script
<script src="js/fsiviewer.js" type="text/javascript"></script>
</head>
<body>
[…]
//Adding parameters directly to the tag:
<fsi-viewer width="500" height="600" src="/images/sample.jpg"
debug="true" skin="silver">
</fsi-viewer>
//Example with using a FSIViewer configuration file:
<fsi-viewer width="500" height="600" src="/images/sample.jpg"
cfg="sample/sample_configuration">
</fsi-viewer>
2.1 How it works
The script uses the given <fsi-viewer> tag, which is similar to an <img> tag, to
display a single image zoom and/or 360° object spin.
If a video has been defined, the script captures video frames on start to provide an
ultra smooth rotation.
11 NeptuneLabs - FSIViewer
33,3%
Viewer
360°
2 FSI ViewerJS
Without a video (or on devices not supporting video capturing) a fixed number of
images from different viewing angels willbe used to display the object spin.
The user can drag the image left and right to spin and zoom in/out either using
pinch zoom or by clicking on the object.
Note on Internet Explorer:
In order to make FSI Viewer JS work,Internet Explorer must run in IE8 quirks, IE9 or
higher quirks or standards mode. You can ensure that by adding an X- UACompatible meta tag to the head section of your web page, for example:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
2.2 Using FSIViewer JS
FSI Viewer JSis navigated
by the menu bar (here
seen below the image)
and by using the mouse
directly on the image. For
example, you can select
a section of the image
you want to magnify.
The mouse functions are
determined by the
corresponding buttons
on the menu bar (zoom,
pan, rotate, etc.).
The optional small
navigator window
(bottom right) displays the position of the image section currently viewed.
NeptuneLabs - FSIViewer 12
2 FSI ViewerJS
100%
Viewer
360°
2.2.1 The Menu Bar
Main Functions
The menu bar might look different depending on skins or
additional plugins.
Back to Initial View.
Undoes zoom, pan and rotation and restores the initialview.
(identical with pressing space bar)
Zoom In
Zoom Out
2.2.2 Mouse Modes
The
→ Mousemodesor→ MousemodeSelect
following mouse mode buttons.
13 NeptuneLabs - FSIViewer
plug-in is required to display the
360°
Viewer
2 FSI ViewerJS
Mouse - Zoom In
Choose this function to enlarge segments using the mouse. Click on
the image and drag the frame over the desired segment.
Alternativelyyou can clickon the image, without marking a
segment. The image willthen be magnified in steps. To zoom out in
steps, hold down the CTRL-key and click on the image.
Mouse - Pan
Choose this function to pan the image using the mouse. Click on the
image and drag in the desired direction. To return to the original
view, hold down the CTRL-keyand click on the image.
Mouse - Turn
Choose this function to rotate the image around the z-axis. Click on
the image and drag in whatever direction you want to turn the
object (to the right or the left).To reset the rotation, hold down
the CTRL-key and click on the image.
Mouse - Rotate (only for 360° presentations)
Choose this function to rotate the object around the y-axis or the
x-axis if available. Clickon the image and drag to the left or to the
right. Move the mouse up or down to rotate the object around the
x-axis. To reset rotation, hold down the CTRL-keyand clickon the
image.
2.2.3 Additional Buttons
Hide /Display menu
Displays or hides the user interface.
Information
Displays information about the viewer (optional,can be hidden by
altering the skin CSS)
NeptuneLabs - FSIViewer 14
2 FSI ViewerJS
15%
2.2.4 Using the navigator window
In the navigator window you can see a miniature presentation
of the entire image. The segment which is currently viewed is
framed. In the navigator window you can change the current
segment either by dragging the frame or by clicking on the
desired area of the image.
2.3 Index structure of FSI Viewer JS
The index structure of the JS viewers as found in WEBAPPS/fsi/viewer/:
Directory Content Description
applications contains the .js scripts for the according viewers
config contains the configuration files
languages User interface language files
plugins FSI Plug-ins extending FSI Viewer at runtime
skins FSI Skins containing the visible parts of the user interface
Please Note: You need to make sure that your web server properly serves files with
the following extensions: *.js, *.xml
2.4 Configuration
2.4.1 Using XML Configuration Files (*.xml)
FSI Viewer JS uses XML configuration files which can easily be edited with any
text editor.
The default configuration file "_ default.xml" - which is located in
WEBAPPS/fsi/viewer/ is the most important XML configuration file and will
always be evaluated first.
To use FSI Viewer with additional configuration files you have to place the file in
the WEBAPPS/fsi/viewer/config/ folder and provide the name of the
configuration file using the "cfg"parameter in the code:
15 NeptuneLabs - FSIViewer
2 FSI ViewerJS
Using FSI Viewer Configuration Files
<head>
[…]
//adding the fsiviewer.js script
<script src="js/fsiviewer.js"
type="text/javascript"></script>
</head>
<body>
[…]
//Example with using a FSI Viewer configuration file:
<fsi-viewer width="500" height="600"
src="/images/sample.jpg" cfg="sample/sample_configuration">
</fsi-viewer>
Configuration files are structured into configuration groups (XML nodes)
containing parameter names and values. Only parameters in these groups will
be recognized by FSI Viewer. Configuration files do not need to contain all
groups though. Each parameter has to be provided as an individual XML child
node of a group where the node name is the parameter name and the
parameter value needs to be provided as "value"attribute of the node.
Structure of XML configuration files
<fsi_parameter>
<image>
</image>
<plugins>
</plugins>
<options>
</options>
</fsi_parameter>
NeptuneLabs - FSIViewer 16
<parameter value="" />
<parameter value="" />
<parameter value="" />
2 FSI ViewerJS
Simple XML configuration file
<fsi_parameter>
<image>
<path value="samples/Watch.jpg" />
</image>
<options>
<skin value="silver" /><
debug value="1" />
</options>
</fsi_parameter>
Please keep in mindthe following rules when using XML configuration files:
l attribute values must be provided in double quotes
l the last occurrence of a given parameter will be used
l configuration files might be cached byyour browser, so that changes in
these files require flushing the browser cache. This does not apply
when using the debug mode.
l make sure to save configuration files in UTF- 8 format if your
configuration file contains language specific diacritics, Japanese
characters and alike
You can comment on or disable sections of an XML configuration file using the
usual XMLcomment syntax:
Comments and disabling parameters temporarily
<image>
<!—- This is a comment -->
<path value="image.tif" />
<!-- The following section will be ignored -->
<!-<path value="anotherimage.tif" />
-->
</image>
2.4.2 Hierarchy of Configuration Parameters
As explained before parameters can be provided in two different ways:
1. The default configuration file "_ default.xml" - located in
WEBAPPS/fsi/viewer/ - willalways be evaluated first
17 NeptuneLabs - FSIViewer
2 FSI ViewerJS
2. You can store image specific parameters in additional *.xmlfiles in
WEBAPPS/fsi/viewer/config/
Parameters specified in multiple ways – for example in the default configuration
and by custom configuration files– willbe evaluated in the following way:
l Parameters defined in configuration files override parameters
defined inthe default configuration file "_default.xml".
The list below shows the hierarchy resulting from the sequential
evaluation ofthe different configuration methods:
Configuration Hierarchy
1. Configuration file (*.xml)
2. Default configuration file (_default.xml)
Choosing the adequate Configuration Method
So far you learned that FSI Viewer JS can be configured by any
combination of:
l The default configuration file (_default.xml)
l Additional configuration files (*.xml)
These configuration options are not only alternate methods. Combining
these methods offers the possibility to provide configuration parameters
as easily as possible and as dynamically as required. The following
considerations might be helpful when deciding which method to choose for
a certain parameter.
Default Configuration
You can easily change global parameters that apply to all FSI Viewer instances
by editing a single file. This is therefore the recommended configuration
method for:
General configuration options like:
l Skin
l Language
l MenuAlign, AnimationSpeed and alike
Configuration Files
Separate configuration files should be used for parameters specific to a group
of images or a specific way to display images. You might for example want to
setup individual configuration files for different types of FSI Viewer JSinstances,
like "small_no_interface. xml", "large_with_hotspots.xml" as an example.
NeptuneLabs - FSIViewer 18
2 FSI ViewerJS
Usually you don‘t need to create a configuration file for individual images, as you
can specify the image path or other unique parameters dynamicallyin the code.
2.4.3 Retrieving Parameters from FSIServer
FSI Viewer JS is capable of retrieving image specific parameters from FSI Server
dynamically. This way you do not need to define these parameters explicitly.
The list below shows some typical parameters that can be retrieved from FSI
Server automatically:
In which case will these values be retrieved automatically?
FSI ViewerJS tries to retrieve the parameters ImageWidth and ImageHeight
from the server if one of these values has not been defined manually. If the
server delivers additional parameters (e.g. ImageTilesX, ImageTilesY) these
parameters willonly have an effect if they have not been defined manually.
l ImageWidth
l ImageHeight
l ImageTilesX
l ImageTilesY
l SceneSets
l Image Collections
l Hyperlinks
l Hotspots
2.4.4 Using Custom Language Files
In case you want to edit tool tips for existing languages or add support for
additional languages you can edit or create language files in the subdirectory
"/languages" of your FSI Viewer setup directory.
Each language file contains a list of phrases used in FSI ViewerJS user
interface.The language files are XML files and need to be saved inUTF-8 format.
The attribute "id" specifies the context of each phrase. Please note that you
need to use XML entities for characters not allowed in XML files, like e.g.
& for "&"
< for "<"
> for ">"
" for "
' for ‚
You can use basic HTML-tags to apply text formatting to the tool tips.
19 NeptuneLabs - FSIViewer
2 FSI ViewerJS
Excerpt from a language file
<Data language="english" color="000000" font="_ sans"
offsetTop="0" offsetLeft="0"
offsetWidth="0" offsetHeight="0">
<tip id="ZoomOut"><b>Zoom Out</b><br/>Click to
decrease magnification</tip>
<tip id="ZoomIn"><b>Zoom In</b><br/>
Click to increase
magnification</tip>
<tip id="Downloading Data">Downloading:</tip>
[...]
</Data>
You can duplicate existing language files or create new files as needed.
To use custom language files, please use the "language" parameter and set
the parameter value to the filename without the ".xml" extension.
2.4.5 Enabling the Debug Mode
The debug mode can be enabled or disabled by passing the "Debug" parameter
either in the code snip or inan XML configuration file.
Please use "debug=1" or "debug=true" to enable the debug mode and
"debug=0" (or omit the debug parameter) to disable the debug mode. To
disable the debug mode permanently you can safely delete the "/debug"
directory ofyour FSI setup directory.
Example:
If FSI Viewer JS does not work or look as expected in an HTML page you can
quickly debug FSI Viewer as follows:
l Open the HTMLpage containg FSIViewer JS
l Open the"Inspect Element" feature of your browser
l in the "Console" part you can now check if everything is implemented
and loaded correctly
2.5 FSI Viewer JS Parameters
You can optionally modify the way FSI Viewer JS works by passing parameters to
the script. To do so, pass an object containing the parameters and value as an
NeptuneLabs - FSIViewer 20
2 FSI ViewerJS
object to the constructor:
Example:
<head>
[…]
//adding the fsiviewer.js script
<script src="js/fsiviewer.js" type="text/javascript"></script>
</head>
<body>
[…]
//Adding parameters directly to the tag:
<fsi-viewer width="500" height="600" src="/images/sample.jpg"
debug="true" skin="silver">
</fsi-viewer>
debug
Description
Syntax Boolean
Default false
Context FSI Viewer JS
Displaydebug and status information inthe browser's JavaScript console.
headers
Description
Syntax String
Default "cors"
Context FSI Viewer JS
The "&headers=" parameter to use for image requests.
The default value "cors" ensures cors compatibilityfor cross-origin scenarios.
21 NeptuneLabs - FSIViewer
display debug and status information in the JavaScript
console
display debug and status information in the JavaScript
console
2 FSI ViewerJS
autoSpinSpeed
Description Time in seconds for a fullrotation
Syntax float
Default -
Context FSI Viewer JS
Time in seconds for a fullrotation. Negative values reverse spin direction.
cfg
Description relative path to an XMLconfiguration file in FSI Viewer format
Syntax String
Default ""
Context FSI Viewer JS
The relative path to an XMLconfiguration file in FSI Viewer format.
When using a relative path the location specified by the FSI Viewer "FSIBase"
parameter willbe used, which is [viewer]/config/ by default.
hideUI
Description hides the user interface
Syntax string
Default false
Context FSI Viewer JS
Hides or displays the user interface.
Possible values:
true
false
onMobileDevices: UI is hidden on mobile devices
ifNoInPlaceZoom: UI is hidden if in place zoom is deactivated
NeptuneLabs - FSIViewer 22
2 FSI ViewerJS
noNav
Description hides the navigation window
Syntax boolean
Default false
Context FSI Viewer JS
Hides or displays the navigation window.
autoHideNav
Description automaticallyhides the navigation window
Syntax boolean
Default false
Context FSI Viewer JS
Hides or displays the navigation window automaticallyif the magnification is at
minimum.
navWidth
Description defines the width of the navigation frame
Syntax String
Default "120"
Context FSI Viewer JS
Defines the width ofthe navigation frame displayed in the right corner on the
bottom.
navHeight
Description defines the height of the navigation frame
Syntax String
Default "120"
Context FSI Viewer JS
23 NeptuneLabs - FSIViewer
2 FSI ViewerJS
Defines the height of the navigation frame diplayed in the right corner on the
bottom.
progressBarWidth
Description defines the width of the progress bar
Syntax float
Default 35
Context FSI Viewer JS
Defines the width ofthe progress bar inpercent of the viewport width.
progressBarHeight
Description defines the height of the progress bar
Syntax float
Default 14
Context FSI Viewer JS
Defines the height of the progress bar in pixel.
progressBarHAlign
Description defines the horizontal position of the progress bar
Syntax string
Default "center"
Context FSI Viewer JS
Defines the horizontal position of the progress bar, possible values: left, center,
right.
NeptuneLabs - FSIViewer 24
2 FSI ViewerJS
progressBarVAlign
Description defines the vertical position ofthe progress bar
Syntax string
Default "bottom"
Context FSI Viewer JS
Defines the horizontal position of the progress bar, possible values: top, middle(or
center), bottom.
urlLoadingAnimation
Description defines the loading animation shown
Syntax string
Default "/skins/resources/loading.svg"
Context FSI Viewer JS
Defines the loading animation shown. Custom animations can be placed here:
/skins/resources/. Setting the parameter to "false" discards the display.
skin
Description defines the skin to display
Syntax string
Default "black"
Context FSI Viewer JS
Defines the skin which will be displayed. FSIViewer JS comes with three default
skins, "black", "white" and "silver".
Skins are defined via CSSand can be found here: WEBAPPS/fsi/viewer/skins.
It is also possible to alter existing skins or to define custom skins in this location.
In order to use a custom skin, the easiest way would be to duplicate one of the
default skin CSS files and adapt them to your liking. make sure to use a custom class
in front af ALL classes defined in the custom CSS,, otherwise you will break other
skins on the same HTML document.
25 NeptuneLabs - FSIViewer
2 FSI ViewerJS
General appearance CSSrules, which are valid on an overall level, (e.g. the logo
container, height of the menubar, etc.) are defined in the corresponding core CSS
files, which can be found in WEBAPPS/fsi/viewer/skins/resources. (fsi-core.css, fsiviewer-core.css)
IMPORTANT:Never change the classes of the core CSS in the core files
directly. If you would like to adapt the CSS rules listed there, please
overwrite them in a custom skin file or in the HTMLdocument instead.
You can find detailed tutorials for changing the appearance of the skin in the
support section ofour website
For a detailed example of a basic custom skin,please go to
skin CSS file"
enableZoom
Description enable the user to zoom in and out
Syntax Boolean
Default true
Context FSI Viewer JS
Enable the user to zoom inand out.
On touch enabled devicesthe zoom is based on the native pinch zoom gesture. On
non touch enabled devices, in place zoom by clicking the object or dragging
up/down willbe enabled instead. Alternatively,the menu bar can be used for
zooming.
.
.
→ "Example of a custom
desktopClickZoomScale
Description the magnification levelto use when clickingthe object
Syntax Float
Default 3
Context FSI Viewer JS
For desktop browsers only.The magnification level to use when clicking the object.
NeptuneLabs - FSIViewer 26
2 FSI ViewerJS
dir
Description path to the source images for the object spin on FSI Server
Syntax String
Default ""
Context FSI Viewer JS
The path to the source images for the object spin on FSI Server.
The viewer willload the list ofimages from the given directory.
imagesrc
Description path to the single images used for FSI Viewer JS
Syntax String
Default ""
Context FSI Viewer JS
Defines the path to single images used for FSI Viewer JS.
imagesources
Description paths to single images used for FSI Viewer JS
Syntax String
Default ""
Context FSI Viewer JS
Defines the paths to single images used for FSI Viewer JS. Example: "dir1/1.jpeg,
dir1/2.jpeg, dir2/1.jpeg,..."
27 NeptuneLabs - FSIViewer
2 FSI ViewerJS
backgroundColor
Description the background color to use
Syntax 6-digit hex-color
Default #FFFFF
Context FSI Viewer JS
The background color to use. The color should match the video's or image's
background color (usuallywhite or black).
mouseSensitivity
Description sensitivity ofthe mouse movement when rotating the object
Syntax float
Default 1.0
Context FSI Viewer JS
Sensitivity of the mouse (finger) movement when rotating the object.
pellets
Description viewer draws optionallysmall dots on the video
Syntax boolean
Default true
Context FSI Viewer JS
When using a spin video you can optionallyhave the viewer draw small dots on the
video. This improves the visual impression of the video in higher resolutions.
NeptuneLabs - FSIViewer 28
2 FSI ViewerJS
pelletsOpacity
Description defines opacity of the dots ("pellets") drawn on the video
Syntax float
Default 0.09
Context FSI Viewer JS
Opacity of the dots ("pellets") drawn on the video, if the pellets parameter is
enabled.
drawCube
Description
Syntax boolean
Default false
Context FSI Viewer JS
Draws a 3D cube wireframe representing the object space of the spin as defined by
the "virtualSpace" parameters.
The drawCube option can be useful to validate the "virtualSpace" parameters.
This option only works on desktop computers using the HTML canvas
element.
drawTable
Description draws a virtual rotating table plate
Syntax boolean
Default false
Context FSI Viewer JS
Draws a virtual rotating table plate. This option only works on desktop
computers using the HTML canvas element.
draws a 3D cube wireframe representing the spin object
space
29 NeptuneLabs - FSIViewer
2 FSI ViewerJS
tableDiameter
Description defines diameter of virtual rotating table plate
Syntax Float
Default 950
Context FSI Viewer JS
Defines the diameter of the virtual rotating table plate in mm. This option only
works on desktop computers using the HTML canvas element.
drawGroundPlate
Description draws a virtual ground plate
Syntax boolean
Default false
Context FSI Viewer JS
Draws a virtual ground plate.
This option only works on desktop computers using the HTML canvas
element.
effects
Description: Image manipulation parameters for allimages
Syntax: String
Default: —
Context: FSI Viewer JS
The effects parameter can be used to pass image manipulation parameters to the
imaging server. Typical manipulation parameters include the image saturation
("saturation") and image sharpening ("sharpen"). If no effect is specified, the
default settings of the server (profile) apply.
Please refer to your FSI Server documentation for a list of available effect
parameters.
NeptuneLabs - FSIViewer 30
2 FSI ViewerJS
initialView
Description defines the initialimage segment
Syntax String
Default ""
Context FSI Viewer JS
Image section (and rotation) to displayon startup.
The first two parameters are required as they specifythe scene set and the scene.
For 2D images both values default to 1.
initialViewPersistent
Description Keep the InitialView as default view
Syntax boolean
Default false
Context FSI Viewer JS
If this parameter is activated, clicking the "Reset" button will display the image
section defined by the InitialView parameter instead of the entire image. If this
parameter is set to "false", the initial view will be displayed on startup, but pressing
the Reset button willreset the view to the entire image.
showPreviewWhileLoading
Description shows/hides preview images for spins while loading
Syntax boolean
Default true
Context FSI Viewer JS
If this parameter is set to false, the preview images which are shown while the spin
is loaded are hidden.
31 NeptuneLabs - FSIViewer
2 FSI ViewerJS
spinPreviewWhileLoading
Description shows/hides preview images for spins while loading
Syntax boolean
Default true
Context FSI Viewer JS
If this parameter is set to false,a static image will be showninsted of the spin while
loading. If initialView is defined, the image defined there willbe shown.
showProgressbar
Description shows/hides progess bar while loading
Syntax boolean
Default true
Context FSI Viewer JS
If this parameter is set to false, the progress bar which isshown while the spin is
loaded is hidden.
panLimits
Description deterrmines how far the user is allowed to pan
Syntax String
Default "strict"
Context FSI Viewer JS
Determines how far the user is allowed to pan. Possible settings are:. "loose",
"medium", "strict"
NeptuneLabs - FSIViewer 32
2 FSI ViewerJS
preventImageTransparency
Description prevents the image transparency
Syntax Boolean
Default false
Context FSI Viewer JS
Prevents using the image transparency if a transparency channel exists.
useDevicePixelRatio
Description Use the device's pixelratio to displayeven sharper images.
Syntax Boolean
Default true
Context FSI Viewer JS
Use the device's pixelratio to automatically display even sharper images.
adaptiveUISize
Description determines ifinterface scales according to the zoom level .
Syntax Boolean
Default true
Context FSI Viewer JS
When set to true, the interface scales according to the zoom level.
inPlaceZoom
Description activates zooming in the FSIViewerJSinstance
Syntax string
Default "true"
Context FSI Viewer JS
33 NeptuneLabs - FSIViewer
2 FSI ViewerJS
The parameter defines if in- place-zoom (zooming directly in the FSIViewer JS
instance)is activated.
Possible values:
true
false
auto: in-place-zoom is activated, but not on mobile devices
documentZoom
Description allows pinch-zoom on FSIVIewer JSinstance
Syntax string
Default "auto"
Context FSI Viewer JS
Activates pinch document zoom on FSIViewer instance.
Possible values:
true
false
auto:
pinch document zoom is activated on all touch-enabled
devices
autoDisablePointerActions
Description disables events ifviewer is larger than viewport
Syntax Boolean
Default true
Context FSI Viewer JS
Disables mouse and touch events if viewer's height OR width is larger than the
viewport width or height.
NeptuneLabs - FSIViewer 34
2 FSI ViewerJS
loadExactPreviewImagesAfterResize
Description
Syntax Boolean
Default "true"
Context FSI Viewer JS
Reload images inthe new required resolution after a resize event.
maxZoom
Description defines the maximum magnification level
Syntax Float
Default 100
Context FSI Viewer JS
Defines the maximum magnification level.
minInstanceSize
Description defines the minimuminstance size
Syntax Integer
Default 60
Context FSI Viewer JS
Reload images inthe new required resolution after a resize
event
Defines the minimum instance size of the viewer.
35 NeptuneLabs - FSIViewer
initialMouseMode
Description Mouse mode on startup
Syntax String
Default "auto"
Context FSI Viewer JS
Specifies the selected mouse mode on startup.
Possible values:
0: (Zoom)
1: (Pan)
2: (Spin 360°)
menuButtonOrder
Description defines the button order of the menu bar buttons
Syntax String
Default -
Context FSI Viewer JS
2 FSI ViewerJS
Defines the button order of the menu bar buttons. The buttons need to be listed in
a string with the corrsponding button IDs.
The following button IDs currentlyexist:
Reset, ZoomOut, ZoomIn, MouseMode_ 0, MouseMode_ 1, MouseMode_ 2,
MaxZoom, HotSpots, ToggleAutoSpin, ToggleFullScreen
autoDestroy
Description automaticallydestroy instances
Syntax boolean
Default true
Context FSI Viewer JS
NeptuneLabs - FSIViewer 36
2 FSI ViewerJS
Automaticallydestroy instances created with the fsi-viewer tag upon removing the
tag from the document DOM.
spinDirectionImage
Description defines direction of rotation
Syntax String
Default "left"
Context FSI Viewer JS
Specifies the direction of the spin rotation.
SceneSets
Description Scene sequence definition
Syntax String
Default 1 – n tiles
Context FSI Viewer JS
Defines the minimum instance size of the viewer.
Using this parameter you can define scene sets for 360° views. Scene sets define
the order of scenes to be displayed.
The default is a single scene set containing all scenes (image tiles) from scene 1 to
the last scene image. The default sequence is left to right, top to bottom in a tile
image and the sequence of the <image> nodes for 360° views based on individual
source images.
In the viewer scenes can be selected by moving the mouse horizontallyand scene
sets can be selected by moving the mouse vertically.
Syntax:
Individual sets have to be separated with ";" (semicolon).
Scenes within the sets are separated with "," (comma) and specify the 1-based
index ofthe image from left to right, top to bottom up to the total number of scenes
(TilesX x TilesY or individual source images).
Instead of individual scenes you can also specifyscene ranges, e.g."5-10".
If you leave out the start or the end of a scene range, 1 or respectively the last
scene willbe assumed in this case. Ifyou specifya range using "->" the scenes from
37 NeptuneLabs - FSIViewer
2 FSI ViewerJS
the first number to the last scene image plus the first scene image up to the second
number willbe assumed.
Example:
SceneSets="1-12;13-24;25-36;37-48"
reverseSceneSets
Description reverses the Scene Sets
Syntax boolean
Default false
Context FSI Viewer JS
Reverses the order of the Scene Sets.
NoSetLoop
Description No 360° rotation around the y-axis
Syntax Boolean
Default false
Context FSI Viewer JS
The first and the last scene set will be considered ending points. (E.g. for partial
rotations < 360°).
Please note: The blur animation is turned offif NoSetLoop is activated.
NoSceneLoop
Description No 360° rotation around the x-axis
Syntax Boolean
Default false
Context FSI Viewer JS
The first and last scene in the each scene set willbe considered ending points. (E.g.
for partial rotations < 360°).
Please note: The blur animation is turned offif NoSceneLoop is activated.
NeptuneLabs - FSIViewer 38
2 FSI ViewerJS
2.5.1 Global Parameters for Hot Spots
enableHotspots
Description enables or disables hot spots
Syntax boolean
Default true
Context FSI Viewer JS
You can set this value to false if hot spots have been defined, but shall not be
displayed.
hotspotCallbackFunction
Description callback function for hot spots
Syntax string/ function
Default ""
Context FSI Viewer JS
The name of a custom JavaScript callback function in window scope to calleach
time a hot spot mouse action occurs.
Alternativelyyou can pass the function directly as a JavaScript parameter.
Example of a callback function prototype:
Callback Function Prototype
function onFSIViewerHSAction(strAction, viewer, idViewer,
idHotspot, node, param, angle)
{
if (strAction == "click")
{
alert("clicked on hot spot " + idHotspot);
}
}
39 NeptuneLabs - FSIViewer
Attribute Description
2 FSI ViewerJS
action
viewer
idViewer
idHotspot
node
param
angle
hotspotLineColor1
Description lighter color ofthe hot spot marker lines
Syntax 6-digit hex color
Default #FFFF00
Context FSI Viewer JS
The lighter color of the hot spot marker lines.
a string representing the action "mouseover",
"mouseout", "mousedown" or "click"
the FSI Viewer JS viewer instance calling the method
the value of the "id"attribute of the viewer's <div> tag
the 0-based id ofthe hotspot
the <div> node containing the hot spot content
the content of the "actionParameter" parameter of the
hot spot
the hot spot's perimeterAngle value (the angle at which
it's visible best)
hotspotLineColor2
Description darker color of the hot spot marker lines
Syntax 6-digit hex color
Default #000000
Context FSI Viewer JS
The darker color ofthe hot spot marker lines.
NeptuneLabs - FSIViewer 40
2 FSI ViewerJS
hotspotDotColor1
Description lighter color ofthe hot spot marker lines
Syntax 6-digit hex color
Default #FFFF00
Context FSI Viewer JS
The lighter color of the hot spot marker circle's gradient.
hotspotDotColor2
Description darker color of the hot spot marker lines
Syntax 6-digit hex color
Default #000000
Context FSI Viewer JS
The darker color ofthe hot spot marker circle's gradient
decodeHTMLEntitiesInHotSpotTexts
Description enables html entities in the hotspots text
Syntax 6-digit hex color
Default #000000
Context FSI Viewer JS
When enabled, basic HTML entities willbe enabled in the hotspot text.
hotspotDotRadius
Description radius of the hot spot marker circle in px
Syntax float
Default 4.0
Context FSI Viewer JS
The radius ofthe hot spot marker circle in px.
41 NeptuneLabs - FSIViewer
2 FSI ViewerJS
2.5.2 <camera> Section
The camera section contains parameters describing the technical
specifications and the position of the camera when shooting the 360° spin.
You only need to specify these values if you are using the virtual
space, e.g. for hot spots.
For 2D zoom and spins without hot spots you can omit this
parameter group.
digitalCropFactor
Description
Syntax float
Default 1.0
Context FSI Viewer JS
The value depends on the size ofthe optical sensor chip ofthe 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.
Please note that for an accurate calculation the rounded figure (e.g. 1.5) is not
precise enough, since two to four decimal places are required.
In order to ensure an exact smooth video and hotspot implementation, please
do the following calculation for specific sensor dimensions of the camera used.
The size of the optical sensor chip can be found in the cameras technical
specifications.
depends on the size of the optical sensor chip ofthe
camera
NeptuneLabs - FSIViewer 42
2 FSI ViewerJS
36² + 24²
x² + y²
= digitalCropFactor
36² + 24² = Reference value
(35mm “full frame” format; 36mm x 24mm,
crop factor: 1.0)
x² + y² = Sensor dimensions of your camera
(width and height)
36² + 24²
22.3² + 14.9²
=
1.6132
Please find below the calculation for a Canon 7D camera (which has the sensor
dimensions of 22.3mm x14.9mm) as an example:
focalLength
Description focal length of the camera objective
Syntax float (inmm)
Default 50
Context FSI Viewer JS
The focal length of the camera objective.
43 NeptuneLabs - FSIViewer
image
plane
x
y
z
x
y
z
position(x,y,z)
targetPosition(x,y,z)
table center
2 FSI ViewerJS
position, targetPosition
Description defines the position of the camera and the object
Syntax float (inmm)
Default
Context FSI Viewer JS
postion (x,y,z) and targetPosition (x,y,z) can be used instead of
distanceToTableCenter, heightAboveTable and targetHeightOffset. (see
illustration below)
Explanation position(x,y,z)
x ifimage plane is in line with table center, x is 0
y height of the image plane inreference to the table center
z the distance between image plane and table center
NeptuneLabs - FSIViewer 44
2 FSI ViewerJS
Explanation targetPosition(x,y,z)
x iftarget is is in table center, x is 0
y height of the target in reference to the table center
z the distance between target and table center
distanceToTableCenter
Description
Syntax float (inmm)
Default 0
Context FSI Viewer JS
The straight distance from the cameras image plane to the center of the turn
table in mm (see illustration below).
heightCamera
Description distance from image plane of the camera to the ground
Syntax float (inmm)
Default 0
Context FSI Viewer JS
The straight distance from the optical center of your camera to the ground in
mm (see illustration below).
heightTable
Description distance from top of the turn table to the ground
Syntax float (inmm)
Default 0
Context FSI Viewer JS
distance from cameras image plane to the center of the
turntable
45 NeptuneLabs - FSIViewer
2 FSI ViewerJS
The straight distance from the top of the turn table to the ground in mm. (see
illustration below)
targetHeightOffset
Description
Syntax float (inmm)
Default 0
Context FSI Viewer JS
The height of the camera target spot at the center of the turn table in mm.
If you vertically target the table center the value is 0.0 mm.
(see illustration below)
targetWidthOffset
Description horizontal offset of the camera target spot
Syntax float (inmm)
Default 0
Context FSI Viewer JS
The horizontal offset of the camera target spot at the vertical the center of the
turn table related to the center of the turn table in mm. If you target the
horizontal table center (default) the value is 0.0 mm.
heightAboveTable
height of the camera target spot at the center of the
turntable
Description height of the image plane above the table
Syntax float (inmm)
Default 500
Context FSI Viewer JS
Alternative parameter if heightCamera and heightTable are unkown. Onyl
applies ifboth parameters are undefined.
NeptuneLabs - FSIViewer 46
2 FSI ViewerJS
d
h
1
h
T
image
plane
h
2
Camera Positioning Illustration
Attribute Description
hT Parameter: targetHeightOffset
h1 Parameter: heightCamera
h2 Parameter:heightTable
d Parameter: distanceToTableCenter
Usage of Robotic Camera Arm for rotations around the x-axis
armLength
Description length of the robot arm
Syntax float (inmm)
Default
Context FSI Viewer JS
Defines the lenght of the robot arm; default value is the distance of the camera
to the camera target. Onlyrelevant ifhotspots are used.
47 NeptuneLabs - FSIViewer
2 FSI ViewerJS
armJointPosition
Description position of the arm joint
Syntax float (inmm)
Default
Context FSI Viewer JS
Defines the position (x,y,z) of the robot arm joint; default value is equal to the
camera targetPostion. Only relevant if hotspots are used.
armAngleMeasureSetup
Description angle where distance from camera to target is measured
Syntax float (indegrees)
Default 0
Context FSI Viewer JS
Defines the anglefrom which distance from camera to target was measured.
Only relevant if hotspots are used.
armStartAngle
Description defines the start angle
Syntax float (indegrees)
Default -90
Context FSI Viewer JS
Defines the start angle of the rotation around the x- asis. Only relevant if
hotspots are used.
NeptuneLabs - FSIViewer 48
2 FSI ViewerJS
armEndAngle
Description defines the end angle
Syntax float (indegrees)
Default 90
Context FSI Viewer JS
Defines the end angle of the rotation around the x-axis. Only relevant if
hotspots are used.
2.5.3 <virtualSpace> Section
The virtualSpace section is optional and only required if you want to verify the
3D projections for use with hot spots. Using the camera parameters, the
viewer calculates the position of the hot spots based on the given 3D
coordinates only.
cubeSizeX, cubeSizeY and cubeSizeZ
Description
Syntax float
Default -
Context FSI Viewer JS
The "cube" is the bounding box ofthe spin object in millimeters.
cubeLineWidth
Description line width ofthe cube
Syntax float
Default -
Context FSI Viewer JS
Line width ofthe drawn cube. Only applies if the parameter "drawCube" is
activated.
49 NeptuneLabs - FSIViewer
"cube" is the bounding box of the spin object in
millimeters
2 FSI ViewerJS
baseRotationY, baseRotationX, baseRotationZ
Description specifies a rotation offset in degrees
Syntax float
Default 0
Context FSI Viewer JS
You can specifya rotation offset in degrees.
This is required only, if you started the 360° shooting session at an angle other
than 0°.
rotationXRange, rotationYRange
Description specifies the range of the rotation
Syntax float
Default 180 (X) or 360 (Y)
Context FSI Viewer JS
Specifies the range of the rotation of a certain axis.
shiftX, shiftY and shiftZ
Description
Syntax float
Default -
Context FSI Viewer JS
Optionallydefines an offset of the spin object on the turn table in mm.
NeptuneLabs - FSIViewer 50
defines an offset of the spin object on the turn table in
mm
2 FSI ViewerJS
position
Description
Syntax float
Default -
Context FSI Viewer JS
Alternative parameter to shiftX,shiftY, shiftZ - positon (x,y,z) is optional and
defines an offset of the spin object on the turn table in mm.
defines an offset of the spin object on the turn table in
mm
2.5.4 <hotspots3d> Section
The hotspots3d section is optional and only required if you want to display hot
spots on your 360° object spin. 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 <defaults> node can be used to define default parameter values.
51 NeptuneLabs - FSIViewer
HotSpot definition mode
2 FSI ViewerJS
<hotspots3d>
[…]
Hot Spot Parameters:
<defaults>
<normalClass value="hotspotNormal"/>
<hoverClass value="hotspotOver"/>
<activeClass value="hotspotAction"/>
<perimeterAngleFadeOut value="15" />
</defaults>
<hotspot>
<text value="Hot Spot A "/>
<x value="11"/>
<y value="223"/>
<z value="-116"/>
<perimeterAngle value="0"/>
<perimeterAngleRange value="60"/>
</hotspot>
<hotspot>
<text value="Hot Spot B "/>
<x value="11"/>
<y value="223"/>
<z value="-116"/>
<perimeterAngle value="90"/>
<perimeterAngleRange value="30"/>
<perimeterAngleFadeOut value="5" />
</hotspot>
x, y and z
Description
Syntax float (inmm)
Default -
Context FSI Viewer JS
The x, y and z distance in mm on the real object measured from the center of
the object (usually equal to the center of the turn table).
Combined with the required <camera> parameters, the viewer calculates the
rotated and projected position of the hot spot on screen.
NeptuneLabs - FSIViewer 52
x, y, z distance on the real object measured from center
of object
2 FSI ViewerJS
text
Description HTMLcontent to display for this hot spot
Syntax string
Default ""
Context FSI Viewer JS
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 (e.g. '&' for '&', '<' for '<','>' for '>'
and '"' for ").
horizontalMarkerSize
Description length of the horizontal line ofthe hot spot's marker
Syntax integer
Default 30
Context FSI Viewer JS
Length of the horizontal line of the hot spot's marker. Range: [-x ... 0 ... x]
verticalMarkerSize
Description length of the vertical line of the hot spot's marker
Syntax integer
Default 100
Context FSI Viewer JS
Length of the vertical line ofthe hot spot's marker. Range: [0 ... x]
53 NeptuneLabs - FSIViewer
2 FSI ViewerJS
horizontalMarkerPosition
Description horizontal position of the marker line
Syntax float
Default 0
Context FSI Viewer JS
Defines the horizontal position of the marker line on the tooltip. Range: [0.0 ...
1.0] The value 0.0 marks the left corner of the tooltip while 1 marks the right
corner.
verticalMarkerPosition
Description vertical position ofthe marker line
Syntax float
Default 0.5
Context FSI Viewer JS
Defines the vertical position of the marker line on the tooltip. Range: [0.0 ... 1.0]
The value 0.0 marks the top corner of the tooltip while 1 marks the bottom
corner.
NeptuneLabs - FSIViewer 54
2 FSI ViewerJS
markerAngle
Description angle of the vertical hot spot marker
Syntax float
Default 45
Context FSI Viewer JS
Defines the angle of the vertical hot spot marker.
perimeterAngle
Description viewingangle in degrees at which to display the hot spot
Syntax float
Default -
Context FSI Viewer JS
The viewing angle in degrees at which to display the hot spot.
E.g. for a hot spot on the left side ofthe object use "90".
For a hot spot at the back of the object use "180".
Alias: perimeterAngleY
perimeterAngleX
Description viewingangle in degrees at which to display the hot spot
Syntax float
Default -
Context FSI Viewer JS
The viewing angle in degrees at which to display the hot spot.
Only applies ifa rotation around the x-axis isused.
55 NeptuneLabs - FSIViewer
2 FSI ViewerJS
perimeterAngleRange
Description angle range in which the hot spot shallbe visible
Syntax float
Default 30
Context FSI Viewer JS
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°).
Alias: perimeterAngleRangeY
perimeterAngleRangeX
Description angle range in which the hot spot shallbe visible
Syntax float
Default 30
Context FSI Viewer JS
The angle range in which the hot spot shall be visible.
Only applies ifa rotation around the x-axis isused.
perimeterAngleFadeOut
Description
Syntax float
Default 10
Context FSI Viewer JS
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.
Alias: perimeterFadeOutY
NeptuneLabs - FSIViewer 56
angle range in whichthe hot spot shallbe faded in and
out
2 FSI ViewerJS
perimeterAngleFadeOutX
Description
Syntax float
Default 10
Context FSI Viewer JS
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.
Only applies ifa rotation around the x-axis isused.
perimeterZoom
Description
Syntax float
Default 1.0
Context FSI Viewer JS
An optional parameter specifying from which magnification level on a hot spot
should be displayed. E.g. 2.5 would hide the hot spot as long as the
magnification level is below 2.5. This parameters has no effect if zoom is
disabled by the global "enableZoom" parameter.
angle range in whichthe hot spot shallbe faded in and
out
specifies from which magnification level on a hot spot is
displayed
perimeterImageWidth
Description
Syntax float
Default 1.0
Context FSI Viewer JS
Similar to perimeterZoom. While perimeterZoom depends on the magnification
this parameter defines the absolute width of the (zoomed) spin instance to
57 NeptuneLabs - FSIViewer
defines the absolute width ofspin instance for displaying
hot spot
2 FSI ViewerJS
decide whether to show or hide a tooltip. It is recommend to set this parameter
as a default hot spot parameter when using relative instance sizes.
interactive
Description
Syntax boolean
Default false
Context FSI Viewer JS
The hot spot content area will not react on mouse over, click actions and alike
when setting "interactive" to false.
actionParameter
Description value willbe passed on to the hot spot callback function
Syntax string
Default ""
Context FSI Viewer JS
An optional parameter value that willbe passed on to the hot spot callback
function.
url
Description
Syntax string
Default ""
Context FSI Viewer JS
enables or disables reactions ofhot spot areas to
interactive actions
An optional URL to open if the user clicks the hot spot
label.
An optional URL to open if the user clicks the hot spot label.
You can use any URL you can use with the window.open command, like regular
URLs as wellas "javascript:" or "email:"URLs.
NeptuneLabs - FSIViewer 58
2 FSI ViewerJS
urlTarget
Description target frame or window to open the URL in
Syntax string
Default _self
Context FSI Viewer JS
The target frame or window to open the URL in.
Use e.g. "_blank" to open hyperlinks in a new window.
focusOnClick
Description zoom and/or rotate to hotspot position on click
Syntax boolean
Default true
Context FSI Viewer JS
Enables zooming and/or rotating to hotspot position on click.
rotateOnFocus
Description rotate to sceneSet and scene
Syntax boolean
Default true
Context FSI Viewer JS
Setting this parameter to true rotates to sceneSet and scene matching the
coordinates defined in hotspot.perimeterAngle, while false keeps the current
sceneSet and scene.
59 NeptuneLabs - FSIViewer
2 FSI ViewerJS
zoomOnFocus
Description zoom to hotspot
Syntax boolean
Default true
Context FSI Viewer JS
Setting this parameter to true zooms to thehotspot, while false keeps the
current zoom.
focusRadius
Description size of section when zooming to a hotspot
Syntax float
Default 0.25
Context FSI Viewer JS
Defines the size ofthe sectionwhen zooming to a hotspot (0...1).
.
focusAngleX, focusAngleY
Description defines scene with given focus angle (optional)
Syntax float
Default -
Context FSI Viewer JS
If set, the target scene or sceneSet willnot be determined bythe
perimeterAngle parameter, but with the given focusAngle.
.
NeptuneLabs - FSIViewer 60
2 FSI ViewerJS
normalClass
Description
Syntax string
Default "FSI360HotSpot_Normal"
Context FSI Viewer JS
A CSS class name to use for the content <div> tag in normal state.
activeClass
Description
Syntax string
Default "FSI360HotSpot_Active"
Context FSI Viewer JS
A CSS class name to use for the content <div> tag in onclickstate.
hoverClass
Description
Syntax string
Default "FSI360HotSpot_Active"
Context FSI Viewer JS
CSS class name to use for content <div> tag in normal
state
CSS class name to use for content <div> tag in mouse
onclickstate
CSS class name to use for content <div> tag in mouse
over state
A CSS class name to use for the content <div> tag in mouse over state.
Example CSS classes:
It is recommended to add the following CSS classes to the HTML document
containing FSI Viewer JS instances with hot spots. These classes will be used if
you do not define "normalClass", "hoverClass" and "activeClass" parameters for
your hot spots. The _Mobile und _SmallMobile classes will be added to the hot
spot class names on mobile device or small mobile devices (phones). You can
61 NeptuneLabs - FSIViewer
2 FSI ViewerJS
use them to adjust the font size to increase the readability of text within the hot
spots.
Example CSS classes
<style type="text/css">
div.FSI360HotSpot_Normal{
}
div.FSI360HotSpot_Active{
}
div.FSI360HotSpot_Mobile{
}
div.FSI360HotSpot_SmallMobile{
}
</style>
cssClass
border:2px solid rgba(255, 255, 0, 0.8);
font-family:Arial,Helvetica,sans-serife;
color:#000;
font-size:13px;
background: rgba(255, 255, 200, 0.8);
padding:3px;
border-radius: 3px;
cursor:pointer;
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
white-space:nowrap;
background: #FFF;
font-size:13px;
font-size:32px;
Description
Syntax string
Default ""
Context FSI Viewer JS
An additional CSSclass name to add to the hot spot's content <div> tag.
NeptuneLabs - FSIViewer 62
CSS class name to add to the hot spot's content <div>
tag
2 FSI ViewerJS
cssStyle
Description
Syntax string
Default ""
Context FSI Viewer JS
A additional CSSstyle value to add to the hot spot's content <div> tag.
CSS style value to add to the hot spot's content <div>
tag
2.5.5 <video> Section
The video section is optional and only required if you want to enable ultra
smooth rotations by providing a video of the spin.
source
Description
Syntax string
Default ""
Context FSI Viewer JS
The value may be an absolute URL. Otherwise it will be relative to the [viewer]
/applications/spin360/videos/ folder.
NOTE: Just provide the file name WITHOUT the file extension.
CSS style value to add to the hot spot's content <div>
tag
Please refer to "Creating Videos" below for more information on spinvideos.
63 NeptuneLabs - FSIViewer
2 FSI ViewerJS
sceneSet
Description defines inwhich Scene Set the video is used
Syntax string
Default ""
Context FSI Viewer JS
If Scene Sets are used, this parameter defines in which Scene Set the video will
be used for smooth rotation.
base
Description optional prefixfor all"source" parameters
Syntax string
Default ""
Context FSI Viewer JS
An optional prefixfor all"source" parameters.
spinDirection
Description defines the spin direction ofthe video
Syntax String "left" or "right"
Default "left"
Context FSI Viewer JS
Defines the spin direction of the video.
You might want to change the spinDirection option if the object spins into the
wrong direction when dragging the mouse left or right.
NeptuneLabs - FSIViewer 64
2 FSI ViewerJS
captureFrames
Description number of frames to capture from the video
Syntax integer
Default 120
Context FSI Viewer JS
The number of frames to capture from the video.
The more frames you define the smoother the rotation will appear.
More frames require more time to capture the videos on startup.
120 frames (default) means 3° per frame.
captureOffsetStart
Description
Syntax float (inseconds)
Default 0
Context FSI Viewer JS
An optional offset at the start of the video to use when capturing the video
frames. You might want to define an offset if the video does not start exactly at
the position of the first image (0°).
captureOffsetEnd
Description
Syntax float (inseconds)
Default 0
Context FSI Viewer JS
An optional offset at the end of the video to use when capturing the video
frames. You might want to define an offset if the video does not start exactly at
the position of the first image (0°).
offset at start of video to use when capturing the video
frames
offset at end of video to use when capturing the video
frames
65 NeptuneLabs - FSIViewer
widthCorrectionFactor
2 FSI ViewerJS
Description
Syntax float
Default 1.0
Context FSI Viewer JS
An optional factor to adjust the width of the video to the width ofthe images on
screen. You might want to adjust the value if the image do not match the video
dimension.
heightCorrectionFactor
Description
Syntax float
Default 1.0
Context FSI Viewer JS
An optional factor to adjust the height of the video to the height of the images
on screen. You might want to adjust the value if the image do not match the
video dimension.
adjusts width of the video to width of the images on
screen
adjusts height of the video to height of the images on
screen
xCorrectionFactor
Description
Syntax float
Default 0.0
Context FSI Viewer JS
An optional factor to adjust the horizontal position ofthe video to the horizontal
position of the images on screen. You might want to adjust the value if the
image do not match the video position.
NeptuneLabs - FSIViewer 66
adjusts horizontal position of video to horizontal position
of images
2 FSI ViewerJS
yCorrectionFactor
Description
Syntax float
Default 0.0
Context FSI Viewer JS
An optional factor to adjust the vertical position of the video to the vertical
position of the images on screen. You might want to adjust the value if the
image do not match the video position.
frameOffset
Description determines a frame offset ifrequired
Syntax integer
Default 0
Context FSI Viewer JS
Determines a frame offset at the start if required.
adjusts vertical position ofvideo to vertical position of
images
2.5.6 Plugin Parameters
plugins
Description adds a Plug-in (e.g. Fullscreen) to the viewer
Syntax String
Default ""
Context FSIViewer JS
Adds a plug-in to the viewer.
Please note:
If you would like to add specific parameters to the plugins via the fsi-viewer
tag, you can do this by prefixing the parameter name with the name of the
plug-in, e.g. autospin_enabled="true"
67 NeptuneLabs - FSIViewer
2 FSI ViewerJS
FullScreen Plug-In
Adding the parameter plugins:"FullScreen, Resize"enables a fullscreen view
option in FSIViewer JS. The Resize parameter needs to be set in order to ensure proper
adjusting to the full screen.
NOTE:If the FSIViewer JS is embedded in an iFrame, the attribute
allowfullscreen="true" needs to be added to the iFrame. Otherwise the FullScreen Plugin will not work due to security restrictions of the browser.
AutoSpin Plug-In
available from version 16.09.30
Adding the parameter plugins:"AutoSpin"enables a button which lets you
play/pause the animation that is set with the autospinspeed parameter.
The following parameters can be set:
Speed
Description Time in seconds for a fullrotation
Syntax float
Default -
Context FSI Viewer JS
Has the same function as
of the plug-in. Time in seconds for a fullrotation. Negative values reverse spin direction.
preventClickZoomWhileSpinning
Description prevents zooming while Autospin is activated
Syntax Boolean
Default false
Context FSIViewer JS
Prevents zooming while clicking into the Autospin.
NeptuneLabs - FSIViewer 68
→ FSI Viewer JS Parameters
, but is used here in the context
2 FSI ViewerJS
Button
Description enables Play/Pause button
Syntax Boolean
Default true
Context FSIViewer JS
Enables the Play/ Pause button for the autospin animation
MouseModes Plug-In
The MouseMode plugin is activated by default with the _default.xml.
The following parameters can be set:
MenuOffset
Description Indentation ofthe menu buttons
Syntax Integer
Default 0
Context FSI Viewer JS
Specifies the space in pixels left of the menu button(s) of the plug-in.
Mode
n
Description Removes the button for mouse mode n from the menu bar
Syntax Boolean
Default -
Context FSI Viewer JS
Provides the possibility to hide specific mouse mode buttons.
69 NeptuneLabs - FSIViewer
Mode n Mouse Mode
360°
Mode0 Zoom
Mode1 Pan
2 FSI ViewerJS
Mode2
Mode3 Rotate 2D (Z Axis)
Sequence
Description Sequence of the buttons
Syntax String
Default 0,1,3,2
Context FSI Viewer JS
You can alter the sequence of the buttons by providing the modes separated by
commas (see the table above).
Example: "1,0,2,3" alters the sequence of the buttons to "Pan, Zoom, Rotate 3D,
Rotate 2D".
Rotate 3D (X/Y Axis)
2.6 Creating and using Spin Videos
When creating spin videos for ultra smooth rotations it is strongly
recommended to use a camera that can take photos and record videos so that
the position and technical specifications apply to both, the video and the
photos.
Make sure you do not modify the object or camera position between the video
and photo shooting session.
NeptuneLabs - FSIViewer 70
2 FSI ViewerJS
1) Take the photos from different viewing angles
2) Record a video of a full,continuous object spin starting at the angle you took
the first photo from until reaching the same angle again. You might want to
take a video of2 fullspins and cut the video later on.
3) Cut the video ifrequired making sure the video starts and ends at the viewing
angle you took the first photo at
4) Export the video in the following formats:
webm (for Chrome, Firefox, Safari, etc.)
mp4 (for MS IE)
5) Copy the video files to either a static source connector on FSI Server or to
the [viewer]/applications/spin360/videos/ folder using the same file names just
with the file extension matching the video format
6) Add the <video> section to your configuration file and add the "source"
parameter (just the file name WITHOUT the file extension).
2.7 Embedding the viewer at runtime via JavaScript
It is also possible to embed the viewer at runtime via JavaScript.
I) Passing parameters via node attribute:
Example:
var node = document.createElement("fsi-viewer");
node.setAttribute("width", "400");
node.setAttribute("height", "600");
node.setAttribute("src", "images/Rocker Shoe.tif");
node.setAttribute("debug", "true");
document.body.appendChild(node);
$FSI.initCustomNode(node);
// Important: call this AFTER adding the node to the DOM
I) Passing parameters via JavaScript object:
NOTE: In this case any parameters passed via node attribute willbe ignored.
71 NeptuneLabs - FSIViewer
2 FSI ViewerJS
Example:
var node = document.createElement("fsi-viewer");
node.style.width = "600px";
node.style.height = "400px";
var parameters =
{"imagesrc" : "images/Rocker Shoe.tif", "skin":"silver",
"debug":true};
$FSI.setParameters(node, parameters);
document.body.appendChild(node);
// Important: call this AFTER adding the node to the DOM
$FSI.initCustomNode(node);
Note:
$FSI.initCustomNode(node)initializes the given node.
When adding multiple viewers you can initialize all new FSI Viewer JS nodes in one
go, using this command:
$FSI.initCustomTag("fsi-viewer");
or, when using different custom tags (fsi-viewer, fsi-imageflow,…):
$FSI.initCustomTags();to initialize all new FSI custom tags.
Destroying Instances
Before finally removing <fsi-viewer> nodes from the DOM, you need to call the
destroy() method of the node.
This will release allevent handlers and free allocated resources.
Example:
var node = document.getElementById("myViewer");
node.destroy();
node.parentNode.removeChild(node);
NeptuneLabs - FSIViewer 72
2 FSI ViewerJS
2.8 JavaScript Interface
The JavaScript interface of FSI Viewer JS can be useful if you want to change the
current image or config or add additional content depending on the object spin
position or hot spot actions.
2.8.1 Public Methods
void changeConfig(strCfgFileName, oParameters);
Reset the viewer object and change the configuration to the
given configuration file.
strCfgFileName (optional): path to the configuration file
(see "cfg" parameter)
oParameters (optional): an object containing parameters If
present, these parameters willoverwrite the parameters
defined upon initialization.
Example:
var oParameters = {};
oParameters src = "images/bluemarble.tif";
/*
// optional:
oParameters.imageWidth;
oParameters.imageHeight;
oParameters.cropRect;
oParameters.cropValues;
oParameters.effects;
*/
fsiviewer.changeConfig(oParameters);
bSuccess changeImage(cfg, strView);
Resets the viewer object and changes the image displayed
to the given image file.
73 NeptuneLabs - FSIViewer
void start();
Starts the viewer.
void printAPI();
Shows all API methods in the console in alphabetical order.
void init(elementID, oParameters, bDebug);
Initialises the chosen viewer element.
bInitDone getInitDone();
Returns ifthe initialization process is done.
void spinToDegree(fDegree);
Spins to the position indicated by degree. Note that you can
only spin to a position that has a corresponding HD image,
not to a position that shows a video only.
fDegree: the desired position in degree (0 .. 360)
2 FSI ViewerJS
void spinToTarget(nTargetFrame, nStopSceneSet,
nFrames);
Spins to the position indicated by the target parameters.
Note that you can onlyspin to a position that has a
corresponding HD image, not to a position that shows a
video only.
nMousemode getMouseMode();
Returns the current active mouse mode.
NeptuneLabs - FSIViewer 74
2 FSI ViewerJS
void setMouseMode(nMode);
Sets the active mouse mode.
nInstanceID getInstanceID();
Returns the number of the viewer object.
void destroy();
Destroys the given FSI Viewer JS object. You should destroy
the instance before you remove the object spins <div> tag
from the DOM tree.
strVersion getVersion();
Returns a string containing the FSI Viewer JS software
version.
strVersion getBuild();
Returns a string containing the FSI Viewer JS software build
number.
nHeight getMenuHeight(strPurpose);
Returns a string containing the height of the menu bar.
bSuccess addListener(strListenerName, fn, iScope);
Calls a specific listener..
bSuccess removeListener(strListenerName, fn);
Removes a specificlistener..
75 NeptuneLabs - FSIViewer
void showAboutWindow();
Shows the "About" window.
void showMenuButton(strButtonID, bShow);
Shows a specific menu button.
void updateSize();
Updates the size of a fsi-viewer element.
void resetView();
Reset the viewer to the initial magnification and rotation.
fZoomInPercent getZoom();
Returns the current magnification level..
2 FSI ViewerJS
void setZoom(fPercent, bPreliminary, bAnimate);
Set magnification to the amount indicated by fPercent
[0...100], where fPercent = 0 means normal scale and
fPercent = 100 for maximum magnification.
bPreliminary:Set to true if the magnification levelis
temporary only.In this case no additional image data willbe
loaded. bAnimate: Set to true to animate from the current
to the given magnification level.
NeptuneLabs - FSIViewer 76
2 FSI ViewerJS
strViewString getViewString();
Returns the string representing the current image section
and rotation. The format is: SceneSet, Scene, left, top, right,
bottom
SceneSet
Scene
describes the rotation. Ifyou use 36 images for a spin,
scene 18 means a rotation of 180 degree.
left, top, right, bottom
to 1.0].
bSuccess gotoViewString(strViewString, bAnimated);
Displaythe image section and rotation as specified by
"strViewString".
Please refer to the description ofthe "getViewString"
method for a format description.
The boolean "bAnimated" can be used to specify,wether the
view should be displayed immediatelyor in form of an
animated movement from the current view to the specified
view.
strViewString getHotspotViewString(nHotspotID)
is 1 for rotations around one axis
: image coordinates in the range [0.0
returns the view string for the given hotspot.
FSIHotspotID is the consecutive number of the Hotspot
(1,2,3,..)
bSuccess gotoHotspot(FSIHotspotID, bAnimate)
displays the image section as specified bythe Hotspot.
FSIHotspotID is the consecutive number of the Hotspot
(1,2,3,..)
The boolean "bAnimated" can be used to specify,wether the
view should be displayed immediatelyor in form of an
animated movement from the current view to the specified
view.
77 NeptuneLabs - FSIViewer
bPresent getMenuButtonPresent(strButtonID)
Shows active menu buttons, can be used to remove inactive
buttons from the menu ifyou are using a custom skin.
NOTE: Method only delivers correct results after the callback
"onInitMenu" is called.
void pressMenuButton(strButtonID)
Sets the menu button to active.
void clickMenuButton(strButtonID)
Sets the menu button to active.
void releaseMenuButton(strButtonID)
Disables the active menu button.
2 FSI ViewerJS
void registerExternalMenuButton(elButton, strButtonID,
strTip)
Registers an external menu button.
void unregisterExternalMenuButton(elButton)
Unregisters an external menu button.
void registerExternalMenuButtonsFromContainer
(elContainer)
Registers an external menu button from a specificcontainer.
NeptuneLabs - FSIViewer 78
2 FSI ViewerJS
void unregisterExternalMenuButtonsFromContainer
(elContainer)
Unregisters an external menu button from a specific
container.
strClassName getSkinClassName()
Returns the name of the current used skin class, e.g. fsi-skinblack
bFullscreen getInFullScreenMode()
Enables the FullScreen mode.
bSuccess setFullScreenElement(elFullScreenContainer)
Defines the FullScreen element.
nFrames getSpinFrames()
Returns the amount of spinframes.
bTransparent getImageIsTransparent()
Returns the info if the image is transparent.
oDimension getSrcDim()
Returns the dimensions of the source image.
79 NeptuneLabs - FSIViewer
void showMenuToolTip(strTip, elSrc, x, y)
Shows custom tooltips..
strTip: HTMLcode of thetooltip or ID in language.xml files
elSrc: the DOM element wich is used to align the tooltip,
usually event.target
x,y: (optional) offset for tooltip position
void hideMenuToolTip()
Shows custom tooltips..
strTip: HTMLcode of thetooltip or ID in language.xml files
elSrc: the DOM element wich is used to align the tooltip,
usually event.target
x,y: (optional) offset for tooltip position
oParameters getParameters();
Returns an object containingall parameters set via
javascript or custom tag attributes.
2 FSI ViewerJS
mixed getConfigValue(strName);
Returns the value of the configuration parameter
"strName".
bResult makeBoolean(value, bDefaultValue);
Transforms a value into a boolean value, e.g.
"1" to true, "false" to false
bDefaultValue
mixed getPluginParameter(strPluginName,
strParameterName, defaultValue, bMakeBoolean);
Returns the parameter defined for the given plugin.
defaultValue
example: iViewer.getPluginParameter("pages", "dir");
NeptuneLabs - FSIViewer 80
is optional and false if not defined.
and
bMakeBoolean
are optional.
2 FSI ViewerJS
2.8.2 Callbacks
You can define callback functions byassigning methods to the FSI Viewer JS
instance.
Using Callbacks
Method A – Create a function in window scope
Example:
<script>
function onFSIViewerViewChanged(strView){
console.log(strView);
}
<script>
a) assignment in Custom Tag:
Example:
<fsi-viewer onViewChanged=”onFSIViewerViewChanged” […]/>
or
b) assignment in XML configuration file:
Example:
<fsi_parameter>
<onViewChanged value=”onFSIViewerViewChanged”/>
[…]
</fsi_parameter>
Method B - Assignment by parameter
81 NeptuneLabs - FSIViewer
2 FSI ViewerJS
Example:
oParameters= {};
oParameters.onViewChanged = function(strView){
console.log(strView);
}
var myViewer = new $FSI.Viewer(elContainer, oParameters);
myViewer.start();
// all callback assignments must take place before starting
Method C - Assignment by instance property
Example:
var myViewer = new $FSI.Viewer(elContainer, oParameters);
myViewer.onViewChanged = function(strView){
console.log(strView);
}
myViewer.start();
// all callback assignments must take place before starting
Please note: You can modifyor add new callbacks when calling
changeConfig().You cannot change, add or remove callbacks after
the viewer started.
The following callback methods exist:
onReady();
Called as soon as FSI Viewer finished loading data and gets
interactive.
onDestroy();
Called when the fsi-viewer element is destroyed.
NeptuneLabs - FSIViewer 82
2 FSI ViewerJS
onMenuEnabled(bEnabled);
Called if the menu is enabled/disabled.
onMenuReady();
Called as soon as the menu is ready.
onMenuDestroy();
Called if the menu is destroyed.
onZoomChanged(fScale, fScaleMax);
This optional callback function willbe called each time the
magnification level changes.
fScale
is the magification levelfrom o to 100.
fScaleMax
sets the maximum zoom level.
onAnimationComplete();
Called when a spin and/or zoom animation finishes.
onAnimationStart();
Called when a spin and/or zoom animation starts.
onChangeConfig(strCfgFileName, oParameters);
Called when the config file is changed.
onChangeImage(oParameters, strView);
Called when the image is changed.
83 NeptuneLabs - FSIViewer
2 FSI ViewerJS
onResize(nWidth, nHeight, bResizeDone,
BFullScreen);
Called when the fsi-viewer element is resized.
onSkinChanged(strCurrentSkinClass,
strCurrentSkinClassBefore)
This optional callback function can be used to call an action
as soon as the skin class is changed.
onRegisterExternalMenuButtons()
This optional callback function can be used to call an action
as soonexternal menu buttons are registered.
onAfterRegisterExternalButton(elButton,
strButtonID, bButtonPresentInViewer)
This optional callback function can be used to remove
inactive buttons from the menu bar ifyou are using a custom
skin.
onProgress(fPercent);
This optional callback function can be called while the loading
progress.
onMenuButtonEnabled(strButtonID, null, bEnable);
This optional callback function can be used call an action
when a button is enabled or disabled.
onMenuButtonPressed(strButtonID, evt);
This optional callback function can be used to set an action
that starts when a button is pressed.
NeptuneLabs - FSIViewer 84
2 FSI ViewerJS
onMenuButtonReleased(strButtonID, evt);
This optional callback function can be used to set an action
when a certain button is released..
onMenuButtonClicked(strButtonID, evt);
This optional callback function can be used to set an action
when a certain button is released..
onMenuButtonSetPressed(bPressed);
This optional callback function can be used to call an action
when a button is pressed.
onReset();
This optional callback function can be used to call an action
when the configuration is changed.
onInitMenu();
This optional callback function can be used to set an action
when the menu is built (after allbuttons are added).
onMouseModeChanged(nMouseMode);
This optional callback function can be used to call an action
when the mouse mode is changed.
onStartDragging(bInNavWindow);
This optional callback function can be used to call an action
when the user starts dragging the image.
85 NeptuneLabs - FSIViewer
2 FSI ViewerJS
onStopDragging(bInNavWindow);
This optional callback function can be used to call an action
when the user stops dragging the image.
onDataComplete();
This optional callback function can be used to call an action
while the configuration data loading is completed.
Images/videos are not loaded yet at this point.
onFullScreen(bFullScreenActive);
This optional callback function can be used to call an action
whenFullScreen mode is enabled or disabled.
onViewChanged(strViewString);
This optional callback function can be used to call an action
as soon as the viewed image section changes.
onHotspotEvent(strAction, nHotspotID,
strHotspotAttributeID, strContent)
This optional callback function can be used to call an action
as soon as a certain Hotspot event occurs. The following
events are possible: mouseover, mousedown, mouseout &
click.
NeptuneLabs - FSIViewer 86
3 FSI TouchZoom
3 FSI TouchZoom
FSI TouchZoom is an HTML5 and Javascript based tool adding image zoom to touch
enabled devices like Apple iPad ™. When pinch zooming into a website containing single
source images provided by FSI Server, the images will be displayed in the resolution
matching the current magnification.
Supported devices
l iOS 4 or higher
l Android 4.xbased devices
l Windows 8 with touch enabled browsers
l Mac OS with touch device
Usage
To use FSI TouchZoom, make sure the respective images on your website come from
FSI Server and add the following script to the <head> section of your website:
Exanple:
<head>
[…]
<script src="viewer/applications/touchzoom/js/fsitouchzoom.js"
type="text/javascript">
</script>
</head>
It is possible to pass optional parameters via JavaScript. In this case it is crucial to
embed the TouchZoom script before defining the parameters:
Exanple:
<script type="text/javascript
src="/viewer/applications/touchzoom/js/fsitouchzoom.js"></script>
<script type="text/javascript>
$FSI.touchZoomParameters =
{debug:true, useDevicePixelRatio:false};
</script>
NeptuneLabs - FSIViewer 88
3 FSI TouchZoom
Alternativelyit is possible to use an external JavaScript for defining the parameters. This
is useful if the parameters are valid for multipleHTML documents.
In case the script is automatically initialised (default), the automaticallycreated
instance can be adressed via
§FSI.touchZoom
3.1 Initializing FSI TouchZoom manually
Initializing or adding images manually
If you are adding images by script, you can decide to:
I) let FSI.TouchZoom initialize automatically and add image manually:
Exanple:
<script type="text/javascript
src="/viewer/applications/touchzoom/js/fsitouchzoom.js"></script>
<script type="text/javascript>
addMyImagesToTheDom(); // add your images here
// make FSI.TouchZoom look for new images
$FSI.touchZoom.scanForNewImages();
</script>
II) initialize FSI.TouchZoom manually after adding your images:
89 NeptuneLabs - FSIViewer
3 FSI TouchZoom
Exanple:
<script type="text/javascript
src="/viewer/applications/touchzoom/js/fsitouchzoom.js"></script>
<script type="text/javascript>
// prevent $FSI.TouchZoom from initializing automatically
// on document load
$FSI.touchZoomParameters = {autoInit:false};
function onBodyLoaded()
{
addMyImagesToTheDom(); // add your images here
// create and initialize FSI.TouchZoom
var parameters = {debug:true, useDevicePixelRatio:true};
myTouchZoom = new $FSI.TouchZoom();
myTouchZoom.init(parameters);
}
</script>
3.2 FSI TouchZoom Parameters
You can optionally modifythe way FSI TouchZoom works by passing parameters to
the script. To do so, pass an object containing the parameters and value as an
object to the constructor:
Example:
<script type="text/javascript">
FSITouchZoom = new $FSI.TouchZoom({debug:true,
zoomPrecision:6});
FSITouchZoom.init();
</script>
NeptuneLabs - FSIViewer 90
3 FSI TouchZoom
debug
Description
Syntax Boolean
Default false
Context FSI TouchZoom
Displaydebug and status information inthe browser's javascript console.
useDevicePixelRatio
Description Use the device's pixelratio to displayeven sharper images.
Syntax Boolean
Default true
Context FSI TouchZoom
Use the device's pixel ratio to display even sharper images. For devices with a pixel
ratio >1 (e.g. Apple iPad 3) the images willbe displayed in higher resolutions. If the
aspect ratio is 2, the images loaded when pinching a page willbe 2 x the resolution
compared to devices with a pixelaspect ratio of 1.
monitorPositions
Description
Syntax Boolean
Default true
Context FSI TouchZoom
displays debug &status information in the javascript
console.
The script monitors the position of allsingle source <img>
tags
By default the script monitors the position of allsingle source <img> tags to ensure
that a higher resolution image will be loaded if the image is within the viewport. For
huge amounts of images on a single web page you might want to disable this
feature, if the positions of the images do not change (e.g. there is no javascript
modifying the DOM tree).
91 NeptuneLabs - FSIViewer
3 FSI TouchZoom
useTiledImages
Description Zoomed images willbe tiled into multiple image tiles
Syntax Boolean
Default true
Context FSI TouchZoom
By default, zoomed images of 1000 pixel in width or height will be tiled into multiple
image tiles. While this increases the user experience and the loading performance,
you might want to disable this feature ifyou e.g. change the style of an image (e.g.
style.display) at runtime. In this case the change would not effect the tiled image.
zoomPrecision
Description
Syntax Integer
Default 4
Context FSI TouchZoom
This parameter defines the precision of loading zoomed images.
Using the value "0" will load images exactly matching the current magnification. This
does on the other hand prevent effective caching.
Values greater than 0 increase the precision how often the script loads new images
when changing the magnification. The value 4 means that the script loads new
images at 1.0, 1.25, 1.5, 1.75, 2.0 etc. magnification levels.
loadingImage
Description
Syntax Boolean or URL
Default true
Context FSI TouchZoom
Specifies whether or which image to display at the bottom right of the viewport
while new images are being retrieved from FSI Server. You can use true or false to
enable/disable the loading image display or provide an URL to a custom image.
This parameter defines the precision of loading zoomed
images.
Specifies whichimage to display at the bottom right ofthe
viewport
NeptuneLabs - FSIViewer 92
3 FSI TouchZoom
enableByCSSClass
Description provides a comma separated list of CSS class names
Syntax String
Default ""
Context FSI TouchZoom
Using the enableByCSSClass parameter you can provide a comma separated list of
CSS class names. Only images containing at least one of the given class names will
be modified by this script. All other images normal images that do not increase the
resolution dynamically.
You can combine this parameter with the disableByCSSClass parameter.
disableByCSSClass
Description provides a comma separated list of CSS class names
Syntax String
Default ""
Context FSI TouchZoom
Using the disableByCSSClass parameter you can provide a comma separated list of
CSS class names. Images containing at least one of the given class names willNOT
be modified by this script. All other images containing single source image URLs will
be modified.
You can combine this parameter with the enableByCSSClass parameter.
3.3 Initializing FSI TouchZoom manually
Initializing or adding images manually
If you are adding images by script, you can decide to:
I) let FSI.TouchZoom initialize automatically and add image manually:
93 NeptuneLabs - FSIViewer
3 FSI TouchZoom
Exanple:
<script type="text/javascript
src="/viewer/applications/touchzoom/js/fsitouchzoom.js"></script>
<script type="text/javascript>
addMyImagesToTheDom(); // add your images here
// make FSI.TouchZoom look for new images
$FSI.touchZoom.scanForNewImages();
</script>
II) initialize FSI.TouchZoom manually after adding your images:
Exanple:
<script type="text/javascript
src="/viewer/applications/touchzoom/js/fsitouchzoom.js"></script>
<script type="text/javascript>
// prevent $FSI.TouchZoom from initializing automatically
// on document load
$FSI.touchZoomParameters = {autoInit:false};
function onBodyLoaded()
{
addMyImagesToTheDom(); // add your images here
// create and initialize FSI.TouchZoom
var parameters = {debug:true, useDevicePixelRatio:true};
myTouchZoom = new $FSI.TouchZoom();
myTouchZoom.init(parameters);
}
</script>
NeptuneLabs - FSIViewer 94
3 FSI TouchZoom
3.4 JavaScript Interface
Usually you willnot need to use the javascript interface.
Even if you modify an images src parameter at runtime, the tool will notice that and
replace the magnified image accordingly.
If you on the other hand add images to the DOM tree at runtime or modify the
position of images by script, the following interface is available to update the images
and positions:
FSITouchZoom = new $FSI.TouchZoom();
FSITouchZoom.init();
I) Public Methods
void scanForNewImages();
Calling the scanForNewImages method willmake the script
look for single source images that have not been present in
the DOM tree when the document finished loading. Ifyou
e.g. add <img> tags at runtime, you need to call this method
in order to make the script aware of new image(s).
void addImage(elImg, strSrc);
This adds a single <img> node to the list of dynamictouch
zoom images. elImg: the <img> node object
strsSc (optional): the image URL (img.src ifundefined)
Note: you can as well callscanForNewImages()after
adding an <img> node.
void removeImages(arImageDOMElements, bSilent);
Removes one or more touch zoom images and restores their
original state.
arImageDOMElements:an <img> node object or an array
of <img> node objects
95 NeptuneLabs - FSIViewer
void updateImagePositions();
This makes the tool update allimage positions and refresh
images ifneeded. You might want to call this after modifying
the DOM tree by script.
void printAPI();
Shows all API methods in the console in alphabetical order.
void setZoomPrecision(fPrecision);
Use this method to modify the parameter zoomPrecision at
runtime.
void destroy();
Destroys FSITouchZoom.
3 FSI TouchZoom
void init();
Initializes FSITouchZoom.
strVersion getVersion();
Returns a string containing the FSI ImageFlow software version.
strVersion getBuild();
Returns a string containing theFSI ImageFlow software build
number.
void enable(bEnable);
Enables FSITouchZoom.
NeptuneLabs - FSIViewer 96
3 FSI TouchZoom
void lockImage(elImage, bLock);
Locks a certain image .
void lockImageSourceImage(elImage, bLock);
Locks a certain image to it's source dimensions.
void lockUpdates(bLock);
Locks updates .
void resetImage(elImg);
Resets a certain image.
void triggerRefresh();
Triggers a refresh.
97 NeptuneLabs - FSIViewer
4 FSI QuickZoom
4 FSI QuickZoom
FSI QuickZoom is an HTML5 and Javascript based tool adding image zoom to desktop
and laptop computers on mouseover. When hovering over a single source image
provided by FSI Server, the part of the image the cursor is currently pointing at will be
displayed enlarged in a zoom window next to the originalimage.
Supported devices
l Desktop or laptop computers & allmajor browsers
Usage
To use FSI QuickZoom, make sure the respective images on your website come from
FSI Server and add the following script to the <head> section of your website:
Exanple:
<head>
[…]
<script src="viewer/applications/quickzoom/js/fsiquickzoom.js"
type="text/javascript">
</script>
</head>
It is possible to pass optional parameters via JavaScript. In this case it is crucial to
embed the QucikZoom script before defining the parameters:
Exanple:
<script type="text/javascript
src="/viewer/applications/quickzoom/js/fsiquickzoom.js"></script>
<script type="text/javascript>
$FSI.quickZoomParameters =
{debug:true, useDevicePixelRatio:false};
</script>
Alternativelyit is possible to use an external JavaScript for defining the parameters. This
is useful if the parameters are valid for multipleHTML documents.
NeptuneLabs - FSIViewer 98
4 FSI QuickZoom
In case the script is automatically initialised (default), the automaticallycreated
instance can be adressed via
§FSI.quickZoom
4.1 How it works
FSI QuickZoom searches for all<img> tags in the HTML document containing FSI
Server single source image URLs and adds event handlers to them.
When moving the mouse cursor over these images a magnified image willbe displayed
next to the original image. The user can
move the cursor across the original image to display any image section of interest.
4.2 FSI QuickZoom Parameters
You can optionallymodify the way FSI QuickZoom works by passing parameters to
the script. To do so, pass an object containing the parameters and value as an
object to the constructor:
Example:
<script type="text/javascript">
FSIQuickZoom = new $FSI.QuickZoom({debug:true,
magnification:6});
FSIQuickZoom.init();
</script>
debug
Description
Syntax Boolean
Default false
Context FSI QuickZoom
Displaydebug and status information inthe browser's javascript console.
99 NeptuneLabs - FSIViewer
displays debug &status information in the javascript
console.
4 FSI QuickZoom
useDevicePixelRatio
Description Use the device's pixelratio to displayeven sharper images.
Syntax Boolean
Default true
Context FSI QuickZoom
Use the device's pixel ratio to display even sharper images. For devices with a pixel
ratio >1 (e.g. Apple iPad 3) the images willbe displayed in higher resolutions. If the
aspect ratio is 2, the images loaded when pinching a page willbe 2 x the resolution
compared to devices with a pixelaspect ratio of 1.
headers
Description
Syntax String
Default "cors"
Context FSI QuickZoom
The "&headers=" parameter to use for image requests.
enableByCSSClass
Description provides a comma separated list of CSS class names
Syntax String
Default ""
Context FSI QuickZoom
Using the enableByCSSClass parameter you can provide a comma separated list of
CSS class names. Only images containing at least one of the given class names will
be modified by this script. All other images are displayed as normal images that do
not use FSIQuickZoom.
You can combine this parameter with the disableByCSSClass parameter.
display debug and status information in the JavaScript
console
NeptuneLabs - FSIViewer 100
Loading...