Monday, January 14, 2013

Finally Beautiful Web Xerblin


I am working on a D3.js-powered "web console" of sorts for the xerblin user interface.

It's a simple Flask server that wraps a xerblin world and provides a single AJAX call the runs a command on the server and returns a (JSON-encoded) copy of the xerblin state.

The Flask server also serves a web page that includes an SVG display and controls.  You can execute commands through the AJAX call and the returned state is automatically rendered in the SVG using D3.

That's essentially what you're seeing in the screenshot above.

Myriad details


  • It will be very easy to include the git-based permanent history store from the Pigeon User Interface in the Flask server to provide persistent history across sessions.
  • The server is designed to be run locally on a per-user basis and there is currently no support for hosted multi-user set-ups.  This could be done but it's not something I'm interested in personally.  (I think the biggest challenge would be setting up resource quotas.)
  • You can certainly run the Flask server and xerblin instance on one machine and the browser and "thick client" on another machine.  In the near future the web page and server may act as a front-end to Pigeon Computer machines (small micro-controllers running the xerblin-like Pigeon Firmware) but that would require more support from the firmware or something.
  • The internals of drawing the xerblin stack with set of recursive D3.js funcs have some gnarly and interesting stuff.  It works but I think I'm doing strange things in a few places.
  • In order to give you a dynamic sense of the history of your interaction the SVG rendering keeps the previous stack displays visible in the window but it moves them aside, scales them down, rotates them a little, and finally makes them partially transparent.  The net effect is like a fractal, depending on what you're doing, of course.
  • It should be fairly easy to provide a REST API that permits viewing and returning to earlier versions of your xerblin state.  I have high hopes for rendering things like this with the SVG and D3.js capabilities.
  • Next on the list, though, is some sort of generic way to build SVG data structures using the xerblin interface itself, as well as D3.js transitions and such, and then rendering those in the SVG window.  This will let you create whatever visual user interface elements you like.  I want to create sort of a Squeak-light, if you will.

No comments: