DH's Blog | home visits |
Thursday, August 12th  
DH's Blog

The Beginning


Previous 10 Posts
Next 10 Posts
XSL + Tiddlywiki = Hypertext D&D Modules
For some time now I've been keeping my campaign notes in a wiki. I think wikis are great for this sort of thing. Easy to modify, inherently cross referenced, they really are perfect. For stuff like game notes, where I'm really the only user ever, Tiddlywiki really is just about perfect. It's a self-contained wiki in a single file. A single html file full of javascript, it also contains the data of the wiki and modifies itself as you work with it. Very small, easy to email yourself or put a thumb drive, it's exactly what I need for keeping my GM notes.

I was reading an old module recently, and realizing for the umpteenth time how annoying it is to flip back and forth between map and keyed description, when I realized this is exactly what a wiki should be great at. The map could be a nice image map (do html authors really still use those?) and each room could open up the wiki section when you click on it.

Wondering about the whole image map thing, I did a little digging and found a great blog post about making an image map with pure CSS, including a lovely example in the form of a map of the US States. Hmm, a pure CSS solution should work fine in Tiddlywiki, right? I gave it a whirl, and sure enough I could make an entry in Tiddlywiki with the CSS embedded directly into it and get the result I wanted. Perfect. Sort of.

Well, there's an aweful lot of boilerplate CSS you have to write for each area of the map. It seemed to me like it would be pretty painful to mark up an entire dungeon map of the stuff. The only things that really were important was the name of the area being marked (to associate it with a unique entry in the wiki), the rectangle defining the area on the map, and the image to draw on top when you mouse over it. All that should fit in a pretty concise XML document, right?

Hmm, perhaps I could write a XSL style sheet to convert a simple XML document into the CSS format I wanted. Is this getting too technical? Hang on, the pay off is soon! I gave it a whirl. Sure, it worked, but how do you embed both the XML and the XSL style sheet into a tiddlywiki and get it to do the transform? I would need some kind of XSL transform plugin for tiddlywiki.

So yeah, I wrote an XSL transform plugin for tiddlywiki. Turns out, it was pretty easy. If you know XSL, I'm sure you could use this for a thousand cool things. If you don't, that's OK, you can just steal my XSL and all you need to worry about is getting the map graphics ready and defining your rectangles. Here's an example of the system at work in an otherwise blank tiddlywiki:

XSL Image Map in Tiddlywiki

(Demo map unceremoniously stolen from Dyson's blog. Thanks dude.)

You can hover over areas in the map, and if you click them it links to new entries in the tiddlywiki. The file won't let you save any changes you make though, for that you'd have to have a local copy of the file. So here's a zip of the file along with the images I used to make the demo:


If you take the time to learn some Tiddlywiki, it should be pretty easy to start marking up your own maps. Pretty sweet, right?
December 17th, 2009 - 07:51 pm | Comments (0) | PERMALINK

Previous 10 Posts Next 10 Posts