Developing Plugins

Plugins allow you to modify and extend Annotorious in all sorts of ways. The Plugin API is still under development. (Get in touch if you want to know more.) Through plugins, you will be able to do things such as:

• Modify or extend the annotation editor and mouseover-hover popup. (E.g. add UI components for creating and displaying tags, or integrate a text formatter to render markdown-formatted annotations.)

• Connect different storage backends. (E.g. differnent flavours of REST backends, or local storage in the browser.)

• Add additional selection tools, such as a freehand selection tool.

• ...

Example 1: Hello World

This short example is a plugin that adds a Hello World label to Annotorious' annotation popup bubble.

annotorious.plugin.HelloWorldPlugin = function(opt_config_options) { }

annotorious.plugin.HelloWorldPlugin.prototype.initPlugin = function(anno) {
  // Add initialization code here
}

annotorious.plugin.HelloWorldPlugin.prototype.onPopupInit = function(popup) {
  // A Field can be an HTML string or a function(annotation) that returns a string
  popup.addField('<em>Hello World</em>');
}

Example 2: The Italic Plugin

This short example shows how you can modify the contents of the original popup (instead of adding an additional field). The plugin will render the contents in italic font. (Just for the sake of the example. Obviously there's an easier way to do this via CSS...)