Overview

mirador-annotations is a Mirador 3 plugin that adds annotation creation tools.

https://github.com/ProjectMirador/mirador-annotations

This time, I tried combining it with the following SimpleAnnotationServer, and this is a memorandum of the process.

https://github.com/glenrobson/SimpleAnnotationServer

Preparing SimpleAnnotationServer

Follow the Getting Started guide below.

https://github.com/glenrobson/SimpleAnnotationServer#getting-started

When you access http://localhost:8888/index.html, the following screen is displayed.

The endpoint appears to be http://localhost:8888/annotation/, which displays a list of registered annotations (initially empty).

This endpoint will be used from Mirador 3.

Preparing Mirador 3

From Source Code

Clone and launch the source code from the following site.

https://github.com/ProjectMirador/mirador-annotations

git clone https://github.com/ProjectMirador/mirador-annotations
cd mirador-annotations
npm i # npm i --force が必要かもしれません
npm run start

When you access http://localhost:3000/, the following screen is displayed.

Configuring the Adapter

In demo/src/index.js, import SimpleAnnotationServerV2Adapter and specify the previously launched SimpleAnnotationServer as the endpoint (here, endpointUrlV2).

import mirador from 'mirador/dist/es/src/index';
import annotationPlugins from '../../src';
import LocalStorageAdapter from '../../src/LocalStorageAdapter';
import AnnototAdapter from '../../src/AnnototAdapter';

// 以下を追加
import SimpleAnnotationServerV2Adapter from '../../src/SimpleAnnotationServerV2Adapter';

const endpointUrl = 'http://127.0.0.1:3000/annotations';

// 以下を追加
const endpointUrlV2 = 'http://0.0.0.0:8888/annotation';

const config = {
  annotation: {
    // 以下をコメントアウト
    // adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
    // adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl),
    // 以下を追加
    adapter: (canvasId) => new SimpleAnnotationServerV2Adapter(canvasId, endpointUrlV2),
    exportLocalStorageAnnotations: false, // display annotation JSON export button
  },
  id: 'demo',
  window: {
    defaultSideBarPanel: 'annotations',
    sideBarOpenByDefault: true,
  },
  windows: [{
    loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
  }],
};

mirador.viewer(config, [...annotationPlugins]);

Modifying the Adapter

As noted in the following pull request, a partial modification to the adapter is required.

https://github.com/ProjectMirador/mirador-annotations/pull/55

In createV2Anno, it was necessary to remove .id from the part that specifies the Canvas URI.

...
/** Creates a V2 annotation from a V3 annotation */
  static createV2Anno(v3anno) {
    const v2anno = {
      '@context': 'http://iiif.io/api/presentation/2/context.json',
      '@type': 'oa:Annotation',
      motivation: 'oa:commenting',
      on: {
        '@type': 'oa:SpecificResource',
        full: v3anno.target.source, // .id, // ここを修正
      },
    };
    // copy id if it is SAS-generated
    ...
    return v2anno;
  }
  ...

Result

Annotations were registered as shown below.

They were also registered in SimpleAnnotationServer as follows:

{
     "@id": "http://0.0.0.0:8888/annotation/1692317172799",
     "@type": "oa:Annotation",
     "dcterms:created": "2023-08-18T09:06:12",
     "dcterms:modified": "2023-08-18T09:06:12",
     "resource": [
       {
         "@type": "dctypes:Text",
         "http://dev.llgc.org.uk/sas/full_text": "中村覚",
         "format": "text/html",
         "chars": "<p>中村覚</p>"
       }
     ],
     "on": [
       {
         "@type": "oa:SpecificResource",
         "within": {
           "@id": "https://iiif.harvardartmuseums.org/manifests/object/299843",
           "@type": "sc:Manifest"
         },
         "selector": {
           "@type": "oa:Choice",
           "default": {
             "@type": "oa:FragmentSelector",
             "value": "xywh=837,1705,382,343"
           },
           "item": {
             "@type": "oa:SvgSelector",
             "value": "<svg xmlns='http://www.w3.org/2000/svg'><path xmlns=\"http://www.w3.org/2000/svg\" d=\"M836.6688,1704.92666h190.98836v0h190.98836v171.69267v171.69267h-190.98836h-190.98836v-171.69267z\" data-paper-data=\"{"strokeWidth":1,"rotation":0,"deleteIcon":null,"rotationIcon":null,"group":null,"editable":true,"annotation":null}\" id=\"rectangle_21042e1d-1663-4d00-b5f0-2fa6437fc8fb\" fill-opacity=\"0.00001\" fill=\"#00bfff\" fill-rule=\"nonzero\" stroke=\"#00bfff\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"/></svg>"
           }
         },
         "full": "https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174896"
       }
     ],
     "motivation": [
       "oa:commenting"
     ],
     "@context": "http://iiif.io/api/presentation/2/context.json"
   }

The above results could be retrieved by specifying the Canvas URI as follows:

http://0.0.0.0:8888/annotation/search?uri=https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174896

The endpoint documentation was available at: https://github.com/glenrobson/SimpleAnnotationServer/blob/master/doc/Endpoints.md

Summary

I tried the mirador-annotations plugin and SimpleAnnotationServer with Mirador 3. I hope this serves as a useful reference.