Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » Truly skinnable GUI for allegro released

This thread is locked; no one can reply to it. rss feed Print
 1   2   3   4 
Truly skinnable GUI for allegro released
spellcaster
Member #1,493
September 2001
avatar

The Allegro GUI is a very flexible and easy to use user interface. But, as
we all know it doesn't look very pleasing. For your normal set of tools
this doesn't really matter. But if you want to use the GUI inside your
game, it's a different story. The GUI has to look modern and fit the theme
of the game. Most of the time, this means that we re-implement many
widgets already existing in the Allegro GUI.

On the other hand, it's very easy to change the look of the widgets. You
just need to write your own dialog_proc function, and handle only the
MSG_DRAW event, and route all other messages to the default dialog proc.

int my_button_proc(int msg, DIALOG *d, int c) {
    int ret = D_O_K;
    if (msg == MSG_DRAW) {
        /* All drawing code here */
    } else {
        ret =  d_button_proc(msg,d,c);
    }
    return ret;
}

While this is not that hard, it's still a repeating task. So, why not
write a set of dialog functions which let's us change the look of the GUI
in a very easy way? Easy as in exchanging some bitmaps and maybe adjusting
some INI file settings?
Yeah why not? So I decided to do exactly this: Writing a set of
truly skinnable dialog functions, so I can change the look of the GUI by
just replacing some image files.

{"name":"screenshot.jpg","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/e\/4\/e4d12f04b9172211c8de6390168b6eec.jpg","w":440,"h":600,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/e\/4\/e4d12f04b9172211c8de6390168b6eec"}screenshot.jpg
A screenshot using an Aqua style theme.

Overloaded Dialog Functions
I've prefixed all of my functions with "lex_" to avoid namespace clutter
(LEX is 3 letter entry I normally use for Hiscores). The following
functions have been overloaded:

- lex_button_proc
- lex_slider_proc
- lex_check_proc
- lex_radio_proc
- lex_edit_proc
- lex_list_proc

What's new?

I added a few extra extra features to the button and listbox.

lex_button_proc
You can specify a callback function for the button as dp2 which will be
called once you click the button. You can use this callback to check the
dialog content before it is closed. You can also make change the return
type of the button, say from D_CLOSE (close dialog) to D_O_K (do nothing)
to ensure that the dialog is not closed.
The prototype for the button callback function is:

int button_callback(int id)

The submitted id is the d1 member of the dialog struct. Set it to NULL if
you don't want to use a callback function.

I also created one new function
- lex_dialog_proc
which can be used to create a movable dialog. If you want to create a
moveable dialog box just place this function as the first dialog proc in
your DIALOG structure like this:

DIALOG the_dialog[] =
{
   /* (dialog proc)     (x)   (y)   (w)   (h)   (fg)  (bg)  (key) (flags)     (d1)                    (d2)  (dp)              (dp2) (dp3) */
   { lex_dialog_proc,   100,  100,  440,  200,    0,  -1,    0,    0,          0,                      0,    "Dialog",    NULL, NULL  },
   /* Dialog box content goes here */
}

The dp member is used for the dialog title.

The remainder works as you would expect it from the normal Allegro
functions.

To use it, simply use the lex_ prefixed dialog functions.

I've also added a slightly enhanced version of do_dialog() called (be prepared for a surprise...) lex_do_dialog() which allows you to
doubleBuffer your UI.
Check the test.c sample to see how it works.

If you want to create new skins, have a look at the provided aqua.skin file... it's heavily commented, so you should be able to create
your own skins. If you have done skins on your own, please drop me a mail.

You can download it from the (fresh, ugly but functional) lexgui homepage: [url http://www.steinke.net/allegro]

Tell me what you think... is this something you might want to use?

--
There are no stupid questions, but there are a lot of inquisitive idiots.

Thomas Fjellstrom
Member #476
June 2000
avatar

Looks nice. I'll have to give that a go. Any change you'll write a dlg plugin for your addon?

Hmmm... your test doesn't update properly, it seems the objects sit in thier own loop, so Im guessing your still using some of the original gui code... and its horribly slow if i turn your Buffer into a sub bitmap of the screen and comment out the blit command...

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

Matt Smith
Member #783
November 2000

Spellcaster: It does look very nice indeed :)

Tom: That slowdown is inevitable when anti-aliasing or doing translucency

Thomas Fjellstrom
Member #476
June 2000
avatar

what aliasing or translucency? I have a 900Mhtz Tbird. It shouldn't be that slow... I mean it was really slow. as if I was running windows 98 on a 486@90Mhtz, the only thing that i know that goes that slow on this machine is TuxRacer with Hardware OpenGL turned off. (with all the extra effects turned on, like shadows, trails, more aliasing, more detail, etc...)

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

Matt Smith
Member #783
November 2000

The symptoms you describe are are sure sign that there is some blending going on. No matter how fast your cpu is reading from video memory can be horribly slow. :-/

Thomas Fjellstrom
Member #476
June 2000
avatar

I dont think there is. But I haven't checked the code. I think the custom update_dialog is doing something funky casue the dialog is dragable.

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

spellcaster
Member #1,493
September 2001
avatar

Hm... not really. Not unless you you actually drag the dialog.
What exactly is your problem?
I have nbo problems at all speedwise. What have you tried to do, what have you changed?

Ahm... why would you want to turn the buffer into a sub bitmap? If you want to do blit to the screen, just use the normal do_dialog.
Use my function if you don't want to blit to the screen... that's the whole idea of that extended do_dialog...

--
There are no stupid questions, but there are a lot of inquisitive idiots.

Thomas Fjellstrom
Member #476
June 2000
avatar

I was just playing with your 'test' code. I executed it without changing a thing, and if I click a button, I don't get to see the button pressed image cause the drawing is halted till I let go of the mouse button, but by that time the button has reverted to the 'not pressed' image. The list box does the same, it doesn't draw till you stop scrolling, and when draging the dialog no objects update, but the draging is SLOOOOOWWW, slow enough to see the individual blits that update the background image.

I turned the buffer into a sub bitmap to remove the extra blit.

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

topaz22
Member #2,049
March 2002
avatar

i just looked at it... dragging the dialog makes the whole dialog white while dragging, and the scroll bar move while you drag it, but it goes to the place where you let go of the button. this is from running gui.exe. i have an athlon xp 1.1ghz w/geforce2. haven't looked at the code, lemme see what's going on.

Pradeepto Bhattacharya
Member #1,340
May 2001

Hi all(egorites):)

