As part of the development for the tool Brainstorm, a variety of prototypes were made to try things out and find the best libraries and techniques to use.
As an experiment to see whether the ideas are feasible, firstly a prototype was made using python and pyglet. In order to provide a fully functional gui, however, Brainstorm would benefit from the entire toolset of PyQt, so another attempt was made using PyQt's basic Widget interfaces.
This screenshot shows an early version of a third prototype, this time using PyQt's QGraphicsView and QGraphicsItem classes, and based heavily on Trolltech's example code called "Elastic Nodes". However, the original code behaves more like treacle than elastic, and the Brainstorm prototype has been adapted to give a more dynamic, bouncy feel. Which obviously doesn't convey well on a static screenshot...
Each of the ideas in the Brainstorm is represented by a "Node" with its own name, and connections between ideas are drawn as lines. The nodes can be dragged around with the mouse, and when you let go, the nodes bounce back into position. You can also zoom in and out of the scene thanks to the QGraphicsView. Because it's still just a prototype, the node names and connections are hardcoded for now, so you can't add or remove nodes just yet.
Update November 2010 : in order to see how this prototype works, there's now a youtube video showing the demo in all its springy, wobbly glory. The model used is based on this example from the Graphviz gallery.
Update December 2010 : Since the youtube video was made, the prototype has been extended to calculate the "rank" of each node, a bit like the pagerank of connected web pages. So, as shown in the screenshot above, the node "kernel" is now seen to be a much more important node than "sleep" and "runmem" and is therefore shown in a larger font. The "zombie" node only has one connection, and so is displayed in an even smaller font. Note that these font sizes are calculated automatically from the graph connections, and not loaded from the graph definition or hard-coded.
Update January 2011 : So after an interesting start, it seems that this prototype is slowly developing towards something which might become quite usable. We've now got a simple XML structure for the files loosely defined, and Brainstorm can now load one of these files and show it, and lets you drag the nodes around. It can also now save the files in this XML format. You can also now export a visual representation of the diagram to SVG format, according to where you've arranged the nodes. Then obviously you can use other SVG programs (such as Inkscape) to further edit, annotate and convert the diagrams.
The latest developments include being able to double-click a node and edit the label text, and most excitingly now a right-click on a node brings up a context menu. This now allows the addition of a new node connected to the one you clicked on, and also allows the deletion of nodes. So the editing functions are now gradually appearing. If you delete a node which connects two bits of the storm together, then obviously you'll now get two separate subgraphs, which repel each other so they float apart. The same context menu now allows you to add a connection from the selected node to any other node subsequently clicked, and a right-click on a connection lets you delete it. Finally, a right-click on an empty part of the screen lets you add a new unconnected node, which will then obviously float away from all the others. If you want it connected to another one, it's best to use the menu from the node you want to connect it to, but adding a free node is the only way to start your brainstorm without loading an existing file.
The very first public release of Brainstorm is called Version 0.1 and it's now available to download. There are still quirks present (hence why it's called 0.1) and definitely plenty of room for improvement. Hopefully then after it's released, user comments and feedback will help improve it further.
The next version 0.2 will hopefully include at least some of the following improvements:
And looking a little further ahead, some perhaps nice-to-haves:
Further development notes and screenshots will be given here as work progresses.