# ipython/ipython

### Subversion checkout URL

You can clone with
or
.

# [WIP] Metaui slideshow#2687

Merged
merged 4 commits into from
+59 −0

### 4 participants

Owner

Pr to discuss specific implementation for the slideshow mode

This is the same as PR #2333 plus specific stuff.

pinging
@damianavila and @ellisonbg

.../html/notebook/static/js/examples/metaui.slideshow.js
 ((49 lines not shown)) + + MetaUI.register_callback('slideshow.hslide',hslide); + MetaUI.register_callback('slideshow.vslide',vslide); + MetaUI.register_callback('slideshow.fragment',fragment); + + //slideshow_preset.push('slideshow.fragment'); + //slideshow_preset.push('slideshow.vslide'); + //slideshow_preset.push('slideshow.hslide'); + + var select_type = MetaUI.utils.select_ui_generator([ + ["-" ,undefined ], + ["Header Slide" ,"header_slide" ], + ["Slide" ,"slide" ], + ["Fragment" ,"fragment" ], + ["Skip" ,"skip" ], + ],
 damianavila added a note Dec 17, 2012 It will be great if "-" return "-" or "none" or some other string... because undefined give me problems with reveal.js Can you do this modification? Thanks Owner Carreau added a note Dec 18, 2012 The problem is when metadata does not exist, javascript return a undefined, so even if I map nothing to undefined you will still get some (and the ui will be inconsistent) if user have never touched the cell. So I preferred to explicitly map it to undefined. damianavila added a note Dec 18, 2012 El 18/12/12 04:22, Bussonnier Matthias escribió: In IPython/frontend/html/notebook/static/js/examples/metaui.slideshow.js: > + > + MetaUI.register_callback('slideshow.hslide',hslide); > + MetaUI.register_callback('slideshow.vslide',vslide); > + MetaUI.register_callback('slideshow.fragment',fragment); > + > + //slideshow_preset.push('slideshow.fragment'); > + //slideshow_preset.push('slideshow.vslide'); > + //slideshow_preset.push('slideshow.hslide'); > + > + var select_type = MetaUI.utils.select_ui_generator([ > + ["-" ,undefined ], > + ["Header Slide" ,"header_slide" ], > + ["Slide" ,"slide" ], > + ["Fragment" ,"fragment" ], > + ["Skip" ,"skip" ], > + ], The problem is when metadata does not exist, javascript return a |undefined|, so even if I map nothing to undefined you will still get some (and the ui will be inconsistent) if user have never touched the cell. So I preferred to explicitly map it to undefined. — Reply to this email directly or view it on GitHub . OK, Mathias... I read the code after send it this request... I understand... I have found a solution, thanks again... to join this conversation on GitHub. Already have an account? Sign in to comment

@Carreau I need to add another cell type:
Something like,

+["Notes"     ,    "notes" ]


Obviously, to provide speaker notes... the library gives us this support so I want to add it because it is a very useful resource... and I need this another cell type to implement it. With this enhancement, we will support all the main capabilities that reveal provide us.

Thanks, and sorry to bother you all these last days ;-) !

Speaker Notes
reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Append ?notes to presentation URL or press the 's' key on your keyboard to open the notes window.

By default notes are written using standard HTML, see below, but you can add a data-markdown attribute to the

to write them using Markdown.

<section>
<h2>Some Slide</h2>

<aside class="notes">
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
</aside>
</section>


Server Side Speaker Nodes
In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the requried scripts by adding the following dependencies:

{ src: '/socket.io/socket.io.js', async: true },
{ src: 'plugin/notes-server/client.js', async: true }
Then:

Install Node.js
Run npm install
Run node plugin/notes-server

Owner

I don't know wether it is better to add speaker notes to a slide metadata or slide.

You could open a codemirror on a click on some metaUI element.

Still I pushed what you asked for, I will be less availlable for the next 2 weeks, even not availlable at all sometime and without my computer.

Owner
Owner

I though loud again, I do not need to use data-markdown attribute supported by reveal because I have markdown called by the class to render the markdown notes...
Sorry for the noise...

I tested this PR and I saw a new button to activate metadata editiing but its only visible effect was a very small line showing on the upper left of each cell. I had the same result when using the javascript activation code from the older pull request. Did I miss something ?

Owner

@albop , You didn't miss anything obvious.

$.getScript('/static/js/examples/metaui.slideshow.js'); or$.getScript('/static/js/examples/metaui.example.js');

Those enable different content in the "very small line" that becomes a toolbar.

Tanks it works. The system looks extremely flexible, it's impressive !

Owner

