add support for images

[balmas]

add support for images

[balmas]

Basic Design for Images.

Minimum Requirements:

• update annotation creation form to allow specification of one or more IIIF Manifests for images associated with the Milliet Number
• for each IIIF manifest, create an Open Annotation which references the IIIF manifest URI as the body of the annotation and the URI of the Digital Digital Milliet Commentary Item as its target
• Add the Mirador viewer to the Digital Milliet UI and have it pull in the IIIF manifests to present a view of th images along side the commentary and text
• implement an annotator store adaptor ( javascript extension of endpoint.js per https://github.com/ProjectMirador/mirador/wiki/Configuring-Annotations-in-Mirador) for the DM application
• implement corresponding routes in the DM application for CRUD of annotations on IIIF images - store them in the same db as the rest of the DM annotations. As saved by Mirador, these annotations should reference the URIs of the IIIF manifests associated with a DM commentary and thus be linked to the rest of the annotations for a DM item

Nice to have:

• add searching of image annotations to the basic search functionality offered on the DM home page
• or implement #40

[balmas]

Example IIIF Manifest:

{
  "@context": "http:\/\/iiif.io\/api\/presentation\/2\/context.json",
  "@id": "http:\/\/iiif.biblissima.fr\/manifests\/ark:\/12148\/btv1b8304485j\/manifest.json",
  "@type": "sc:Manifest",
  "label": "Livre des Morts de Soutym\u00c3\u00a8s. Egyptien 42",
  "metadata": [
    {
      "label": "Repository",
      "value": "Biblioth\u00c3\u00a8que nationale de France"
    },
    {
      "label": "Shelfmark",
      "value": "Egyptien 42"
    },
    {
      "label": "Title",
      "value": "Livre des Morts de Soutym\u00c3\u00a8s. Egyptien 42"
    },
    {
      "label": "Date",
      "value": "19e dynastie (1295-1188 av. J-C)."
    },
    {
      "label": "Format",
      "value": "Le bandeau de vignettes dispara\u00c3\u00aet. Les douze premi\u00c3\u00a8res colonnes encadrent une repr\u00c3\u00a9sentation du d\u00c3\u00a9funt et de sa femme. Le reste du fragment met en sc\u00c3\u00a8ne le texte entre deux vantaux. - 355 x 1100 mm"
    },
    {
      "label": "Provider",
      "value": "Biblioth\u00c3\u00a8que nationale de France"
    },
    {
      "label": "Disseminator",
      "value": "Biblissima"
    },
    {
      "label": "Source Images",
      "value": "http:\/\/gallica.bnf.fr\/ark:\/12148\/btv1b8304485j"
    }
  ],
  "sequences": [
    {
      "@id": "http:\/\/gallica.bnf.fr\/iiif\/ark:\/12148\/btv1b8304485j\/sequence\/normal",
      "@type": "sc:Sequence",
      "label": "Normal",
      "canvases": [
        {
          "@id": "http:\/\/gallica.bnf.fr\/iiif\/ark:\/12148\/btv1b8304485j\/canvas\/f1",
          "@type": "sc:Canvas",
          "label": "NP",
          "width": 9114,
          "height": 4039,
          "images": [
            {
              "@type": "oa:Annotation",
              "motivation": "sc:painting",
              "resource": {
                "@id": "http:\/\/gallica.bnf.fr\/ark:\/12148\/btv1b8304485j\/f1.highres",
                "format": "image\/jpg",
                "@type": "dctypes:Image",
                "service": {
                  "@context": "http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/context.json",
                  "profile": "http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/compliance.html#level2",
                  "@id": "http:\/\/gallica.bnf.fr\/iiif\/ark:\/12148\/btv1b8304485j\/f1"
                },
                "width": 9114,
                "height": 4039
              },
              "on": "http:\/\/gallica.bnf.fr\/iiif\/ark:\/12148\/btv1b8304485j\/canvas\/f1"
            }
          ]
        }
      ]
    }
  ],
  "description": "Livre des Morts de Soutym\u00c3\u00a8s. Egyptien 42",
  "attribution": "BnF - public domain",
  "thumbnail": {
    "@id": "http:\/\/gallica.bnf.fr\/iiif\/ark:\/12148\/btv1b8304485j\/f1\/full\/,150\/0\/native.jpg",
    "service": {
      "@context": "http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/context.json",
      "profile": "http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/compliance.html#level2",
      "@id": "http:\/\/gallica.bnf.fr\/iiif\/ark:\/12148\/btv1b8304485j\/f1"
    }
  },
  "logo": "http:\/\/static.biblissima.fr\/images\/bnf-logo.jpg",
  "license": "https:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/",
  "related": "http:\/\/gallica.bnf.fr\/ark:\/12148\/btv1b8304485j",
  "seeAlso": {
    "@id": "http:\/\/oai.bnf.fr\/oai2\/OAIHandler?verb=GetRecord&metadataPrefix=oai_dc&identifier=oai:bnf.fr:gallica\/ark:\/12148\/btv1b8304485j",
    "format": "application\/xml"
  },
  "viewingHint": "paged"
}

[balmas]

Example IIF Annotation

{
    "@context":"http://iiif.io/api/presentation/2/context.json",
    "@id":"http://perseids.org/iiif/annotationuuid1",
    "@type":"sc:AnnotationList",
    "resources":[
        {
            "@type":"oa:Annotation",
            "motivation":"sc:painting",
            "on":"http:\/\/gallica.bnf.fr\/iiif\/ark:\/12148\/btv1b8304485j\/canvas\/f1#xywh=0,1595,0,0893,0,1002,0",
            "resource":{
                "@type":"cnt:ContentAsText",
                "chars":"some annotation text",
                "format":"text/plain"
            }
        }
    ]
}

[balmas]

Design details for requirements 1 and 2:

• update annotation creation form to allow specification of one or more IIIF Manifests for images associated with the Milliet Number
• for each IIIF manifest, create an Open Annotation which references the IIIF manifest URI as the body of the annotation and the URI of the Digital Digital Milliet Commentary Item as its target

form to be updated: https://github.com/perseids-project/digital_milliet/blob/phase2/digital_milliet/templates/commentary/enter.html

Minimum requirements:

• Add a input element for the user to specify the URL of one or more IIIF manifests. E.g. http://iiif.biblissima.fr/manifests/ark:/12148/btv1b8304485j/manifest.json
• Update the make_annotation method of parser.py to populate the images array of the annotation record set with annotations which reference the IIIF image canvases by their URLs. This code would look something like:

 dict([
              ("@context", "http://www.w3.org/ns/oa-context-20130208.json"),
              ("@id", self.uid()),
              ("@type", "oa:Annotation"),
              ("annotatedAt", str(date)),
              ("hasBody", [ iiif_manifest_uris ] ),
              ("hasTarget", self.make_uri(milnum,'c1')),
              ("motivatedBy", "oa:linking")
              ])

Stretch requirements:

• add the mirador viewer on the input form, so that user can see the image in place at the time they create the annotation.

[balmas]

Design details for requirement #3:

Add the Mirador viewer to the Digital Milliet UI and have it pull in the IIIF manifests to present a view of th images along side the commentary and text

• Update get_it function of parser.py to add the IIIF manifests from the images annotation body into the dict passed to the view
  https://github.com/perseids-project/digital_milliet/blob/phase2/digital_milliet/lib/parser.py#L239
• Add the mirador viewer to the commentary.html template
  https://github.com/perseids-project/digital_milliet/blob/phase2/digital_milliet/templates/commentary/commentary.html. The code will look something like this:

<div id="viewer"></div>
  
  <script src="mirador/mirador.js"></script> 
  <script type="text/javascript">
    $(function() {

      Mirador({
        "id": "viewer",
        "mainMenuSettings" : {
          'show' : false
        },
        "data": [
          { "manifestUri": "http://uriofthemanifest/manifest.json, "location":"location of the manifest"},
            ],
            "windowObjects": [
              {
                "loadedManifest": "http://uriofthemanifest/manifest.json",
                "layoutOptions": {
                  "close": false,
                  "slotRight": false,
                  "slotLeft": false,
                  "slotAbove": false,
                  "slotBelow": false
                }
              }
            ]
      });

    });
  </script>

[balmas]

Design for requirements #4 and 5:

• implement an annotator store adaptor ( javascript extension of endpoint.js per https://github.com/ProjectMirador/mirador/wiki/Configuring-Annotations-in-Mirador) for the DM application

See example code at
https://github.com/ProjectMirador/mirador/blob/master/js/src/annotations/localStorageEndpoint.js
and
https://github.com/ProjectMirador/mirador/blob/master/js/src/annotations/catchEndpoint.js

Likely will require very little adaptation of the catchEndpoint.js, possibly for making sure the OAuth token gets sent properly to the back-end. This should in theory be handled automatically by the browser session cookies.

• implement corresponding routes in the DM application for CRUD of annotations on IIIF images - store them in the same db as the rest of the DM annotations. As saved by Mirador, these annotations should reference the URIs of the IIIF manifests associated with a DM commentary and thus be linked to the rest of the annotations for a DM item

this will mean implementing 4 new routes for the views.py, each one protected by, the @OAuthHelper.oauth_required decorator.

the create route will take the JSON produced by mirador and issue a self.mongo.db.annotation.insert statement to insert it into the database

the update route will need to parse the annotation id from the JSON produced by mirador and issue self.mongo.db.annotation.find_one to find it and self.mongo.db.annotation.update to update, handling errors if the annotation to be updated can't be found

the delete route will need to parse the annotation id from the JSON produced by mirador and issue self.mongo.db.annotation.find_one to find it and self.mongo.db.annotation.dete to delete handling errors if the annotation to be deleted can't be found

the search route will search the mongo database for annotations which reference the uri of the canvas as their target and return them.

[balmas]

Stretch requirement : searching image annotations on DM home page

If implemented directly via mongo, it would mean searching the image annotations for user-supplied text (searching the chars field, and whatever field tags go into) and then developing a view which gave the user a list of the matching images to choose from. Choosing an image should probably bring the user to the fully commentary display for the corresponding milliet number, so it might require a second search through the db to pull up the annotations which referenced the image, unless that was folded into the first..

[balmas]

For development and testing I'd like us to just use this image which I've uploaded in a free account on to the iiifhosting site:

http://free.iiifhosting.com/iiif/2ce9baa6bfa77047c690cfd31028685c8d29802766a44cddd39975440cab9b8/info.json

Our scope doesn't really include hosting images and I'd like to avoid needing to run an image server if I can help it.

(This image is from the set identified by Valerie and is available CC-BY-SA.)

[PonteIneptique]

Potential Requirements forgotten by @balmas

• Record a default image to load (with its manifest)
• Register a label for each manifest (Location of the manifest)
• Ask for type of manifest so that we show a gallery OR an Image

[balmas]

moving last requirement added by @PonteIneptique to a separate issue. Not sure we'll do now.