Montalk 04.09.17: IIIF

<h2 style="position: absolute; bottom: 10px;"><img src="images/CCeH.png" height="40px"/> Montalk, 4th September 2017</h2>
<p style="position: absolute; bottom: 10px; padding: 15px 0px;">Tiziana Mancinelli, Peter Dängeli</p>

???

notes go below three question marks...

---
name: Structure

## Structure of the talk

.itemize[
1. [Short general introduction to IIIF (PD)](#IIIF-1)
1. [The Francesco da Barberino MS, a current use case at the CCeH (TM)](#Barberino)
1. [Potential for projects at the CCeH](#CCeH)
]

???

* principles, not specifics

---
name: IIIF-1
background-size: contain;
background-image: url(images/silos.png)

## <img style="max-height: 50px;" src="images/IIIF-logo.png" alt="IIIF Logo"> The problem

Does this look familiar?

???

* Everyone does their own thing, even if they are nearly the same thing.
* Everyone has rules and nobody understands them.
* Large, zoomable images require fairly complicated technology stacks.

---
name: IIIF-2
background-size: contain;
background-image: url(images/silos-iiif.png)

## <img style="max-height: 50px;" src="images/IIIF-logo.png" alt="IIIF Logo"> The goal I

Better like this?

???

* Not a document standard, but an interface.

---
name: IIIF-3
background-size: contain;
background-image: url(images/iiif-unsiloed.png)

## <img style="max-height: 50px;" src="images/IIIF-logo.png" alt="IIIF Logo"> The goal II

This looks good.

---
name: IIIF-4

## <img style="max-height: 50px;" src="images/IIIF-logo.png" alt="IIIF Logo"> The goal III

for dealing with .blue[**high-resolution**] images

providing a .red[**consistent API**] for .blue[**accessing images**],

the .red[**metadata that surrounds them**]

and .blue[**how to present and associate images together**].]

https://www.slideshare.net/workergnome/iiif-for-small-projects

.div-right[<section class="section-quick-links">
    <a class="button-turquoise" href="http://iiif.io/api/image/2.1/" target="_blank">IIIF Image API 2.1</a>
    <a class="button-turquoise" href="http://iiif.io/api/presentation/2.1" target="_blank">IIIF Presentation API 2.1</a><br><br>
    <a class="button-turquoise" href="http://iiif.io/api/auth/1.0" target="_blank">IIIF Authentication API 1.0</a>
    <a class="button-turquoise" href="http://iiif.io/api/search/1.0" target="_blank">IIIF Search API 1.0</a>
</section>]

???

* what is it?
    * 4 APIs
    * info.json
    * manifest.json

---
name: IIIF-5

## <img style="max-height: 50px;" src="images/IIIF-logo.png" alt="IIIF Logo"> Example (Image API)

.example[http://images.cceh.uni-koeln.de/api/iiif/<a class="blue" href="http://iiif.io/api/image/2.1/#region" target="_blank">region</a>/<a class="red" href="http://iiif.io/api/image/2.1/#size" target="_blank">size</a>/<a class="blue" href="http://iiif.io/api/image/2.1/#rotation" target="_blank">rotation</a>/<a class="red" href="http://iiif.io/api/image/2.1/#quality" target="_blank">quality</a>.<a class="blue" href="http://iiif.io/api/image/2.1/#format" target="_blank">format</a>

Let's play with the <a class="button-turquoise" style="width:150px; display:inline;" href="http://iiif.io/api/image/2.1/" target="_blank">IIIF Image API 2.1</a></section>!]

---
name: IIIF-6

---
name: IIIF-7

## <img style="max-height: 50px;" src="images/IIIF-logo.png" alt="IIIF Logo"> Example (Presentation API)

* <a class="blue" href="https://github.com/bodleian/iiif-manifest-editor" target="_blank">Manifest editor</a> (Try it out at <a href="http://iiif.bodleian.ox.ac.uk/manifest-editor/" target="_blank">http://iiif.bodleian.ox.ac.uk</a>)

* A makeshift <a class="red" href="https://gist.githubusercontent.com/pdaengeli/9866a1a01be9a806d82bcfb7305eaee2/raw/c2f022447cac69718e2c9405fff77b1d571b0821/letter_16636_manifest.json" target="_blank">sample manifest</a> following the <a class="button-turquoise" style="width:150px; display:inline;" href="http://iiif.io/api/presentation/2.1/" target="_blank">IIIF Presentation API 2.1</a>

* Viewing an object with said <a class="blue" href="http://universalviewer.io/uv.html?manifest=https://gist.githubusercontent.com/pdaengeli/9866a1a01be9a806d82bcfb7305eaee2/raw/c2f022447cac69718e2c9405fff77b1d571b0821/letter_16636_manifest.json#?c=0&m=0&s=0&cv=2&xywh=-1364%2C-153%2C5187%2C3370" target="_blank">makeshift manifest</a> (using Universal Viewer)

* other examples may be found at <a class="red" href="http://universalviewer.io/examples/" target="_blank">universalviewer.io/examples/</a> (pick an object using the dropdown)

---
name: Barberino

## Francesco da Barberino

* The .blue[digital scholarly edition] of *Documenta Amoris* is part of a ERC project focusing on texts written in the thirteenth and fourteenth centuries whose authors or translators deliberately intended them to circulate in more than one language, one of which was the Tuscan vernacular

* One of the most important examples is the work entitled Documenta Amoris and written by Francesco da Barberino in about 1310.

## <img style="max-height: 300px;" src="images/2big.png" alt="Francesco">

---
name: Barberino

## Francesco da Barberino

* *Documenta Amoris* is a exceptional work, because it is a .red[multilingual prosimetrum]. Francesco wrote a long allegorical poem in Tuscan vernacular, then translated this poem in .red[Latin] (translatio) and added a .red[commentary] to the .red[translatio], entirely in Latin.

* The manuscript is preserved at the Vaticana library in Rome. We have been given the permission to use the images in our project

---

## Francesco da Barberino - IIIF and a bit of code

**How I fetched the images:**

fetch("http://digi.vatlib.it/iiif/MSS_Barb.lat.4076/manifest.json")
.then(r => {
  // Download completed. The manifest is a JSON document. Let's parse it.
  return r.json();
})
.then(manifest => {
  
  .red[// manifest is a JS object, it must contain a |sequences| property.]
  
  if (!("sequences" in manifest)) {
    throw "No sequences in the manifest!"

---

## Francesco da Barberino - IIIF and a bit of code

if (!("canvases" in manifest.sequences[0])) {
    throw "No canvases in the manifest sequences"
  }

manifest.sequences[0].canvases.forEach(canvas => {

try {

gData.push({
        id: canvas["@id"],
        width: canvas["width"],
        height: canvas["height"],
        thumbnail: canvas["thumbnail"]["@id"],
        image: canvas["images"][0]["resource"]["service"]["@id"],
        label: canvas["label"]
      });
    } catch(e) {
      throw "Error retrieving data from the manifest."
    }
  });
})

---

## Francesco da Barberino - IIIF and a bit of code

gData.forEach((data, position) => {
  
    if (!(position % 4)) {
      currentRow = $("<div>", {class: "row justify-content-md-center" });
      $("#choosePage").append(currentRow);
    }

let imageBox = $("<div>", {class: "col, card",
                               onclick: "pageSelected(" + position + ")"});
    currentRow.append(imageBox);

let image = $("<img>", {class: "card-img-top", src: data.thumbnail});
    imageBox.append(image);

let labelBox = $("<div>", {class: "card-block" })
    imageBox.append(labelBox);

let label = $("<p>", {class: "card-title"})
    label.text(data.label);
    labelBox.append(label);
  });
})
---
name: SCTA

## Also worth checking: The SCTA Reading Room (Lombardpress)

.apis[http://scta.lombardpress.org/text/lectio1]
<img src="images/SCTA.png" style="position: relative; left: -65px; top: -30px;" width="800" />

...a context bar .red[(2)] opens, containing a link...

to the .blue[actual zone in a manuscript image],

which is opened in a collapsible container .red[(3)].]

<p style="position: relative; top: -30px;">The underlying model is explained at <a target="_blank" href="http://lombardpress.org/2016/08/09/surfaces-canvases-and-zones/">http://lombardpress.org/2016/08/09/surfaces-canvases-and-zones/</p>

---
name: CCeH

## [Potential for other projects @CCeH](#Structure)

*basically: wherever we possess the images* (and don't need authentication)

* Lokalbericht (IIPImage + OSD, summer 2016)
* Guillelmus (in progress)
* Haller (in progress)
* Pessoa (OSD already implemented; source could be changed)?
* Totenbuch?
* Papyri collection?
* Itinera Nova?
* MOM-CA?
* MOL?
* Inscriptions?
* Luhmann (Bielefeld image server)
* etc

#### Use cases

* serving images (easy)
* serving regions (getting the information is a lot of work)

---
name: imageservers

## IIIF compliant image servers

<a class="blue" href="https://github.com/pdaengeli/iiif-servers" target="_blank">github.com/pdaengeli/iiif-servers</a>
---

## Doubts

* IIIF and longevity: the protocol is not the problem, but changing data may be (as always)

* obviously licensing matters

* can we be sure (e.g.) IDs don't change?

<!-- 
- -
## Credits

-->

<!--

#Vielen Dank für die Aufmerksamkeit
 -->