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.
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):
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.
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:
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:
Parameters:
fScale float (the current magnification level)
fScaleMax float (the maximum magnification level)
fPercent float (magnification in percent)