Introduction

Demos:

Using the image browser

For best results, use a standards-compliant web browser such as Firefox (or Camino), Safari or Opera.

Click and drag to move the image, zoom the image using the plus and minus keys on your number pad and select an image to view using the yellow slider in the top-left image. In most browsers you should also be able to use the mouse wheel over the image to zoom.

When viewing Woolz objects, you can alter the pitch and yaw by clicking and dragging on the 'Section Plane' image, and adjust the depth of the section using the 'Distance' slider.

If overlays are defined for an image, you may be able to click on highlighted anatomical features and an exciting dialog box will be displayed with the name of the feature.

How it works

The Internet Imaging Protocol (IIP) allows sections of high-resolution image data stored on a server to be transmitted in the form of tiles, thereby allowing users to selectively view parts of a large image without having to download them in their entirety. Tiles of multiple resolution levels are stored on the server in pyramidal TIFF files, which further reduces bandwidth requirements when only a low-resolution view is requested. The IIP server runs as a FastCGI program on a web server in the MRC Human Genetics Unit.

The IIP client here has been written in-house at the MRC HGU to communicate with the IIP server and retrieve image tiles and arrange them in a web browser window in a similar manner to Google Maps.

Currently supported image formats are:

Installation

If JSON metadata files are to be kept together with their corresponding images on the filesystem, two path variables must be specified. The FCGI server uses paths relative to the server's filesystem root since it executes on the server, while Javascript code uses a path relative to the Apache web root since it executes on the client. Since it would be unwise to allow Apache to see the entire filesystem, an appropriate solution is to create an alias leading to the IIP image material.

As an example, on my test machine the IIP data is located within /export/data0/iip/projects/, so I placed the following directive in an appropriate Apache configuration file:

Alias /iip-projects/ "/export/data0/iip/projects/"
			

The web path is set as webpath in wlziipviewer.php, and in the above example it would take the value "/iip-projects/". This is only required for image stacks, and is unnecessary for single images and Woolz objects.

The filesystem path is set as fspath in wlziipviewer.php, and in the above example it would take the value "/export/data0/iip/projects/". This is required for all displayable resources.

The common path is set as stackpath in the metadata file for the stack, and is only required for image stacks.

Metadata

Configuration variables define: Described here is the format for JSON metadata files.
metadata_version
Use "1.02" for now.
stackpath
Described above.
zsimgsrc
Location of a selector image from stackpath.
zselwidth
Width of above image.
zselheight
Height of above image.
zsliceorientation
'horizonal' or 'vertical' depending on the desired orientation of the selector bar.
zseldragborderlefttop
Minimum extent of the selector bar.
zseldragborderrightbottom
Maximum extent of the selector bar.
imagepath
Location of images.
overlaypath
Location of overlay data (optional).

A complete metadata file might hence appear thus:

{ "metadata_version": "1.02",
  "stackpath": "euregene/croppedFullResKidney_substack/",
  "zsimgsrc": "Nephron019.jpg",
  "zselwidth": "560",
  "zselheight": "800",
  "zsliceorientation": "horizontal",
  "zseldragborderlefttop": "5",
  "zseldragborderrightbottom": "20",
  "imagepath": "images/",
  "file_root":
    [
      "section_000160",
      "section_000161",
      "section_000162",
      "section_000163",
      "section_000164",
      "section_000165",
      "section_000166",
      "section_000167",
      "section_000168",
      "section_000169",
    ],
  "image_extension": ".jpg.256.pyr.tif",
  "domain_mapping": "javascript/domainMapping.js",
  "overlaypath": "overlaydata/",
  "overlaysuffix": "_Bnd/tile_",
}