How to use the Measure function

This tutorial shows you how to implement the Measure function properly. Measure is helpful if you want to show objects in your zoom viewer and provide a scale with them, in order to show the visitor the exact measurements of an object while he his viewing it.

The plug-in does not support any perspective correction. This means that measuring scanned maps, diagrams will be accurate, measuring 3 dimensional objects is less accurate.

The Measure Plug-in is available in FSI Viewer from version 18.06.25 on.

How to activate Measure

Adding the parameter plugins=”Measure” provides an additional button/ mouse-mode which enables the user to measure distances and angles inside the viewer by clicking & dragging. For a full list of available parameters, please consult the manual.

You can either list the parameter for the plug-in in the config XML or – like shown in this tutorial – directly in the <fsi-viewer> tag:

The parameter plugins=”Measure” needs to be set, the corresponding parameters will then be listed with measure_ImageWidth, measure_Suffix, etc.

How to define Measure correctly – calculate ImageWidth

In order to use measure, you need to define the scale correctly beforehand, the function requires the real width of the entire image to enable distance measuring.

You can do this in two ways:

• you already know the entire width of the image
• you only know the width of a certain part of the object in the image

In this tutorial we will concentrate on the second case. You can calculate the ImageWidth (w) like this: w = real length / n *100.

If we take the SUV as an example, we e.g. know that the car is 5 meters long. In order to apply this to the measure function, you will need to do the following:

1. add the measure function to the viewer without any additional parameters
2. open the FSI Viewer and click on the Measure button
3. now measure the part of the image you know the width of – in our example, this equals to the width of the car. We know the length is 5m, the measure tool will display the value n.
4. calculate the value w for the ImageWidth parameter

How to set Measure as Initial Mouse Mode

If you want to have Measure activated and shown in the moment the viewer is initialized, you need to set the InitalMouseMode accordingly.  The MouseMode ID for the Measure Mode is 100. So the code needs to look like this:

How to define Initial Coordinates

In some cases you want to show a certain measured part right from the beginning on. The parameter for this is measure_Initial.

This section shows you how you can retrieve the values for this parameter.

Step 1: Go to the browser and open the site which contains your viewer. Open the console with F12. Note: the parameter debug needs to be set to true.

Step 2: You need to give your viewer an ID in order to refer to it. In the example, we chose id=”measure”

Step 3:  Type document.getElementById(‘measure’).testAPIListenersStart().

This command starts the API Listener Test (you can read more about the API here.)

Step 4:  Go to the viewer, activate Measure and measue the part which you would like to have as inital measurement.

Step 5: Select the listener [onMeasureEnd] in the console and open the details with the arrow next to Arguments.

Step 6:  The values shown under 3: (green selection in the image below), are the values that need to be set in measure_Initial:

measure_Initial=”0.23781512605042016, 0.6447761194029851, 0.23949579831932774, 0.9044776119402985“. You can copy them out of the console easily.

This is how the code of the example looks like:

(measure_LineColor is used to change the color of the measurement line)