Text only | Skip links
Skip links||IT Services, University of Oxford

1. About the Image Markup Tool

The ‘Image Markup Tool’, or more correctly The UVic Image Markup Tool Project (hereafter IMT), is a project which produces a tool for the annotation of images. The IMT allows researchers to annotate portions of images and categorise those annotations. The underlying storage format for these annotations is a pure subset of TEI P5 XML. The IMT is primarily the creation of Martin Holmes at the University of Victoria, British Columbia, Canada. For more information please see its website at: http://www.tapor.uvic.ca/~mholmes/image_markup/.

The goals of the IMT are:
  • be simple for novices to use
  • load and display a wide variety of different image formats
  • allow the user to specify arbitrary rectangles on the image, and associate them with annotations
  • allow such rectangles to overlap if the user wishes
  • provide mechanisms for bringing overlapped rectangles to the front easily
  • allow annotations to be grouped into categories, distinguished by name and appearance, to allow different classes of annotation
  • require no significant knowledge of XML or TEI
  • allow the use of complex XML code if the user wishes
  • save data in an XML file which conforms to a TEI P5-based schema
  • reload data from its own files
  • generate a simple "Web view" of the data for display in a browser
  • come packaged with an installer, Help file, and basic tutorial
  • be simple for novices to use!

This exercise is designed to be fairly free-form, and you should not feel that you have to follow it too closely as long as you undertake the basic activities. The point of it is to gain some familiarity with a free (and open source) off-the-shelf tool that produces TEI XML for one specific purpose.

We've provided you with the IMT on your USB key, but it can also be downloaded from: http://www.tapor.uvic.ca/~mholmes/image_markup/download.php.

2. First steps

  1. Load the IMT: When it starts you should see two windows, the IMT itself and its 'annotation window'. Arrange these on the screen by resizing them as you desire.
  2. Load an Image: To load an image go to File / Load an image or press Control + l or the appropriate toolbar button. Note that there is a difference between loading an image and loading a project. From your Work folder, load the image file called 147_15.jpg. This is a page from Punch magazine.
  3. Scale the image: The image will have loaded at 100% zoom. This is likely to be an annoying way to view the image. Using the dropdown combo box on the left-hand side of the toolbar, scale the image to a size appropriate for your monitor. Perhaps try 25% but adjust it until your are able to see it comfortably.
  4. Give the whole project a title in the Title textbox just under the toolbar. Perhaps something like Page 15, of the July 1, 1914, issue of "Punch, or the London Charivari" might be appropriate.

3. Create some annotation categories

You should create some annotation categories before you start annotating your image. To do this select Categories / Add a new category from the menu or select the appropriate toolbar button. I would suggest you might want to add three categories for now:
Structural
A category to mark the locations of major structural elements
Interpretative
A category to mark locations with annotated interpretations
Textual
A category to mark the locations and /or provide transcriptions of distinct textual elements
For each of these, you will want to make the ID something sensible sounding, fill in the description, and choose a different colour from the dropdown menu. Using the default rectangular shape is probably best.

4. Add some annotation areas

  1. After you've made some annotation categories, you should make some annotations in them. Do this by selecting Annotations / New annotation from the menu or the appropriate toolbar button.
  2. For each annotation move the box which appears in the centre of the image to the appropriate position and resize it to fit around the portion of the image that you are annotating.
  3. Using the 'Structural' category, create an annotation area that surrounds the header area of the page (containing the date, journal title, and page number). Give this annotation a title, perhaps Page Header and put a short description of this area in between the paragraph tags in the Annotation text box.
  4. Provide similar annotations in the structural category for:
    • the printed page as a whole
    • the section containing the cartoon
    • the main textual section
    • any other structural components you feel inclined to mark

Note: Your annotation areas can overlap! And to help in displaying them you can control which areas are being displayed. You may wish to experiment with this before you add too many more annotation areas.

