Tuesday, January 15, 2013

Single-page Xerblin with D3.js

I spent a few hours today porting my "xerblin" user interface metaphor to Javascript.

I've been developing a d3.js-powered page to experiment with dynamic visualizations.  Once I had a fun demo going it seemed obvious to use it to wrap the xerblin system (I'd been planning to do something like this for years and years.  I created a 3D system in Tkinter to support it but never got enough traction with it until now.)

At first I had a simple Flask server that responded to commands, updated a xerblin interpreter, and sent back a representation which was then rendered client-side with SVG.

I spent a bunch of time playing with different ideas for permitting the server-side xerblin interpreter to specify client-side dynamic visualizations.  At some point it just seemed like it would be simpler and much cooler to port the xerblin core to JS and just have a self-contained page.

This means that you can go to the demo and "save page as..." to your desktop and play with it locally! You don't even have to check out a copy from github or anything.

This is inspired by the TiddlyWiki project which is a self-contained single-page HTML and JS wiki document.  I love it.

TiddlyWiki has the ability to save copies of itself to your file system (if you permit it) and it will automatically save backup copies.  It should be fairly easy to let the stand-alone D3+Xerblin demo save itself (with your current state aptly serialized!)  It might also be interesting to save state in a cookie.

Does it Do Anything?

So really you should read the source (and modify it!) but I'll write up a simple tour soon!

Keep in mind that there aren't really any commands for anything other than the xerblin "not-quite-language" itself yet, as this is very much a work in progress and fresh out of the oven.

No comments: