History
The Diva.js project began in 2008 as a collaboration between the Swiss working group of the Répertoire International des Sources Musicales (RISM) and the Distributed Digital Music Archives and Libraries lab at McGill University in Montréal. The Swiss working group had received funding for an exploratory effort to digitize musical sources (prints and manuscripts) by Swiss composers held in libraries and monasteries across Switzerland.
At the start of the project, we looked at the existing tools and interfaces for displaying digitized document images in a web browser. To assess the state of the art, and to see if we needed to make something or if we could borrow from others, we surveyed 24 digital libraries. We looked at projects like Google Books, that featured a great UI for scrolling through digitized books, but only offered a couple zoom levels and certainly nothing for high-resolution images. We looked at the World Digital Library, that had a great zooming interface but navigating between pages was cumbersome as you had to wait for each image to load. Zoomify was a thing but it required Flash and had quite a complicated setup. At the same time we were inspired by the single-image demos from the IIP Image Server and the “IIP Moo Viewer”. “AJAX” was still relatively new, so on-the-fly image loading techniques were not widely adopted.
All the pieces were there for a high-resolution, scrolling, PDF-like document viewing experience, but nobody seemed to have one. So we decided to build our own. From our survey we defined five functional requirements for our new viewer; you can read about them in our Code4Lib article.
Towards Diva.js
Our first document viewer was written as a component of a larger ExtJS interface for managing digital images, part of an in-house image system for the Swiss RISM. It was never released publicly, but it was adopted by several related RISM projects.
The video below shows a demo of the early Swiss DocumentViewer prototype (2009).
While the ExtJS component worked very well, it required loading the entire ExtJS library, including superfluous components, which added significantly to the loading time for pages. The decision was made to port the image viewer component alone to jQuery, a widely used JavaScript framework that is smaller and more modular in design, with faster load and execution time than ExtJS.
Development on the jQuery plugin began in February 2011, using the same design requirements as the original ExtJS component. It was officially named “diva.js” on March 24, 2011, and the 1.0 release was on June 6, 2011. (“Diva” stands for “Document Image Viewer with AJAX”.)
How Diva.js Worked (Pre-IIIF)
The Diva.js setup involved were two back-end components, and a front-end viewer. The image server (we used IIP Image Server) was responsible for delivering tiled images using the Internet Image Protocol. The data server was responsible for sending a JSON document to the image viewer. For those who are familiar with the IIIF Manifest, it was a similar concept, although it contained much more information about the image sizes, zoom levels, and tile sizes, and less about the structure of the book itself. Any metadata or other information would need to be fetched separately.
The front-end viewer used the JSON data, provided as an HTTP URL. It would use the data to build a page in the browser that was optimized for viewing large documents. The viewer would “lazy load” the pages and the tiles, requesting only the parts of the document that were currently being viewed by the user. Users could “zoom” in and out from the images, viewing high-resolution images without needing to first download large image files.
IIIF Support and Continued Development
On September 9, 2015 we released Diva.js 5.0, the first release to feature IIIF support. This coincided with our work, through the SIMSSA project, on distributed Optical Music Recognition. Over the next few years, work on Diva.js continued apace. Diva.js 6.0 was released in 2018, and a few patch releases followed. However, public development slowed after 2019.
More details on why, and what happened, can be found on the “Continued Development and Generative AI”. (Foreshadowing…)
Publications
Hankinson, A., L. Pugin, G. Hanke Knaus, and I. Fujinaga. 2008. Web-based musical document viewer for digital music libraries. 9th International Conference on Music Information Retrieval (ISMIR 2008), Philadelphia, PA.
Hankinson, A., L. Pugin, and I. Fujinaga. 2009. Interfaces for document representation in digital music libraries. In Proceedings of the 10th International Society for Music Information Retrieval Conference (ISMIR 2009), pp. 39–44. Kobe, Japan.
Pugin, L., and A. Hankinson. 2009. Building a comprehensive digital library for nineteenth-century Swiss composers. International Association of Music Libraries Conference (IAML), Amsterdam.
Hankinson, A., W. Liu, L. Pugin, and I. Fujinaga. 2011. Diva.js: A Continuous Document Viewing Interface. Code4Lib Journal, Issue 4.
Hankinson, A., W. Liu, L. Pugin, and I. Fujinaga. 2012. Diva: A Web-Based High-Resolution Digital Document Viewer. In: Zaphiris, P., Buchanan, G., Rasmussen, E., Loizides, F. (eds) Theory and Practice of Digital Libraries. TPDL 2012. Lecture Notes in Computer Science, vol 7489. Springer, Berlin, Heidelberg.
Hankinson, A. 2014. Optical music recognition infrastructure for large-scale music document analysis. Ph.D. diss. McGill University.
Hankinson, A., L. Pugin and I. Fujinaga. 2014. Accessing, navigating, and engaging with high-resolution document image collections using Diva.js. In Proceedings of the Digital Humanities Conference 2014. Lausanne, Switzerland.
Hankinson, A., E. Magoni, and I. Fujinaga. 2015. Decentralized Music Document Image Searching with Optical Music Recognition and the International Image Operability Framework. In Proceedings of the Digital Library Federation Forum. Vancouver, BC.