Skip to end of metadata
Go to start of metadata


Image Annotation Spec (RS3.3)

Image Compare and Overlay Req Items (RS3.?)



There are two main ideas for image comparison with some reference to overlay:

Idea 1

A single suite of tools for all image overlay and comparison functions.

The annotated area of the image is clicked to open both the annotation and close up of the image side by side. These could have ‘x’ in the corner to close/hide them again. Similar to those seen here

Taken from []

Visualisation of idea adapted for RS


  • This format will allow several images to be uploaded by using several layers.
  • Mockup in para 12.9 of Business Requirements and Specification show how it would be effective for overlay.
  • It is a format many users may already be familiar with. 


  • This is a slightly unordered way of comparing images side by side. Images will have to overlap to fit on the screen. If images are not overlapping it will take a lot of scrolling to get from viewing one image to another (especially if the images are large). How would the pop up boxes gather together for viewing side by side and still show the original image?
    A solution to this could be to use frames/windows within this tool for each image and overlayed images.

Idea 2
A master image viewer with fixed frames for closer views. Similar to this

Visualisation of idea adapted for RS 


  • View all annotations for a set of images. Or have all images to be compared on a thumbnail gallery along the bottom. Only annotations for image displayed will show up on side. User can select relevant image from thumbnail gallery for desired annotation/s.
  • Copyright permitting each frame can be downloaded.
  • Features that should appear for each frame: opacity, brightness and contrast.
  • Have a hover over to display annotation.

How this could work

  • Starting with the first frame. Select image, select annotation. This automatically displays in frame.
  • Set image in frame.
  • Click add frame for next image to compare.
  • Scroll along thumbnails, select image, select annotation, set image.


  • Can view and compare several images/annotations.
  • Can produce informative comparisons that can be easily shared.


  • This does not include overlay feature.
  • This idea seems static. There may be more fluid forms of navigation and viewing of image annotation areas.

Should the tool combine both overlay and comparison functions in one space?

The alternative is to have two spaces one for overlay and one for comparison. Switch between the two using the buttons along the top.

Development of idea 2

Following search, image of item can be added to the Comparison tool.

Mark up part of tool. Adjust brightness/contrast and select image detail. 

Add to collection form. Choose existing collection or create a new one.
Create a collection title.
Collection of image details with panel of annotations.
Add annotation form. Highlight text and click on IMG icon. !image compare add annotation and tag text.jpg|border=1!Choose image detail.

Image attached to text.

Hover over highlighted area and image surrounded by box.
Types of relations for collection.

Create and Compare a Collection Steps

Choose an image/detail
  1. Search for an item. Add image of item for mark up.
  2. From an item Relations tab. Access a collection to which the image belongs. Choose the relevant image detail from those in the collection and add to collection.
  3. From an existing collection’s Relation tab choose the relevant image and add to mark up.
  4. From an existing collection’s Relation tab explore related collections. Choose a collection. Follow step 2 or three. 
Creating an image detail in mark up to add to collection
  1. Bounding box that can be scaled with a fixed height and width ratio.
  2. Brightness and contrast levels can be adjusted.
  3. User clicks in ‘add to collection’.
Add to a collection
  1. When detail is added to collection choose from list of existing collections in databasket. Image detail title is generated automatically.
  2. Creating a new collection. Create a collection title. Image detail title is automatically generated.
Annotate a collection
  1. Load collection. This function only loads collections that exist in the users databasket. Other collections are accessed through searches or browsing collections.
  2. Add annotation. Create annotation as in image annotation tool.
  3. Reference image details by highlighting text, click on IMG icon. Double click on relevant image detail. Save annotation.

Use Case Draft

Create a collection

A researcher is interested in comparing an object they are studying with similar objects. They access the record for the object and click on the Relations tab. This shows related image annotations and comparison collections that the digital image of the object belongs to.

The researcher clicks on a collection in the Relations tab and is taken to the Comparison tool. They can see a detail of the image they are interested as well as three other image details of different objects. An annotation panel on the right shows annotations made for the collection. The researcher hovers the cursor over a highlighted part of the text, which appears to reference one of the image details. The relevant image detail is automatically highlighted with a border.

The researcher is interested in comparing this detail with another image. They click on the Relations tab where they choose to add the detail to a collection. Using the generated form they decide to create a new collection rather than add to an existing collection in the databasket. They give the collection a title whilst the detail is saved under its existing title. Once saved the collection is automatically added to the databasket and the researcher fills out the form adding the collection to the databasket.

Staying in the Relations tab the researcher chooses to mark up an original image to which one of the details belongs, as they are interested in comparing another area of the image. Clicking on the mark up icon takes the researcher into the mark up function of the Comparison Tool.

The researcher can now mark up the image for closer inspection.  The researcher is presented with a mark up box that can be scaled with a fixed width and height ratio. They adjust the contrast and the brightness of the image. Once the researcher is satisfied with the selection they add it to a collection. They choose to add it to the collection they have recently created. ResearchSpace generates a title for the detailed image.

The researcher is now interested in related collections that contain these image details and have been published by other researchers. Again within the Relations tab the researcher can explore by collection. They find a relevant collection and open it. They choose to add an image detail from that collection. They go to the Relations tab for that collection and add the relevant image detail to their collection as above. 

For the final image detail of the collection the researcher runs a search locates an object and adds the image of the object for mark up. They mark the image up and add the detail to the collection. The researcher now compares the image details side by side and goes onto make an annotation about the collection. 

Annotate the Collection

The researcher uses the panel on the right to create a new annotation. The form is similar to the image annotation tool. In this case the researcher chooses to make an annotation referring specifically to two image details. The researcher selects the text that refers to an image in the collection and clicks on the IMG icon. A list of the image details appears and the researcher chooses the relevant image detail. The text that was highlighted in now connected with the image detail. This is repeated for the second image detail and the annotation is saved. When the researcher hovers the cursor over these text areas the associated image details are highlighted with a border.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.