Preparing a New User Interface for PlanetMaker

In the last few revisions of PlanetMaker, I've been adding a bunch of new controls for manipulating the image. All these features, while greatly increasing the flexibility of the app, have made for a crowded and somewhat unintuitive interface. As with a number of developers out there putting together WebGL-based web applications, I originally went with dat.gui for the user interface. Dat.gui is an awesome and flexible library from the Google Data Arts Team for controlling JavaScript properties, but the problem that has arisen is that it works best with a limited number of controls; I was packing in seven folders and a total sixty-nine controls. PlanetMaker has clearly outgrown the usefulness of dat.gui. 

So, I looked around for an alternative JavaScript UI framework that is very lightweight and flexible like dat.gui. Needless to say, I didn’t find out that matches what I want exactly, so I decided to roll my own…

The new interface is designed with the simplicity of dat.gui in mind, but with some extra capabilities that make it a bit more suited for the application it’s supporting (in my case). I’m breaking out the control groups into separate “blocks” and pushing them to the sides in an effort to leave the main planet viewing area as unobstructed as possible (considering the planet viewing area comprises 100% of the view). It also has a hide option and a transparency adjustor to allow the user to keep manipulating the model while still able to see the image behind the controls. It’s probably not the prettiest interface in the world (I don’t generally do UX design) since its main purpose in life is to contain a zillion input controls (which can be daunting to a user at first glance) and make them as intuitive and unobtrusive as possible. 

It’s relatively early in the development cycle and not quite yet ready to be included in the production instance of PlanetMaker. Though it wasn’t coded in the jQuery plugin design pattern, it still relies on jQuery UI and two other plugins to provide some additional functionality (colorpicker & date/time select). Over time, I plan to wean it from the jQuery dependence and make it available as a stand-alone open-source library.  Once I think of a catchy name for it, that is…
Photo
Shared publiclyView activity