Skip to content

Project

Project Mirador

2016 - 2017

Mirador viewer ⇗

Mirador Overview

Project Mirador is an open-source, web-based, 'multi-up' IIIF image viewer that writes in JavaScript. This viewer includes custom made features for the Diamondback project ⇗ and the Historic Maryland Newspapers project ⇗ at Maryland. This project is designed and developed in collaboration with:

Project Mirador stakeholders: the Diamondback, the Historic Maryland Newspapers project, University of Maryland Libraries, Maryland Institute for Technology in the Humanities, IIIF (International Image Interoperability Framework) Community, and Project Mirador Open-Source Community.

My Roles

  • Exploratory research on modern digital newspaper system.
  • Designed and built customize features based on research and requirement
  • Contributed bug fixes and translations to the Mirador open-source community.
  • Published improvements as a poster session at Code4Lib 2017 conference.

Research

I spent summer 2016 interning at Maryland Institute for Technology in the Humanities, one of the stakeholders of historical newspaper project and IIIF viewer project. I did an exploratory research of digital newspaper collection system with a strong focus on information architecture and user interface. Case studies and user interviews were used in this research, and findings are implemented as interactive HTML prototypes and presented to the project stakeholders.

Learn more at Digital Newspaper Collections project ⇗.

Publication

Eichman P, Abdul Rasheed M, Tai X, Westgard J, Dohe K, Wallberg, B. Newspapers Re-Issued: Developing a custom IIIF newspaper viewer at the University of Maryland Libraries. Poster session presented at: Code4Lib 2017; 2017 Mar 6-9; Los Angeles, CA, USA.

Code4Lib poster session ⇗.
View poster ⇗

Custom Features

Based on the landscape research and case studies, we chose the open-source Project Mirador as the viewer of our newspaper project. However, the basic Mirador viewer framework did not meet stakeholders' needs for this project. Therefore, I created and implemented these customize features to Project Mirador and open sourced these changes.

1. Display OCR Text

Display OCR Text

User Story 1:
As a user,
I want to be able to search the OCR across titles and have the keyword search terms highlighted on a thumbnail of search results
so that I can see a visual representation of where the keyword(s) are on the page and how many hits per page there are in order to find the most relevant results.

User Story 2:
As a user / contributing institution,
I want to have the option of a gallery (e.g., grid of thumbnails with search terms highlighted) or a list (list of page descriptions that includes title, date, and contributing institution) to view search results
so that I (user) have the option to see the thumbnails with the OCR highlighted, or I can just see title and issue information to analyze search results quickly; and I (contributing institution) am cited as the source of the newspaper in the list view.

User Story 3:
As a contributing institution,
I want to users to be able to interact with the newspaper content to correct OCR, tag pages, and create article bounding boxes (if article level metadata does not exist)
so that we can crowdsource OCR correction and enhance the metadata we already have to make the newspapers more discoverable and more useful.

Implementation:
We use the combination of the side bar and open annotation standard to implement this feature. OCR texts are combined with each annotation.
You can try this feature at the top of this page.

Displaying OCR text


2. Highlight Search Results

Highlight Search Results

User Story:
As a developer,
I want to invoke the viewer with a list of images, each with a list of rectangular coordinates
so that the viewer can highlight for the user keywords which matched an external search and they can see a visual representation of where the keyword(s) are on the page and how many hits per page there are in order to find the most relevant results.

Implementation:
We use a dynamic annotation list to populate the highlighting area each time the viewer instance is evoked. Each word is highlighted in yellow.
You can view search highlighting demo at the top of this page.

Highlight Search Results


3. Display Article Segment

Display Article Segment

User Story:
As a developer,
I want to invoke the viewer with a list of images, each with a list of rectangular coordinates
so that the viewer can highlight for the article segments.

Implementation:
This is very similar to the search hit highlighting feature: instead of using dynamic annotation list, we use static annotation to populate the article segments in green blocks.
You can also view article segments at the top of this page.

Highlight Search Results


4. Image Clipping

Image Clipping

User Story:
As a developer,
I want to supply the tool a JavaScript callback function which accepts issue/page information and rectangular coordinates from the page,
So that I can implement a clipping function to dynamically create a new image based on the viewable region and embed selected metadata.

Design Process:
Q1. How to initiate the clip feature?

  • Option 1: clip thee current viewing area; demo ⇗.
  • Option 2: drag to create a clipping area; demo ⇗.

Q2. How to download the clipping?

  • Option 1: download from the viewer right away.
  • Option 2: download (or print) from a new page with metadata; demo ⇗.

Solution:
Integrate the open-source OpenSeadragon Selection plugin to Mirador and created a new button along with annotation and image modification. Used plugin: picturae.github.io/openseadragonselection ⇗.

You can try the clipping feature at the top of this page.

How to initiate clip?

How to download the clipping?

Implementation:

Clipping in process


5. Scroll View Zooming

Scroll View Zooming

User Story:
As a user,
I want to pan and zoom in the scroll view
so that I can view the entire newspaper issue.

Implementation:
You can try this feature at the top of this page.

Scroll View Zooming

Future Works

The newspaper project is undergoing, and the Mirador viewer will be integrated into both the historical newspaper system and the student newspaper (the Diamondback) system.

Future student newspaper system.

Thanks for Scrolling!

Thanks to all my co-workers from the online community, MITH, and Library.

Main Mirador repositroty: github.com/ProjectMirador/mirador ⇗
Custom Mirador repositroty: github.com/umd-lib/mirador ⇗