@annotation-studio/plugin-viewer

OSD or Static Image Viewer plugin

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@annotation-studio/plugin-viewer
1.0.0-rc.352 years ago5 years agoMinified + gzip package size for @annotation-studio/plugin-viewer in KB

Readme

Annotation Studio - Viewer plugin
This is the Open Seadragon or static image viewer component.

Usage

To use the plugin you need to add it as a dependency along with the core plugin:
$ npm i @annotation-studio/plugin-viewer @annotation-studio/plugin-core --save-dev

Then in your code (ES6 in this example)
```jsx harmony import CorePlugin from '@annotation-studio/plugin-core'; import ViewerPlugin from '@annotation-studio/plugin-viewer';
// We need the core plugin. const core = CorePlugin( document.getElementById('myContainer'), {
resourceTemplates: '...',
manifest: '...',
canvas: '...',
elucidateServer: '...',
} );
// We need to wait for the store to be available. core.then(store => { ViewerPlugin(
document.getElementById('viewer'),
{
  viewer: 'OpenSeadragon', // or StaticImageViewer
  // Actual size, will get re-sized.
  height: 6400,
  width: 4800,
},
store
); return store; });
Your HTML should also have a fallback image:
```html
<div id="viewer">
    <img src="..." height="480" width="640"/>
</div>