Skip to main content

Callbacks

You can define callback functions to react on events fired by assigning methods to the FSI Viewer instance.

Refer to the appropriate chapter to learn how to implement callbacks.

The following callback methods exist:

on3DWorldChanged​

on3DWorldChanged(data)
Called each time the 3D world parameters like rotation or dimension change. `data.projection` provides access to the three.js objects (camera, scene, renderer and objects). `data.scenes` contains information about the FSI Viewer scenes and scene sets.
data
object
3D Data as object
instance.addListener('on3DWorldChanged', (data) => {
  // 3D World changes
  myFunc(data)
})
Example

onAfterReady​

onAfterReady()
Calls an action after the instance is ready.
instance.addListener('onAfterReady', () => {
  // after instance is ready
  doReallyGoodThings()
})
Example

onAfterRegisterExternalButton​

onAfterRegisterExternalButton(button, buttonID, buttonPresent)
Removes inactive buttons from the menu bar if you are using a custom skin.
button
element
Button element
buttonID
string
Button ID
buttonPresent
boolean
If button is present in the viewer
instance.addListener('onAfterRegisterExternalButton', (button, buttonID, buttonPresent) => {
  // external button registered
  myFunc(button, buttonID, buttonPresent)
})
Example

onAnimationComplete​

onAnimationComplete()
Called when a spin and/or zoom animation finishes.
instance.addListener('onAnimationComplete', () => {
  // animation complete
  doReallyGoodThings()
})
Example

onAnimationStart​

onAnimationStart()
Called when a spin and/or zoom animation starts.
instance.addListener('onAnimationStart', () => {
  // animation starts
  doReallyGoodThings()
})
Example

onChangeConfig​

onChangeConfig(cfgFile, parameters)
Called as soon as the config is changed.
cfgFile
string
Name of the config file
parameters
object
Configuration parameters as object
instance.addListener('onChangeConfig', (cfgFile, parameters) => {
  // config changed
  myFunc(cfgFile, parameters)
})
Example

onChangeImage​

onChangeImage(parameters, view)
Calls an action as soon as the viewed image changes.
parameters
object
Parameters as object
view
string
Specific image section defined as view string
instance.addListener('onChangeImage', (parameters, view) => {
  // image changed
  myFunc(parameters, view)
})
Example

onClickDemoMode​

onClickDemoMode(url, targetFrame)
This optional callback function can be used to call an action as soon as the demo mode instance is clicked on. (You need to return `false` in order to prevent default action!)
config
object
Configuration parameters as object
instance.addListener('onClickDemoMode', (url, targetFrame) => {
  // click on demo mode instance
  myFunc(url, targetFrame)
})
Example

onConfigsReady​

onConfigsReady(config)
Called as soon as the configuration is loaded.
config
object
Configuration parameters as object
instance.addListener('onConfigReady', (config) => {
  // config loaded
  myFunc(config)
})
Example

onDataComplete​

onDataComplete()
Calls an action while the configuration data loading is completed. Images/videos are not loaded yet at this point.
instance.addListener('onDataComplete', () => {
  // data complete
  doReallyGoodThings()
})
Example

onDestroy​

onDestroy()
Called as soon as the viewer is destroyed.
instance.addListener('onDestroy', () => {
  // instance is destroyed
  doReallyGoodThings()
})
Example

onEnterDemoMode​

onEnterDemoMode()
Call an action as soon as the demo mode is entered.
instance.addListener('onEnterDemoMode', () => {
  // demo mode is entered
  doReallyGoodThings()
})
Example

onExitDemoMode​

onExitDemoMode()
Call an action as soon as the demo mode is left.
instance.addListener('onExitDemoMode', () => {
  // leave demo mode
  doReallyGoodThings()
})
Example

onFullScreen​

onFullScreen(set)
This optional callback function can be used to call an action when `FullScreen` mode is enabled or disabled.
set
boolean
`true` = FullScreen mode enabled
instance.addListener('onFullScreen', (set) => {
  // FullScreen enabled/disabled
  myFunc(set)
})
Example

onHotspotEvent​

onHotspotEvent(action, hotspotID, hotspotAttribute, content, event)
Calls an action as soon as a certain Hotspot event occurs.
action
string
Action occurring, e.g. `mouseover` or `click`
hotspotID
integer
Number of the Hotspot ID
hotspotAttribute
string
Hotspot attribute ID
content
string
Content of the Hotspot
event
event
Event triggered, the following events are possible: `mouseover`, `mouseup`, `mousedown`, `mouseout` & `click`.
instance.addListener('onHotspotEvent', (action, hotspotID, hotspotAttribute, content, event) => {
  // HotSpot event triggered
  myFunc(action, hotspotID, hotspotAttribute, content, event)
})
Example