Is this based on the metadata UI pull request. I ran this code, but didn't see the slideshow UI appear. Hmm...

Owner

As far as the visible names of the different cell modes I would use:

• Slide
• Sub-Slide
• Fragment
• Skip
• Notes (or possibly Speaker Notes, but that is long)

This way, the top-level one (Slide) will be the one that people use most, which is appropriate given that it is at the highest level in the select box and the slideshow hierarchy. The metadata names follow pretty naturally from this.

Owner

Is this based on the metadata UI pull request. I ran this code, but didn't see the slideshow UI appear. Hmm...

You might have been tired :
2 comment above:

I tested this PR and I saw a new button to activate metadata editiing but its only visible effect was a very small line showing on the upper left of each cell. I had the same result when using the javascript activation code from the older pull request. Did I miss something ?

Response

@albop , You didn't miss anything obvious.

$.getScript('/static/js/examples/metaui.slideshow.js'); or$.getScript('/static/js/examples/metaui.example.js');

Those enable different content in the "very small line" that becomes a toolbar.

Owner

Hum, big update on other PR.

$.getScript('https://raw.github.com/Carreau/ipython/metaui-slideshow/IPython/frontend/html/notebook/static/js/examples/metaui.slideshow.js');  should be enough. Owner What about not merging this in and serving directly for slides.nbviewer.org, or from somewhere else ? Owner no just serving IPython/frontend/html/notebook/static/js/examples/metaui.slideshow.js From the cloud. It allows automatic updates. Owner Possibility to local install make sens. Like Mathjax. Anyway if it's single script we really don't need to worry about that yet. Owner We had a long discusion with Brian on that : • Me: "And you can have preset on the main toolbar" • Brian: "Let's keep it simple for now" • Me : "ok, so let's do like that" • Him :"hum but then you can do like this" -... etc • Me : "And then you have preset on the main toolbar" and of course it works with metaui.slideshow.js it is made for that :-) added some commits  Carreau add slideshow extension/preset for celltoolbar 74d5026 Carreau Change Slide denomination > Slide > Subslide > Fragment > Skip > Notes 165cde6 Owner Rebase on master and go for • Slide • Sub-Slide • Fragment • Skip • Notes Brian is the more native English Speaker so I'll trust him. Owner I will test now, but the code for this makes me smile now :-) ...ml/notebook/static/js/celltoolbarpresets/slideshow.js  ((45 lines not shown)) + cell.metadata.slideshow.slide_type = value + }, + //geter + function(cell){ var ns = cell.metadata.slideshow; + // if the slideshow namespace does not exist return undefined + // (will be interpreted as false by checkbox) otherwise + // return the value + return (ns == undefined)? undefined: ns.slide_type + }, + "Slide Type"); + + CellToolbar.register_callback('slideshow.select',select_type); + + slideshow_preset.push('slideshow.select'); + + CellToolbar.register_preset('slideshow',slideshow_preset);  Owner ellisonbg added a note Jan 14, 2013 Let's capitalize slideshow here for the menu. to join this conversation on GitHub. Already have an account? Sign in to comment ...ml/notebook/static/js/celltoolbarpresets/slideshow.js  ((3 lines not shown)) +// +// Distributed under the terms of the BSD License. The full license is in +// the file COPYING, distributed as part of this software. +//---------------------------------------------------------------------------- + +//============================================================================ +//CellToolbar Example +//============================================================================ + +/** + * Example Use for the CellToolbar library + * add the following to your custom.js to load + * metadata UI for slideshow + * + *  + *$.getScript('/static/js/examples/metaui.slideshow.js');
 Owner ellisonbg added a note Jan 14, 2013 This preset should always be loaded by default. All notebook users are going to use this much of the time. Let's put it after the "Default" one. Owner ellisonbg added a note Jan 14, 2013 Oh, and the path for loading needs to be updated. Owner ellisonbg added a note Jan 14, 2013 Even with an updated path, I can't load this preset. I tried: $.getScript('/static/js/celltoolbarpresets/slideshow.js');  Owner Carreau added a note Jan 14, 2013 Weird, it does work for me... Owner ellisonbg added a note Jan 14, 2013 I just hadn't saved my custom.js file ;( … to join this conversation on GitHub. Already have an account? Sign in to comment ...ml/notebook/static/js/celltoolbarpresets/slideshow.js  ((46 lines not shown)) + }, + //geter + function(cell){ var ns = cell.metadata.slideshow; + // if the slideshow namespace does not exist return undefined + // (will be interpreted as false by checkbox) otherwise + // return the value + return (ns == undefined)? undefined: ns.slide_type + }, + "Slide Type"); + + CellToolbar.register_callback('slideshow.select',select_type); + + slideshow_preset.push('slideshow.select'); + + CellToolbar.register_preset('slideshow',slideshow_preset); + console.log('Slideshow extension for metadata editting loaded.');  Owner ellisonbg added a note Jan 14, 2013 editting -> editing to join this conversation on GitHub. Already have an account? Sign in to comment Owner There are just a few minor things we need to take care of, but this is almost ready to go.  Carreau Uppercase and update path 3b819a0 Owner OK nevermind, I got this preset to load... Two issues with the cell toolbar styling on Linux Chrome+Firefox: • The celltoolbar div extends past the left edge of the input area. I think this has to do with the units of measurement. The input prompt width is in pixels and the left margin of the cell toolbar is in px. • The font used in the celltoolbar slideshow select box is too big - it should match that of the other select boxes. Owner Ok, fixed, can't you still load it ? what about : $.getScript('https://raw.github.com/Carreau/ipython/metaui-slideshow/IPython/frontend/html/notebook/static/js/celltoolbarpreset/metaui.slideshow.js');

