JavaScript API

JavaScript API

Annotorious provides a JavaScript API you can use to get, add or remove annotations, and hook into the Annotorious event lifecycle. All functionality is exposed via the global anno object. The anno object has the following methods

• anno.addAnnotation(annotation)
• anno.addHandler(type, handler)
• anno.addPlugin(pluginName, opt_config_options)
• anno.getAnnotations(opt_image_src)
• anno.makeAnnotatable(item)
• anno.removeAnnotation(annotation)

anno.addAnnotation(annotation)

Adds an annotation. Create your annotation as an object literal, according to the following example:

var myAnnotation = {
  /** The URL of the image where the annotation should go **/
  src : 'http://www.example.com/myimage.jpg',
 
  /** The annotation text **/
  text : 'My annotation',
 
  /** The annotation shape **/
  shape : {
    /** The shape type **/
    type : 'Rectangle',
   
    /** The shape geometry **/
    geometry : { x : 10, y: 10, width : 40, height: 60 }
 }

anno.addHandler(type, handler)

Adds an event handler function. Code example:

// Logs newly-created annotations to the console
anno.addHandler('onAnnotationCreated', function(annotation) {
  console.log(annotation.text);
});

Annotorious issues the following events:

• onMouseOverItem(event) - fired when the mouse enters an annotatable item
• onMouseOutOfItem(event) - fired when the mouse leaves an annotatable item
• onMouseOverAnnotation(event) - fired when the mouse enters an annotation
• onMouseOutOfAnnotation(event) - fired when the mouse leaves an annotation
• onSelectionStarted(event) - fired when the user starts a selection
• onSelectionCanceled(event) - fired when the user cancels a selection (not available on all selection tools)
• onSelectionCompleted(event) - fired when the user completes a selection
• onSelectionChanged(event) - fired when the user changed a selection
• beforePopupHide(popup) - fired just before the annotation info popup window hides
• onAnnotationRemoved(annotation) - fired when an annotation is removed from an imgae
• onAnnotationCreated(annotation) - fired when an annotation was created

anno.addPlugin(pluginName, opt_config_options)

TODO

anno.getAnnotations(opt_image_src)

Returns the current annotations. opt_image_src is optional. If omitted, the method call will return all annotations, on all annotatable elements on the page. If set to a specific image URL, only the annotations on that image will be returned.

anno.makeAnnotatable(item)

TODO

anno.removeAnnotation(annotation)

Removes an annotation from the page.