8 Making OpenSeadragon Plugins

Shyamkumar Yadav edited this page 2021-12-25 20:31:53 +05:30

We don't have a formal plugin architecture (though we're open to suggestions on that front). Basically you just create a new JS file that's intended to be loaded after openseadragon.js, and which patches OpenSeadragon in some way or another to enable your functionality.

Once you have created your plugin, you can add it to our directory by making a pull request on this file: https://github.com/openseadragon/site-build/blob/master/www/index.html

Tips:

• OpenSeadragon is the namespace for all OpenSeadragon properties, classes, and methods. Adding a new top level function could be as simple as OpenSeadragon.myFunc = function() { ... }.
• If you want to add methods to any of OpenSeadragon's classes, add it to the class's prototype, such as OpenSeadragon.Viewer.prototype.myFunc = function() { ... }.
• Minimize your plugin's footprint: instead of adding a bunch of new methods, just add a single multi-purpose method. That way you're less likely to collide with other plugins, and it'll be easier for developers to keep track of what belongs to your plugin.
• Use an "options" object in your method to keep things flexible.
• Perhaps we should have a convention that the plugin file be prefixed with openseadragon-, like openseadragon-scalebar.js.

Example:

(function($) {
  $.myPlugin = function(options) {
    options = options || {};
    if (options.foo) {
      ...
    }
  };
})(OpenSeadragon);

For reference, you can check out https://github.com/usnistgov/OpenSeadragonScalebar as an example plugin, or any of the other plugins at http://openseadragon.github.io/#plugins.