I generally avoid sharing information about my work projects, but this is sufficiently generic that it won’t reveal anything that should be kept secret.
A new application that I’m developing at work requires a UI control that allows the user to create and edit graph diagrams, sorta like Visio flowcharts. After two days of working on it, I have a generic UI widget that can render diagrams like this one:
Sample diagram from my app.
The fancy styling isn’t really required for our uses but it was easy enough to add so I went with it. All we really need is the ability to add blocks to the diagram and to connect them in a certain way.
Some features that aren’t obvious from a screen shot include:
- Snap to grid
- Show/hide grid
- Move object to front/back (change z-order)
- Toggle anti-aliasing
- Select one or many objects
- Delete selected objects
- Move/edit objects as a group
- Resize objects
- Configure fill, stroke, text colors
- Configure border width and labels
- Configure shape: rectangle, rounded rectangle or ellipse
The widget can contain any objects with x, y, width and height coordinates and a render method. So it’s pretty flexible. It also supports various types of connectors (only one type is shown in this screenshot – straight arrows). I created this widget in Python using wxPython and it’s quite snappy, especially with anti-aliasing turned off.
Now I just need to start working on the parts that aren’t generic so we can actually use this thing at work. Anyway, it was fun creating this little widget so I wanted to share my results so far.