TakeOff Presentation Software - Airplay-integrated ShowOff Fork¶ ↑

TakeOff is a Sinatra web app that reads simple configuration files for a presentation. It was written by Scott Chacon and the main repository lives at github.com/schacon/showoff.

This fork intends to integrate showoff with the airplay gem, written by Bruno Aguirre and maintained at github.com/elcuervo/airplay so that Takeoff can stream the slides to an Apple TV or another computer running Airserver. All work here at the moment of this writing is completely experimental and in now way a stable build, if you need to get this working please don’t hesitate to contact me and I’ll walk you around the installation.

As of now - and until I find it in myself to port the library - the key functionality for the airplay stream still relies on webkit2png, a library implemented in Python by Paul Hammond (github.com/paulhammond/webkit2png), a setup script will be required, I’ll write that soon enough so that the installation process is actually doable (It’ll still be too messy for my taste)

Setup¶ ↑

gem install takeoff

_

The idea is that you setup your markdown slide files in section subdirectories and then startup the takeoff server in that directory. It will read in your takeoff.json file for which sections go in which order and then will give you a URL to present from.

It can:

• show simple text

• show images

• show syntax highlighted code

• bullets with incremental advancing

• re-enact command line interactions

• call up a menu of sections/slides at any time to jump around

• execute javascript or ruby live and display results

• do simple transitions (instant, fade, slide in)

• show a pre-show slideshow while you wait to start

It might will can:

• show a timer - elapsed / remaining

• perform simple animations of images moving between keyframes

• show synchronized, hidden notes on another browser (like an iphone)

• show audience questions / comments (twitter or direct)

• let audience members go back / catch up as you talk

• let audience members vote on sections (?)

• broadcast itself on Bonjour

• let audience members download slides, code samples or other supplementary material

• let you write on the slide with your mouse, madden-style via canvas

• automatically resize text to fit screen [see Alex’s shrink.js]

Some of the nice things are that you can easily version control it, you can easily move sections between presentations, and you can rearrange or remove sections easily.

Usage¶ ↑

takeoff is meant to be run in a takeoff formatted repository - that means that it has a takeoff.json file and a number of sections (subdirectories) with markdown files for the slides you’re presenting.

$ gem install takeoff
$ git clone (takeoff-repo)
$ cd (takeoff-repo)
$ takeoff serve

If you run ‘takeoff’ in the example subdirectory of takeoff itself, it will show an example presentation, so you can see what it’s like.

You can also run ‘takeoff serve’ inside a section subdirectory. If there is no takeoff.json file then it will make its best guess, creating a presentation from all ‘.md` files in alphabetical order in the given (or current) directory.

Slide Format¶ ↑

You can break your slides up into sections of however many subdirectories deep you need. takeoff will recursively check all the directories mentioned in your takeoff.json file for any markdown files (.md). Each markdown file can have any number of slides in it, separating each slide with the ‘!SLIDE’ keyword and optional slide styles.

For example, if you run ‘takeoff create my_new_pres’ it will create a new starter presentation for you with one .md file at one/slide.md which will have the following contents:

!SLIDE

# My Presentation #

!SLIDE bullets incremental transition=fade

# Bullet Points #

* first point
* second point
* third point

That represents two slides, the first contains just a large title, and the second is faded into view showing the title and three bullets that are then incrementally shown. In order for takeoff to see those slides, your takeoff.json file needs to look something like this:

{
  "name": "Something",
  "description": "Example Presentation",
  "sections": [
    {"section":"one"}
  ]
}

If you have multiple sections in your talk, you can make this json array include all the sections you want to show in which order you want to show them.

Instead of a hash, you can use a plain string as an entry in the ‘sections` section of `takeoff.json`.

And if that plain string starts with ‘#’ then it is interpreted not as a filename, but as markdown. This is used for inserting interstitial slides or notes – for instance, Alex Chaffee’s [Ruby Notes](github.com/alexch/ruby_notes) uses it to insert lab instructions between lecture slide sections, which may vary from venue to venue.

