Trails Player in TiddlyWiki

9 Jan

I’ve been working on the next generation of Scrumptious; the Trails
Player is now embedded in a TiddlyWiki. (A Trail is a list of
annotated websites, e.g. “Learn How to Podcast” with a dozen or so
sites to teach you.) The player is just a proof-of-concept for now,
lacking much functionality, but you can see it here:

* Play with the dropdowns to change the trail, or walk through the trail.
* Hit Close to flip to the underlying TiddlyWiki
* Hit Launch Player to flip back to the trail player

What’s going on is you have a Trail Player UI overlayed on top of the
TiddlyWiki. Admin the content in the TiddlyWiki and play it in the

There are several components here:
* An overlay plugin providing the
flip-back-and-forth-between-TiddlyWiki-and-Overlay fun.
* A trail plugin to parse “Trail” and “Bookmark” plugins, and
provide a macro to show Trails inside a TiddlyWiki.
* A trail player plugin building on the aforementioned plugins
to produce the trail player overlay.

Explaining the change … at Osmosoft, we made a decision last month
to consolidate our deployment model, so that every app should now be
running as a TiddlyWiki vertical. Thus, the Scrumptious Trails player
(see must be shown directly in a
TiddlyWiki. This is a nice model, because once we have a multi-user
TiddlyWiki ( up and
running, anyone can come along and spin off a new application. Thus,
if you want a social bookmarking “room” for your company’s team, you
just go and spin off a new Scrumptious room. You can then have
conversations about websites, with whatever permission settings you
wish. (e.g. you can choose to lock other teams out altogether; let
them have read-only access, let them write too; or you can make the
whole thing private to yourself.)

(Chris Dent’s done some great work on TiddlyHoster, which is raw, but
working already, and will probably be bent into shape to fulfill the
multi-user vision – try it at

One of the challenges here is making a non-TiddlyWiki UI inside of a
TiddlyWiki. I don’t seek this functionality lightly. I realise you
should generally embrace TiddlyWiki UI if you’re working in it, and
tweak it rather than replace it. However, there are times when a truly
specialised UI is the best thing, and I would argue the Trails Player
– with its inclusion of a top bar and iframe – is one of those times.
So I kicked off a conversation about this
and did some experimenting over the break, leading to an experimental
“Overlay” plugin, which whacks an absolute-positioned overlay on top
of the TiddlyWiki. It swaps out all of the “style” elements to ensure
the stylesheet is completely independent, and swaps them back in again
when you flip back to the TiddlyWiki.

(I’d experimented previously with themes, but this feels like it needs
more customisation, so I’ve opted for a separate mechanism.)

The point is to use the TiddlyWiki for raw “under-the-hood” admin
work, similar to Rails scaffolding. And just like Rails scaffolding,
you can progressively enhance this under-the-hood interface, since
it’s just a TiddlyWiki, and TiddlyWiki has excellent support for
plugin-based enhancements. An example is the <> macro you see
in the underlying TiddlyWiki. There’s a lot more that can be done
here, and eventually, this will be built into a proper TiddlyWiki
vertical; bringing together various plugins. Indeed, the other plugin
that would be great to introduce is the comments plugin, so you can
comment on each bookmark.

The overlay mechanism at present is quite simple. You just tag a
single plugin as “overlay”. As well as the basic plugin code, you
provide sections for the plugin tiddler called “Content” and
“StyleSheet” sections, and in the plugin code, you provide a
Javascript event-handler with “onLoad”, “onOpen”, and “onClose”
handlers. All fairly self-explanatory, I think; the overlay plugin
creates the overlay with “Content” as its HTML. When you toggle back
and forth, “onOpen” and “onClose” are called; and the StyleSheet is
applied and un-applied. There’s also a “toggle” function defined, so
your custom overlay can close itself (e.g.
$(“#myFancyButton”).click(version.extensions.overlay.toggle) ).

As for the intended UI, you can see the final standalone version we
came up with here:

Lots more work to be done with the TiddlyWiki edition – need to add
arrow buttons, notes, topbar-hiding, progress display; and then
consider the admin interface too, and think about permissioning in the
context of the TiddlyWiki MU concept, so that you can share a trail
that’s read-only. But I think we have the basic functionality in place


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: