# Day 2 - Applying IIIF, Thinking About The Real Thing ## ### 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: ![](/files/-LjRXedSwWQx509wsqLN) 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: ![](/files/-LjRYIrXdtBQ3B5NReI2) While that is a lovely page, it would be even better if you had a comparison set up in advance like this: ![](/files/-LjRYicYVAwe02r2YWoH) 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: ![](/files/-LjRZCQ5yfBu2yc0wVyN) 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!): ![](/files/-LjReObZFHCXFB_51Lmr) 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 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: #### Annotations Step 2: Linking Text to Regions of Interest 1. View 2. Structure of an Annotation List (see ) 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 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 ![](/files/-LjIQ0ZiZ5iZzfqZq00t) 6\. Now we're going to look the Application tab and the local storage information
![](/files/-LjIR-xwXvbGAs73fb04) 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: ![](/files/-LjIdbcqdCvchRxZn_5D) 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 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 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 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: 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: #### The IIIF Annotation Studio (desktop) Another option is to run a desktop version of Mirador with annotation storage bundled in: ### Section 4: Applying IIIF to your Projects You’ve got projects, you’ve got IIIF and Mirador… GO! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://benjamin-albritton.gitbook.io/interoperability-and-medieval-manuscripts/day-2-applying-iiif-thinking-about-the-real-thing.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.