ProjectMirador / mirador-annotations

a Mirador 3 plugin that adds annotation creation tools to the user interface
https://mirador-annotations.netlify.app/
38 stars 37 forks source link

question: how to export/import regions and their annotations? #34

Closed SepidehAlassi closed 3 years ago

SepidehAlassi commented 3 years ago

@mejackreed This is more of a question than an issue.

I am using your great tool for our project, and I wonder

  1. how can we export the regions and their annotations? I see that the annotations are cached (stored in browser local storage), but that is not permanent. I want to export them for storage and postprocessing purposes.
  2. How can one read annotations and regions back into Mirador?

I would highly appreciate it if you answer the questions or point me to any documentation that I might have missed. Thanks in advance!

mejackreed commented 3 years ago

Hi @SepidehAlassi glad to hear about your use of the project.

how can we export the regions and their annotations?

mirador-annotations by default stores annotations in localStorage. This uses a configurable adapter to determine where these annotations are stored. See: https://github.com/ProjectMirador/mirador-annotations/blob/master/demo/src/index.js#L10-L11

You can configure mirador-annotations to use an alternative adapter if you wish which can enable storage elsewhere.

If you just want to export the annotations from localStorage, you should be able to export them (keyed by canvasId) by running the following in your browser console on the give page

localStorage

More information about adapters here: https://github.com/ProjectMirador/mirador-annotations#persisting-annotations

How can one read annotations and regions back into Mirador?

If annotations are created outside of Mirador you can add them back to the Mirador redux display by using the receiveAnnotations actions. See https://github.com/ProjectMirador/mirador-annotations/search?q=receiveAnnotation for some usage in this project. Or here is an example of another project that uses this concept: https://github.com/mejackreed/mirador-tf/blob/master/TensorFlowTool.js#L63-L89

SepidehAlassi commented 3 years ago

@mejackreed Thank you very much for your reply.

regarding the export: I believe, for each annotation, I should be able to export the coordinates of its region as well, is that right?

mejackreed commented 3 years ago

Yes, the export looks like this:

{
  "id": "localStorage://?canvasId=https://purl.stanford.edu/hg676jb4964/iiif/canvas/hg676jb4964_1",
  "items": [
    {
      "body": {
        "type": "TextualBody",
        "value": "<p>test23</p>"
      },
      "id": "d4110824-4aee-4c02-aec6-fbf2abe79d03",
      "motivation": "commenting",
      "target": {
        "source": "https://purl.stanford.edu/hg676jb4964/iiif/canvas/hg676jb4964_1",
        "selector": [
          {
            "type": "FragmentSelector",
            "value": "xywh=2099,254,1285,509"
          },
          {
            "type": "SvgSelector",
            "value": "<svg xmlns='http://www.w3.org/2000/svg'><path xmlns=\"http://www.w3.org/2000/svg\" d=\"M2099.90939,763.78712v-509.42795h1285.41703v509.42795z\" data-paper-data=\"{&quot;state&quot;:null}\" fill=\"none\" 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>"
          }
        ]
      },
      "type": "Annotation"
    }
  ],
  "type": "AnnotationPage"
}

And the FragmentSelector contains the bounding xywh coordinates on the canvas.

SepidehAlassi commented 3 years ago

@mejackreed excellent, thank you very much for the detailed response. I close this issue now, and will get back to you if I had further questions :0)