Annotation of IIIF resources: Lowering barriers to entry

Niqui O’Neill

NC State University Libraries

Digital Technologies Development Librarian

What is IIIF?

“The International Image Interoperability Framework (IIIF) is a set of shared application programming interface (API) specifications for interoperable functionality in digital image repositories. The IIIF is comprised of and driven by a community of libraries, museums, archives, software companies, and other organizations working together to create, test, refine, implement and promote the IIIF specifications. Using JSON-LD, linked data, and standard W3C web protocols such as Web Annotation, IIIF makes it easy to parse and share digital image data, migrate across technology systems, and provide enhanced image access for scholars and researchers. In short, IIIF enables better, faster and cheaper image delivery. It lets you leverage interoperability and the fabric of the Web to access new possibilities and new users for your image-based resources, while reducing long term maintenance and technological lock in. IIIF gives users a rich set of baseline functionality for viewing, zooming, and assembling the best mix of resources and tools to view, compare, manipulate and work with images on the Web, an experience made portable–shareable, citable, and embeddable.”

Annotations


{"@type": "sc:AnnotationList", "@context": "http://iiif.io/api/presentation/2/context.json", "@id": "https://dnoneill.github.io/annotate/annotations/131424-main-list.json", "resources": [{"@context": "http://iiif.io/api/presentation/2/context.json", "resource": [{"@type": "dctypes:Text", "chars": "<p>Man</p>", "format": "text/html"}], "@id": "b4ba0b29-0a7b-47d7-b4a1-7fc794795aee", "on": [{"full": "https://data.getty.edu/museum/api/iiif/131424/canvas/main", "within": {"@type": "sc:Manifest", "@id": "https://data.getty.edu/museum/api/iiif/131424/manifest.json"}, "selector": {"@type": "oa:Choice", "default": {"@type": "oa:FragmentSelector", "value": "xywh=2078,1923,422,511"}, "item": {"@type": "oa:SvgSelector", "value": "<svg xmlns='http://www.w3.org/2000/svg'><path xmlns=\"http://www.w3.org/2000/svg\" d=\"M2077.55842,1922.69769h211.16814v0h211.16814v255.41406v255.41406h-211.16814h-211.16814v-255.41406z\" data-paper-data=\"{&quot;strokeWidth&quot;:1,&quot;rotation&quot;:0,&quot;deleteIcon&quot;:null,&quot;rotationIcon&quot;:null,&quot;group&quot;:null,&quot;editable&quot;:true,&quot;annotation&quot;:null}\" id=\"rectangle_e4deda6f-7f2f-4e90-8d8c-d8e419321103\" fill-opacity=\"0\" fill=\"#00bfff\" fill-rule=\"nonzero\" stroke=\"#00bfff\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"/></svg>"}}, "@type": "oa:SpecificResource"}], "@type": "oa:Annotation", "motivation": ["oa:commenting"]}]}

Opportunities

  • All Wikipedia Commons images can be served as IIIF images
  • WikiData has 169,141 entries with IIIF manifests listed
  • All ContentDM images (around 12,991,905 objects) are avaliable in IIIF format
  • Biblissima ~65,000 digitized manuscripts and rare books
  • Wellcome Library
  • Numerous instutions including NC State University Libraries and Duke

Goals

  • Open source with low barrier to entry
  • Well documented
  • Dynamic
  • Allow for greater use of annotations

Development Decisions

  • Vue CLI to build JavaScript library; OpenSeadragon for storyboards.
  • Support all annotation data models
  • Support single Annotation and Annotation Lists.
  • Annotation URL to allow for specificity and annotations not contained in a manifest.
  • Add settings functionality to application

Using the Library

<script src="https://ncsu-libraries.github.io/iiif-annotation/dist/iiif-annotation.js"></script>

<link rel="stylesheet" type="text/css" href="https://ncsu-libraries.github.io/iiif-annotation/dist/iiif-annotation.css">

Examples

<iiif-annotation annotationurl="https://ncsu-libraries.github.io/iiif-annotation/webannotations/annotation1.json"></iiif-annotation>

<iiif-storyboard annotationlist="https://dnoneill.github.io/annotate/annotations/wh234bz9013-0001-list.json"></iiif-storyboard> 

<iiif-multistoryboard annotationlists="https://ncsu-libraries.github.io/iiif-annotation/webannotations/mc00084-001-te0159-000-001-0001-list.json;https://ncsu-libraries.github.io/iiif-annotation/webannotations/ua023-015-003-bx0002-004-026-list.json"></iiif-multistoryboard> 

<iiif-rangestoryboard rangeurl="https://tomcrane.github.io/iiif-collector/objects/longer-article.json"></iiif-rangestoryboard>

<iiif-storyboard annotationlist="https://dnoneill.github.io/annotate/annotations/mc00084-001-te0159-000-001-0001-list.json" layers="[{'label':'Harrelson Hall', 'xywh': '4400,1300,3000,3000', 'image':'https://iiif.lib.ncsu.edu/iiif/0003310/info.json', 'section':'0,2952,2500,1696'}, {'label':'D.H. Hill Jr. Library', 'xywh': '3700,400,3000,3000', 'image':'https://iiif.lib.ncsu.edu/iiif/0003310/info.json', 'section':'0,384,6430,2500', 'rotation': 352}]" styling="togglelayers: true; customid: customlayers"></iiif-storyboard>

Please go to https://dnoneill.github.io/test-websockets/

alt text

Annotations as Scholarly Resources

  • Choice
  • Lifecycle Information
  • Rights
  • Intended Audience

Future Development

  • Annotation Editor
  • Range Editor / Stable Range Viewer
  • More complex data models

Questions?

Thank you!

Contact Info: