While standard PDF annotations are well supported in PDF clients and browser plugins, they do not allow for rich annotations in an 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 rendering of the PDF, two different modes were tried, one that pre-renders the pages as images and provides meta information through an JSON file, the other using Mozilla’s PDF.js to render the PDF pages directly in the client.
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
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 litle bit heavy weight for this task and should be replaced with some simpler logic. The CSS Grid and design elements are partially taken from the great ZURB foundation framework.
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 to track which slides are still in need for review.