Some useful styles for each slide are:

• center - centers images on a slide

• full-page - allows an image to take up the whole slide

• bullets - sizes and separates bullets properly (fits up to 5, generally)

• smbullets - sizes and separates more bullets (smaller, closer together)

• subsection - creates a different background for titles

• command - monospaces h1 title slides

• commandline - for pasted commandline sections (needs leading ‘$’ for commands, then output on subsequent lines)

• code - monospaces everything on the slide

• incremental - can be used with ‘bullets’ and ‘commandline’ styles, will incrementally update elements on arrow key rather than switch slides

• small - make all slide text 80%

• smaller - make all slide text 70%

• execute - on js highlighted code slides, you can click on the code to execute it and display the results on the slide

Check out the example directory included to see examples of most of these.

You can manage the presentation with the following keys:

• shift+g : Generates the images required for your presentation to be streamed through Airplay. This is way faster than creating them on the fly, but it is not strictly necessary

• a: sends the current slide to your AppleTV/Airserve.

• shift-a : create a png out of the current slide and send it to AppleTV/Airserver

• space, cursor right: next slide

• shift-space, cursor left: previous slide

• d: debug mode

• c, t: table of contents (vi)

• f: toggle footer

• z, ?: toggle help

• p: toggle preshow

Showing plain old markdown¶ ↑

If a markdown file has no !SLIDE keywords, then takeoff will treat every line beginning with a single hash – i.e. every H1 – as a new slide in “bullets” style. Remember that you can’t specify classes or transitions in this mode, and as soon as you add one !SLIDE you need them everywhere.

Custom JavaScript¶ ↑

To insert custom JavaScript into your presentation you can either place it into a file (with extension .js) into the root directory of your presentation or you can embed a <script> element directly into your slides. This JavaScript will be executed—as usually—as soon as it is loaded.

If you want to trigger some JavaScript as soon as a certain page is shown or when you switch to the next or previous slide, you can bind a callback to a custom event:

• takeoff:show will be triggered as soon as you enter a page

• takeoff:next will be triggered when you switch to the next page

• takeoff:prev will be triggered when you switch to the previous page

These events are triggered on the “div.content” child of the slide, so you must add a custom and unique class to your SLIDE to identify it:

!SLIDE custom_and_unique_class
# 1st Example h1
<script>
// bind to custom event
$(".custom_and_unique_class").bind("takeoff:show", function (event) {
  // animate the h1
  var h1 = $(event.target).find("h1");
  h1.delay(500)
    .slideUp(300, function () { $(this).css({textDecoration: "line-through"}); })
    .slideDown(300);
});
</script>

This will bind an event handler for takeoff:show to your slide. The h1-element will be animated, as soon as this event is triggered on that slide.

If you bind an event handler to the custom events takeoff:next or takeoff:prev, you can prevent the default action (that is switching to the appropriate slide) by calling *event.preventDefault()*:

!SLIDE prevent_default
# 2nd Example h1
<script>
$(".prevent_default").bind("takeoff:next", function (event) {
  var h1 = $(event.target).find("h1");
  if (h1.css("text-decoration") === "none") {
    event.preventDefault();
    h1.css({textDecoration: "line-through"})
  }
});
</script>

This will bind an event handler for takeoff:next to your slide. When you press the right arrow key the first time, the h1-element will be decorated. When you press the right array key another time, you will switch to the next slide.

The same applies to the takeoff:prev event, of course.

Custom Stylesheets¶ ↑

To insert custom Stylesheets into your presentation you can either place it into a file (with extension .css) into the root directory of your presentation or you can embed a <link> element directly into your slides. This stylesheet will be applied as soon as it is loaded.

The content generated by the slide is wrapped with a div with the class .content like this.

<div ref="intro/01_slide/1" class="content" style="margin-top: 210px;">
<h1>jQuery &amp; Sinatra</h1>
<h2>A Classy Combination</h2>
</div>

