Last fall, Eric DeMenthon, David Kim and myself wrote a web application that allowed users to design simple user interfaces, say for embedded devices, by creating and manipulating directed graphs. We wrote it in OpenLaszlo and named it Kagome. Kagome was our final class project for 6.831 at MIT.

Think of the user interface of a typical ATM machine. You’re first greeted by a welcome screen that asks you to insert your card. You’re then prompted for your pin, and the next screen depends on whether your pin number is correct or not. The idea is that an ATM interface is simple enough, that it could be formally modeled by a directed graph or a state machine. Each screen in the ATM interface can be thought of as a node in the sate machine; and every action that causes the screen to transition (the user presses a button, a timeout condition … etc) corresponds to an edge in that state machine.

User’s can run their design at any time. The model in Kagome’s MVC is sent as a JSON to a PHP script that dynamically generates OpenLaszlo code based on that model, compiles it, and sends it back to the browser as part of the currently running OpenLaszlo application.

The code is publicly available on Google Code:
http://code.google.com/p/kagome/
The latest code - which we submitted for our final evaluation - is in the GR5 branch (Thanks Raju for for reminding me):
http://kagome.googlecode.com/svn/branches/GR5/

I’ve also uploaded a demo version here:
http://www.mit.edu/~marram/Kagome/
This is a demo version of Kagome. It does not compile your design into an interactive simulator since it is deployed SOLO without an OpenLaszlo server.

This entry was posted on Friday, April 6th, 2007 at 5:15 pm and is filed under Human Factors. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.