Skip to content

Commit

Permalink
annotations
Browse files Browse the repository at this point in the history
  • Loading branch information
dnoneill committed May 23, 2024
1 parent c54cd8a commit e6e46e2
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 8 deletions.
9 changes: 4 additions & 5 deletions dhsi/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,10 @@
2. [Work Period]((day-two/configuring-viewers.md#work-period))

## Wednesday, Session 1: 9:00am-10:15am
1. Introduction to Annotations
2. Exercise
1. Create an annotation in Mirador2 local storage
2. Adding annotations to a manifest
3. Workbench
1. [Introduction to Annotations](day-three/annotations.md)
2. [Creating Annotations](day-three/creating-annotations.md)
3. Adding annotations to a manifest
4. Workbench


## Wednesday, Session 2: 10:30am-12:00pm
Expand Down
151 changes: 151 additions & 0 deletions dhsi/day-three/annotations.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
# What are annotations?

Annotations have multiple use cases when used in conjunction with IIIF:

* Transcribing documents
* Commenting or analysis of content
* Highlighting areas of the item like hand written annotations on a printed book
* Teaching or explaining content
* Captions for A/V materials

Also as we have seen annotations are fundamental to how a IIIF Manifests work with images and video painted on to a canvas with annotations.

Annotations in IIIF follow the [W3C annotation model](https://www.w3.org/TR/annotation-model/) and its precursor [Open Annotations](http://www.openannotation.org/). I will go through the differences briefly later but the model is conceptionally similar:

![Web Annotation model](https://www.w3.org/TR/annotation-model/images/intro_model.png)

The annotation is made up of two parts. The body which is the **resource** you want to annotate **on** to something and the target which is the thing you are annotating. Examples of bodies might be:

* Text transcription of a line
* Video giving background to a painting
* IIIF Image painted on to a canvas

A target might be:
* A whole canvas
* A part of a canvas (maybe a line in the transcription example above)

## Example Annotation
A simple commenting annotation looks like the following:

```json
{
"@id": "http://localhost:8887/coin/list/1",
"@type": "oa:Annotation",
"motivation": "commenting",
"resource": {
"@type": "cnt:ContentAsText",
"format": "text/plain",
"chars": "Zeus seated on stool-throne"
},
"on": "http://localhost:8887/coin/canvas#xywh=3706,208,522,522"
}
```

This is using Open annotations and the keys map as follows:

* Body -> resource
* Target -> on

Other things to take note of are:

* motivation is `commenting`
* Annotations should have an `@id`

In this example the body or resource is the text `Zeus seated on stool-throne`. The canvas id in this example is `http://localhost:8887/coin/canvas` and the `#xywh=3706,208,522,522` denotes we are looking at a rectangle starting `3706` pixels from the left, `208` pixels from the top and with dimensions `522` pixels wide and `522` pixels high. The image mentioned in this annotation is:

![Coin image](https://ronallo.com/iiif-workshop-new/images/coin-side-by-side.png)

## Open Annotations vs Web Annotations
One of the changes with IIIF version 3.0 is that we are moving to the W3C Web Annotations model. The concepts are the same but the JSON is slightly different. The transcription example now looks like:

```json
{
"id": "http://localhost:8887/coin/list/1",
"type": "Annotation",
"motivation": "commenting",
"body": {
"type": "TextualBody",
"format": "text/plain",
"chars": "Zeus seated on stool-throne"
},
"target": "http://localhost:8887/coin/canvas#xywh=3706,208,522,522"
}
```

The changes are:
* `@id` becomes `id`
* `@type` becomes `type` and `oa:Annotation` becomes `Annotation`
* `resource` becomes `body`
* `on` becomes `target`
* The body type changes from `cnt:ContentAsText` to `TextualBody`.
* Moving of type (oa:Tag) to purpose for individual annotations

```json

{
"@context": "http://www.w3.org/ns/anno.jsonld",
"id": "http://example.org/anno15",
"type": "Annotation",
"motivation": "bookmarking",
"body": [
{
"type": "TextualBody",
"value": "readme",
"purpose": "tagging"
},
{
"type": "TextualBody",
"value": "A good description of the topic that bears further investigation",
"purpose": "describing"
}
],
"target": "http://example.com/page1"
}

```

Quite a few changes but it is defiantly clearer to understand.

## What are annotations lists?

See Specification Chapter:
- [V2 Annotation List](http://iiif.io/api/presentation/2.1/#annotation-list)
- [V3 Annotation Page](https://iiif.io/api/presentation/3.0/#55-annotation-page)

Annotation lists/pages are ways to group annotations and are often at a Canvas or Page level. Examples might be a transcription of a page or the OCR of a single page in annotation format. We will come back to this in the exercises but for now there is an example below. Note annotation lists are usually resolvable which means if you take the `@id` and put it into a Web Browser you should get the annotation list back.

Additionally, you should never have an Annotation Page/List that has annotations on multiple images. They should only refer to a single image. To tie multiple image annotations together you use the manifest (we will show how to do this later in the workshop) or using an [Annotation Collection](https://iiif.io/api/presentation/3.0/#58-annotation-collection).

```json
{
"@context": "http://iiif.io/api/presentation/2/context.json",
"@id": "http://localhost:8887/coin/canvas/AnnotationList",
"@type": "sc:AnnotationList",
"resources": [
{
"@id": "http://localhost:8887/coin/list/1",
"@type": "oa:Annotation",
"motivation": "commenting",
"resource": {
"@type": "cnt:ContentAsText",
"format": "text/plain",
"chars": "Zeus seated on stool-throne"
},
"on": "http://localhost:8887/coin/canvas#xywh=3706,208,522,522"
},
{
"@id": "http://localhost:8887/coin/list/1",
"@type": "commenting",
"motivation": "sc:painting",
"resource": {
"@type": "cnt:ContentAsText",
"format": "text/plain",
"chars": "Zeus seated on stool-throne"
},
"on": "http://localhost:8887/coin/canvas#xywh=0,208,522,522"
}
]
}
```


2 changes: 2 additions & 0 deletions dhsi/day-three/creating-annotations.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Creating an Annotation

6 changes: 3 additions & 3 deletions dhsi/day-two/annona.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Annona only works with images. It also works with IIIF collections and annotatio
1. Copy the code below into your `annona.html` file

```
<iframe scr="replacewithmanifesturl"></iframe>
<iframe src="replacewithmanifesturl"></iframe>
```

1. Go to [https://ncsu-libraries.github.io/annona/tools/#/tag-builder?url=&viewtype=&manifesturl=&settings=%7B%7D](https://ncsu-libraries.github.io/annona/tools/#/tag-builder?url=&viewtype=&manifesturl=&settings=%7B%7D)
Expand All @@ -36,9 +36,9 @@ Annona only works with images. It also works with IIIF collections and annotatio
4. Click on the Copy URL button
5. Replace replacewithmanifesturl with that copied url
```
<iframe scr="https://ncsu-libraries.github.io/annona/tools/#/display?url=https%3A%2F%2Fiiif.bodleian.ox.ac.uk%2Fiiif%2Fmanifest%2F748a9d50-5a3a-440e-ab9d-567dd68b6abb.json&viewtype=iiif-storyboard&manifesturl=&settings=%7B%22zoom%22%3A%22-2582.666666666666,-475.5555555555557,11841.333333333332,9511.11111111111%22,%22fullpage%22%3Atrue%7D"></iframe>
<iframe src="https://ncsu-libraries.github.io/annona/tools/#/display?url=https%3A%2F%2Fiiif.bodleian.ox.ac.uk%2Fiiif%2Fmanifest%2F748a9d50-5a3a-440e-ab9d-567dd68b6abb.json&viewtype=iiif-storyboard&manifesturl=&settings=%7B%22zoom%22%3A%22-2582.666666666666,-475.5555555555557,11841.333333333332,9511.11111111111%22,%22fullpage%22%3Atrue%7D"></iframe>
```
<iframe style="width: 100%; min-height: 300px" scr="https://ncsu-libraries.github.io/annona/tools/#/display?url=https%3A%2F%2Fiiif.bodleian.ox.ac.uk%2Fiiif%2Fmanifest%2F748a9d50-5a3a-440e-ab9d-567dd68b6abb.json&viewtype=iiif-storyboard&manifesturl=&settings=%7B%22zoom%22%3A%22-2582.666666666666,-475.5555555555557,11841.333333333332,9511.11111111111%22,%22fullpage%22%3Atrue%7D"></iframe>
<iframe style="width: 100%; min-height: 300px" src="https://ncsu-libraries.github.io/annona/tools/#/display?url=https%3A%2F%2Fiiif.bodleian.ox.ac.uk%2Fiiif%2Fmanifest%2F748a9d50-5a3a-440e-ab9d-567dd68b6abb.json&viewtype=iiif-storyboard&manifesturl=&settings=%7B%22zoom%22%3A%22-2582.666666666666,-475.5555555555557,11841.333333333332,9511.11111111111%22,%22fullpage%22%3Atrue%7D"></iframe>


6. View.
Expand Down

0 comments on commit e6e46e2

Please sign in to comment.