This makes the .content tag a perfect place to add additional styling if that is your preference. An example of adding some styling is here.

.content {
  color: black;
  font-family: helvetica, arial;
}
h1, h2 {
  color: rgb(79, 180, 226);
  font-family: Georgia;
}
.content::after {
  position: absolute;
  right: 120px;
  bottom: 120px;
  content: url(jay_small.png);
}

Note that the example above uses CSS3 styling with ::after and the content -attribute to add an image to the slides.

Language highlighting¶ ↑

takeoff uses shjs to highlight code blocks. If you begin a code block with three @-signs followed by a programming language name, that line will be stripped and the rest of the block will become sparkly and colorful.

@@@ ruby
10.times { puts "Whee!" }

Custom Ruby Files¶ ↑

If you want to have executable Ruby code on your slides you must set the envrionment variable ENV. This can be done with

export takeoff_EVAL_RUBY=1

or

# On Heroku
heroku config:add takeoff_EVAL_RUBY=1

If you need supporting libraries when you evaluate the code. You can do this by putting Ruby files (*.rb) into the root directory of the presentation then they will be required when the presentation loads.

Editor integration¶ ↑

The “add slide” feature can allow you to add the necessary boilerplate from your editor. If you are using vim, you can

!takeoff add -t code Check This Code

And your buffer will get

!SLIDE
# Check This Code #
    @@@ Ruby
    code_here()

added where your cursor was. Binding this to a keybinding can allow you to add new slides quickly.

Command Line Interface¶ ↑

takeoff command_name [command-specific options] [--] arguments...

• Use the command help to get a summary of commands

• Use the command help command_name to get a help for command_name

• Use -- to stop command line argument processing; useful if your arguments have dashes in them

Commands¶ ↑

add

Add a new slide at the end in a given dir

create

Create new takeoff presentation

help

Shows list of commands or help for one command

heroku

Setup your presentation to serve on Heroku

github

Setup your presentation to serve on GitHub Pages

serve

Serves the takeoff presentation in the current directory (or a given dir)

static

Generate static version of presentation

takeoff add [title]¶ ↑

Add a new slide at the end in a given dir

Aliases

• new

Outputs or creates a new slide. With -d and -n, a new slide is created in the given dir, numbered to appear as the last slide in that dir (use -u to avoid numbering). Without those, outputs the slide markdown to stdout (useful for shelling out from your editor). You may also specify a source file to use for a code slide.

options for add¶ ↑

These options are specified after the command.

-d, --dir=dir

Slide dir (where to put a new slide file)

-n, --name=basename

Slide name (name of the new slide file)

-s, --source=path to file

Include code from the given file as the slide body

-t, --style, --type=valid takeoff style/type

Slide Type/Style ( default: title)

-u, --nonumber

Dont number the slide, use the given name verbatim

takeoff create dir_name¶ ↑

Create new takeoff presentation

Aliases

• init

This command helps start a new takeoff presentation by setting up the proper directory structure for you. It takes the directory name you would like takeoff to create for you.

takeoff help [command]¶ ↑

Shows list of commands or help for one command

takeoff serve ¶ ↑

Serves the takeoff presentation in the current directory

options for serve¶ ↑

These options are specified after the command.

-f, --pres_file=arg

Presentation file (default: takeoff.json)

-h, --host=arg

Host or ip to run on ( default: localhost)

-p, --port=arg

Port on which to run ( default: 9090)

takeoff static name¶ ↑

Generate static version of presentation

Requirements¶ ↑

• Ruby (duh)

• Sinatra (and thus Rack)

• BlueCloth

• Nokogiri

• json

• GLI gem

• Firefox or Chrome to present

Contributing¶ ↑

Do I look like a serious guy? Submit functional code (prettyness will also be measured!) and I’ll merge it. Also: consider if your contribution could also apply to github.com/schacon/showoff.git :) stream