Speaker Notes for the Reveal.js plugin

I recently did a short talk for a large (1000+ -member) audience. Although it was in a Powerpoint-heavy environment, I did mine in a TW, using the Reveal.js plugin.

I love using that plugin; it lets me embed presentations inside my documentation wiki, allowing me to step out of the presentation to show other TW content; it’s quite useful. But one feature from the Reveal.js tool was not ported to TW: speaker notes. My guess is that it is, at a minimum, very difficult to port, and quite possibly impossible.

But I created something that gets part of the way there; it worked well for my talk. Perhaps others would find it useful. It a simple-to-use, simple-to-maintain set of speaker notes. It doesn’t offer Reveal’s useful slideshow controls from the same UI, so those I manage from a separate screen. But it does the rest of what I want speaker notes to do.

My presentations are created out of simple calls to the plugin’s <$presentation ...> widget, choosing as slides all tiddlers tagged with the presentation tiddler’s title. In fact a presentation tiddler has a body consisting just of

<<presentation>>

and a list field to order the slides.

A slide is just a single tiddler, tagged with the name of the presentation. And the speaker notes for that slide is simply another tiddler whose title is that slide’s title with “ - notes” appended.

The notes for the presentation is a similarly short call to a macro:

<<speaker-notes "My Presentation">>

where “My Presentation” is simply the title of the presentation tiddler.

This renders the notes to the left, the slide to the right. There is an edit icon for the notes, which launches that particular note in edit mode. The titles of the slides serve the same purpose. It looks like this:

You can try this live by downloading this:

SpeakerNotes.json (1.1 MB)

and then dropping it onto an empty edition. The only interesting parts, once you include the reveal plugin, are the macros in $:/_/my/SpeakerNotes/macros and a trivial stylesheet, $:/_/my/SpeakerNotes/styles.

If this is useful enough to develop into a full plug-in, please let me know.

5 Likes

Looks good, It could also be added to the plugin perhaps?

If I had a laptop and external screen I would be inclined to open the presentation in new window, move that to the other screen keeping the speaker notes visible,

  • but it would be nice if you could have the current slide highlighted and remote control the presentation from the speaker notes view.
  • This would also allow the navigtion buttons to be hidden from the presentation as they are available from the speaker view.

Nice work

Certainly. I wanted it separate to show that it really is an add-on to the add-on. But it could be packaged however you like.

Yes, that’s how the underlying Reveal.js does it. This is what was not ported in the TiddlyWiki version. If we could do that, then my little solution will feel a whole lot more little! :wink:

Thank you.

1 Like

IMO it should be straight forward to use speaker view plugin. … But … TW uses reveal.js v4.0.2 from May 2020. So it’s 3 years old. So I don’t know if that existed back then.

Also using speaker notes as implemented with reveal.js will need a client server configuration. Which probably is not what you wanted.

Speaker View

reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window

When used locally, this feature requires that reveal.js runs from a local web server.

@sukima … Would it be possible to make an update to the latest reveal.js version?

Well, the speaker note feature has been in Reveal for much longer than that. The trouble, according to @sukima’s documentation is:

The Speaker notes does not work with TiddlyWiki as it depends on routing to the hash URL which TiddlyWiki intercepts.

Yea, but if you look at the latest releases and search for: “speaker view” … a lot of stuff happened lately. So reviewing the possibilities would probably be worth it.

But that’s quite an investment that would have to be made. So if someone picks that one up, they really have to “want it”.

1 Like

So glad you found this useful. At the time I was unable to integrate Reveal’s speaker notes. What I did was open two instances of the same TiddlyWiki one to run the full screen presentation and the other open to a manually created Tiddler I made for my own speaker notes.

If someone has a possible work around I’d love contributions. Maybe I’ll have a chance to dive into the source later this week.

That’s what I described, except that I did speaker-notes per slide with a macro to put them together.

@sukima, thank you for a wonderful tool! While I could wish for SpeakerNotes integration, the design of TW and of Reveal.js clearly does not make this simple. I wouldn’t know where to start. Perhaps one of the gurus around here can suggest a place to integrate Reveal’s fragment manipulation with TW’s.

I did a quick review, and nothing looks relevant. More to the point, you can load the Reveal demo slide on speaker notes Slide 24 and note that it’s still working by manipulating the url fragment. I do have to wonder if we could capture this in TW and send some sort of event to the plug-in, but I haven’t looked at details. I’ve never investigated TW’s navigation tooling.

You may be on to something. I noticed in the reveal source it us using the postMessge API. I’m wondering if a shadow tiddler to override the fragment (hashchange) could disable it while the speak notes are running?

I’m guessing mostly. I don’t I put the time in to really dive deep when I first made the reveal plugin for TiddlyWiki. Knowing that others use it gives me some motivation to take a second look.

2 Likes