New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement slide show mode for the notebook #1580

Closed
ellisonbg opened this Issue Apr 12, 2012 · 19 comments

Comments

Projects
None yet
6 participants
@ellisonbg
Member

ellisonbg commented Apr 12, 2012

It would be very nice to be able to use notebooks to present slide shows. This should be implemented as a different view of the notebook. It should have custom css for formatting markdown cells in a presentation appropriate manner. Larger text, centering of titles, etc. There should be buttons to change to the next and previous slides. We will have to figure out how to decide what cells go on a given page. We have talked about using heading cells for that or introducing a new page break or slide break cell type.

@alport

This comment has been minimized.

alport commented Oct 18, 2012

Why not just insert a Markdown Page Break: when you want a new page?
I have tried that and it doesn't seem to do anything at the moment.

@Carreau

This comment has been minimized.

Member

Carreau commented Oct 18, 2012

We decided not to "pollute" the cells with marks, the prototype used to use HTML and Python Comment to determine the break. We think that showing the example by using metadata is the best in many points.

@alport

This comment has been minimized.

alport commented Oct 19, 2012

Please expand: "..using metadata...". Does page break functionality exist at the moment in V0.13? If so, pse send a link.

Dr Mike Alport (PhD Iowa)
Managing Director
Advanced Imaging Technologies (Pty) Ltd
Unit 20, 8 Reed Place, Maxmead, Pinetown, 3610, South Africa.
PO Box 906, Westville, 3630, South Africa.
Ph: +27 (0)31 701-7078
Fax:+27 (0)86 510-2225
Cell:+27 (0)82 555-1747
Email: alport@ait-sa.com
URL: www.AIT-SA.com
Skype: mike.alport

On 18 Oct 2012, at 5:33 PM, Bussonnier Matthias notifications@github.com wrote:

We decided not to "pollute" the cells with marks, the prototype used to use HTML and Python Comment to determine the break. We think that showing the example by using metadata is the best in many points.


Reply to this email directly or view it on GitHub.

@Carreau

This comment has been minimized.

Member

Carreau commented Oct 19, 2012

Each Notebook, Worksheet and Cell have a metadata field that can support arbitrary data added by extension/users.
This allow to add information that could be interpreted differently by other programs extensions.

There is a slide mode prototype see #2333 et #2193.
Metadata allow for example to define 2 kinds of stop, a stop between 2 slides, or a step in the same slide.

Metadata could also be use to say "here only show output, not code" , "show this code line after line"

All those information are 'hidden' when running normal notebook, and allow to keep it clean. If we start using visual marking in cells, we will end with visually clutterd notebook difficult to work with.

@ghost ghost assigned Carreau Feb 6, 2013

@astrofrog

This comment has been minimized.

Contributor

astrofrog commented Apr 16, 2013

@Carreau - I have a question about this, I'm using the latest dev IPython as of yesterday, and I can construct slides, and then convert the notebook to a static presentation with nbconvert, but is there any way currently to present the slideshow from the notebook, or is this still being implemented at this time?

@Carreau

This comment has been minimized.

Member

Carreau commented Apr 16, 2013

there is a live slideshow still in progress here : https://github.com/Carreau/ipython-static-profiles/tree/master/slidemode

@astrofrog

This comment has been minimized.

Contributor

astrofrog commented Apr 16, 2013

Awesome! I'm teaching a University Python course this semester with the notebook (started this week) and this will be great!

@Carreau

This comment has been minimized.

Member

Carreau commented Apr 16, 2013

@astrofrog, Great, we'll be happy to get feedback.

@gotgenes

This comment has been minimized.

gotgenes commented May 15, 2013

@Carreau I'm not having any luck with this. Here are the steps I performed

  1. Made a new virtualenv and installed IPython from the GitHub repo and the notebook dependencies. Command for installing IPython:

    pip install -e git://github.com/ipython/ipython.git#egg=ipython
    
  2. Created a new profile

    ipython profile create slideshow
    
  3. Cloned the ipython-static-profiles repository

    cd ~/.ipython/profile_slideshow
    git clone git://github.com/Carreau/ipython-static-profiles.git
    
  4. Edited my ipython_notebook_config.py at the appropriate line with this

    # Extra paths to search for serving static files.
    #
    # This allows adding javascript/css to be available from the notebook server
    # machine, or overriding individual files in the IPython
    c.NotebookApp.extra_static_paths = [
        '/Users/clasher/.ipython/profile_slideshow/static',
        '/Users/clasher/.ipython/profile_slideshow/static/css_selector',
        '/Users/clasher/.ipython/profile_slideshow/static/slidemode',
        '/Users/clasher/.ipython/profile_slideshow/static/nbviewer_theme',
        '/Users/clasher/.ipython/profile_slideshow/static/init_cell',
    ]
    
  5. Created the js subdirectory for custom.js:

    cd ~/.ipython/profile_slideshow/static/
    mkdir js
    
  6. Created a new file ~/.ipython/profile_slideshow/js/custom.js; I tried the three different following
    contents

    1. Per the readme:

      $.getScript('/static/js/css_selector.js')
      $.getScript('/static/js/slide_meta.js')
      $.getScript('/static/js/init_cell.js')
      
    2. Since there's no actual path /static/js/init_cell.js, I tried

      $.getScript('/css_selector/js/css_selector.js')
      $.getScript('/slideshow/js/slide_meta.js')
      $.getScript('/init_cell/js/init_cell.js')
      
    3. Since there's css_selector, slideshow, etc. already in the
      c.NotbookApp.extra_static_paths from step 4 above, I tried just

      $.getScript('/js/css_selector.js')
      $.getScript('/js/slide_meta.js')
      $.getScript('/js/init_cell.js')
      
  7. Started the ipython notebook with

    ipython notebook --profile=slideshow
    

