Single Page Slideshow

An alternative method for displaying slideshows with MoinMoin (as opposed to that described by SlideShow).

Start Slide Show

See HelpOnSlideShows for instructions covering the current MoinMoin release, releases providing the SlideShow action (starting from 1.9), and installations of earlier releases where the action has been installed separately.

Installation

Moin 1.8

The following files can be used with MoinMoin 1.8:

• http://hg.moinmo.in/moin/extensions/raw-file/tip/data/plugin/action/SlideShow.py (tested on moin 1.8.0)

• http://hg.moinmo.in/moin/extensions/raw-file/tip/htdocs/SlideShow/css/SlideShow.css (tested on moin 1.8.0)

Instructions are at the top of the .py file, but the essence of the installation process is something like this:

cp SlideShow.css path-to-themes/modern/css/
cp SlideShow.py path-to-wiki/data/plugin/action/

MoinMoin 1.9 has this action built-in as the SlideShow action.

Moin 1.6

See MoinMoinTalks/pyCologne-2008-01/Discussion.

Earlier Releases

1. Download Slideshow.py.

2. Put Slideshow.py in wiki/data/plugin/action directory

Usage

• It's very simple - create a page with content separated by level 1 headings
• In standard wiki mode, you view and edit the page like any other
• In slideshow mode, a single slide will be displayed at a time in a large display suitable for a projector

Running the slideshow

• Add a link at the head of the page like this:

  <<Action(Slideshow, Start Slide Show)>>

• Clicking on the link will start the slideshow view

Navigation

• The slideshow action emits included JavaScript, so that...

  • Pressing spacebar moves to the next slide

  • Pressing '1' starts again from the first slide

  • Pressing '>' moves to the next slide (The > character, not the right arrow)

  • Pressing '<' moves to the previous slide

• Also a table of links to other slides

Display

• The slide view uses the formatting rules from 'projection.css' - this uses large fonts and bold lines

• For cosmetic changes (different fonts, colors, etc) you can edit this file - see HelpOnConfiguration/CascadingStyleSheets

• For example, to add a background image:

  #content {
     background: url(../img/nice_background.png);
  }

Future Ideas, Suggestions