onInit​

onInit(parameters)
Called as soon as the viewer is initialized.
parameters
object
Parameters as object
instance.addListener('onInit', (parameters) => {
  // config loaded
  myFunc(parameters)
})
Example

onInit3D​

onInit3D(projection)
Called as soon as the viewer is initialized.
projection
object
Projection as object
instance.addListener('onInit3D', (projection) => {
  // 3D world loaded
  myFunc(projection)
})
Example

onInitFailed​

onInitFailed(reason)
Called when the initialization is failed. This could happen if e.g. an image cannot be loaded or the dimensions of an image cannot be requested. The listener returns a string with the reason why the initialization failed.
reason
string
Reason for fail
instance.addListener('onInitFailed', (reason) => {
  // init fails
  myFunc(reason)
})
Example

onInitMenu​

onInitMenu()
Calls an action when the menu is built (after all buttons are added).
instance.addListener('onInitMenu', () => {
  // menu is ready
  doReallyGoodThings()
})
Example

onLanguageData​

onLanguageData(items)
Calls an action when the language data is loaded.
items
object
Language items
instance.addListener('onLanguageData', (items) => {
  // language data loaded
  myFunc(items)
})
Example

onMeasureChange​

onMeasureChange(length, rotation, label)
Calls an action as soon the measurement is changed.
length
float
Measured length
rotation
float
Measure rotation
label
string
Measure label
RETURN
string
Returns the modified label content
instance.addListener('onMeasureChange', (length, rotation, label) => {
  // measure changes
  myFunc(length, rotation, label)
})
Example

onMeasureEnd​

onMeasureEnd(length, rotation, label, coords)
Calls an action as soon as the measurement ends.
length
float
Measured length
rotation
float
Measure rotation
label
string
Measure label
coords
array
Coordinates of the measure action
instance.addListener('onMeasureEnd', (length, rotation, label, coords) => {
  // measure ends
  myFunc(length, rotation, label, coords)
})
Example

onMeasureShow​

onMeasureShow(show)
Calls an action as soon as the measurement is displayed.
show
boolean
Measure is visible or hidden
instance.addListener('onMeasureShow', (show) => {
  // Measure is visible
  myFunc(show)
})
Example

onMeasureStart​

onMeasureStart(length, rotation, label)
Calls an action as soon the measurement is started.
length
float
Measured length
rotation
float
Measure rotation
label
string
Measure label
RETURN
string
Returns the modified label content
instance.addListener('onMeasureStart', (length, rotation, label) => {
  // measure starts
  myFunc(length, rotation, label)
})
Example

onMeasureUpdateRatio​

onMeasureUpdateRatio(lengthFactor, imageRealWidth, imageWidth)
Calls an action as soon as the measurement reference is updated due to a change of the original image ratio.
lengthFactor
float
Length factor
imageRealWidth
float
Actual image width
imageWidth
float
Displayed image width
instance.addListener('onMeasureUpdateRatio', (lengthFactor, imageRealWidth, imageWidth) => {
  // measure ratio updated
  myFunc(lengthFactor, imageRealWidth, imageWidth)
})
Example

onMenuButtonEnabled​

onMenuButtonEnabled(buttonID, null, enable)
Calls an action when a button is enabled or disabled.
buttonID
string
Button ID
enable
boolean
`true` = button enabled
instance.addListener('onMenuButtonEnabled', (buttonID, null, enable) => {
  // button enabled/ disabled
  myFunc(buttonID, null, enable)
})
Example

onMenuButtonMouseDown​

onMenuButtonMouseDown(buttonID, evt)
Calls an action when the mouse pointer is over the element and the mouse button is pressed.
buttonID
string
Button ID
evt
event
Event which will be used
instance.addListener('onMenuButtonMouseDown', (buttonID, evt) => {
  // button mouse down
  myFunc(buttonID, evt)
})
Example

onMenuButtonPressed​

onMenuButtonPressed(buttonID, evt)
Sets an action that starts when a button is pressed.
buttonID
string
Button ID
evt
event
Event which will be used
instance.addListener('onMenuButtonPressed', (buttonID, evt) => {
  // button pressed
  myFunc(buttonID, evt)
})
Example

onMenuButtonReleased​

onMenuButtonReleased(buttonID, evt)
Sets an action that starts when a button is released.
buttonID
string
Button ID
evt
event
Event which will be used
instance.addListener('onMenuButtonReleased', (buttonID, evt) => {
  // button released
  myFunc(buttonID, evt)
})
Example

onMenuButtonClicked​

onMenuButtonClicked(buttonID, evt)
Sets an action that starts when a button is clicked.
buttonID
string
Button ID
evt
event
Event which will be used
instance.addListener('onMenuButtonClicked', (buttonID, evt) => {
  // button clicked
  myFunc(buttonID, evt)
})
Example

