Displaying animated diagrams in org-reveal slide decks with SVG

org-reveal can be used to author slide decks with org-mode. The slides are displayed as an HTML document animated with reveal.js.

reveal.js allows to progressively display fragments which reveal parts of a page, for instance a bullet list.

It is also possible to display animated diagrams, as reveal.js fragments, provided that such diagrams are made as embedded SVG images included in the HTML.

Adding class="fragment" (and variations, including the associated data-fragment-index attributes) to the SVG elements helps animate parts of the diagram with the same JS actions as for regular bullet fragments.

The trick is to embed the SVG diagram inside the HTML source using the following code in the org-mode source:

#+BEGIN_EXPORT html
<svg ...>  
    ...
</svg>  
#+END_EXPORT

I’ve found inspiration for that trick seeing the way SVG content was animated in the following demo.

So far, I’ve edited my diagrams with inkscape, and finally copied the whole <svg> tag from the saved inkscape file, into the #+BEGIN_EXPORT embedded HTML of the org file.

You can see a demo of such an animation in the https://olberger.gitlab.io/org-teaching/slides.html document (slide 26: “Fragmented SVG display”).

Hope this helps.

Added docker container to my org-teaching framework to ease org-mode exports

I’ve improved a bit the org-teaching framework in order to prepare for the next edition of the CSC4101 classes.

I’ve now added a docker container which is in charge of performing the HTML or PDF exports of the slides (using org-reveal) or handbooks (using LaTeX).

Emacs and org-mode are still advised for editing contents, but having this container in the loop ensures that colleagues are able to preview the changes to the teaching material, and I’m no longer a bottleneck for generating the handouts. This also allows to export in a reproducible way, which doesn’t depend on my Emacs config tweaks.

I’ve also added Gitlab pages to the project’s CI so that the docs are updated live at https://olberger.gitlab.io/org-teaching/.

It’s probably not yet rady for use by anyone else, but I’d be glad to get feedback 😉

Using org-mode and org-reveal for teaching material

I’ve finally put together in a single example repo an example of the way I manage teaching material with org-mode.

It needs more docs and work, but should be usable. Docs and demo at http://www-public.tem-tsp.eu/~berger_o/org-teaching/ and the Gitlab repo at https://gitlab.com/olberger/org-teaching for those curious.

It doesn’t intend to be a full-fleshed product (also the name is just a codename), but release early, release often, they said 😉

Of course, teaching requires much more stuff than slides and handbooks, but eh, that’s my contribution for the moment.

Update 2017/05/18: I’ve updated the docs and repo to include generation of a “printed slides deck” in PDF, using DeckTape.

Deploying parallel Eclipse installations for teaching labs

I’ve worked on documenting and automating the deployment of Eclipse installations for several teaching labs of Telecom SudParis.

The recently introduced Eclipse Installer (Oomph) allows to install several parallel Eclipse installations containing diverse versions of Eclipse and bundles, so that each specific installation only contains a limited set of features, and that common plugins are pooled in a shared space.

This allows to deploy different Eclipse installations for different course labs, containing only the needed features, and minimizing the disk space needed for the whole.
Previously, we installed pretty much everything in a single place (yum install eclipse*), which lead to providing students with all possible languages support and features, on every machines, by default.
One of the main expected benefits of the new approach is to minimize Eclipse startup times, but this should also help avoid conflicting plugins.
If the experiment proves useful, we’ll then have one Eclipse installation for each needing computer science lab, all under different subdirs of /opt/eclipse/. For instance students registered in CSC4101 will start Eclipse by executing /opt/eclipse/CSC4101/eclipse/eclipse, giving them features for PHP and Symfony development (resp /opt/eclipse/CSC4102/eclipse/eclipse for CSC4102, for Java + Maven, etc.).

I’ve made available a document which explains the process, which was originally documented using org-mode’s babel feature which allows to write “litterate devops” documents containing executable instructions. I’ve used a Vagrant + Virtualbox setup to create the installation inside a Fedora VM, which mimics the target system for our lab machines.

The git repo of the corresponding project should be accessible for anyone interested.

How to publish an HTML5+RDFa Web site from org-mode

I’m a big fan of org-mode (see previous posts), and I’ve started maintaining (sic) my professional webpage(s) with it.

But I’ve also recently tried and publish some more Semantic/Linked Data aware documents too (again, previous posts).

Ideally, I think my preferred workflow for publishing articles or documents of some importance, would be to author them in org-mode, and then publish them as HTML5 including RDFa meta-data and annotations. Instead, I’ve more frequently been doing conversions of org-mode to LaTeX, in order to submit a printable version, and later-on decided to convert the LaTeX to HTML5+RDFa…

But one of the issues is how to properly embed the RDF meta-data inside the org-mode documents, so that the syntax is both compact and expressive enough.

I doubt there’s a universal solution, given that RDF tends to be complex, and graphs may not project easilly along a mainly linear structure of an org-mode document, but anyway, there seems to be possible middle grounds that are practically good enough.

I’ve tried and implement a solution, which reuses the principles set by John Kitchin in Extending the org-mode link syntax with attributes, i.e. implementing an HTML exporter for a particular custom link type, which will convert the plist-like syntax to some RDFa constructs.

Here’s a description of the whole solution : http://www-public.telecom-sudparis.eu/~berger_o/test-org-publishing-rdfa.html

The nice thing about org-mode, and its litterate programming babel environment, is that it allows to embed the code of the links exporter inside the org document, avoiding to dissociate the converter from the document’s source, making it auto-complete.

Next step will probably be to author a paper (or convert back a “preprint” of mines) with org-mode, in order to provide Linked Research meta-data.

Stay tuned for more details, and in the meantime, I welcome any improvement to the org/babel/elisp setup.

Edit: I’ve recorded a webcast to provide a bit more details, available on YouTube : https://youtu.be/OyI3DVqllx4