5. Look at what you've done!

  1. Save your file! Select File / Save from the menu to save your file. We suggest a filename like p15-imt.xml.
  2. Open this file in oXygen and examine it.
  3. Note the metadata in the <teiHeader>, specifically the use of the <rendition> elements, and the <appInfo> element.
  4. Scroll down further and see how the <facsimile> element has been used.
  5. Scroll even further down and see some <div> elements which contain the content of the annotations you have made.

6. Add more annotations

Add some more annotations, this time using the 'Interpretative' annotation category to say what you think about various sections of the page image. For example, you may wish to:
  • describe the individuals in the two cartoon panels
  • explain some of the items in the Militants' Tariff table
  • say what you really think about the themes of the Love's Logic poem
  • provide your own interpretations as to possible meanings of the two text boxes in the cartoon
Add at least a few annotations in this category before moving on to the next section.

7. Re-examine what you've done!

Save your file and re-examine the resulting XML file to see how the new annotations have been added in. The more annotations you add, the more <div> elements there will be in the body section and <zone> elements in the facsimile section.

8. Generate a Web View

Now that you've added a number of annotations, it might be nice to see them in a rendered format.
  1. After saving your file again, select File / Create Web view from the menu
  2. Choose a name for your html file, perhaps p15-imt.html
  3. Open this file in a web browser and have a play. Specifically note that:
    1. the different sections of the image are highlighted in your chosen colour when you hover over them
    2. when you click on them once your annotation appears
    3. when you double-click on an annotated section, a larger version of it appears (single-click again to remove)
    4. you can navigate via the 'Annotations' box, and your annotations appear as you click on different items in the list
  4. You may also wish to look at the other files you have created in this folder. If you named your file p15-imt.html then you should at least have the following files:
    p15-imt.css
    A Cascading Style Sheet for displaying the web view
    p15-imt.html
    The HTML file for your web view
    p15-imt.js
    The javascript code used in displaying the web view
    p15-imt_wv.xml
    A copy of the XML project file containing your annotations
    p15-imt_wv.xsl
    The XSLT stylesheet used to transform the XML above into the HTML above
    p15-imt_wv_147_15.jpg
    A shrunk down JPEG version of your image for display in the web view
    p15-imt_wv_zoom_147_15.jpg
    The full-sized JPEG version of your image for zooming display in the web view
IMT web view is designed as an example transformation. One can take the XML, javavscript, CSS and XSLT and further customise them directly to create a web interface to your image(s) that blends in with your website.

9. Add a textual transcription

If you were using the IMT for real, to create a multi-page annotated edition, you might cut-and-paste the IMT markup into your existing XML file. That is really outside the scope of this exercise.

However, if you want, you can easily do the reverse:
  1. add an annotation area using the 'Textual' annotation category around the poem "Love's Logic"
  2. open a copy of 1914-07-01.xml in oXygen
  3. find the transcribed text of the poem (try searching for 'LOGIC') and copy-and-paste the entire <div type='verse'> into the annotation text box, replacing the paragraph that was there. Save the annotation.

10. Re-examine what you've done, again!

Save your project file again, as above, open up the p15-imt.xml file in oXygen and see how the poem you pasted in has been recorded in the file.

11. Re-Generate a 'Web View'

Regenerated the 'web view' as above, reload the file in your web browser, and select the annotation you have just created to see the affect this has.

12. Further work

Other things you may wish to explore or think about if you have time, or at a later date, include:
  1. How do you delete an annotation?
  2. How do you move an annotation from one category to another?
  3. What happens to annotations when you delete their category?
  4. What happens to annotations when you import a different resolution image of the same page?
  5. What sections of a saved IMT XML file do you need to cut and paste into your exist TEI XML file to have that file work with IMT?
  6. How many annotations are too many to be useful for one category? How many categories are too many to be useful for one image?
  7. IMT can be run entirely off a usb flash key ... how might that be useful?
  8. How can you create thumbnail images of all or part of the image with IMT? Why might you want to?
  9. How does the IMT schema differ from the full tei_all schema?
  10. How could you use IMT with your materials?


TEI@Oxford. Date: 2010-07
Copyright University of Oxford