Getting started

  Download Sample deck: a self-guided tutorial on processing text files with Node.js

Two ways of creating decks

Each presentation is called a deck. You have two routes for creating decks:

  1. GUI: You can create new decks entirely with the GUI, by clicking on the NEW DECK button on first screen. After you choose a location and filename to save, you are good to go with your first slide-show.
  2. Text: by editing the .whiteboard plain-text file-format. If you are more at home in a text editor, this might be the fastest. Click here to learn how to do this.

Using Whiteboard

Menus: Whiteboard is entirely controlled by the application menu and the context menu (using Right click or Ctrl + Click). The context menu is different depending on where you click, so if you right-click on the Editor, for example, you will have options to save the current file open in the editor.

Shortcuts: Most menu actions have also a shortcut key assigned. Like the context menu, the available shortcuts change depending on which pane you are using. For example: for the editor Ctrl+S will save the open file, and for the browser, Ctrl+R will hard-refresh. To see the list of all available shortcuts, hit F1.

Slide editing: Using the menu, or F2, you can create, edit, delete, and re-arrange slides. Create a slide for each activity you want to demo, and add an editor, terminal, markdown text, or browser as appropriate for each slide. When you are done, be sure to save from the File menu.

Presenting with Whiteboard

Saving and organizing presentations: A reasonable way to organize your presentations is to have each slide or group of slides have it's own directory, with relevant files about each topic within it. Then, you can set up editors, browsers, terminals, and explanatory text as needed for each slide to go through a series of activities. Whiteboard's simple plain-text format makes it easy to create and share presentations via git or an archive file. Sharing ahead of time even allows participants to follow along. See this self-guided tutorial as an example.

Presentation Mode: Unlike other slide show applications, Whiteboard was designed with improvisation as a primary focus. Thus, it does not separate a GUI or Editing mode from it's presentation mode. Presentation Mode causes Whiteboard to go full-screen, but still offers the same keyboard shortcuts and context menu as before. This makes it easy to have a nice presentation even without going to full-screen, and to change or edit slides in the middle of a presentation.

Directing focus during presentations: During a presentation, using the menu or F10 you can maximize an individual pane. This state is saved, so you can leave certain panes maximized to hide other content. A useful technique is to leave your slide titles all maximized, which gives time to give a verbal introduction to the topic without the distraction of code or browser on the screen, and then unmaximize it when you are ready to plunge in.

The Whiteboard file format

The decks are stored in a plaintext format that resembles INI files, with the extension `.whiteboard`. The format is simple and convenient enough to edit by hand.

Accepted values in slides
  • title - a bold title at the top of the slide
  • browser - consists of a web-browser that can be pointed to a remote HTTP address (starting with http:// or https://) or local HTML file (starting with file://).
  • editor - can edit multiple code files in tabs with syntax highlighting, consisting of comma (or new-line) separated of relative or absolute file paths. Wild cards / glob syntax is accepted.
  • terminal - bash terminal, specify a starting directory
  • markdown - multi-line element to contain arbitrary explanatory text
  • maximize - the value should be one of the above pane types, causing that pane be maximized at the start (useful while introducing a topic to avoid having unrelated or distracting text until the time comes)
  • layout - layout of the slide, the value should be one "horizontal", "vertical", or "grid"
Syntax

The Whiteboard format consists of lines of [slide] followed by key/value pairs in the format of key = value, each on a new line. For multi-line values, you can use the syntax key : ''' (... multiple lines of text ...) '''. The only requirement is that the final ''' is alone on its own line.

Example
[slide]
title=POST request demonstration
terminal=./POST_python/
editor=./POST_python/*.py

[slide]
title=Demo of final app
browser = ./POST_challenge/index.html
markdown : '''
# Recreate the browser
- Try to recreate this app using Flask
- Hint: You'll have to use a POST endpoint
'''