IAT Help

November 30, 2017

This documentation is a work in progress, just like IAT itself. We hope it helps. There has been substantial recent work on Alignment. Feedback is welcome (so far). Please send comments and questions to the author, or mntnlgcy@uvic.ca.

  1. Overview
  2. Canvases
  3. Main Controls
  4. Modes
  5. Mouse
  6. Functions/Tools
  7. Categories
  8. Files
  9. Keyboard
  10. Preferences
  11. Standalone Mode
  12. Alignment


The Image Analysis Toolkit (IAT) is a browser based javascript program, entirely contained (except for this help file) in the file sbsm.html. It allows users to display and analyze single or multiple images. Rudimentary editing is available for creating segmentation masks, and like all work done within the program, can be saved to a user's own file system. The program itself can be saved and run on one's own computer, without the internet.


The canvases form the heart of the IAT program. Within a canvas you can drag-and-drop files, and display photos and other images, including segmentations/masks. You can also draw and edit objects in order to create new visualizations, make new masks, or alter existing ones. Using the mouse and other controls, it is possible to zoom in and out, and to move (translate) images around.

IAT is usually used with two canvases, aligned side by side (IAT used to be called SBS), or sometimes top and bottom, so that two images of identical size can be visually compared. However, it is also possible to view only one canvas at a time, or even three in certain cases.

Main Controls

In an effort to conserve screen real estate, most of the various buttons and other widgets are usually hidden. Functionally related sets of them can be exposed with the main controls, horizontally arranged from the top left much like pulldown menus in other programs. Click once to show a row of controls, click elsewhere to replace that row with another. Use "All" to show/hide all available controls, but note how little room is then left for the canvas area!


Most of these roughly correspond to the Edit controls.


What the mouse does depends very much on what particular mode or situation IAT is currently in. Try them all, and don't forget to try the SHIFT and ALT keys to see if they provide another function.

Touch controls on such devices as phones and tablets are not yet supported.

Note that x and y "wheel" directions available on some mice are not fully supported.

Functions and Tools

This is an ever-changing (mostly growing) aspect of IAT. Most of these controls are hidden behind pulldowns to conserve space.


These are all organized in one selection control. Choose one, then press GO to see it in action on one or two canvases. Some functions only write a message.

Slider Widget

This control originated primarily for the cross-fade function.


This control is intended for masks and/or object collections, and will cause each and every pixel (one mask) or pixel pair (two masks) to be stepped through and compared with each other. A number of categories must be defined. Counts for each category/colour are accumulated, and if a 3rd canvas is present, a new image is drawn there. Select a counting function (presently 1 or 2?!), and press GO.


Segmentations based on masks and/or drawn objects use categories, defined by the user or (more frequently) saved in the past and loaded into the program. Each category has a distinct name and colour. There can be any number of categories, although generally there are less than 20.

There are some categories built in to IAT. They can be edited with the buttons below, or replaced in their entirety by loading a "project file" containing saved categories. When objects are drawn, their colour is taken from the current category.


Many different types of files can be loaded into and saved from IAT. The easiest way to load files is to simply drag them from your own local filesystem onto any canvas. Most users grab a couple images at once from their desktop and drop them in. You can also use the Load button, in the File set of controls.

Files can also be saved, using the Save button in the File set of controls. Save images in JPG format (use the slider control to set quality level), masks in PNG format, and IAT data in TXT files. These files can be loaded into a later IAT session.

Keyboard Shortcuts

Click in a canvas (ie. give the canvas focus) first.


User preferences.

Standalone Mode

It is possible to run IAT without connection to its server, or without any internet connection at all. First save the program to your own computer. You can use the browser's own save mechanism, often rightmouse/SaveAs or ctrl-s. In this case, be sure to choose "Webpage, HTML Only". IAT also provides a save mechanism, in File/Save[HTM].

You now have the IAT program, which is approximately 60 KB of HTML and JavaScript code. Most platforms will run it with a simple click, although it's important that your default browser is Chrome or Firefox or similar. (And absolutely not IE.) Some functionality is lost in this mode, but much is gained too. In particular, you can work with images and saved IAT projects on your own computer, with greater flexibility than the remotely hosted server version. However, in some configurations the pop-up Categories window might be unavailable. Chrome will insist that you use its --allow-file-access-from-files option for access to much IAT's functionality.

Another variation similar to standalone mode is to use your own local server. This configuration also has many advantages, and does not lose as much functionality as the simpler standalone version described above. Its main disadvantage is the difficulty many users may have with installation of a local server. Some use the python httpsimpleserver, others suggest Apache, and there are other favorites, each with its own overenthusiastic adherents.


Perform an alignment of the first image against the second. This has become quite a complex function. It is based on the concept of "Alignment Mode", in which one can enter and edit "control point pairs".

When in Alignment Mode, objects (eg. used in segmentation work) are not displayed, and the control points are. The display mechanism for a point is red and green crosshairs with a number, red for odd points in first canvas and even ones in second, green for their corresponding locations in the opposite canvas.

Odd-numbered control points should be in the first canvas, even numbered ones in the second. The controls below, except the first, assume one is in Alignment Mode.

Clip is useful for changing the order of the point pairs so that different transformations on the images are possible. For example, if one wants to see an alignment performed with original point pairs (3,4), (7,8) and (9,10), select 3 and Clip, then 7 and Clip, then 9 and Clip. The new first three pairs will be (in old numbering scheme) 9,10 7,8 3,4. (Order of pairs should have no effect on an alignment.) If one "clips" those pairs in a different order (non-descending), confusion may reign.

Beware removal of the selected control point, as its twin based in the other canvas should also be removed. But it could have an unexpected number after removal of the first. Remember, red crosshairs with odd numbers should be in first canvas, with even numbers in second.

You need to access the View set of controls to get L,R,U,D. It is handy to use high zoom for these, and for alignment generally. Try Viewer and Fit, Delete (to remove Viewer) and then Align to return to the correct mode

When an alignment is performed, various data are written to the Javascript console. You'll have to bring this up in your browser, possibly with rightmouse-Inspect, or perhaps ctrl-shift-I. Be sure to choose the Console tab, if necessary. The data consists of transformation matrix determinant and RMSE error for each possible combination of 3 control point pairs, out of all control points. The determinant should be relatively large, indicating non-collinearity. Assuming good determinant and accurate control points, RMSE should be low. Use Revert to "undo" an image transformation.

One can save the control points with the File/Save[TXT] control. This implicitly saves the aligment, as it can be performed upon reload. Regrettably, there is not yet a mechanism for clipping and saving a transformed image.