IIPMooViewer is a light-weight high performance HTML5-based javascript high resolution image streaming and zooming client compatible with almost all web browsers including Firefox, Chrome, Internet Explorer versions (all versions going back to and including IE6), Safari and Opera. Version 2.0 is now also compatible with mobile devices including the iPhone/iPad and Android-based devices.
IIPMooViewer is designed to work with the IIPImage server. However, as of version 2.0, it can also work with static tiling protocols such as Zoomify and Deepzoom as well as servers supporting the Djatoka (Open URL) and IIIF protocols.
Additional features include support for annotations of regions within the image and image rotation.
The view is written in pure javascript and uses the Mootools javascript framework. Version 2.0 of IIPMooViewer requires Mootools version 1.6.x The distribution contains all the necessary library files in both compressed and uncompressed formats. Modify the parameters in the index.html example file provided.
Example Usage
IIPMooViewer is flexible and very customizable, but it is also designed to just work by default with the minimal setting of parameters. Here is a basic HTML5 example to create a full page viewer.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/iip.css" />
<script type="text/javascript" src="js/mootools-core-1.6.0-compressed.js"></script>
<script type="text/javascript" src="js/iipmooviewer-2.0-min.js"></script>
<script type="text/javascript">
new IIPMooViewer( "viewer", { image: '/path/to/image.tif' } );
</script>
</head>
<body>
<div id="viewer" style="width:100%;height:100%"></div>
</body>
</html>
Options
Options to the IIPMooViewer class constructor: (The only obligatory option is the image variable)
image : The full system path to the image. On Windows as on other systems this should be a UNIX style path such as “/path/to/image.tif”. Note that this is an absolute system path and not the path relative to the webserver root
server : The address of the IIPImage server. [default: “/fcgi-bin/iipsrv.fcgi”]
credit : a credit, copyright or information to be shown on the image itself
render : the way in which tiles are rendered. Either `random’ where the tiles are fetched and rendered randomly or ‘spiral’ where the tiles are rendered from the center outwards [default: “spiral”]
showNavWindow : whether to show the navigation window. [default: true]
showNavButtons : whether to show the navigation buttons on start up: true or false [default: true]
navWinSize : ratio of navigation window size to the main window. Wide panoramas are scaled to twice this size [default: 0.2]
navigation : a hash containing options for the navigation box: (a) id: the id of the element where the navigation box will be embedded. Defaults to the main container. (b) draggable: a boolean, indicating whether the navigation box is draggable. Defaults to true, however, if a navigation id is specified, defaults to false. (c) buttons: an array of the available buttons: reset, zoomIn, zoomOut, rotateLeft, rotateRight. Defaults to: [‘reset’,’zoomIn’,’zoomOut’]
showCoords : whether to show live screen coordinates [default: false]
scale : adds a scale to the image. Specify the number of pixels per unis. Should be given in pixels per mm if the default meter unit is used. Otherwise pixels per degree if degree units are used.
units : define the units used. Can be in degrees or meters [default: meters]. Or define completely new unit system. The default structure is the following:
{
dims: ["pm", "nm", "µm", "mm", "cm", "m", "km"], // Unit suffixes
orders: [ 1e-12, 1e-9, 1e-6, 0.001, 0.01, 1, 1000 ],// Unit orders
mults: [1,2,5,10,50,100], // Different scalings usable for each unit
factor: 1000 // Default multiplication factor
}
prefix: path prefix if image subdirectory moved (for example to a different host) [default: “images/”]
enableFullscreen : allow full screen mode. If “native” will attempt to use Javascript Fullscreen API. Otherwise it will fill the viewport. “page” allows fullscreen but only in viewport fill mode. False disables. [default: “native”]
winResize : whether view is reflowed on window resize. [default: true]
viewport : object containing center x, y, resolution, rotation and contrast of initial view. For example, to start at resolution 4 with the center of the view port at both 90% of the size of the image:
{resolution:4, x:0.9, y:0.9, rotation:0}
protocol : protocol to use with the server: iip, iiif, zoomify or deepzoom [default: “iip”]
preload : preload an extra layer of tiles surrounding the viewport [default: false]
annotations : An object containing object structures with parameters “x”, “y”, “w”, “h”, “title”, “text”, “category” where x, y, w and h are the position and size of the annotation in relative [0-1] values, title is an optional title for the annotation, category is an optional category for the annotation and text is the body of the annotation
Ajax Security
Note also that due to the Ajax security model, the IIP server must point to the same host as that from which your page has been served. If you want to host the IIP image server on a different machine, you will need to forward proxy requests to this other machine via your web server. See the server page for more details on how to do this.
Demo
See the demo page to see the client in action.
Download
You can download the latest release version of IIPMooViewer from the Github repository.
