Not logged in, Join Here! or Log In Below:  
 
News Articles Search    
 


Submitted by Joe Silver, posted on September 12, 2000




Image Description, by Joe Silver



Here's another taste of the next revision of my GUI system. Some of you may remember my last IOTD of the GUI system You can check it out here.

I had made a huge mistake in my initial design, so unfortunately I had to recode most of the underlying structure from scratch. There's a big difference in appearance this time as well. YES it looks like windoze, but it's a familiar interface, and it's easier to debug and get an idea of how things should be work. Anyway feel free to give me feedback.

Features finished
  • Fully customizable menus (top level, and submenu levels) Right now the menus can only go one level deep
  • Window and Control clipping.
  • Textbox
  • Progress bar
  • buttons (the buttons change appearance when clicked and only execute the click code when the user releases the mouse button over the GUI button.. ala win9x)
  • Status bar
  • fully functional console. (parameterized commands, cvars (via set command), etc..)
  • commands in the console can be executed like "command(param1, param2)" or "command param1 param2"
  • resizing and z ordering of windows
  • dynamic background in main window.. you can specify an image or a UDF rendering function
  • proportional fonts, (even a tool to create the textures on the fly) The text is a little fuzzy right now.. It's dude mostly to scaling the texture. This is on my list of things to fix.
  • Each control/window has User Defined Function support for several events as well.

    I'm working on getting the rest of the controls done now.. Also I plan to implement a very basic scripting system for the GUI as well. The scripting system is low priority right now though. I'm also working on getting it running under linux.. this could take a while though. The whole thing is done in C++, and uses classes extensively

    Cheers,
    Joe Silver
    Axe Software


    [prev]
    Image of the Day Gallery
    www.flipcode.com

    [next]

     
    Message Center / Reader Comments: ( To Participate in the Discussion, Join the Community )
     
    Archive Notice: This thread is old and no longer active. It is here for reference purposes. This thread was created on an older version of the flipcode forums, before the site closed in 2005. Please keep that in mind as you view this thread, as many of the topics and opinions may be outdated.
     
    Strepto

    September 12, 2000, 09:19 AM

    Nice work dude! Im working on a window system as well. Im plannig to make an api from it. To start a new project using my window system will be as easy as using glut.
    Anyway what do you do when you are dragging a window? Do you redraw every thing from back to front?

    Strepto/Astral www.astral.scene.hu

     
    treething

    September 12, 2000, 09:56 AM

    Very nice.:-) what happened to the translucent windows though??

    How is your text rendering done? is each character a seperate quad with a shared font texture?

    anyway, looks good!

    Chris

     
    Mace

    September 12, 2000, 10:21 AM

    Nice work.
    Coding gui´s and menues must be one of the things i hate most.
    Thats why some of my progs run in a dos prompt ;)
    Nice look (i like silver).

    Transparent Linux windows are killers.
    Is the look-and-feel of the menues/frames customizable?

    I noticed that the smaller window has a darker silver shade and does it get darker the more you shrink it? Anyone got a "trick" for making frames with a "fixed color size"?
    I think it involves checking the size of the menues/frames when setting the edge colors of the menues/frames.

     
    Sylvain Rochette

    September 12, 2000, 10:26 AM

    Good job but I prefer the old interface with translucent windows :)

     
    Axeman

    September 12, 2000, 10:27 AM

    When dragging a window I redraw everything from back to front.

    The translucent windows got to be annoying after looking at them for a while.. really looked bad with a lot of windows on the screen. Not to mention that this gui is 2x faster than the previous version, simply because I cut down on alpha blending so much.

    The text is 1 quad per character (well 2 tris). The font texture is a 32 bit tga, but I only really use the alpha channel. I'm still working on getting my texture generator working smoothly. It's probably around 75% finished.. basically instead of generating tga files, it will generate a font as a bitmap object in memory, hand that off to opengl, and tada you got a new texture, using whatever font and size you wanted. When I get this system finished, most of my text problems should go away. You can also save the font images. Unfortunately right now it will only save BMP files, since I've been to add tga export code.

    Thanks for the nice comments. I hope to have a rough demo available soon.

     
    Axeman

    September 12, 2000, 10:35 AM

    Wow.. so many people liked the translucent stuff.. OK after I get the rest of the controls finished I'll go back and see about getting the translucency back. I wound up making this version a tad less customizable. Basically myself and a few fellow programmers went over the cost options of the previous gui v/s the new one.. The new one is 2x faster, 3x easier to set up, but only .5x as customizable.
    Which had you guys rather have? It can be customized out the wazoo? or it's easy to set up and use?

    I will go back in time and add some of the old features..

    The darker windows are the ones that don't have focus. Basically the front window is draw a tad lighter than the windows behind it.

    Coding a gui at times can be very boring, but in the end the result is worth it. Unreal Tournament's gui system impressed me enough to make me create my own.

     
    Sylvain Rochette

    September 12, 2000, 11:04 AM

    Meaby you can add some tricky thing to your translucent windows like

    So imagine 5 windows under others:
    value are translucent (alpha) value
    1. 0%(back)
    2. 10%
    3. 15%
    4. 20%
    5. 25%(front)

    So more the windows is under other more the alpha effect is disabled
    Well something like that... to eliminate the black hole effect and put a maximum of translucent windows so that will help i litte bit for the effect...

    Hope this help :)

     
    Axeman

    September 12, 2000, 11:27 AM

    That's definately an idea.. I'll look into sometime.
    The thing with the old gui system design, was with the whacky title bar size and shape it made adding things like a menu and a console very aggravating. For a little while I tinkered with having 2 window styles. 1 style for the main background window, and one style for the child windows. It worked, but looked rather silly. I personally liked the old style better myself, but it was a lot harder to keep looking nice once I had things like the menu and console.

     
    Kurt Miller

    September 12, 2000, 11:38 AM

    I'm all for a simple yet stylish GUI. Windows look and act generally the same under Windows for a reason ;]. UT nailed it if you ask me. I suppose it depends on what the UI is used for though. If I'm playing mp3s, the buttons can be as funky and free as they want. But if I'm working with an in-game editor or something, you can be sure I don't really want to learn how to operate a whole new rotating, translucent, funkadelic inverted menu system. I think my point is that customization would be nice, but I'd be careful not to let things get out of hand if you plan to be productive with the UI.

    Then again, I may be way off, judging from some of the developer desktops using WindowBlinds :]

    Anyway, the shot looks great. Keep sending those IOTDs with your progress :)

     
    Axeman

    September 12, 2000, 11:46 AM

    Thanks Kurt. You pretty much nailed the reason why I stripped out a lot of the customization options. It was too hard to manage all combinations through a single piece of code. As it stands now.. The font is customizable, but not customizable enough yet. I'm working on a font manager that will aid in this a lot. Also the colors are customizable. You would be suprised at the actual lack of textures in the gui. Very few things are textured right now. I'm not really designing the gui to be amazingly eye popping, I'm designing it to be easy to use for the developer, easy to use for the user, and have enough functionallity to get whatever is necessary done. I hate it when I play a game that has a really cool looking gui, but is very lacking in ease of use and/or functionallity. UT did nail it for me as well, and their gui has been a guide for me to a certain extent. I'm not copying outright or anything, but the first time I saw it I was like WOW.. a functional ingame gui. I was inspired.

     
    Chiguire

    September 12, 2000, 02:33 PM

    If you don't want to get along with the images, why not use OpenIL, it's in sourceforge, this image library is very OGL like, i recommend it to you, and everybody (i'm not the author, in case you were wondering)

     
    Rui Martins

    September 12, 2000, 02:33 PM

    Nice Revamp !

    As I said in your previous IOTD, there are other GUIs, with transparent windows, but the one I saw, doesn't apply the transparency as you do, or as it would be easier (direct) with Opengl.
    The transparency is meant to show the desktop backround, and Not the other underlying windows, because in practice, that won't be very practical, since you start to have text over text and then you won't be able to read it.
    The GUI I saw just makes the currently selected window transparent according to the desktop background, i.e. the selected window has a background which is exactly the same as the Desktop, but a little bit darker. Even if you have underlying windows, they don't show inside the selected window background.
    Other windows, which are partially occluded, will have their background with the same setup, but only where the window is Not occluded.

    Resuming, it look like a regular oppaque window scheme, where the window background is just a darker copy of the desktop background.
    So it's something like pseudo transparency ! 8)

    this may look odd at first, but believe me it works fine.

    To implement this with OGL, it's probably easier if you just copy the background as I refered, your use it like a texture (carefull, with maximum texture sizes).
    if you try to implement this using OGL alpha channel (real transparency) then you will have to clip the windows to the windows which are on top of it.
    But then you should already be doing this, to avoid overdraw.

    I'm very keen to try it, I just haven't time to make my own GUI, but I will shurelly use yours (if you let me), since I like it, and the effort you have put into it.
    Racer with a GUI, that's a taught ?

    Good Luck, and good programming.

    See ya

     
    Axeman

    September 12, 2000, 02:54 PM

    Chiguire,
    Images are not a problem.. I have code that works great with targas & bmps. OpenIL is nice.. don't get me wrong, maybe a bit of overkill for what I'm doing here. Most of the gui isn't textured right now, due to lack of need. Coloring works great for now. I'm not saying that it can't be textured, just saying a lot what you see isn't textured.

    As far as the text stuff goes with the texturing, I've basically just not finished it. The part I have now is mainly proof of concept, so expect to see some major revamp on how text is done in future versions.

    Rui,
    Wow that's a lot of info. I do plan on releasing the gui once the windows version is finished.. I'm not sure how I will release it yet. Maybe LGPL, maybe just libs, not sure really. The translucency thing to me isn't a huge plus, and adds more overhead than necessary IMHO. Alpha blending large areas can get slow if you do it often enough. If you don't believe me check the framerate differences between this version and the old one (like 116 to 72 or so) I could do it the way you mentioned above, but again it adds some additional overhead and not a whole lot of coolness.. Not to mention, the background in the gui can be done 1 of 3 ways.
    1) a static image
    2) nothing, just blackness
    3) UDF
    #3 would definitely present a problem doing it the way you mentioned, if I read your post correctly. The caller for the UDF gives the programmer window extents that the UDF can draw to. You can add 2d or 3d drawing here, as long as you make sure you set the state back like it was when you background render function is called.
    I added this so people could do cool swirling/animated backgrounds behind all the windows.

    Also, for all the linux users out there.. Yes I do plan to finish the port. I'll probably use glut in the places that I am using windows specific calls right now. I personally don't like glut, but rather than learning all the guts of X11 stuff, I'll use it with the linux port. I would definately appreciate any linux feedback I can get, seeing as how this will be my first bit of linux coding.


    Geez I jabber too much. ; )

     
    haust

    September 12, 2000, 03:25 PM

    I think you should redraw every frame whatever happen....
    So it will save you pieces of screens managment and you'll have more stable fps.

    All you have to be carefull is avoiding to display a window more than once :)

    well hope it will help.
    keep on man ;)

     
    Myrmecophagavir

    September 12, 2000, 03:35 PM

    Hi there, looks cool... I was wondering how you drew buttons with text captions. What you could do is have a texture that's say a rectangle with no text then, then stretch it out to the right size for the button given the text's length, then draw it and write the text in the middle. But this would distort the 3D edging out of proportion. The other thing I thought of was to draw a medium-coloured rectangle for the bulk of the button, then draw lighter lines up the left and top, and darker lines along the bottom and right to give a raised 3D effect. What is it you do?

    BTW, why is it that some posts in these of-the-day discussions appear without the text like at 10:35 above? Is that when you reply directly to a particular post instead of the whole thread, or something?

     
    Axeman

    September 12, 2000, 03:40 PM

    Myrmecophagavir,
    What I'm doing right now with the buttons is I render the flat color to either be slightly wider than the text with a minimum width, or a hard specified width. Then I draw the border, then I draw the text centered in the button. This seems to work really well.

    Haust,
    I do redraw the entire gui every frame already. Much easier to manage that way, and at 200+ fps why not?

     
    Steve 'Sly' Williams

    September 12, 2000, 07:07 PM

    Replies to posts appear as this link

     
    Axeman

    September 13, 2000, 01:41 AM

    I'm throwing together a quick and dirty web page for the gui system.. After it's finsihed I'll do something nicer for it. In the meantime check at http://www.axesoftware.com/gui

     
    NovaCoder

    September 13, 2000, 06:30 AM

    Yep v-nice work........

    Yeah I would like to be able to use a GUI like this in my own C++ projects. How easy do you think it would be to 'bolt-it-in'?

    What about communication between the GUI's events and my own objects (esp. if you only release a dll)?




     
    Axeman

    September 14, 2000, 05:04 PM

    I'm designing it to be 'bolt-in', but I'm not real sure about interaction between gui objects/events and your own objects/events yet. Sure I would like to make it possible, but at this time I'm not real sure how I'll implement it. I will do something along those lines though

     
    This thread contains 20 messages.
     
     
    Hosting by Solid Eight Studios, maker of PhotoTangler Collage Maker.