Specifications for the Flex based IIPClient

Some ideas can be stolen from OpenLayers, possibly. The main purposes of the viewer are:

  • Showing the images
  • Allowing the user to mark up parts of the iamges
  • Showing the mark up

"Mark up", in this case, means that the user can designate areas or points in the image and connect it to other data (== URLs). Other people can see those areas and go to the connected data. (Think the photo tagging mechanism in Facebook, only fancier)

Feature Ideas

General API

Controlling the Interface

We will need to embed the tool in different contexts where it will be used by different types of users. For some of them we will need it to be very easy to use thus having a limited of elements and controls in the GUI. In other cases we will need more controls. The approach could be similar to google maps, where you decide which controls u want to enable via the js API.

Controls

Zooming and Panning

Panning controls shoul let the user drag the image. This should be the tool selected by default and associated to left mouse click + drag. Zooming controls should have thier own "overlay" like in google maps. Similarily it should be possible to have a small and advanced version of the zooming controls (see gmaps api). It should be possible to choose to have them in a fixed position or in a draggable/collapsable panel. Zooming level must also be selectable via the api (from external controls). Eventually, it should be possible to programatically associate to the mouse wheel to zooming controls.

Contrast/Brightness

Minimap

Draggable/collapsable/fixed to a corner/side

Rotation

Measures

Must be relative to the resolution as in http://denics.free.fr/index.php/2007/08/10/fliip-10-alpha-is-out/

Polygon/Geometry drawing

The Flex client should be able to draw polygons and allow the user to draw new polygons on top of the picture. Obviously that means that we need to be able to pass those in and, if the user draws some, get those out.

Idea: Have a look at the OpenLayers Geometry API. They have various types of primitives, maybe at the moment mainly Polygons are needed. Also the calculation functions may not be needed at first.

Easy primitives that are useful for marking up images:

  • Markers (points)
  • Boxes (rectangles)
  • Areas (polygons)

Coordinates

Coordinates should not depend on pixels or units; we can use normalized coordinates (that is, the drawing area always goes from 0.0 to 1.0 in both directions).

API

The API could look something like this:

  • function canCreatePolygons to allow the creation of a new polygon layer.
  • function setPolygonLayer(name, polygon, editable) or loadPolygonLayer(name, uri, editable) - add a new layer of polygons to the image. It will take a polygon defined in normalized coordinates. The polygon may either be passed as an object, or loaded from an URI in JSON format. If the editable parameter is set to true, the user is allow to edit the polygon. The name could be used to refer to the layer when saving the polygon.
  • function onPolygonSave(action) - What to do if the user "saves" a polygon. The action may either be a method wich is called with the polygon object or a URI which the application will POST the JSON to. (TODO: Do we need a name, or how does the action know which polygon layer is modified?)

GUI

If we allow editing and multiple polygon layers, we could have those interface elements:

  • Select each polygon layer
  • Show/hide each layer
  • Create a new layer
  • Modify an existing layer
    • Move points
    • Insert points
    • Delete points
  • Save modifications

Simplification/Layers: With only a simple layer, this could be easier. However it is very likely that we will need to handle multiple annotations in the same image (with corresponding "zones". Another approach would be to have a single "layer" but to be able to access each "zone" on the image separately.

Clickable

It should be possible to connect the polygon to a URL, so that if the polygon is clicked the URL will be loaded. It should also be possible to trigger JavaScript actions in the same way.

Labels

It will probably be useful if text labels can be attached to the layers and/or "zones". Those could be used for identifying information, further explanation, etc. A more flexible solution could be to have bubbles like in gmaps, in which you can can write html+css and they automatically resize to fit the content. It would also be nice to be able to choose among bubbles that are attached to markers/polygons and mini windows that are not and you can drag them around.

Layers

It should be possible to add an arbitrary number of layers on top of the baselayer eg for:

  • Watermarking
  • Copyright attribution