GUI Fun

I know my last post was only yesterday, which doesn't mean I don't have a life, although that may be correct... But anyway I believe I have enough of an update on the GUI to show you a little more. I also found some really nice site which lets me highlight my C++ code just using css and html so I am able to share some snippets with you to help explain what I mean. In the future I may even write some tutorials depending on how confident I am the way I do things is something I can pass on to you without feeling a little guilty =p



(Skip to the bottom for a summary of the GUI features so far, I know I ramble on...)
And now you've seen the video let me explain what the heck is going on! I know it would be easier if I was actually talking over it, but (1) My voice is really boring (2) I don't have a mic (3) I probably won't do it anyway cause I'm to shy, or don't want to sound like a retard... maybe that's the same thing, I dunno. Anyway, as you can see I've done away with those horrible icons I was using last time and decided to go for a "default" button kind of feel made using Allegro's primitives. They really are just place holders at the moment until I do get some decent graphical buttons done. The buttons are made from 3 sections, a background rect, a border rect, and 2 highlight lines (ok that’s 4 but whatever), and during this process I had to choose colours for them, so I thought why not add in 3 types of colour every GuiElement can use? That way they can be changed at a later date. The function for changing the colour schemes for all of the objects within a GuiObj looks like the one below. Except the one below is from the derived window class, notice how it doesn't use the same colours as your using for the elements, but changes them slightly.

If you know of a better method to make this process better please let me know, it was just a quick hack to get it in code, I didn't really put any thought into it. The other change you might have noticed me badly demonstrating was Textbox support, or "Textfields" as I like to call them. Now I remember trying to make a similar thing in Allegro 4.2 and it was a pain in the arse, but with the way the event system works in A5 it was a piece of cake! Although I did bump into one issue whereby in the future I want certain elements linked to hot keys on the keyboard. This obviously proves a problem if the user is trying to type and pressing all these keys which might be opening menus, moving the play etc... So I had to work out a way to lock the input when a text field is active, but keep it open to the text field. I managed it by adding a void *pointer inside the keyboard class which I used much like a bool in that if it's NULL the keyboard input is NOT locked. An object wanting to lock the input needs to provide a pointer to itself in way of a form of ID when it comes to checking who wants to unlock it. This was necessary because one text field was fine, but when I added a second, because only one was active at a time the other kept unlocking the input. The other nice thing about the textboxes is that I can choose what input I want to allow, and also the fact you call their call-back functions by pressing enter (which is handy for when to know when to grab what's inside). Well there are a lot of features for my GUI system now, and way to much to go into in detail in a single post. But the summary below should give you an idea.

Gui Element
• Able to customise the colour through (background, border & highlight). Each derived element decides itself how to utilise them.
• Supports a single call-back function. Again the derived element decides when this is triggered, either through it's logic, or input function.
• Tab Index number, used in conjunction with the GuiObj it sits inside. Lets the element know when it is active.
• Can be enabled\disabled
• Has a label (std::string), which has a lot of alignment options (above, below, out-left, out-right, top, middle, bottom, left, right, centre etc..) Again this is optional whether to draw this, per element need.
• Returns a "value" of the derived elements choosing in the correct format, string, int, float etc...

Text Field
• Limits input to what I want it to accept
• Locks all other input while its being used (except for input which ignores the block)
• Has a flashing line to indicate it's active!
• Auto sets it's height for the font in use
• Only accepts as much characters as it's width will allow (might change this, but will eventually add a text box which will be multiline)

Button
• Uses its call-back when either the left mouse button is clicked on it, or the "select" key is pressed on the keyboard (see GuiObj for what that is)
• err... Accepts only single clicks\presses

GuiObj
• Stores Gui Elements inside a vector
• Supports keyboard\mouse input and the changing of how they are used to manipulate it (for example, the "next element" keyboard keys default is TAB, and its default "select" key is "Enter"
• Keeps track of the active element by TabIndex and mouse position
• Elements position relative to the location of the GuiObj
• Has nice "helper" functions for adding elements (see below)

Window
• Has a background, border, title colour attribute which tries to match the colour scheme of its elements
• Can be moved by mouse dragging
• Most of the time stays on top of other windows (need to sort this)
• Need to add “window buttons” (lock back to default position, lock in place, close etc...)

And wow wasn’t that long winded, feels longer for me since that “C++ to HTML” was giving me a headache using the blogger editor, it kept trying to change it! Anyway hope you weren’t bored to much, if you have any questions feel free to ask.

I’m hoping to move on from the GUI pretty soon, I think I have enough to get started with on the editor. Hmm, actually I need to create an element that can store pictures or something and scroll through them for the map tiles. *sigh* Stupid GUI.