Using JessyInk to create presentations

I've been unhappy with all the existing options for creating scientific (or other) presentations for some time. For my presentations I often want to animate parts of a vector graphic in one at a time. For instance, I want the axes to appear first with one example trace, before adding in additional traces to the same plot. Slide-based presentation software (PowerPoint, Keynote, LibreOffice Impress, Google Slides) make it extremely difficult to achieve this functionality. Basically one has to do one of two options: 1) save each animation frame of the same figure, then attempt to align them perfectly in the presentation software, or 2) use disappearing boxes to systematically reveal parts of the same figure. Neither option is particularly efficient or effective.

Alternative, "non-linear" presentation software (e.g. Prezi or Sozi) seems pointless to me. In my experience presentations too often lack a clear narrative flow (broad introduction, clear transitions between sections, and justified conclusions). Ultimately one must choose what to display on the screen and in what order to display it. Complicating this logical and temporal sequence seems more likely to garble presentations than simplify them. I think it is an attempt to obfuscate pointless wastes of time with flashy effects. Truly interesting concepts should be clarified in presentations not complicated by them.

Sorry, to continue with the wishlist for a better presentation solution: Ideally the presentation software would use an open standard file format, so that proprietary software is not required to access and show presentations. Hopefully it is also available on Linux, Windows, and Mac.

Finally, one must be able to embed bitmaps (png, jpg, or whatever), text, and movies. And hopefully it is easy to graphically design slides using a mouse, menus, and some keyboard shortcuts.

After some pretty frustrating searching, the best option I have come to is JessyInk. Written by Hannes Hochreiner, this is a plugin that comes with Inkscape.

To start at the beginning, Inkscape is an open-source vector graphics editing program, roughly equivalent to Adobe Illustrator. It works well on Linux, Windows, and Mac. It is free. Now, for those (like me) who have become accustomed to Illustrator, it will look a little strange at first. I really just have to suggest going through the tutorial. After about half an hour the logic of the software will click into place, and you'll be free of Adobe's whims and and subscription fees for life! In addition to a fully functional GUI, it is accessible from the command line, so we can write nifty Python scripts taking advantage of its utilities (more on this later). Like Illustrator, one can create layers in a file. JessyInk takes a file with multiple layers and adds JavaScript to the file. When this file is opened in a browser (e.g. Firefox) the different layers become your "slides". You transition between them using keys or the mouse. So what's so great about this? Here's a partial list:

• The file format is .svg (scalable vector graphic). This is a open format, that should be rendered equally well with any standards-compliant browser. It is inherently platform-independent. No more worrying about opening a presentation made in Windows on a Mac. No more opening an old presentation in a new version of PowerPoint and discovering it has re-colored all of your slides for you to a new color palette. Also, it is human-readable, so you can always go open your presentation in a text editor and edit any element directly. (It looks kinda like html.)
• Because .svg is a vector format, you do not have to export all of your vector graphics to bitmaps. This means that different traces on one axis (for instance) can be re-colored, made thicker or dotted or transparent. Best of all, JessyInk can animate each in independently! And you don't have to worry about pixelation--a line is a line, you don't have to guess what the projector's resolution will be.
• Although the Inkscape GUI (which you'll use to create your presentation) gives you a clear picture of what your slides will look like while you are making them, you will use a browser to actually present the slides. This is great for a number of reasons: if you need to use another computer, you don't need to worry about installing any software, since it is a safe bet that every computer has a browser. Also, it is easy to post presentations online. And while you are editing the presentation you can have the file open in a browser and see exactly what it is currently looking like--no more switching into presentation mode in PowerPoint to get a sense of how things are looking.
• Needless to say, you can embed movies, bitmaps, vector graphics, and text into the presentation.
• There are also a number of bells and whistles. I won't get into most of them here. I'll only mention one that is critical. When a presentation is open in a browser, hit "i" to get an index view--an array of thumbnails of the slides in the presentation. This is handy to use as an overview while you are creating the presentation, and to quickly jump to different slides while presenting.

OK, that was the salesmanship. Be aware, however, there is a learning curve associated with Inkscape. Also, since it is not an application primarily designed for creating presentations, there a few strange things. For instance, moving slides around involves rearranging layers. This involves a somewhat clumsy UI. It pays to name your layers something informative. I recommend starting with the JessyInk example presentation, and editing it. Don't bother trying to start from scratch. My workflow starts with a template slide (actually layer) that I duplicate every time I want to make a new slide. Note there is a nice tutorial here, but I would not recommend following it too closely. I think the focus on creating a new presentation from scratch is counter productive. Most of us want to get going quickly. I got bogged down in questions of resolution, etc. Better (IMO) to just edit JessyInk example presentation.

Details of operation

Embedding videos: .ogv and .mp4 both work. I prefer .ogv, since it appears to be a well-supported open format. So far I usually save a .avi from imagej, then convert it to .ogv using ffmpeg (or avconv, as it is now known in Ubuntu). Neither .avi nor animated gifs (update: see below) seem to work. Use full or relative path (e.g. file:///home/user/presentations/movie.ogv) in url field. Make sure to set the size of the gray rectangle to the size of video. To get the size of the video in Ubuntu, just right click the file and look in its properties.

To make it easier to visualize while working on presentation: select gray box and make its stroke some easily seen color, then make it have no fill. Import a freeze frame from the video. It should be the same size as the box. Align them, then group them. This way you can resize the video based on the freeze frame. You can also set a clipping mask to crop the video.

Work around to get to actually play the video

If mouse clicks are on (you can advance the slide show using the mouse) press 'd' to enter drawing mode, then right-click on video to play/pause video. Or, go to Extensions>JessyInk>Mouse handler... in Inkscape, and choose No-click. Now you can just directly right-click to start the video (but must use arrow keys to advance the slide show).

To automatically loop all video elements in a presentation, copy this line:
videoNode.setAttribute("loop", "true");
right after this line in the presentation file:
videoNode.setAttribute("src", url);

(Open the presentation file in a text editor and search for the above line.)

To automatically show controls, paste this in too:
videoNode.setAttribute("controls", "true");

(2015/9/20) Update on animated gifs

It is easy to put an animated gif in a JessyInk presentation. (Thanks, Saul, for the comment.) Simply import the file, and choose to link (not embed) it. Now you can resize it just like a regular bitmap image. I don't know if there is an easy way to provide video controls. The best way I've come up with is to install a browser add-on that will allow you to pause and play animated gifs. For certain videos (that are meant to just play on loop while I'm on a slide) this has actually become my preferred method for including videos.

(2016/2/2) Update on workflow

I find that when presentations get very large, Inkscape can get quite slow, and the jessyink gui can be so slow that it is unusable. To avoid opening the gui, but still get the animation functionality, I now do the following: Open the xml editor.

 

Highlight the object (or group) that I want to animate. I almost always want something to appear, in which case I copy jessyink:effectIn
in the input bar (next to the 'set' button), and
name:appear;order:1;length:800
in the input box below that. The 'order' parameter should increase if you want multiple objects to appear sequentially on a slide. Press 'set', and the jessyink attribute will be added. After saving and refreshing the presentation in the browser, the animation should work.

Other notes

• JessyInk does not work with sublayers.
• You can save a presentation from a browser (save complete webpage in file menu).
• You can also export individual slides as .png files or .pdf files:

Download the scripts from here: https://github.com/berteh/svg-objects-export
from command line, run:
./svg-objects-export.py --xpath "//svg:g[@inkscape:groupmode='layer']" --extra '--export-area-page --export-id-only' my-image.svg
More discussion of this script can be found here.

This script is a great example of using Python to access Inkscape functionality from the command line.