RISE ¶

Reveal.js - Jupyter/IPython Slideshow Extension

also known as live_reveal

RISE live demo¶

My talk about RISE at SciPy 2014 (click on the image to see it):

Installation¶

To install this nbextension, simply run python setup.py install from the RISE repository.

You also have some interesting optional arguments, such as:

--develop          # Install livereveal as a symlink 
                   # to the source.
--profile PROFILE  # The name of the profile to use.

Note: We are now (27 Feb 2015) using the new frontend config system, so if you installed RISE with the --develop option before, please reinstall it again. Thanks.

Bookmarklet¶

All of the python in RISE just ensures the JS/CSS is delivered to your browser by your Jupyter server. Bookmarklets, can run arbitrary remote JS. If you're good with this...

In [29]:

%%html
<h1>Drag <span class="label label-info" title="drag this to your bookmark bar">
<a href="javascript:(function(){require%28%5B%22https%3A//damianavila.github.io/RISE/livereveal/main.js%22%5D%2C%20function%28r%29%7Br%28%29%3B%7D%29%3B}());">
    <i class="fa fa-arrows"></i>
    RISElet
</a>
</span>
to your bookmark bar!</h1>

Drag RISElet to your bookmark bar!

...And you can have RISE on any running Notebook.

About¶

As you know... I love Jupyter/IPython and I like Reveal.js a lot.

Previously, I developed a "converter" for the nbconvert library to export ipynb to a STATIC html slideshow based on the Reveal.js library.

But now, here, you don't have a STATIC version anymore, you have a LIVE version... I mean, a notebook rendered as a Reveal.js-based slideshow, where you can execute code or show to the audience whatever you can show/do inside the plain notebook (but in a nicer way).

NOTES¶

RISE master branch will be following the Jupyter/IPython master codebase. There is also a released RISE 2.x version compatible with the IPython 2.x series, but this version will be not maintained after IPython 3.0 release.
I am still learning JS to do that, so probably the code is ugly. I will try to improve it, the good news: it is working!!
Here is a gist of an example presentation. You can test the extension with it or use it as a template... or make your own presentaion ;-)
I tested the extension without losing any ipynb for more than one year now, but I am touching your ipynb in a complex way... so, make sure you have a backup of your ipynb to prevent any possible loss.
There are some issues in Firefox (if you use it, please report me any issue because I want to support both browsers), so I recommend using Chromium/Chrome during your talks).

Usage¶

In the notebook toolbar, a new button will be available: Enter/Exit Live Reveal Slideshow

The notebook toolbar also contains a Cell Toolbar dropdown menu that gives you access to metadata for each cell. If you select Slideshow, the top right corner of each cell shows a dropdown where you can select the Slide Type, which RISE shares with nbconvert slides.

Some notes:¶

Use spacebar to go forward and shift+spacebar to go backward (or the controller in the bottom right corner). ↑ and ↓ are reserved for interacting with notebook cells and cannot be used to navigate subslides or text, instead use pgup and pgdown.
Unlike the traditional IPython/Jupyter notebook, the shift+enter shortcut runs the cell but does not select the next cell (a la ctrl+enter). This avoids switching slides after running a cell and problems that arise when injecting new cells on the fly.
When you exit the presentation mode by pressing or alt+r, the normal notebook interface will reappear.
Learn more about RISE-specific shortcuts by pressing the help button at the bottom left of the screen.

Manual installation¶

I encourage you to use the setup.py-based installation (see above), but if you must install manually, put the livereveal folder from the repo into your $HOME/.ipython/nbextensions folder and run this python code to enable it:

from IPython.html.services.config import ConfigManager
from IPython.utils.path import locate_profile
cm = ConfigManager(profile_dir=locate_profile(get_ipython().profile))
cm.update('notebook', {"load_extensions": {"livereveal/main": True}})

or this python code to disable it:

from IPython.html.services.config import ConfigManager
from IPython.utils.path import locate_profile
cm = ConfigManager(profile_dir=locate_profile(get_ipython().profile))
cm.update('notebook', {"load_extensions": {"livereveal/main": False}})

Configure your own options¶

You can configure the theme and the transition of your slides, and where slideshows start from, by running this python code:

from IPython.html.services.config import ConfigManager
from IPython.utils.path import locate_profile
cm = ConfigManager(profile_dir=locate_profile(get_ipython().profile))
cm.update('livereveal', {
              'theme': 'serif',
              'transition': 'zoom',
              'start_slideshow_at': 'selected',
})

With these options, your slides will get the serif theme and the zoom transition, and slideshows will start from the selected cell (instead of from the beginning, which is the default).

You can use a similar piece of python code to change the width and height of your slides:

from IPython.html.services.config import ConfigManager
from IPython.utils.path import locate_profile
cm = ConfigManager(profile_dir=locate_profile(get_ipython().profile))
cm.update('livereveal', {
              'width': 1024,
              'height': 768,
})

There are also options for controls, progress, history, minScale and slideNumber.

Note: The use of the minScale option (values other then 1.0) can cause problems with CodeMirror.

Usage with Leap Motion¶

Reveal.js supports the Leap Motion controller. To control RISE slideshows with the Leap, put the reveal leap plugin options in your config by running this Python code:

from IPython.html.services.config import ConfigManager
from IPython.utils.path import locate_profile
cm = ConfigManager(profile_dir=locate_profile(get_ipython().profile))
cm.update('livereveal', {
    'leap_motion': {
        'naturalSwipe'  : True,     # Invert swipe gestures
        'pointerOpacity': 0.5,      # Set pointer opacity to 0.5
        'pointerColor'  : '#d80000',# Red pointer
    }
})

To disable it:

from IPython.html.services.config import ConfigManager
from IPython.utils.path import locate_profile
cm = ConfigManager(profile_dir=locate_profile(get_ipython().profile))
cm.update('livereveal', {'leap_motion': None})

Feedback¶

If you have any feedback, or find any bugs, please let me know by opening an issue.

Thanks!

Damián.

RISE¶