Developing Plugins

The plugin mechanism allows you to modify and extend Annotorious in all sorts of ways. The mechanism 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.

• ...

Hello World Plugin

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>');
}

Bold 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 bold.