Public Repository

Last pushed: 8 months 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. slides.md - This will hold your slides
    2. config.tsv - This will hold information that will be imported into the index.html file

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

--NEWH
## The Design Process

![get-to-know](../images/get-to-know-user-data-design.png)

--NEWH
## The User

--NEWV
## 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)
    myCanvas.parent('viz1')
    p.noStroke()
    p.noLoop()
  }

  p.draw = function() {
    p.background(255,255,255)
    p.fill(0,255,0)
    p.ellipse(p.mouseX,50,20,20)
  }

    p.mouseMoved = function() {
        p.redraw()
    }
}
var viz = new p5(viz_function)
  • In your slides.md, 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
Owner
jandot