Great one SC ...it really looks cool...if i may say u have CAST-A-SPELL;)...pls send me ur magic wand ...;D

Quote:

Thomas Fjellstrom : Any change you'll write a dlg plugin for your addon?

I second that thought , SC any change of that...will really help lazy bones like me;)..will luv it..

Regards
Pradeepto

--
I vote for Pradeepto. - Richard Phipps
Hey; Pradeepto's alive! - 23yrold3yrold

Specter Phoenix
Member #1,425
July 2001
avatar

Very cool;D. Will that work with the stuff posted here concerning GUI, DLG, AGUP, and a link to the GUI Clinic tutorial on the AGDN site by Daniel Harmon?
I hope so because I want to start making good GUI in games that I plan on making (Tetris(sorry I know there are a lot ot T Clones but I have to do it just once), Super Mario Bros Clone, Breakout Clone, Galga Clone, Pac Man Clone, Mrs. Pac Man Clone(don't want to be sexest;)), Tic-Tac-Toe, etc.). One question I have is would I be able to make a GUI that when you click on a menu it opens and has a pic of a character or whatever to the left of the text and menu names and that stuff? For example, if I made my World of Gaia(WoG)RPG and decided that I wanted the main character(Ryu) to be on the left side of the first menu bar to the left of the text would I be able to do that and how would I be able to do that if I can do it? My curiousity and ambition has just sky rocketed;D. Thanks in advance for any and all help you can provide;D.

spellcaster
Member #1,493
September 2001
avatar

Ok, first of all:
All of the problems mentioned come from my lex_do_dialog(). If you use the normal do_dialog() that won't happen. On the other hand, if you use the normal do_dialog(), you don't have double buffering.

It seems like the allegro dialog functions really like to do stuff in loops, and that they don't have callback functions.
The solution is simple: I need to handle the according functions in my dialog handlers, which should be mainly cut-and-paste. Expect a new version pretty soon now :)

Quote:

Will that work with the stuff posted here concerning GUI, DLG, AGUP, and a link to the GUI Clinic tutorial on the AGDN site by Daniel Harmon?

Let's start to work through that list step by step:
a) GUI/DLG related stuff: You can simply create a dialog using the normal gui_procs and simply put a lex_ in front of them to change them to my code.

b) Not sure what the questions are regarding AGUP and the GUI clinic tutorial?

I'm also not sure if there's interest in that kind of functionality (skinable GUI procs).

Right now I've these things on my list (most important things first):

Next release:
- Fix the double buffering code
- Make the skin loading more robust

Other things on the list
- Add a filechooser
- Additional skins
- Create a new frame work, so you can have modal dialogs.

