09 December 2009


Now that you know where I'm coming from I can show you what I actually worked on. It's a simple tree-like structure that many of you should be familiar with - your files are organised in this way on your harddrive (files inside folder inside folders, hiding your naughty stash). However, I've always found this strict tree-view lacking. It's difficult to categorize everything as belonging to a single explicit group.

Say I have a folder with a bunch of program installers (a collection of useful things that I may need to install if I reinstall my operating system, e.g. video drivers, Winamp, Open Office, whatever). If I have Audacity (an open source audio editor), in there I could categorise it as a "audio editor", a "music player", and "open source" amongst others. What if I want to list all my open source programs? Unless I have them all in a folder called "open source" I won't easily be able to filter through my programs. And likewise if I want all "audio editors". If I've already place Audacity in the "open source" folder I can't see it in my "audio editor" folder unless I duplicate it (wasting disk space).

Things (the vast array of matter and concept floating throughout existence, waiting to pounce) belong to several groups or sets. In the previous example, how about if I just say I want all "audio editors" that are also "open source". This will give me (along with some others if I have any on my drive) Audacity, while if I list "audio editors" only, Audacity will be in the list, likewise if I ask for "open source" applications. This tag-based system is the structure of databases (which uses set theory). And it's the way I wish file systems were organised (I'm busy doing an interface on that for funzies, although there are also a few other folk working on this).

So this is how I decided to do my menu structure:

The menu

From left to right:
The grey bar with dots: Clicking and dragging on this will move the menu around. You can dock the menu against other menus or the side of the screen. (I'm making the menu rotational, too, so double clicking on the grey bar will layout the menu horizontally from the top or vertically from the left, etc.)
The blue buttons: The dark ones are unselected, while "Add object" is active. The little circles at the end of the name indicate that there is a submenu if you click on it (no submenu means that it will run a command instead).
The blue buttons above the red ones: These are controllers. Using them will affect the list of buttons below them. "Group" will group buttons together (I'll show you the result shortly) and "Search" will filter through the list. Typing "ject" into the search box will only show the "Object" and "Object Type 2" buttons, hiding "Something" from the menu. I'm extending this a bit as only searching through names is limited, but allowing you to search through specific tags would be more useful (although this isn't shown in these concept images).
The red buttons: This is a rough example of how the library of objects would look. These objects can be added to the stage by clicking on them - mousing over would show a small preview like this:

 Hovering over the "Object" button

The above pic also shows how grouping works. This is the same menu from before, but the grouping button was activated with a tag of type "Var" (this isn't actually what stuff would be called, I just hadn't worked out all the names of everything when I designed this). So now the library items are shifted over a step and their groups are listed instead. Tags or groups are separated into types. So one tag could be "location" (which would include such tags as "garden", "kitchen", "bar", "sky") and another could be "furniture" (with tags like "chair", "decoration", "light"). Each of these tags would contain a multitude of objects. Objects can have several tags. A painting could be of location type "wall" and furniture type "decoration".

Using the search or filter will also immediately create a new search field under it so you can filter by multiple tags or names. I still need to think how I'll include this properly, but perhaps something along these lines:

Boolean operations at work with searches, crosses on the right will remove filters

I haven't worked it all out perfectly yet, but it's code worthy - in fact I started coding this a while back so you get to see a demo soon (of course, since this update didn't happen for a while I'm not sure how trustworthy my relative-term timescale is).

No comments:

Post a Comment