This tool allows you to generate TEI <zone> elements by drawing points on an image and link them to annotations. It is entirely browser-based (nothing is processed on the server). You can get the output as XML or JSON.
First of all, click the "browse button" and select an image from your computer.
Before you draw zones and add annotations, you can define fields to be added to each annotation. You need to create the fileds before you add annotations. It is impossible to add fields to existing annotations or edit their name. The "title" field is incorporated in the XML format and exported, other fields are exported only in JSON format.
To add a field, go to the "Fields" tab on the left. Click the add button. Once you create a field, you can edit its name.
You can sort annotations into categories. Different categories get displayed in different colours. By default, all annotations are assigned the "default" category and displayed in blue. To add your own categories, go the the "Categories" tab on the left. Use the colour picker at the bottom to select a colour and click the add button. You can edit the names and colours of categories any time using the input fields and colour pickers in the "Categories" tab.
Annotations provide a way of linking shapes to textual data such as words which appear in the manuscript, information about the picture etc. Each annotation has a "name" field, a category and a "title" field (unless you delete it in the "Fields" tab) plus any fields added manually. By deafault, each shape has a blank annotation assigned but you can also provide the annotations first and add shapes after that. To add a single annotation, click the add button in the "Annotations tab". If you want to add more annotations at once, you can use the text input field. Click the button at the top of the "Annotations" tab to display a small text area. Annotations can be loaded from plain text, XML or JSON.
If you input a stretch of plain text it will be split using a separator, which is initially set to "space" and can be edited in the field below the textarea. Unless you provide a custom separator, the text will be split into individual words and each word becomes a single annotation. (This is a good option if you have a transcription of a text from a manuscript and you want to annotate a lot of words.) Click to create annotations.
If you already have some data in the !!right XML format, you can load it. The Zoner is capable of reading data about annotations, zones and categories, it creates a list of annotations, categories and draws the shapes on the image. Click to create annotations.
JSON is a suitable option for restoring data if you want to continue working on an image. The zoner reads JSON generated previously by itself. Unlike XML, JSON can load also custom fields. Click to create annotations.
Each annotation is displayed as an editable input field on a separate line. Click the input field to "activate" the annotation and display additional buttons. If the annotation has a shape linked to it, it will be highlighted.
To create a shape on the canvas, place at least two points on the canvas and click the / button in the toolbar at the top. Rectangles are drawn by placing two points only.
To remove the points before drawing a shape, click . I you need to change the colour of the points, use the colour picker in the toolbar at the top. You can also zoom in and out using the zooming buttons . Your current zoom is displayed in the white box next to the buttons. The other white box dynamically displays the coordinates of your cursor.
If you click a shape in selection mode, you activate the relevant annotation as if you clicked the annotation in the left tab. Moreover, you can move the shapes using standard drag and drop.
To enter deletion mode, click . The button will remain black while deletion mode is active. When you hover over a shape in deletion mode, its border becomes red. Click the shape to delete it. Be careful, once you delete a shape, you cannot undo it. To exist delete mode, click again.
To enter edit mode, doubleclick the shape that you want to edit. The points defining the shape will re-appear on the canvas and the draw button will change to . Drag the points to move them and click the button to redraw the shape.
The output gets generated as you work. To display it, click in the top left conrner of the canvas. A box will appear in the centre of the screen and you can copy and paste the text. Output is available as XML or JSON. In XML, you can use the button to include or exclude annotations without shapes.
As mentioned previously, you can store the JSON or XML data generated by the Zoner and then re-loaded. Moreover, your work gets saved automatically as cookies in your browser. In order to be able to recover the data you need to use the same name of the annotated image. If you load an image for which you have some cookies stored the button will appear at the top of the "Annotations" tab (this can take several seconds). Click it to restore you data.
Cookies are not the preferred backup option, please do not rely too much on them. The functionality was included mainly in order to prevent data loss in case your browser crashes unexpectedly.
The tool uses raphael.js, highlight.js and jQuery, and owes a lot to the fine people of StackOverflow (in particular this question).
The original version (working with zones only) was written by Chris Sparks to act as a teaching resource during for a DEMM Digital Editing TEI training week
Please send comments or suggestions to @sparkyc84.
The source code of the original project is available to fork on GitHub. It is licensed under the MIT License, which means you can use modify and embed it within other projects so long as you retain the copyright notice and license text. I’d be interested to hear about any uses of the tool, and would be happy to incorporate any fixes or enhancements you might suggest.
Additional drawing functionalities, annotations and categories were added in 2019 by Marie Vaňková (Charles University, Prague). The current version uses the AngularJS framework. Source code is available on GitHub.