• Have a JavaScript countdown timer on screen that shows how much time is left until n*T/N

  • (n = current slide number, T = total time for all slides, N = total count of slides)
  • If you try to keep that timer near zero when changing to next slide, you likely will finish exactly in time
  • Of course not all slides take exactly the same amount of time - but if your timer shows values far from zero (either negative or positive, you know you'll more likely finish late or early)

• Use MoinMoinExtensions/HotKeys instead of JavaScript for navigating between slides

• Multiple projections CSS files, so one can choose a ready made design. We need a way to set the current CSS style of the presentation, probably with a parser or a macro:

  Stylesheet: proj-starshine.css
  Refresh: 30 # auto running slideshows :)

• nice background - this could be part of the projection.css file.

• Non-transparent background for the header/footer

• Fix MoinMoinBugs/SlideShowActionWorksOnlyInModernized

• Implement FeatureRequests/MergeNavigationMacroAndSlideShowAction

Sample Backgrounds

Ideal backgrounds for slideshows would look nice, but not have such high contrast as to steal the thunder from your presentation - or make people look at the background instead of your points. You probably want to keep their size down somewhat so the first slide loads quickly, if presenting directly from Moin to an audience.

Attach some nice ones below.

• MhzTheMatrix (126k) - a Matrix background by HeatherStern (for Mhz's matrix theme)

Speaker Notes

It think SinglePageSlideShow really has potential to be a silver bullet for the presentation software challenge we face today. The fact that a single wiki page can double as a presentation is very powerful, given the power of wiki.

I still need a couple things to make it a panacea:

1. More themes. I've plugged in the "matrix" theme you've suggessted and it looks okay. I'll plan to do some CSS experimenting with other themes. So don't worry about this item.

2. Speaker notes. Sure these could be done with #-comments, but then the wiki page effectively removes them. It would be really nice to have some kind of markup recognition that would hide such notes from the presentation, while including them in the wiki page. Compare to Docutils' S5 integration and notice how much of the html "document" does not get shown in the slideshow.

   comments will be added in 1.6, see test.wikiwikiweb.de -- ReimarBauer 2007-02-27 22:22:17

Maybe you've got some good ideas on the best way to accomplish this. My thoughts (really a hack) would be to just conventionalize and designate one of the pre-defined but rarely used syntaxes like maybe bold-italics (e.g., This is a speaker note.) to be the note item that is displayed in wiki pages but not in slideshow mode.

-- MicahElliott

Printable Slideshows

Being able to print out slideshows is useful if you have to deliver PDF format slides or just have slides which don't require access to a Wiki. I've made this possible by adding a "print" control to the slideshow which shows all the slides on one page, and when you print, the CSS makes sure that each h1 element appears after a page break. Thus, you get one slide per page. I've attached a patch providing this improvement and some fixes (slide parsing where indented preformatted regions are used). -- PaulBoddie 2010-08-22 18:22:58

Because Single Page Slide Show is builtin in 1.9 I would prefer a separate FeatureRequest and the patch there. It looks to me that this patch is for 1.8

Yes, it's a patch against the moin-extensions repository, since I'm using 1.8 mostly. I've made a feature request and will look into porting the patch to the 1.9 branch. -- PaulBoddie 2010-08-27 17:57:08

• A patch against 1.9 has now been uploaded. The only real difference between these patches is in usage of the form/parameter API which changed from 1.8 to 1.9. -- PaulBoddie 2010-09-26 23:27:16

End of Slideshow

It might be nice to have something which indicates the end of a slideshow. This section when viewed in the slideshow is really the last section you'd want to view: the following sections are all too long. So stop here if you're reading this in slideshow mode! -- PaulBoddie 2009-12-17 19:19:31

Comments

Revision 1.2

I really like this SlideShow, it's just what I always wanted. I fixed few things, and made many other small improvements and refactoring to make the code simpler. I also create a projection.css that work with the new named elements in the slide show, and is part of my new "technical" theme.

• In the end, it should work in all themes.

Major changes:

• headings in pre/code area are skipeed

• Rename to SlideShow, action appear on More Actions menu as "Slide Show"

• simplified heading parser
• When calling with wrong slide number, you get the closest slide, e.g 1524 is normalized to last slide, with not error message.
• shorter query string
• shorted variable names
• navigation uses a list, can be designed both vertically and horizontally
• complete css ids and classes, and a css file that use theme
• When there is no slide, display almost empty page instead of crash (should add error message maybe)

Get the whole package here: SlideShow.tar.gz

Both are not finished but can be fun to play with, and of course you (the reader) is invited to share and improve.

• Good stuff! Thanks for the code review - much better now. JimClark

Revision 1.3

Changes:

• Refactor into 2 classes, Slides and SlideShow

• Easy to customize design, subclass and override few methods to customize behavior.
• Parse page headers and set pragmas
• Disable conflicting section-number pragma
• Support any headers e.g #Author, #Status
• When slide number out of range, default to first slide
• Fixed bug when size of navigation changed
• Complete abstract output using the formatter
• Added required Dependencies variable
• Simplified more efficient parsing
• More efficient link creation
• Removed unneeded last slide link
• Improved navigation tooltips
• Default slide for pages with no heading
• Complete right to left support - both back forward icons and hotkeys are switched according to the user language.
• Disable link to editor if you can't edit
• Clear text links instead of funny text mode icons.
• Changed hotkeys to up, right and left arrow, which make sense and work everywhere. As a benefit, space and numbers can be use on interactive slides.

TODO:

• Use stylesheet specified on page with #stylesheet pi
• Have slide show style sheets directory in htdocs - slide show should not use theme stylesheets but the slideshow stylesheet. You can use modern as your theme and display slide show using another design.
• Old style one-slide-per-page are not displayed nicely by stylesheet optimized to this action, as the heading is not rendered in a separate heading div.
• Icons for edit, page, first, back and previous links.

• SlideShow macro to view any slide on any page

• A way to view any slide from a standard page view, maybe use slideshow parser - sub class wiki parser to add links to slides on headings?
• Easy to use popup menu with all available slideshow styles, accessible from the navigation pannel?
• A way to hide the navigation panel, or have edit mode and presentation mode navigation?
• Move script into .js file?

• Javascript transitions??http://www.w3.org/Talks/Tools/Slidy2

• Create the html head links in the action, so we can use correct

  <link rel="Start" href="..."> and like.

• Same for stylesheet links, so we can control the stylesheet

The code still requires the technical theme, which is included in the package.

or see the ThemeMarket for matrix, which now supports it too.

Download: SlideShow-03.tar.gz

hotkeys

The java script code was simplified and corrected, but still the space key is not handled correctly in Firefox - on long pages, the page first scroll to the bottom and only then move to next page.

There is another problems with the space key and numbers - if you handle those keys, the user can't use them for other purposes. For example, if you want to include a search box in a slide, and demonstrate a search, you will not be able to use the space or the 1 key. The first click on one of them will take you to another page.

I'm not sure how much interactive slides are useful, but it is interesting idea. If we can make it possible and still have an easy to use interface, I think its better.

To fix this situation, I'm using those keys:

• Up arrow - jump to slide 1
• Left arrow - move back
• Right arrow - move forward

Hotkeys reference:

• http://mozpoint.mozdev.org/ - space bar mapping work correctly.

Is there are change to get the mouse keys working for back and forward. May be the wheel too? -- ReimarBauer 2006-09-29 19:32:23

Right to left support

When you watch a slide show with Hebrew selected as your user interface language, the arrows direction is switched, the left arrow will go forward, and right arrow go back. It make sense because the navigation links also switch direction.

Internal links etc.

Anything that point to some place in the page will not work from a slide, e.g #UpThere, because only one slide is parsed.

Fix: needed? It'd be nice if such links could be used for fast jumps to another slide.

Parsing is too simple

The current implementation parse the current page using simple wiki format headings regex, then format the relevant text. This approach has some limitations:

• Work with wiki format only
• Included pages are ignored in the headings search

Solution

have slides formatter that will render the current slide using page cache.

1. page cache is created after save
2. When executing cache, the current slide will be written
3. Included pages will execute the included page, possibly writing the the current slide if its inside the included page.

The text python created by the cache should be something like this:

write(formatter.heading(1))
write('rest of slide here...')
write(formatter.heading(1))
write('rest of slide here...')
...

Until the correct heading is found, all write calls will be done using a null function. When the correct heading is found, the real write function will be used. When the next heading is found, the execute should stop, or the write should return to the null function.

Executing text_python is very fast, and should be much faster when write does nothing.

Until the current heading is found, dynamic macros except include macros should be ignored, so costly macros will not waste time when the output will not be printed anyway.

---

• Have somebody used Slidy? A nice feature it has is the 'c' that brings an overlay with the content.

• In beamer, its common to use the page title, and page subtitle. I personally like this approach because allows you to have sections with several slides per section. This would be the equivalent of splitting on h2 tags (as opposed to h1). what are the main reasons the developers choose h1? is in the plans to allow this kind of control of the slideshows via a pragma? Thanks!

• I think emulating beamer style is a good idea. Ultimately, it would be very nice to have pluggable style sheets. That said, this is beginning to look very nice.