Slidehub (demo website) is a web-based presentation/lecture/talk slide explorer. Its goal is to provide quick access to a database of paged documents. The documents are represented as rows of a grid-like structure while each cell is a page.
All documents are available as PDF files. In addition, all slides are available as images that act as a kind of preview for the actual documents’ page.
- Browser Support
- Development Setup
- To Do
- Known Issues
- Generate graphics from PDF files
- Keyboard navigation
- Page images are only loaded when necessary
- Each page links to its original PDF file (using the page fragment in the URL for browsers that support targetting individual pages in their PDF viewer)
The application can be navigated with the most common input devices (i.e. mouse, trackpad, touchpad, keyboard).
With a mouse, one can navigate the pages within a document by holding down Shift and turning the mouse wheel. With a double-click on a page, the PDF is opened (if possible targetting the correct page).
With a keyboard, the arrow keys allow navigating the pages within documents and the documents itself. Holding down Shift while pressing an arrow key navigates three pages or documents at a time. Furthermore, Home/End jump to the first/last page of a document.
Used Features (sorted by most unsupported feature first):
Installs all required development dependencies.
Build production bundles:
npm run build
build script as defined in
start script as defined in
- Marking/selecting pages in order to generate a new PDF (low priority)
- Dynamic determination of the number of slides per slide deck
- Study the quality-size trade-off of slide PNGs
- Prepending page with meta information such as year, venue, author.
- Dynamic loading of documents based on our publications infrastructure.
- Organization of documents by, e.g., topic, year, etc. → Missing data. Will there be a metadata file for each document?
- Accessibility: Modal window doesn’t stop the user from interacting with the main page
Generate graphics from PDF files
ImageMagick is capable of a wide variety of image manipulation tasks. The following examples use the typical way of invoking it via the command line.
First of all, the package needs to be installed.
sudo apt-get install imagemagick
Converting a single file:
convert -density 72 -quality 90 slides.pdf slides.pdf.png
The input file is a PDF with a certain amount of pages. Therefor, this command produces as many graphics as there are pages in the document. Without specifying further arguments, an index suffic will be added to the file name (e.g.
Converting multiple files:
convert command can be called from inside a loop to process multiple files.
for f in *.pdf; do convert -density 72 -quality 90 $f $f.png; done
mogrify command covers the looping part as well.
mogrify -format png -density 72 -quality 90 *.pdf
Counting the number of graphics per document:
for f in *.pdf; do count=$(ls -l $f*.png | wc -l);echo " [\"$f\", $count],"; done
Resizing images to a specific width
The following command shrinks all files with the
png extension to a width of 600 pixels while maintaining the aspect ratio. Smaller files are not resized.
mogrify -resize '600x>' *.png
The same argument can also specified when converting from PDF.
The following command optimizes the size of the PNG files.
One might run out of memory while converting some large PDFs. If this is the case, an error like the one below is printed.
convert-im6.q16: DistributedPixelCache '127.0.0.1' @ error/distribute-cache.c/ConnectPixelCacheServer/244. convert-im6.q16: cache resources exhausted `/tmp/magick-30849GyqwEjT6yu7947' @ error/cache.c/OpenPixelCache/3945. convert-im6.q16: DistributedPixelCache '127.0.0.1' @ error/distribute-cache.c/ConnectPixelCacheServer/244. convert-im6.q16: cache resources exhausted `/tmp/magick-30849GyqwEjT6yu7947' @ error/cache.c/OpenPixelCache/3945.
I tried specifying
-limit memory 2GiB as an additional argument for
mogrify without any effect. However I was able to work around this issue by changing the default limit in
I replaced the line …
<policy domain="resource" name="memory" value="256MiB"/>
… with …
<policy domain="resource" name="memory" value="2GiB"/>