None of the custom.js configurations gave me any extra "presentation" button after changing the
Cell Toolbar type to "Slideshow". The toolbar looks the exact same.

Would you please provide more explicit instructions?

My platform is OS X 10.7.5 with Python 3.3.1 from MacPorts.

Edit: corrected the custom.js configurations and added command used to run the ipython notebook.

@gotgenes

This comment has been minimized.

gotgenes commented May 15, 2013

Alright, for profile_slideshow/static/js/custom.js the following contents finally worked for me:

$.getScript('/static/css_selector/js/css_selector.js')
$.getScript('/static/slidemode/js/slide_meta.js')
$.getScript('/static/init_cell/js/init_cell.js')
@Carreau

This comment has been minimized.

Member

Carreau commented May 15, 2013

Great if it works.

The first missing part was probably there

c.NotebookApp.extra_static_paths = [
    '/Users/clasher/.ipython/profile_slideshow/static',  #ok
    '/Users/clasher/.ipython/profile_slideshow/IPython-static-profiles/css_selector',
    '/Users/clasher/.ipython/profile_slideshow/IPython-static-profiles/slidemode',
    '/Users/clasher/.ipython/profile_slideshow/IPython-static-profiles/nbviewer_theme',
    '/Users/clasher/.ipython/profile_slideshow/IPython-static-profiles/init_cell',
]

Anyway, just for you to know, if you have

c.NotebookApp.extra_static_paths = [
    '/Foo/bar/kux/'
]

And a file /Foo/bar/kux/zob/test.js.
You can get the file in the notebook with $.getScript('/static/zob/test.js').

I'll try to write something to make installing extension like that a little easier.

@gotgenes

This comment has been minimized.

gotgenes commented May 15, 2013

Thanks for the information, @Carreau!

I have another question: I'm trying to group multiple cells on one slide; in the diagram in #2680 it would be the "red" container. The only way I can get this to work that I've found is marking cells as "Fragment", which causes them to have to be revealed one-by-one. Is there any other way of grouping a couple of cells into a single slide? I feel like I'm running up against IPython Notebook's lack of support of nesting or grouping.

@Carreau

This comment has been minimized.

Member

Carreau commented May 16, 2013

Hi Chris,

Letting cells as undefined (-) should make them appear on the same slide
than the previous one.

Nesting/grouping is on IPython roadmap.

As for updating live slideshow mode, with doc and the rest, it is on my
todo list, but I miss time to do it.

Le mercredi 15 mai 2013, Chris Lasher a écrit :

Thanks for the information, @Carreau https://github.com/Carreau!

I have another question: I'm trying to group multiple cells on one slide;
in the diagram in #2680 https://github.com/ipython/ipython/issues/2680it would be the "red" container. The only way I can get this to work that
I've found is marking cells as "Fragment", which causes them to have to be
revealed one-by-one. Is there any other way of grouping a couple of cells
into a single slide? I feel like I'm running up against IPython Notebook's
lack of support of nesting or grouping.


Reply to this email directly or view it on GitHubhttps://github.com//issues/1580#issuecomment-17967325
.

@gotgenes

This comment has been minimized.

gotgenes commented May 16, 2013

Thanks for your reply, @Carreau! Leaving cells undefined (-) works well!

I have yet another question: IPython Notebook does not seem to be responding to changes in static/slidemode/css/custom.css; even after shutting down the server closing the browser tabs, starting the server back up again, and reopening the notebook. Then, when I reverted the changes to custom.css using git checkout custom.css so that it matches exactly the file at clone time, the centering of h1 elements disappeared. I even tried clearing the browser cache to fix this and it had no effect. Do you know if CSS is being cached anywhere else?

Also, none of the CSS switch dialogs work for me. Maybe this is a separate problem or maybe it's related. I'm running off of the master branch of IPython.

@Carreau

This comment has been minimized.

Member

Carreau commented May 16, 2013

No clues about soem other caching, we don't do anything special about that.

Also, none of the CSS switch dialogs work for me

I'm not quite sure what you ask here, but master did get some change , or is about too, so I wouldnnt be surprise if a few things didn't worked.

@gotgenes

This comment has been minimized.

gotgenes commented May 16, 2013

Sorry, this is what I meant by "CSS switch dialog"; the correct phrase is probably "select tag" or "dropdown menu":

CSS Dropdown Menu

So just to be clear, for you, when you change the values in your custom.css, the changes do have an effect on your Slideshow Presentation-mode of your IPython notebook?

@Carreau

This comment has been minimized.

Member

Carreau commented May 16, 2013

Oh, this Css switch dialog I made a post about.... I haven't looked at it in a while, it was just a proof of concept. I'll add this to my endless todo list.

Otherwise, Yes, custom.css should influence the slideshow presentation mode.

@Carreau

This comment has been minimized.

Member

Carreau commented Jul 6, 2013

bumping to 2.0, and it will probably be as an extension.

@minrk minrk modified the milestones: no action, 3.0 Nov 13, 2014

@minrk

This comment has been minimized.

Member

minrk commented Nov 13, 2014

slideshow functionality is implemented in extensions

@minrk minrk closed this Nov 13, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment