Franken UI

It always starts innocently enough…

I am currently working on the 2D UI aspects of BanateCAD.  What you see in this picture is a dreamed up visualization of a star cluster network topology.  Just IP addresses inside 2D ellipse shapes.  It’s nifty because you can in fact select any font you want, and any size.  Here I am using the “Quartz” font that is on my Windows system.  You can certainly alter the stroke color, size of ellipse and all that.  It’s just handy to know you can do rendering.

And here’s more text, showing more fonts:

And one more, showing the ability to align text in multiple ways:

I find that all visualizations, and UI frameworks, start with these basics.  You need to be able to draw text, or you can’t really convey a lot.  They are the basis for labels, buttons, and the like.  So, getting some good text rendering, with alignment and all that, is critical.

Similarly, the mundane sunken/raised rectangle has been a staple of UI programming for quite some time.

You can rely on the GUIStyle object to render rectangles in the manner in which you feel is appropriate for your system.  This saves you a lot of headache in trying to render them properly yourself.

And the Rectangle class takes care of things like intersection, and union of rectangles.  This is nice for knowing when a mouse point is within a bounding rectangle, or when you want to expand a boundary to accomodate new graphics that have been added to a group.

The next thing that is needed is a sense of hierarchy or grouping.  Then some sort of actions.  I need to be able to flow the keyboard and mouse activities through the system, and have functions occur based on those activities.  Pretty straight forward.  So, I am introducing a “Graphic” object, that will deal with all that.  Then there’s layout management.  After all then then the UI is usable, and can be thrown in front of the 3D rendering!

The trick to all of this is to do it in such a way that is minimal, yet highly functional.  I am constantly trying to remove code, consolidate, re-factor.  To that end, I’ve gone through some major reconstruction of the BanateCAD release files.  Everything lands in a proper directory, and only the primary application files are at the top level.  This has helped to straighten some dependencies out, and make the release a bit cleaner.

There is not a new release as yet, as I am still going through the various examples, cleaning things up, and fixing what I broke.  But, the next release will be substantially more robust in the UI and animation departments, which might be interesting to some designers.

---