onMenuButtonSetPressed​

onMenuButtonSetPressed(pressed)
Called as soon as the button is set to `pressed`.
pressed
boolean
`true` = button is set to pressed
instance.addListener('onMenuButtonSetPressed', (pressed) => {
  // button set to pressed
  myFunc(pressed)
})
Example

onMenuDestroy​

onMenuDestroy()
Called if the menu is destroyed.
instance.addListener('onMenuDestroy', () => {
  // menu is destroyed
  doReallyGoodThings()
})
Example

onMenuEnabled​

onMenuEnabled(enabled)
Called if the menu is enabled/disabled.
enabled
boolean
Configuration parameters as object
instance.addListener('onMenuEnabled', (enabled) => {
  // menu enabled
  myFunc(enabled)
})
Example

onMenuReady​

onMenuReady()
Sets an action when the menu is ready (after all buttons are added).
instance.addListener('onMenuReady', () => {
  // menu is ready
  doReallyGoodThings()
})
Example

onMouseModeChanged​

onMouseModeChanged(mouseMode)
Calls an action when the mouse mode is changed.
mouseMode
integer
Mouse mode
instance.addListener('onMouseModeChanged', (mouseMode) => {
  // mouse mode changes
  myFunc(mouseMode)
})
Example

onProgress​

onProgress(percent)
Can be called while the loading progresses.
percent
float
Progress in percent
instance.addListener('onProgress', (percent) => {
  // progress
  myFunc(percent)
})
Example

onReady​

onReady()
Called as soon as the instance is ready.
instance.addListener('onReady', () => {
  // instance is ready
  doReallyGoodThings()
})
Example

onRegisterExternalMenuButtons​

onRegisterExternalMenuButtons()
Calls an action as soon as external menu buttons are registered.
instance.addListener('onRegisterExternalMenuButtons', () => {
  // menu button registered
  doReallyGoodThings()
})
Example

onReset​

onReset()
Calls an action when the configuration is changed.
instance.addListener('onReset', () => {
  // config is reset
  doReallyGoodThings()
})
Example

onResize​

onResize(width, height, done, fullScreen)
Called as soon as the instance is resized.
width
integer
width of instance
height
integer
height of instance
done
boolean
`true` = resize process is finished
fullScreen
boolean
FullScreen activated or deactivated
instance.addListener('onResize', (width, height, done, fullScreen) => {
  // resize
  myFunc(width, height, done, fullScreen)
})
Example

onSkinChanged​

onSkinChanged(currentSkin, beforeSkin)
Called when the skin class is changed.
currentSkin
string
Currently used skin class
beforeSkin
string
Skin class used beforehand
instance.addListener('onSkinChanged', (currentSkin, beforeSkin) => {
  // skin class is changed
  myFunc(currentSkin, beforeSkin)
})
Example

onStartDragging​

onStartDragging(inNavWindow)
Calls an action when the user starts dragging the image.
inNavWindow
boolean
If the drag takes place in the Navigation window
instance.addListener('onStartDragging', (inNavWindow) => {
  // dragging starts
  myFunc(inNavWindow)
})
Example

onStopDragging​

onStopDragging(inNavWindow)
Calls an action when the user stops dragging the image.
inNavWindow
boolean
If the drag takes place in the Navigation window
instance.addListener('onStopDragging', (inNavWindow) => {
  // dragging stops
  myFunc(inNavWindow)
})
Example

onViewChanged​

onViewChanged(view)
Calls an action as soon as the viewed image section changes.
view
string
Specific image section defined as view string
instance.addListener('onViewChanged', (view) => {
  // viewed image section changes
  myFunc(view)
})
Example

onZoomChanged​

onZoomChanged(scale, scaleMax, percent)
Called each time the magnification level change is finished.
scale
float
Zoom magnification level from 0 to 100
scaleMax
float
Sets the maximum zoom level
percent
float
Percentage of the magnification from 0 to 100
instance.addListener('onZoomChanged', (scale, scaleMax, percent) => {
  // zoom changed
  myFunc(scale, scaleMax, percent)
})
Example

onZoomChanging​

onZoomChanging(scale, scaleMax, percent, preliminary)
Called each time while magnification level changes.
scale
float
Zoom magnification level from 0 to 100
scaleMax
float
Sets the maximum zoom level
percent
float
Percentage of the magnification from 0 to 100
preliminary
boolean
`true` = zoom goal is not reached yet, `false` = zoom goal reached and details are loaded
instance.addListener('onZoomChanging', (scale, scaleMax, percent, preliminary) => {
  // zoom currently changes
  myFunc(scale, scaleMax, percent, preliminary)
})
Example