Public Repository

Last pushed: a year ago
Short Description
Docker image for creating reveal.js presentations, with interactive visualizations
Full Description
  1. Create a new directory for your presentation
  2. Add 3 subdirectories:
    1. images/
    2. slides/
    3. scripts/
  3. In the slides/ directory, create 2 files:
    1. - This will hold your slides
    2. config.tsv - This will hold information that will be imported into the index.html file

The file contains all your slides. To switch to the next horizontal or vertical slide, use --NEWH or --NEWV, respectively. For example:

## The Design Process


## The User

## Find the **why**

The config.tsv file contains key-values, like this:

CONF_TITLE         Visual Design - Exercise
CONF_AUTHOR        Jan Aerts
CONF_DESCRIPTION    Visual Design - Exercise

This information will be imported into the index.html file when you run the image.

To use, run:

docker run \
    -p 8000:8000 -p 35729:35729 \
    --name docker_presentation \
    -v YOUR_DIRECTORY/images:/opt/presentation/images \
    -v YOUR_DIRECTORY/slides:/opt/presentation/slides \
    -v YOUR_DIRECTORY/scripts:/opt/presentation/scripts \
    -d jandot/docker-presentation

Adding visualizations

This docker image automatically picks up any .js file in the scripts directory. To include visualizations, do the following:

  • Put the javascript code itself into the scripts file (1 script per visualization). An example code block:
var viz_function = function(p) {
  p.setup = function() {
    var myCanvas = p.createCanvas(100,100)

  p.draw = function() {

    p.mouseMoved = function() {
var viz = new p5(viz_function)
  • In your, add the div where the visualization should be inserted.
## My slide
Here's an interactive visualization
<div id="viz1"></div>

The id of this div should be the same as the one mentioned in myCanvas.parent() in the script. It should be unique.

The footer

I've added a footer to the slides to show the progress. See TOC-progress for more info and customization. To know how titles are selected for this footer, see the Presentable plugin.

Basically, each new horizontal slide becomes a new entry in the left column. Any h1, h2 or h3 headers in that section of vertical slides become entries in the right column.

  • To hide/show the footer, use q.
  • To remove a header from the footer (e.g. the title of your presentation), you'll have to use plain html instead of markdown, because you have to add a class to it. For example: use <h2 class="no-toc-progress">My title</h2> instead of ## My title.
Docker Pull Command