[annotator-dev] Image annotation

Simon Rainer Rainer.Simon at ait.ac.at
Sun Oct 12 18:21:40 UTC 2014

Hi Randall,

sounds good - and it seems pretty much similar to how Annotorious works internally, too. Creating a new annotation is separated from display of existing ones. The former is handled in something called a "selector" - so that could be turned into the ImageSelector you are talking about. The latter is handled in a component called "viewer" in Annotorious terminology; that would be the highlighter. The viewer/highlighter has Create/Update/Delete methods, just like you describe below. The selector emits "onCreated", "onUpdated"-like events that can be subscribed to. 

The only tighter coupling between the two is that the selector also includes the code for rendering a single shape to the Canvas context. The reason for this is that I wanted to keep the selectors pluggable themselves. So new selectors would allow people to draw new types of shapes that the Annotorious core wouldn't need to know about; and the selector plugin would just ship the drawing code for both the selecting and the highlighting. (Although to be fair, there is currently only one official selector - which is the Rectangle selector. A polygon and a freehand selector exist only as "experimental".)


Von: annotator-dev [annotator-dev-bounces at lists.okfn.org]" im Auftrag von "Nick Stenning [nick at whiteink.com]
Gesendet: Sonntag, 12. Oktober 2014 19:50
An: annotator-dev at lists.okfn.org
Betreff: Re: [annotator-dev] Image annotation

On Sun, Oct 12, 2014, at 18:22, Randall Leeds wrote:
> Another potentially useful direction to go would be to separate the steps
> of identifying and highlighting the anchors. It should be possible to use
> the selector implementation to get the image element and bounding box
> information. With OS integration that'd probably be adjusted for zoom and
> pan.

Randall is bang on in regard to how this works in Annotator 2.0.

Selecting an area for annotation and drawing a loaded annotation are
entirely decoupled from one another. The first part is handled by a
piece of the UI called TextSelector:


To create a TextSelector, you give it a bounding element within which it
should respond to selections, and a callback to call when a selection is

    var ts = new TextSelector(document.body, {
        onSelection: function (ranges, event) { ... }

I would imagine an image selector being very similar in API.

The Highlighter is a completely separate component, which is given an
element within which to search for and draw highlights, and exposes an
API of draw/undraw/redraw (for create/delete/update respectively) as
well as a "drawAll" method for bulk load:


There is also a plugin which sets up a highlighter to respond to the
appropriate annotation lifecycle hooks:


But in the default instantiation of Annotator the DefaultUI plugin is
used, which hooks up the TextSelector and Highlighter in the following


It should be possible to build an ImageSelector and ImageHighlighter (or
similar) components that work in much the same way, and which can be
configured to trigger the same adder, editor, and viewer as the rest of

annotator-dev mailing list
annotator-dev at lists.okfn.org
Unsubscribe: https://lists.okfn.org/mailman/options/annotator-dev

More information about the annotator-dev mailing list