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 values of the formfield and the position of the slider interact and get set accordingly. We are using a 3rd party slider widget for a more convenient way to zoom and easier to read javascript code.

This is the HTML Code used, containing both the DIV for FSI Viewer JS Spin and the input field we will be using for the slider:


The interaction is provided by a few Javascript functions. First we initialise the slider and add two event handling functions to both the slider and text input, which set the corresponding value of the mirrored input.

As you can see, both event handling functions provide a spin.setZoom() function call. This is where the FSI Viewer JS 360 zoom level is set according to the input of the slider and input field. The function scheme is as follows:


nZoom float [0..100]

bPreliminary boolean (true: load image tiles)

bAnimate boolean (false: immediately set magnification)

Next is the FSIInit function as it can be created in the FSI Server webinterface:

This one was slightly modified by adding a callback function to set the slider and text input field when the user changes the FSI Viewer JS Spin using the mouse to zoom in or out. The nZoom parameter will be provided by FSI Viewer JS.

View Sample with external slider

Posted in: