# [WIP] Metaui slideshow #2687

Merged
merged 4 commits into from Jan 15, 2013

## Conversation

Projects
None yet
4 participants
Member

### Carreau commented Dec 15, 2012

 Pr to discuss specific implementation for the slideshow mode This is the same as PR #2333 plus specific stuff. pinging @damianavila and @ellisonbg
Contributor

### damianavila commented Dec 16, 2012

 El 15/12/12 18:51, Bussonnier Matthias escribió: Pr to discuss specific implementation for the slideshow mode This is the same as PR #2333 #2333 plus specific stuff. OK, I will look into this... And, I will cite this PR in the IPEP 9 Thanks Matthias.

### damianavila reviewed Dec 17, 2012

IPython/frontend/html/notebook/static/js/examples/metaui.slideshow.js
 + ["Slide" ,"slide" ], + ["Fragment" ,"fragment" ], + ["Skip" ,"skip" ], + ],

#### damianavila Dec 17, 2012

Contributor

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

#### Carreau Dec 18, 2012

Member

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 Dec 18, 2012

Contributor

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
https://github.com/ipython/ipython/pull/2687/files#r2445477.

OK, Mathias... I read the code after send it this request... I
understand... I have found a solution, thanks again...

Contributor

### damianavila commented Dec 21, 2012

 @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 ;-) ! More info about Speaker Notes: 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. 

Some Slide

 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
Member

### Carreau commented Dec 21, 2012

 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.
Contributor

### damianavila commented Dec 21, 2012

 El 21/12/12 05:53, Bussonnier Matthias escribió: 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. I might be a possibility... 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. Thanks, I think that the option I asked for is clean and simple, and fit with the structure we build, so let me try this and see how develop... I am testing another improvements, so maybe when you come back, there will be new and nice enhancements (if I get some time to develop them, hehe). If I do not see again, very nice Christmas and a happy new year for you and your family! Damián.
Member

### ellisonbg commented Dec 21, 2012

If we do notes they should just be a markdown cell with a notes metadata attribute

Sent from my iPhone

On Dec 20, 2012, at 10:10 PM, Damián Avila notifications@github.com wrote:

@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.

## Some Slide

<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>

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

Reply to this email directly or view it on GitHub.

Member

### Carreau commented Dec 21, 2012

Note to myself, prevent 'notes' to be assigned to non-md cell.
Le 21 déc. 2012 18:03, "Brian E. Granger" notifications@github.com a
écrit :

If we do notes they should just be a markdown cell with a notes metadata
attribute

Sent from my iPhone

On Dec 20, 2012, at 10:10 PM, Damián Avila notifications@github.com
wrote:

@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.

## Some Slide

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). 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

Reply to this email directly or view it on GitHub.

Reply to this email directly or view it on GitHubhttps://github.com/ipython/ipython/pull/2687#issuecomment-11619976.

Contributor

### damianavila commented Dec 21, 2012

 El 21/12/12 14:34, Bussonnier Matthias escribió: Note to myself, prevent 'notes' to be assigned to non-md cell. Le 21 déc. 2012 18:03, "Brian E. Granger" notifications@github.com a écrit : If we do notes they should just be a markdown cell with a notes metadata attribute Sent from my iPhone Great! Also, I have though about that, I will use a data markdown atributte supported by reveal, so the notes written in markdown will be rendered to markdown properly by reveal ;-)
Contributor

### damianavila commented Dec 21, 2012

 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...
Contributor

### albop commented Jan 4, 2013

 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 ?
Member

### Carreau commented Jan 4, 2013

 @albop , You didn't miss anything obvious. You have to add stuff in your .profile_xxx/static/js/custom.js $.getScript('/static/js/examples/metaui.slideshow.js'); or$.getScript('/static/js/examples/metaui.example.js'); cf thread in previous PR Those enable different content in the "very small line" that becomes a toolbar.
Contributor

### albop commented Jan 4, 2013

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

### ellisonbg commented Jan 11, 2013

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

### ellisonbg commented Jan 11, 2013

 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.
Member

### Carreau commented Jan 11, 2013

 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. You have to add stuff in your .profile_xxx/static/js/custom.js $.getScript('/static/js/examples/metaui.slideshow.js'); or$.getScript('/static/js/examples/metaui.example.js'); cf thread in previous PR Those enable different content in the "very small line" that becomes a toolbar.
Contributor

### damianavila commented Jan 11, 2013

 El 11/01/13 00:25, Brian E. Granger escribió: 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. — Reply to this email directly or view it on GitHub #2687 (comment). I like the idea of short names, so for me... Notes is OK. The other possibilities (Header slide and Standard slide) include compose names with two words, that maybe is long for the UI... so I am +1 to one word names... Finally, it is just a matter of impose our nomenclature (although if the names are natural there is no need to impose it, he...).
Member

### Carreau commented Jan 12, 2013

#### ellisonbg Jan 14, 2013

Member

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.

Member

#### ellisonbg Jan 14, 2013

Member

Even with an updated path, I can't load this preset. I tried:

$.getScript('/static/js/celltoolbarpresets/slideshow.js');  #### Carreau Jan 14, 2013 Member Weird, it does work for me... #### ellisonbg Jan 14, 2013 Member I just hadn't saved my custom.js file ;( On Mon, Jan 14, 2013 at 1:22 PM, Bussonnier Matthias < notifications@github.com> wrote: In IPython/frontend/html/notebook/static/js/celltoolbarpresets/slideshow.js: +// +// 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');

Weird, it does work for me...

Reply to this email directly or view it on GitHubhttps://github.com/ipython/ipython/pull/2687/files#r2641460.

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

### ellisonbg reviewed Jan 14, 2013

 + slideshow_preset.push('slideshow.select'); + + CellToolbar.register_preset('slideshow',slideshow_preset); + console.log('Slideshow extension for metadata editting loaded.');

#### ellisonbg Jan 14, 2013

Member

editting -> editing

Member

### ellisonbg commented Jan 14, 2013

 There are just a few minor things we need to take care of, but this is almost ready to go.
 Uppercase and update path 
 3b819a0 
Member

### ellisonbg commented Jan 14, 2013

 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.
Member

Contributor

### damianavila commented Jan 15, 2013

 OK, I fixed... sorry for the noise...
Member

### ellisonbg commented Jan 15, 2013

 I think there is only one more thing that needs to be done before this is merged: install this preset by default.
 load slideshow by default 
 9e21abe 
Member

 Done.
Member

### ellisonbg commented Jan 15, 2013

 Merging - great work!

### ellisonbg added a commit that referenced this pull request Jan 15, 2013

 Merge pull request #2687 from Carreau/metaui-slideshow 
[WIP] Metaui slideshow
 ff7178b 

### ellisonbg merged commit ff7178b into ipython:master Jan 15, 2013 1 check passed

#### 1 check passed

default The Travis build passed
Details

### mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014

 Merge pull request #2687 from Carreau/metaui-slideshow 
[WIP] Metaui slideshow
 d9a968f