Strange Sleep, an online journal

GTD TiddlyWiki + Windows Active Desktop

GTD TiddlyWiki is one of those web apps that fascinated me from the beginning but for me ultimately seemed more cool than useful because there wasn’t a place for it in my normal work flow. That all changed when I went in search of a robust to-do app.

The combination of GTD TiddlyWiki and Windows Active Desktop gave me something that was easy to set up, extremely customizable, and could sit on the desktop like a widget. Unlike some other to-do widgets that I’d tried, though, this one was directly editable via the desktop.

Here’s how I set it up:

1. Step one, download the GTD TiddlyWiki file and save it locally. (It’s important to note that this will not work if you’re trying to serve the page from a web server, even if it’s a local server.) Just save the page anywhere on your hard drive you like. The whole thing is in a single HTML page.
2. Second, if you are using XP SP2, you will need to perform a little “cleansing” step on the file, in part thanks to the fact that Active Desktop uses Internet Explorer to render pages. For some reason, when you download an HTML file from the web, XP still sees it as being part of the Internet. However, you won’t be able to save the file unless it sees it as part of the “My Computer” zone. To get around this, move the file to any non-NTFS storage media (a FAT thumb drive is what I used) then open the file in a text editor, save a new version and name it whatever you like. Now you’ve got a clean version of the file that you can save as you like.
3. Now, right click on the desktop and select “Properties,” then choose the “Desktop” tab and find the “Customize Desktop” button at the bottom. Once you’re in the “Desktop Items” window, select the “Web” tab and then click “New…” Now navigate to the location where the Wiki file is and click OK. Don’t worry about the synchronization, since the file is updated as you edit it. Once you click OK on the “Desktop Items” menu, the TiddlyWiki window should appear on the desktop.
4. Now all that’s left is to style it to your heart’s content. All of the styling is done with CSS, and it’s all embedded in the HTML file, so just open it up with a text editor and scroll down to line 3700, where you’ll pass all the Javascript and find the stylesheet. With mine, I wanted something that was going to be as unobtrusive as possible, so the first thing I did was make it smaller by reducing the width of the main elements. (I also had to change the length of the title and tag input boxes in order to get it under 500px wide — these values are in the Javascript itself, on lines 1544 and 1558.) I removed almost all of the background colors and set the background image to the same picture that was on my desktop background. I set the position as fixed and then just used absolute pixel orientation to make the desktop background and the window background line up, which gives the illusion of the window being transparent (and since nothing can be behind the active desktop window, it’s an effective illusion):

   background: url(C:\path\to\image.jpg) 572px 400px fixed;

5. One other minor problem was that the Javascript kept calling blank IE windows when I would click on Tiddler links, so I had to add a tiny bit of code to the script. Change

   if(theAction)
{
theButton.onclick = theAction;
theButton.setAttribute("href","JavaScript:;");
}
   to
   if(theAction)
{
theButton.onclick = theAction;
theButton.setAttribute("href","JavaScript:;");
theButton.setAttribute("target","_self");
}

6. Now just use the GTD TiddlyWiki directly from your desktop — adding, modifying, and deleting whatever nodes you like.

My final product can be seen here in this Flickr “Desktop Show and Tell” group.

Posted 3 years, 3 months ago