Plugin suggestion: presentation mode

[Paulo Soares]

Hi all,
since Bob McElrath published the LaTeX plugin I've been thinking about
using TW to make presentations while preserving its usual look and
functionality. The idea is rather simple: each tiddler is a slide that
can be linked to other slides so, if I could put a button somewhere to
turn the mainMenu and the sidebar off/on and display the tiddler using
the full contentWrapper(?) width, the show would be ready to begin in
Firefox fullscreen mode and large font sizes!

I really don't know JS so I took some bits from other plugins and came
up with this very rough sketch of a plugin. Would anyone like to
improve and complete it or at least make some comments on this idea?
Some refinements on slide navigation would be nice too.

window.onClickToolbarPresentationMode = function(e) {
if (!e) var e = window.event;
clearMessage();
if(this.parentNode.id)
var current_style = getStyleById("mainMenu",
"display");
if((current_style != "none")) {
setStyleById("mainMenu", "display", "none");
setStyleById("sidebar", "display", "none");
// ...
// close other tiddlers
// adjust the first presentation tiddler to full width
// change to SinglePageMode if not enabled
// ...
} else {
setStyleById("mainMenu", "display", "block");
setStyleById("sidebar", "display", "block");
// ...
// adjust the current tiddler to normal width
// switch off SinglePageMode if not enabled at start
// ...
}
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return(false);
}

function setStyleById(i, p, v) {
var n = document.getElementById(i);
n.style[p] = v;
}

function getStyleById(i, p) {
var n = document.getElementById(i);
var s = eval("n.style." + p);

// try inline
if((s != "") && (s != null)) {
return s;
}

// try currentStyle
if(n.currentStyle) {
var s = eval("n.currentStyle." + p);
if((s != "") && (s != null)) {
return s;
}
}
return null;
}

config.views.wikified.toolbarPresentationMode = {text: "start",
tooltip: "Start presentation"};

window.createTiddlerToolbar_presentationmode =
window.createTiddlerToolbar;
window.createTiddlerToolbar = function(title,isEditor) {
createTiddlerToolbar_presentationmode(title,isEditor);
if(true || !isEditor) {
var theToolbar = document.getElementById("toolbar" + title);
var lingo = config.views.wikified;
createTiddlyButton(theToolbar, lingo.toolbarPresentationMode.text,
lingo.toolbarPresentationMode.tooltip, onClickToolbarPresentationMode);
insertSpacer(theToolbar);
}
}

[Clint Checketts]

On 12/4/05, Paulo Soares <pso...@math.ist.utl.pt> wrote:

If I could put a button somewhere to turn the mainMenu and the sidebar off/on and display the tiddler using the full contentWrapper(?) width, the show would be ready to begin in

Firefox fullscreen mode and large font sizes!

You piqued my curiosity. To try a slide show using the TW 2.0 Beta I threw together this: http://checkettsweb.com/tw/test.htm

Let me know how the slide show works. Its a single tiddler plugin (though you would need to use the templates) The sample code it inspired me and my solution, I appreciated it (though you'll notice that my solution went in a totally different direction).

It brings up some interesting points regarding TW's direction.

1) First of all it would be important to be able to apply page templates to a tiddler according to its tags. For example, with slides I would take the tiddler as 'slide' and the slide macro button and corresponding layout would be applied. (a template hierarchy may be necessary if two template tags are attached to one tiddler)

2)Tiddler template pointers stored in cookies make it difficult to alter them. We need a method to override the template or alter the cookie. Its possible that this already exists and I'm not aware of it.


My solution works like so:
When the 'slide mode' button is pushed it adds a class to the contentWrapper. That's it. CSS takes care of the rest. :)

