Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

[WIP] Metaui slideshow #2687

Merged
merged 4 commits into from

4 participants

@Carreau
Owner

Pr to discuss specific implementation for the slideshow mode

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

pinging
@damianavila and @ellisonbg

@damianavila
.../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" ],
+ ],

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 Owner
Carreau added a note

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.

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

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

<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

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

@damianavila
@ellisonbg
Owner
@Carreau
Owner
@damianavila
@damianavila

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

@albop

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 ?

@Carreau
Owner

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

@albop

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

@ellisonbg
Owner

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

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

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

@damianavila
@Carreau
Owner

Hum, big update on other PR.
now, use the other PR and add that to your custom.js

$.getScript('https://raw.github.com/Carreau/ipython/metaui-slideshow/IPython/frontend/html/notebook/static/js/examples/metaui.slideshow.js');

should be enough.

@damianavila
@Carreau
Owner

What about not merging this in and serving directly for slides.nbviewer.org, or from somewhere else ?

@damianavila
@Carreau
Owner

no just serving
IPython/frontend/html/notebook/static/js/examples/metaui.slideshow.js

From the cloud. It allows automatic updates.

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

@damianavila
@Carreau
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 :-)

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

@ellisonbg
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);
@ellisonbg Owner

Let's capitalize slideshow here for the menu.

Sign up for free 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');
@ellisonbg Owner

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.

@ellisonbg Owner

Oh, and the path for loading needs to be updated.

@ellisonbg Owner

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

$.getScript('/static/js/celltoolbarpresets/slideshow.js');
@Carreau Owner
Carreau added a note

Weird, it does work for me...

@ellisonbg Owner
Sign up for free 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.');
@ellisonbg Owner

editting -> editing

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

There are just a few minor things we need to take care of, but this is almost ready to go.

@ellisonbg
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.
@Carreau
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');
@ellisonbg
Owner
@Carreau
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.

@ellisonbg
Owner

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

div.prompt {
width: 11ex;
padding: 0.4em;
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.

@ellisonbg
Owner
@damianavila

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

$.getScript('/static/js/celltoolbarpresets/slideshow.js');

and

//$.getScript('https://raw.github.com/Carreau/ipython/metaui-slideshow/IPython/frontend/html/notebook/static/js/celltoolbarpreset/slideshow.js');

Do you have any insight?

@damianavila

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

@ellisonbg
Owner

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

@Carreau
Owner

Done.

@ellisonbg
Owner

Merging - great work!

@ellisonbg ellisonbg merged commit ff7178b into ipython:master

1 check passed

Details default The Travis build passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 14, 2013
  1. @Carreau
  2. @Carreau

    Change Slide denomination

    Carreau authored
    > Slide
    > Subslide
    > Fragment
    > Skip
    > Notes
  3. @Carreau

    Uppercase and update path

    Carreau authored
Commits on Jan 15, 2013
  1. @Carreau

    load slideshow by default

    Carreau authored
This page is out of date. Refresh to see the latest.
View
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));
View
1  IPython/frontend/html/notebook/templates/notebook.html
@@ -225,5 +225,6 @@
<script src="{{ static_url("js/contexthint.js") }}" charset="utf-8"></script>
<script src="{{ static_url("js/celltoolbarpresets/default.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/celltoolbarpresets/slideshow.js") }}" type="text/javascript" charset="utf-8"></script>
{% endblock %}
Something went wrong with that request. Please try again.