UltraGUI – Window Management for Irrlicht

In today’s world, there’s this subtle quest of designers and programmers to find the ultimate GUI layout – something that always works and everyone can use with ease. When a design is bad, someone gets an earful. When it’s decent, no one minds it as much, though people are nit-picky. When a design is good… well, let’s face it – no one has the same tastes.

As a programmer, designer, and web-developer, I started thinking about what the ultimate graphical user interface would look like. It would have to be intuitive, useful, and still impressive. At the same rate, it should be relatively easy for the programmer behind the scenes to work with it. Now obviously web development and typical program interfaces are different, though both of them have something in common at least – an upper menu. That’s simple, and it’s also been done over and over. But what about everything else? When you click a menu button, what should everything else look like? How are features easy to find?

And thus began the long quest of mine in finding the ultimate graphical user interface. Fortunately, I did get a start on it. I’ve come up with a few ideas that I want to use in the irrlicht engine. The first one – UltraGUI – I’ve already implemented. The others I’ll explain in a second, but first, the spotlight goes to my newest creation.

UltraGUI – Frame an Menu

Originally, my concept was to create a menu system reminiscent of the Windows Start Menu (since I use it so much)… well, at least with respect to the fact that it shows up on the left side of the screen. I figure if designers want neat icons for rather empty menus, it might be clever to try something like Ubuntu’s side menu. After all, we can take advantage of that side space! However, I very much liked the menu of Linux Mint, which shows up in the center of the screen. MUST… HAVE… THIS… TOO! And while I’m at it, how about adding a right-side menu (like Gimp) and a bottom bar like the start bar to keep inactive windows open for you so you don’t have to go searching for them but they aren’t in your way. In part, the reason for the bottom bar and the fact that menus can be easily hidden is to prevent the constant fight between menus and working space.

All this mixed together, with the spice of the menu/window state changes being animated and voila:

And to think I hand-coded gradients for the bar… I really enjoyed working on this thing. 😀

Couple notes:

1) The BUTTONS ARE NOT PART OF THE MENUS/WINDOWS. I added those for debugging. I could have placed them anywhere in the menu/window, but it was simplest to just put them in a line.

2) The FPS is based on the rendering engine. The top image is from Burnings. *sigh* I wish it ran faster, but that’s the problem with CPU-based engines. The bottom image is OpenGL, which runs on the GPU, and is consequently 3 times as fast.

Still interested in the project?

You can DOWNLOAD it and read more about the features on the forum post.

Or you can download it directly from my website.

Other Ideas

What’s next?

First, I’d like to implement the same window-segmentation scheme as in Blender but not make it disappear. This means having easily-creatable segments that once created, perhaps with a pop-down menu or tab-system, people can easily pick the menu they want to show up in that area. Personally, I think pop-down would be better than tabbing – then I can put more options in it.

For those not familiar with the Blender scheme – it means breaking up the screen into resizable segments. Overflow of the other GUI elements (buttons and things) that cannot fit in the segmented area are hidden and a scroll-bar appears. While the scroll bar would be part of another GUI element and not the segmentation one, I’m not really a fan of hiding things or making the user handle hidden items unless the management is self-imposed. Hence, I’d like my segments to automatically (or on the click of a button – probably a better idea) expand to expose all of there components. This way, there would be no need for scrolling!! HURRAY!! 😀

Next idea?

I like search bars. I use them all the time. Wouldn’t it be nice if all of the features of a program were available such that you could either find them in menus (maybe even multiple ones) or very easily with a simple search option?

This idea is inspired by both the search bar in Windows Vista, Launchy, and, most importantly, by the search engine in Linux Mint. Used with UltraGUI (see above), a left-side menu would be reminiscent of the Windows Vista Start Menu and a center menu/window would be reminiscent of the menu window of Linux Mint.

On the programming side, my idea would require some kind of tagging system, obviously.

Features of this search system would be, first, a search bar (duh), and second, different views of search results. With respect to the first feature, I would like a nice button and… auto-complete suggestions… (based on available options, of course). The second feature would be things like showing icons (if there are icons associated with the options, which could be the case if these open menus and such) or listing options in a single column or in columns and rows, depending on the available space. I’m also considering divisions for sorting. For example, common utilities, tools, links to open other menus, and such would be grouped in one section, divided by a line or something nice, and specific engine calls or relatively unused utilities and menus might be in another section.

All in all, it’s obvious my ideas have taken influence from others. Why make up something weird? It should be intuitive, right? Okay, okay, so I could be more creative.

Other Stuff

There’s more Irrlicht extensions in another blog post of mine.

Advertisements

About chronologicaldot

Just a Christ-centered, train-loving, computer geek.
This entry was posted in freeware, software and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

Enter the space and time of my little world... Welcome Earthling.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s