I could see future additions triggering the single page mode (not difficult at all) and I would prefer being able to create a slide show with in a single tiddler (using headings and lists to separate slides:

!Slide One
Stuff on slide on
!
*This slide has no title
*and has a list
!Another slide
More stuff

Having a single slide contained in a tiddler that is parsed as I mentioned is beyond my ability. I'd appreciate any help regarding that part.

In the meantime, enjoy!

-Clint

[Paulo Soares]

Thanks, Clint. I tried it and it works. I think your solution is
simpler and there may be a few ways to improve upon it. However, if you
create a slide show within a single tiddler how would you navigate
through the presentation? Scrolling down? Did I missed something you
said?

I don't have the time to make further experiments now but in a few days
I may be able to give it a go.
Thanks again, your solution looks promising and is certainly better
than my amateur attempt.

Cheers,
Paulo Soares

PS: in your plugin the macro is called singleSlideMode and not
slideShowPlugin.

[Daniel Baird]

 

It seems like you could do multiple-slides-in-a-single-tiddler by prefixing the tiddler innerHTML with [div class="slide showing"], scraping through the innerHTML dropping [/div][div class="slide hidden"] before each [h1] element, and finishing with a [/div].

 

If you really cared about avoiding innerHTML -- an evil attribute, accursed by the gods of the W3C DOM -- you could do the same thing using DOM methods by creating a slide div as the first child of the tiddler, and stepping through the other children of the tiddler node, moving them into your slide div until you got a h1, in which case you'd start a new slide div.

 

And because you're parsing only the top layer of the DOM heirarchy, that would ensure proper tag nesting too (coz you might have a h1 inside some other tag, which would break the innerHTML method).. so I guess DOM beats innerHTML this time round.

 

Then just, well.. frick about with CSS to show and hide the slides.  You'd probably want to add a div with slide controls or something at the end of each slide.  But anyway.  Someone should implement this, it seems cool.  Anyone new to TiddlyWiki development want to learn about the DOM? :)
 

Cheers

 

;Daniel

 

hmm, maybe this should be on TiddlyWikiDev.  oh well..
 

--
Daniel Baird

http://danielbaird.com (TiddlyW;nks! :: Whiteboard Koala :: My Blog :: Things That Suck)

[Paulo Soares]

Thank you, Clint and Daniel, for your kind suggestions. After an
afternoon crash course on Javascript and the DOM I was able to make
this prototype: http://www.math.ist.utl.pt/~psoares/slideshow.html

The code looks very bad and many things can be done in better ways for
sure but I think it already shows what I would like to get with this.
As it seems that my idea didn't caught up among developers can you give
me some feedback?

A question: how can I push the navigation bar to the bottom of the
page? I tried position: absolute and bottom but without success.

Cheers,
Paulo Soares

PS: TW is driving me crazy. So many things can be done with it that it
seems the limit is ones imagination. Jeremy and all the developers rule!

[Daniel Baird]

It looks exactly right.  Nice job.  I keep getting stuck in "slide" mode, so I guess part of the final polish will be making sure slide mode is switched off when you start editing or close the slides tiddler or whatever (when I'm checking something out I always click too fast, and end up jumping into edit mode by inadvertent double-clicking).

I see what you mean with the nav bar.  Clint will probably have a CSS solution, but If you can't get it to the bottom you might wanna move it to the top.. something subtle and right-aligned wouldn't interfere too much with the slide itself.

If I put some text before the first !heading it breaks.  Not sure what you should do with such text, probably just hide it when in slide mode (the user could use that text to explain to the reader how to get the slide show underway, perhaps).

I haven't had a detailed readthrough of the code, but it seems ok.  I should be able to spend some more time on it soon.

And welcome to the TiddlyWiki developer community!


Cheers

;Daniel

[Clint Checketts]

On 12/7/05, Paulo Soares <pso...@math.ist.utl.pt> wrote:

Thank you, Clint and Daniel, for your kind suggestions. After an
afternoon crash course on Javascript and the DOM I was able to make
this prototype: http://www.math.ist.utl.pt/~psoares/slideshow.html

 It looks nice.

The code looks very bad and many things can be done in better ways for
sure but I think it already shows what I would like to get with this.
As it seems that my idea didn't caught up among developers can you give
me some feedback?

 There are a few assumtions in the code that we can factor out. Really though I like it.

A question: how can I push the navigation bar to the bottom of the
page? I tried position: absolute and bottom but without success.

A "position: fixed" will work for Firefox and a work around using JS would be required for IE. (Daniel was right, I have a CSS fix for most stuff :)

Its great to move this project forward. We'll make TW shine in this aspect..

-Clint

PS- Apologies to all if I'm slow responding for the next while. As of yesterday life has given me a lot to do. For those curious regarding my personal life I explain myself here: http://blog.checkettsweb.com/2005/12/07/little-ez/

[BramChen]

Hey! Congratulations Clint,
May the little Ez who's your love and treasure bring you many, many
years of very special pleasure!

[Paulo Soares]

Daniel Baird wrote:
> It looks exactly right. Nice job. I keep getting stuck in "slide" mode, so
> I guess part of the final polish will be making sure slide mode is switched
> off when you start editing or close the slides tiddler or whatever (when I'm
> checking something out I always click too fast, and end up jumping into edit
> mode by inadvertent double-clicking).

Thanks. The easiest way to restore the tiddler state when leaving slide
mode would be to reopen it from the store. I managed to close it (using
closeAll which I think is not the best way) but don't know how to open
it again. Any suggestion?

Regarding edition I see two ways to use this plugin that could be
chosen with the help of a switch:
1. as a way to read/edit a tiddler in fullscreen - in this mode the
toolbar and footer should not be hidden and the navigation bar would
contain only the slide mode button;
2. to fit my original purpose - turn a tiddler into a presentation - in
this case the edition should be disabled and the navigation improved
(maybe include a TOC?).
A better alternative could be to fork this in two similar plugins, one
for slides presentation and a much simpler version just to use
fullscreen.

> I see what you mean with the nav bar. Clint will probably have a CSS
> solution, but If you can't get it to the bottom you might wanna move it to
> the top.. something subtle and right-aligned wouldn't interfere too much
> with the slide itself.

Yes, Clint suggestion worked (I am using Firefox only so don't know
about IE and others).

> If I put some text before the first !heading it breaks. Not sure what you
> should do with such text, probably just hide it when in slide mode (the user
> could use that text to explain to the reader how to get the slide show
> underway, perhaps).

Done! Everything before the first H1 is hidden. You can check it at the
previous address I sent.

> And welcome to the TiddlyWiki developer community!

Thanks. What a poor addition to this nice community, really!

Paulo Soares

[Daniel Baird]

On 12/9/05, Paulo Soares <pso...@math.ist.utl.pt> wrote:

Thanks. The easiest way to restore the tiddler state when leaving slide
mode would be to reopen it from the store. I managed to close it (using
closeAll which I think is not the best way) but don't know how to open
it again. Any suggestion?

I could try and work out the best way to do this by trawling through code etc, but I'd probably get it wrong.. there's people who'll know off the top of their heads, I might defer this question to them :)

Regarding edition I see two ways to use this plugin that could be
chosen with the help of a switch:
1. as a way to read/edit a tiddler in fullscreen - in this mode the
toolbar and footer should not be hidden and the navigation bar would
contain only the slide mode button;
2. to fit my original purpose - turn a tiddler into a presentation - in
this case the edition should be disabled and the navigation improved
(maybe include a TOC?).
A better alternative could be to fork this in two similar plugins, one
for slides presentation and a much simpler version just to use
fullscreen.

I definitely think that the smaller a plugin's scope the better.. so I reckon just make a slide show plugin for now, and come back to fullscreen editing and whatnot later.

It's looking great.  Soon you will need a site of your own..

[johnnyorion]

This seems like it would make a nice addition to TW2.0... And while
I'm at it... In one of my attempts at a TW adaptation, I used glyphs
from at least one of the fonts that I have on my system ( An iBook with
Tiger on it.) and since the Microsoft created "Webdings" font is
installed by default with Tiger (OS X 10.4, the latest version of the
Mac OS, for those who haven't been paying attention...), it would seem
that the Windows and Mac communities would be covered... I don't know
about the linux community but personally wouldn't worry about them much
as they're coders anyway and are by my estimation, used to things not
working 'out of the box'. Perhaps Linux distros come with Webdings
now. Hell if I know... ;)  All the way!!!

ChrisJohnson
NewMediaArtisan
SPEKTRUMCreations