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. initSlider creates an instance of the “ZoomSliderControl” class.
We pass the FSI Viewer node and the input slider node as arguments.

The init() function of our class adds an event handler when the slider changes its value and adds an “onZoomChanging” handler to FSI Viewer.

Copy to Clipboard

As you can see, the event handling function for the slider calls elViewer.setZoom()  in line 24.
This is where the FSI Viewer zoom level is set according to the slider input value.

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)

fPercent float (magnification in percent)

View Sample with external slider