--
There are no stupid questions, but there are a lot of inquisitive idiots.

gnudutch
Member #951
February 2001
avatar

Spellcaster: Oooooh pretty!
Pradeepto: I'm dumb!

Thomas Fjellstrom
Member #476
June 2000
avatar

But... I wan't DLG to show me my pretty dialogs when I make them :(

;)

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

Julien Cugniere
Member #947
February 2001

Quote:

It seems like the allegro dialog functions really like to do stuff in loops, and that they don't have callback functions.

I think that when they do something in a loop, they broadcast a MSG_IDLE to the whole dialog... this could be the callback you need! But it might not be easy to differentiate it from regular MDG_IDLE :-/

Bob
Free Market Evangelist
September 2000
avatar

Perhaps it can be merged in with AGUP, since that has Win32, GTK, and QNX Photon themes.

--
- Bob
[ -- All my signature links are 404 -- ]

Peter Wang
Member #23
April 2000

I'd love to see that, lexgui as an AGUP theme. And maybe that Aqua thing (by gnudutch? sorry, I forget) too.

spellcaster
Member #1,493
September 2001
avatar

Quote:

Perhaps it can be merged in with AGUP, since that has Win32, GTK, and QNX Photon themes.

Hm... as I said, that code can switch "themes" dynamically. So it's not really efficient to throw it together with AGUP.
In fact, I started working on that since I found the "themes" in AGUP pretty disappointing.

Hm... so you guys want more themes? Give me half an hour... ;D
It's 11:21 (locasl time here) let's see how long it will take to create a win32 theme.

--
There are no stupid questions, but there are a lot of inquisitive idiots.

Thomas Fjellstrom
Member #476
June 2000
avatar

Cool. But please not the Clown theme from XP... shudder
OOOhhhh.. A BeOS theme would be cool too.

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

spellcaster
Member #1,493
September 2001
avatar

Ok, it took a bit longer (had to eat dinner in between ;-) ) and also needed to change the code slightly.

{"name":"screen_bill32.jpg","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/4\/e\/4efc335c192b01e33431796de328b98f.jpg","w":646,"h":505,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/4\/e\/4efc335c192b01e33431796de328b98f"}screen_bill32.jpg

That's a plain and boring win98 screen.
Time needed just to create the skin from scratch: 35 minutes.

I'll upload the changed package in the evening, this should contain a better doublebuffering stratgy, also.

--
There are no stupid questions, but there are a lot of inquisitive idiots.

SystemDown
Member #663
September 2000
avatar

Just like to say, nice initiative to create a skinnable GUI, it's looking great thus far.

And a question about the scroller on the listbox in the demo program.. it doesn't follow the mouse when it is dragged. Is it supposed to do that?

---
BEER: It's not just for breakfast anymore.

spellcaster
Member #1,493
September 2001
avatar

Quote:

And a question about the scroller on the listbox in the demo program.. it doesn't follow the mouse when it is dragged. Is it supposed to do that?

Nope, that's a a problem with the double buffer repaint code. It will be fixed this evening.

--
There are no stupid questions, but there are a lot of inquisitive idiots.

SystemDown
Member #663
September 2000
avatar

Great, can't wait. :)

---
BEER: It's not just for breakfast anymore.

Specter Phoenix
Member #1,425
July 2001
avatar

Spellcaster: Thanks, but that was only the answer to my first question. What about my second question? The question was:

Quote:

One question I have is would I be able to make a GUI that when you click on a menu it opens and has a pic of a character or whatever to the left of the text and menu names and that stuff? For example, if I made my World of Gaia(WoG)RPG and decided that I wanted the main character(Ryu) to be on the left side of the first menu bar to the left of the text would I be able to do that and how would I be able to do that if I can do it?

Here is a lame image I made in M$ Paint to illustrate what I'm asking:
http://scorpius.spaceports.com/~vgdesign/images/lame_gui_example.bmp
If that image doesn't show up I made a web page with it on there. The URL is: http://scorpius.spaceports.com/~vgdesign/lame_gui_example.html.Thanks in advance for any and all help you can offer;D.

spellcaster
Member #1,493
September 2001
avatar

Hm... I haven't touched the menu stuff yet. But it shouldn't be too hard.

So, you want to be able to specify a BITMAP that is placed at a side of a menu?
Similar to the windows text if you open the start menu?

If this is what you want, it shouldn't be too hard to do. (I've no idea right now, because I've not used the allegro menus yet)

I'll add it to my "todo" list together with skinnable menu support.

--
There are no stupid questions, but there are a lot of inquisitive idiots.

 1   2   3   4 


Go to: