MarkUs Blog

MarkUs Developers Blog About Their Project

PDFJS Annotations II

with 2 comments

For this term I have been working on replacing the old image based PDF annotation system with a new one that uses the native file format. The new system allows the students and the markers to view PDF files in a much smoother native fashion. As well as allows markers to annotate the PDF files directly in the viewer. I believe the overall user experience has improved as a result of this change.

In order to implement this feature the [PDF.js](https://github.com/mozilla/pdf.js/) library by Mozilla was used. This library is designed to render PDF files in the browser using only Javascript and HTML5. But was not designed for adding annotations to a PDF file.

This change has been very beneficial for a multitude of reasons:

  1. It has increased the speed of the assignment collection by completely removing the long process of converting each submitted PDF into a series of images.
  2. Allows for a smoother workflow when viewing and annotating PDF’s. There is now support for changing the zoom level, and there are page number controls for navigating through the pages.
  3. It is now resolution independent. It doesn’t matter what resolution the PDF file was saved as, it will always render correctly to fit within the screen nicely. While still allowing the user to zoom in on pages if need be.
  4. Annotations can be drawn directly in the viewer and thus will change with the zoom level of the document. This is beneficial when small images or specific areas need to be annotated.

The main challenge with working on this component was implementing the annotation system on top of the PDF.js library. The main viewer code was largely undocumented so a fair amount of reverse engineering had to be done in order to understand the rendering process and insert the hooks for annotations. The PDF.js library itself was not modified at all during this process, instead hooks were added into the rendering process so that the annotation system could sit on top of PDF.js without being coupled too heavily to the library. This should make it simpler to upgrade to new PDF.js versions as they are released.

Currently the system does not support downloading PDF files to a user’s computer with the annotations rendered in them. They can only be viewed online. An improvement that could be made in the future would be to render these annotations to the actual PDF file before a user downloads them. [Origami-PDF](https://github.com/mobmewireless/origami-pdf/) is a library that may be able to do this.

Overall I think the system works quite well. The annotation system behaves exactly the same as the image annotations so the user experience will be seamless when transitioning from one system to another. Thus a very small learning curve. And having an actual PDF viewer makes it much simpler to navigate through and markup PDF files.

Written by Chris Kellendonk

December 5th, 2014 at 3:26 am

Posted in Uncategorized

2 Responses to 'PDFJS Annotations II'

Subscribe to comments with RSS or TrackBack to 'PDFJS Annotations II'.

  1. Is this annotation system Free or Opensource?
    Can I get a version of it?
    Thanks

    Morfeo

    20 May 15 at 10:43 am

  2. @Morfeo:

    As in the post, Chris seems to have used PDF.js from Mozilla, which is open source. See: https://github.com/mozilla/pdf.js

    MarkUs itself is open source too and source code is available here:
    https://github.com/markusproject/markus

    Severin

    20 May 15 at 2:37 pm

Leave a Reply