Gregor Godbersen : Rich presentation annotations in javascript
Published

Rich presentation annotations in javascript

Note that this entry was originally published 1e+1 years ago. It may present outdated technologies or knowlege.

While standard PDF annotations are well supported in PDF clients and browser plugins, they do not allow for rich annotations in a web context. For this project, I explore the possibilities of an online presentation annotator. The basic idea was to allow users to mark sections within each slide and to attach a written note to it. For the PDF rendering, two different modes were tried, one that pre-renders the pages as images and provides meta information through a JSON file, the other using Mozilla’s PDF.js to render the PDF pages directly in the client.

Live Demo

Navigate through the slides below and add annotations by dragging your mouse over the slide.

Note: as the responsive layout and the iframe do not mix, expect the demo to fail on mobile

Technology

The frontend is written in typescript with the help of jsPlumb for the links drawn between the highlight and note. The jsPlumb library is a little bit heavy for this task and should be replaced with simpler logic. The CSS Grid and design elements are partially taken from the great ZURB foundation framework.

Implemented are two slide rendering adapters, one rendering the slides as images (shown in the demo), the other consuming the raw PDF. The latter is made impractical through the PDF renderer’s large file size, clocking at least 1MB of javascript. On the other hand, the image solution requires a bit of server processing of the pdf files, which is manageable for smaller loads and can easily be distributed for larger throughput. One thing which is lacking from the images is the ability to copy text off the slides, which is available when using PDF.js. The lower loading times, however, make the image-based rendering a better fit for this project. The slide renderer is abstracted as an interface so that they can be switched on-the-fly depending on slide content.

As the annotations are pure HTML, different content could be rendered. One idea that was briefly explored was to attach flashcards to spots on the slide, allowing for tracking which slides still need review.