Controlling FSI Viewer JS using external JavaScript

This tutorial will teach you how to remotely control FSI Viewer JS using custom scripts. First, let’s take a look at what we want to achieve:
You can zoom by using the slider below the image or using the interface of the image itself. The position of the slider interacts and get set accordingly. We are using a HTML5 input element for the slider.

View Sample with external slider

This is the HTML Code used, containing both the tag for FSI Viewer and the input field we will be using for the slider (the divs are just for presentation):

Copy to Clipboard

The interaction is provided by a few Javascript functions. First we locate the viewer and the slider element (lines 6 & 7) and add a event handling functions to the slider (line 8). The handlers for FSI Viewer are simply connected via the name inside the html tag (see above lines 7 & 8):

Copy to Clipboard

As you can see, the event handling function for the slider provide a spin.setZoom() function call (line 30). This is where the FSI Viewer zoom level is set according to the input of the slider and input field.

The function scheme is as follows:

Copy to Clipboard

Parameters:

nZoom float [0..100]

bPreliminary boolean (true: load image tiles)

bAnimate boolean (false: immediately set magnification)

The event handling of the viewer is composed of two functions: handleResize and handleViewer that are mapped to the callbacks “onResize” and “onZoomChanged” provided by FSI Viewer:

Copy to Clipboard

Parameters:

fScale float (the current magnification level)

fScaleMax float (the maximum magnification level)

(Since onZoomChanged gets called at the initialisation process as well after a resize of FSI Viewer, we use the presented values to adjust the slider position accordingly.)

Copy to Clipboard

Parameters:

nWidth int (new width of the viewer element)

nHeight int (new height of the viewer element)

bResizeDone boolean (true if resizing is finished)

bFullScreen boolean (true if the user changed to fullscreen mode)

(Since we only use this function to set a flag for the main function handleViewer these parameters are not used.)

All functions and callbacks of FSI Viewer can be looked up in the online manual

View Sample with external slider