Owner
Owner

Two issues with the cell toolbar styling on Linux Chrome+Firefox:

I'll crash to bed, it will be easy for you to iterate fast on the css if you have linux and firefox in order to fix the display issue, than me to guess and get your review.

Right now I need to sleep.

Owner

The celltoolbar div styling is made more difficult by the way we style the prompt divs:

div.prompt {
width: 11ex;
margin: 0px;
font-family: monospace;
text-align: right;
}


The top+bottom padding is finely tuned ot get everything aligned with the actual input text, so we can't change that. You will have to do the l and r padding separate and convert to a consistent units for spacing, probably ex. Also will have to watch for the spacing of all the output area collapse areas.

Owner

I can not load the slideshow preset...
I have used with no success:

$.getScript('/static/js/celltoolbarpresets/slideshow.js'); and Do you have any insight? OK, I fixed... sorry for the noise... Owner I think there is only one more thing that needs to be done before this is merged: install this preset by default.  Carreau load slideshow by default 9e21abe Owner Done. Owner Merging - great work! merged commit ff7178b into ipython:master #### 1 check passed Details default The Travis build passed to join this conversation on GitHub. Already have an account? Sign in to comment Commits on Jan 14, 2013 1. Carreau authored 2. Carreau authored > Slide > Subslide > Fragment > Skip > Notes 3. Carreau authored Commits on Jan 15, 2013 1. Carreau authored This page is out of date. Refresh to see the latest. 58 IPython/frontend/html/notebook/static/js/celltoolbarpresets/slideshow.js  @@ -0,0 +1,58 @@ +//---------------------------------------------------------------------------- +// Copyright (C) 2012 The IPython Development Team +// +// Distributed under the terms of the BSD License. The full license is in +// the file COPYING, distributed as part of this software. +//---------------------------------------------------------------------------- + +//============================================================================ +//CellToolbar Example +//============================================================================ + +/** + *$.getScript('/static/js/celltoolbarpresets/slideshow.js'); + *  + * or more generally + *  + * \$.getScript('url to this file'); + *  + */ + // IIFE without asignement, we don't modifiy the IPython namespace +(function (IPython) { + "use strict"; + + var CellToolbar = IPython.CellToolbar; + var slideshow_preset = []; + + var select_type = CellToolbar.utils.select_ui_generator([ + ["-" ,undefined ], + ["Slide" ,"slide" ], + ["Sub-Slide" ,"subslide" ], + ["Fragment" ,"fragment" ], + ["Skip" ,"skip" ], + ["Notes" ,"notes" ], + ], + // setter + function(cell, value){ + // we check that the slideshow namespace exist and create it if needed + if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}} + // set the value + cell.metadata.slideshow.slide_type = value + }, + //geter + function(cell){ var ns = cell.metadata.slideshow; + // if the slideshow namespace does not exist return undefined + // (will be interpreted as false by checkbox) otherwise + // return the value + return (ns == undefined)? undefined: ns.slide_type + }, + "Slide Type"); + + CellToolbar.register_callback('slideshow.select',select_type); + + slideshow_preset.push('slideshow.select'); + + CellToolbar.register_preset('Slideshow',slideshow_preset); + console.log('Slideshow extension for metadata editing loaded.'); + +}(IPython));
1  IPython/frontend/html/notebook/templates/notebook.html
 @@ -225,5 +225,6 @@ + {% endblock %}
Something went wrong with that request. Please try again.