Day 2 - Applying IIIF, Thinking About The Real Thing

The workshop begins with a hands-on session with manuscripts from the Beinecke collection before moving into hands-on work with using local images, annotation, and applying IIIF to projects.

Section 1: Book, Facsimile, Image

  1. Everybody gets a manuscript!

    1. Compare manuscript to facsimile

    2. Compare manuscript & facsimile to current Yale environment

    3. What do you see in your physical manuscript that can't be experienced in the digital?

    4. Conversely, what does the digital enable that is difficult with the physical object?

Section 2: Configuring Mirador to tell a Story

We're going to work from the Mirador downloads we edited yesterday. If you remember, you opened the example.html file in your text editor in order to update which manuscripts were pre-loaded in your Mirador instance. Today, we're going to configure Mirador to start with a side-by-side comparison.

First: We're going to make a copy our example.html file. We can do this by saving example.html as comparison.html , for instance.

Now, working in your text editor with comparison.html, we are going to edit a few lines in the configuration. As we start, you should see a part of the html that looks like this:

We want to first change the layout. In the example above, 1 x 1 means we have a single window when Mirador opens. Let's change that so that we have a side-by-side comparison by editing layout: "1x1" to layout: "1x2". Save your file, and open it in your browser. You should see something like this:

While that is a lovely page, it would be even better if you had a comparison set up in advance like this:

In order to do this, we have to add some additional code at the bottom of the html file. In your comparison.html file, somewhere around line 72, you should see something like this:

the windowObjects: [ ], section is what we're going to edit. In order to get the Chaucer example above, we'll edit that line so that it looks like this:

        "windowObjects": [
			{
			        	"loadedManifest": "http://dams.llgc.org.uk/iiif/2.0/4628556/manifest.json",
			        	"viewType" : "ImageView", 
			        	"canvasID": "http://dams.llgc.org.uk/iiif/2.0/4628556/canvas/4628571.json",
			        	"bottomPanel" : false
			        	//"sidePanel" : false,
			        	//"availableViews" : ['ThumbnailsView', 'ImageView', 'BookView']
			        	//"overlay" : false
			          },
		  	{
		  	        	"loadedManifest": "https://dms-data.stanford.edu/data/manifests/huntington/el26c9/manifest.json",
		  	        	"viewType" : "ImageView", 
		  	        	"canvasID": "https://dms-data.stanford.edu/data/manifests/huntington/el26c9/canvas/canvas-9",
		  	        	"bottomPanel" : false
		  	        	//"sidePanel" : false,
		  	        	//"availableViews" : ['ThumbnailsView', 'ImageView', 'BookView']
		  	        	//"overlay" : false
		  	          }
        ]

We're not quite done yet, because we have asked Mirador to open two manifests it doesn't know about yet - that is, the loadedManifest manifests are not in our general list of manifests for this Mirador instance. Let's add those in as well:

         data: [
           { "manifestUri": "https://dms-data.stanford.edu/data/manifests/huntington/el26c9/manifest.json", "location": "The Huntington Library"},
   		   { "manifestUri": "http://dams.llgc.org.uk/iiif/2.0/4628556/manifest.json", "location": "The National Library of Wales"},
		   { manifestUri: "https://iiif.lib.harvard.edu/manifests/drs:48309543", location: "Harvard University"},
           { manifestUri: "https://iiif.lib.harvard.edu/manifests/drs:5981093", location: "Harvard University"},
           { manifestUri: "https://iiif.lib.harvard.edu/manifests/via:olvwork576793", location: "Harvard University"},

Save your file, and let's look at it in the browser again, you *should* see this (if you don't, shout!):

You can experiment on your own with different aspects of configuration (try setting up a 3 or 4 object comparison, for instance, or compare pages from within the same manuscript).

Section 3: Annotations

To save annotations, you need to have an annotation server OR you need to be able to create static annotation lists and serve them (like you did with manifests).

Annotations Step 1: Understanding Regions of Interest

  1. Go to http://dms-data.stanford.edu/data/mirador_cropper/example.html

  2. Load an object into the Mirador instance

  3. Crop a region of interest

  4. Copy the crop URL and open in a new tab of your browser

  5. Note: Mirador can use plugins - this one was developed at the Bavarian State Library. Instructions for creating a Mirador instance with the cropper are here: https://github.com/dbmdz/mirador-plugins/tree/master/ImageCropper

