Overview
I created a Custom OpenSeaDragon Viewer intended for use in TEI viewers.
Background
In developing a viewer that links TEI and IIIF as shown below, a viewer with the following capabilities was needed.
https://www.hi.u-tokyo.ac.jp/collection/digitalgallery/wakozukan/tei/
- Ability to load IIIF manifest files.
- Ability to track page navigation within the viewer component from outside the component.
- Ability to highlight partial regions of images.
Since I could not find an existing IIIF-compatible viewer that met all of the above requirements, I attempted to develop a custom viewer. I also tried publishing it as an npm package.
Developed Viewer
The documentation is still insufficient, but it is published on the following page. Links to the source code are also provided on this page.
https://www.npmjs.com/package/@nakamura196/osd-custom-viewer
For developing the component with Vue 3 and Vite and publishing it on npm, I referred to the following site.
https://blog.egmond.dev/vue-component-to-npm-package
Usage Example
You can see an example on the following page.
https://nakamura196.github.io/nuxt3-iiif-viewer/custom-osd
Page navigation is possible from both inside and outside the component. This allows, for example, parallel display of IIIF images and TEI text, enabling page navigation from the TEI text side or scrolling to the corresponding text when navigating through images.
By using the highlight feature, it is possible to highlight partial regions of images that correspond to specific text lines.
The source code for the usage example is as follows.
https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/custom-osd/index.vue
For SSR deployment, the following was added to the plugins folder.
https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/plugins/custom-osd.client.js
Summary
Many TODOs remain, such as improving documentation and supporting IIIF v3, but we hope this is helpful.