Playing with Cecily

I recently started playing with Cecily, an experiment in Zoomable User-Interfaces (ZUI’s, as opposed to GUI’s) written by Jeremy Ruston (my boss).

Cecily is a plugin for TiddlyWiki, which switches the interface from working as a familiar web page to a pan-able, zoomy desktop, where the size and placement of tiddlers (the content items in a TiddlyWiki) can be adjusted however you like, meaning you can make the important stuff big and central and the peripheral stuff peripheral.

I installed Cecily in a workbook I started using a couple of weeks ago to keep notes, as it seemed an interesting experiment in organising my increasing amount of content in a list-less way. I can immediately see that using this display of content – things look like different sized Post-It notes – I can change the exposure of what I care about most as the amount that I care about them changes.

The zooming aspect is interesting. Because you can zoom in and out pretty much as much as you like, you quite often find yourself completely lost at some arbitrary level of zoominess. By double-clicking the background a menu opens up with an option to zoom out so you can see everything. Clicking on a link to another tiddler zooms out and then back in to the new tiddler, which is another useful device for navigating around.

Technically, Cecily is interesting as it makes use of several new features in WebKit including CSS transforms, gradients and animation. The whole thing runs inside a canvas element. In whole, Cecily is an amazing demonstration of what you can achieve with just HTML, CSS and JavaScript.

The workbook is online at: http://jnthnlstr.tiddlyspot.com (you’ll want Safari 3.1 or Firefox 3.1 or above).

There are some notes about what to install in the Cecily tiddler. The Cecily homepage is here.

Advertisements

3 Comments

  1. Posted February 3, 2009 at 10:14 am | Permalink

    Looks cool Jon (and Jeremy). Do you know if there is a JavaScript API for the Mac trackpad (gestures)? It would be cool if you could zoom using the mouse (unless I missed something). Maybe Ctrl+Scroll?

  2. BenJam
    Posted February 4, 2009 at 8:41 pm | Permalink

    interesting, it seems to have got a bit smoother after Jeremy’s initial (albeit slightly drunken) effort. I think I might experiment too… how easy is it to import into existing content filled tiddlywiki or is it a Ginsu/Cook jobbie?