Annotations Step 2: Linking Text to Regions of Interest

  1. View http://dms-data.stanford.edu/data/manifests/Stanford/kq131cs7229/list/text-f8r.json

  2. Structure of an Annotation List (see https://iiif.io/api/presentation/2.1/#annotation-list)

  3. To create a static Annotation List

    1. Let's all use the Chrome browser to make this a more uniform experience

    2. Let's start with https://projectmirador.org/demo/ again

    3. Load in a manuscript you want to work on

    4. Make a test annotation on an image from your manuscript

    5. Open the Chrome Developer Tools

6. Now we're going to look the Application tab and the local storage information

7. Each one of these annotations contains information about the region of interest, the text of the annotation, and the canvas to which the annotation belongs.

A template for a simple AnnotationList

{
"@context": "http://www.shared-canvas.org/ns/context.json",
"@id": "http://dms-data.stanford.edu/data/manifests/Stanford/kq131cs7229/list/text-f8r.json",
"@type": "sc:AnnotationList",
"resources": [
{
"@id": "_:N43deaea09a5345379218db8cb72600c3",
"@type": "oa:Annotation",
"motivation": "sc:painting",
"resource": {
"@id": "7377e5fe51c46454bb01b62a817a4d42",
"@type": "cnt:ContentAsText",
"format": "text/plain",
"chars": "Erant aut[em] qui manducaverant",
"language": "lat"
},
"on": "http://dms-data.stanford.edu/data/manifests/Stanford/kq131cs7229/canvas/canvas-3#xywh=600,450,1017,166"
}
]
}

In the list above, we have a container with an @id similar to the manifest we created yesterday. Within that container is a list of resources each of which is an annotation, like the one you saw in Mirador above. To manually create your annotation list, copy an annotation from Mirador and paste into the resources section, then update the @id to be the location where your file will live (again, just as we did with manifests yesterday).

The final step is to point to your annotation list from your manifest using the otherContent property as here:

While it is perfectly possible to create lots of annotations this way, it is certainly not a lot of fun or an efficient use of your time. Instead, it is preferable to use an annotation server.

Section 3: Annotation Servers

I'm going to be honest - this can be a bit of a pain. There are two approaches we will look at: the first is a SimpleAnnotationServer developed by Glen Robson, the IIIF Technical Director; the second is a suite of tools for annotation developed by Niqui O'Neill at North Carolina State University.

Installing the Simple Annotation Server

  1. Go to https://github.com/glenrobson/SimpleAnnotationServer/releases and download sas.zip

  2. Extract (unzip) sas.zip

  3. In your terminal, cd into the newly-created sas directory

  4. Run the SimpleAnnotation server by the following command:

    java -jar dependency/jetty-runner.jar simpleAnnotationStore.war

  5. Navigate to http://localhost:8080/index.html

  6. You should see an instance of Mirador

  7. Navigate to an item and make an annotation. Does it save? If not ask for help

Accessing your Annotations in the Simple Annotation Server

  1. Navigate to http://localhost:8080/annotation/

  2. You should see a long blob of JSON containing your annotations (NB: this will get longer and longer as you create more annotations)

  3. To see only the annotations on a specific canvas, you can limit by searching on the Canvas ID you're interested in as in this example: http://localhost:8080/annotation/search?uri=https://www.e-codices.unifr.ch/metadata/iiif/sl-0002/canvas/bke-0020_002r.json

  4. These can be copied into a AnnotationList using the template we looked at above, stored, and then added to a manifest.

  5. Glen has also provided a script to allow you to download pre-cooked Annotation Lists. More on that here. If we have time, we may cover this in the workshop.

Now you're getting fancy

If you have successfully created a bunch of annotations and want to

The NCSU Annotation Suite

If you are wanting to explore more in this vein, the NCSU Annotation Suite is a powerful set of tools for telling stories with your annotations. We may not have time to cover this in the workshop, but the tools and installation instructions can be found here: https://github.com/dnoneill/annotate

The IIIF Annotation Studio (desktop)

Another option is to run a desktop version of Mirador with annotation storage bundled in: https://github.com/atomotic/iiif-annotation-studio/releases

Section 4: Applying IIIF to your Projects

You’ve got projects, you’ve got IIIF and Mirador… GO!

PreviousDay 1 - Getting to know IIIF and MiradorNextDay 3 - Sharing with IIIF

Last updated