• Create Account

## OpenGL GUI anyone? Updated on 11/17/05

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

207 replies to this topic

### #41evolutional  Moderators

1373
Like
0Likes
Like

Posted 16 June 2005 - 03:20 AM

Hellrizzer wrote some tutorials for his own OpenGL GUI which you might find useful

### #42rick_appleton  Members

857
Like
0Likes
Like

Posted 16 June 2005 - 05:38 AM

Although I think it's great what you've done, what I'm interested in is how does one link actions to the widgets? If I have a void Quit(void) function, how do I bind it to a button? I've taken a quick look at the source of the demo, but the widgets there don't seem to be connected to anything. Could you give an example of how you bind functions?

### #43JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 07:22 AM

Yup, in the GLUT example if look for this section of the code in the Main.cpp file:

void EventsHandler::actionPerformed(GUIEvent evt){  const String &callbackString  = evt.getCallbackString();  GUIRectangle *sourceRectangle = evt.getEventSource();  int           widgetType      = sourceRectangle->getWidgetType();  if(widgetType == CHECK_BOX)  {    GUICheckBox   *checkBox = (GUICheckBox*)sourceRectangle;  }  if(widgetType == SLIDER)  {    GUISlider  *slider = (GUISlider*)sourceRectangle;    if(callbackString == "s1")      slider->setLabelString(String("Slider 1: ") + int(slider->getProgress()*10));    if(callbackString == "s2")      slider->setLabelString(String("Slider 2: ") + int(slider->getProgress()*10));  }  if(widgetType == BUTTON)  {    GUIButton   *button = (GUIButton*)sourceRectangle;    if(callbackString == "exit")      if(button->isClicked())        exit(0);  }  if(widgetType == RADIO_BUTTON)  {    GUIRadioButton   *radioButton = (GUIRadioButton*)sourceRectangle;  }}

If the user performs any of the following actions on a given widget

    bool  isMouseOver();    bool  isReleased();    bool  isFocused();    bool  isDragged();    bool  isClicked();    bool  isPressed();

the actionPerformed function in the EventHandler will be called. Let's concentrate on this particular chunk:

  if(widgetType == BUTTON)  {    GUIButton   *button = (GUIButton*)sourceRectangle;    if(callbackString == "exit")      if(button->isClicked())        exit(0);  }

The code says if the widget that the user interacted with is of type BUTTON, the above chunk will be executed. More precisely, if your button has a callback string "exit" defined in your XML GUI layout, the function exit(0) will be called when your said widget is clicked "isClicked()"

Remember to register an EventHandler to stream all of your widgets events into a particular location [smile]

### #44rick_appleton  Members

857
Like
0Likes
Like

Posted 16 June 2005 - 07:41 AM

Ouch.

I thought that was where it was happening.It works ok for small programs and demos, but if you need to make the GUI for an RTS or a RPG like this it'll be terrible.

### #45JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 07:53 AM

Not necessarily, one can always retrieve the name of the parent panel and direct the event to another function, check this out:

  GUIPanel *parentPanel = (GUIPanel *)evt.getEventSource()->getParent();  const String &callbackString = evt.getCallbackString();  const String &parentName     = parentPanel->getCallbackString();  if(parentName == "SomeRandomName")  {    someOtherEventHandler.actionPerformed(evt);    return;  }

That way we can separate things out depending on the panel where the action has occured, besides there are few other tricks as well, let me finish this tutorial and I'll come back to you. Unless you have a better way to approach this problem [smile]

### #46JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 08:10 AM

Ok here comes a quick tutorial:
Here we want to implement three sliders that control the background color of our application.
Since we don't want to stuff more code in the existent XML files, for simplicity sake we will create another file: ColorSliders.xml
We want the sliders to be grouped all together and located in the upper-right corner of our window, let's start off by creating the panel that will hold em together


<Panel name           = "Color Sliders Group"
layout         = "CEN_YAXIS"
anchorPoint    = "CORNERRU"
drawBounds     = "true"
drawBackground = "true">
</Panel>



In the above code, the group name is "Color Sliders Group", every group need a name otherwise it won't be attached to the GUI at runtime.
The layout is "cascading and centered around the y axis", meaning that anything added to the group will be relocated right under the previous element.
The anchor point is where we want the center of the Panel to be considered, there are five options explained in the next ASCII drawing:


CORNERLU            CORNERRU
( )-----------------( )
|                   |
|       CENTER      |
|                   |
( )-----------------( )
CORNERLD            CORNERRD



drawBounds tells the Panel whether we want visible bounds or not.
drawBackground tells the Panel whether we want a visible background or not.
Since we want our panel to sit in the top-right corner of our main window, let's add this line:


<Position     x = "-10" y = "10"/>


If x is negative, it tells the parent panel that the current widget's center should be placed n pixels away from its right border.

Ok let's add a visible title to our panel


<Panel name           = "Color Sliders Group"
layout         = "CEN_YAXIS"
anchorPoint    = "CORNERRU"
drawBounds     = "true"
drawBackground = "true">

<Position     x = "-10" y = "10"/>

<Label name = "Title">
<Text string = "Color Sliders" fontIndex ="1" wScale = "0.5" hScale = "0.5">
<Color r = "255" g = "180" b = "40" />
</Text>
</Label>
</Panel>



The title is simply a Label, we want the font to be the SECOND decalred one in the main GUILayout.xml file. Since the original size of the font is too big, we scale it down along the xaxis by half (wScale = "0.5") and do the same for the height of the label (hScale = "0.5").
The Color components are defined as:
Red could be x, X, r or R
Green could be g, G, Y or y
Blue could be b, B, z, Z
If the value of any color component is above 1, it will automatically be divided by 255. Therefore for a totally blue color, we set r and g to 0, and b to either 1.0 or 255.0.

Ok now that we're done with the title, let's add a thin line to separate things out:


<Panel name           = "Color Sliders Group"
layout         = "CEN_YAXIS"
anchorPoint    = "CORNERRU"
drawBounds     = "true"
drawBackground = "true">
<Label name = "Title">
<Text string = "Color Sliders" fontIndex ="1" wScale = "0.5" hScale = "0.5">
<Color r = "255" g = "180" b = "40" />
</Text>
</Label>

<Separator ratio = "1.0"  />
</Panel>



The line will stretch from one side to the other since the ratio is "1.0", ratio will always be clamped to the [0.01 1.0] range.

Now here comes the important part, the sliders:
A single slider will look like this


<Slider    callbackString = "red"
progress       = "0.0">
<Text    string  = "Red" />
</Slider>


From that code we get to know that the slider disc will be initially set all the way to the left since progress is zero, the callback string is "red" and the visible title is also "Red". Using this same example we extend our panel to include two more sliders, here's the final result:


<Panel name           = "Color Sliders Group"
layout         = "CEN_YAXIS"
anchorPoint    = "CORNERRU"
drawBounds     = "true"
drawBackground = "true">

<BordersColor x = "216" y = "169" z =  "0" />
<BGColor      x =  "50" y =  "50" z = "50" />
<Position     x = "-10" y = "10"/>

<Label name = "Title">
<Text string = "Color Sliders" fontIndex ="1" wScale = "0.5" hScale = "0.5">
<Color r = "255" g = "180" b = "40" />
</Text>
</Label>

<Separator ratio = "1.0"  />

<Slider    callbackString = "red"
progress       = "0.0">
<Text    string  = "Red" />
</Slider>

<Slider    callbackString = "green"
progress       =  "0.0">
<Text    string  = "Green" />
</Slider>

<Slider    callbackString = "blue"
progress       =  "0.0">
<Text    string  = "Blue" />
</Slider>

</Panel>



Copy and save that code into let's say ColorSliders.xml

Once we're done with that, let's go ahead an open the main GUI file, GUILayout.xml:
Let's add this entry under Font

<Panel description = "ColorSliders.xml" />

Voila, we have our sliders [smile]

We're not done yet, we want them to modify the background color as we drag them around.
In Main.cpp, let's add these 3 float variables:


float red   = 0.0f,
green = 0.0f,
blue  = 0.0f;


In the renderScene() function, let's add this line right after counter.markFrameStart();

[code=auto:0]
glClearColor(red, green, blue, 0.0f);
[code=auto:0]

Now in "void EventsHandler::actionPerformed(GUIEvent evt)" right after

if(callbackString == "s2")
slider->setLabelString(String("Slider 2: ") + int(slider->getProgress()*10));



if(callbackString == "red")   red   = slider->getProgress();
if(callbackString == "blue")  blue  = slider->getProgress();
if(callbackString == "green") green = slider->getProgress();



TADA, we're done compile and give it a go [smile]

### #47JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 08:18 AM

The final result of the quick tutorial, btw I updated the main post with the recent binaries.

### #48OpenGL_Guru  Members

104
Like
0Likes
Like

Posted 16 June 2005 - 08:21 AM

++rating for you javacooldude :) that will get me started at least. ive NEVER doen any xml so all this is new to me. i was wondering where all the string functions were coming from but realized i guess this is built into the xml language. one question now.. is this portable.. i mean will this work on lets say a linux system? :)

### #49JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 08:25 AM

Quote:
 Original post by OpenGL_Guru++rating for you javacooldude :) that will get me started at least. ive NEVER doen any xml so all this is new to me. i was wondering where all the string functions were coming from but realized i guess this is built into the xml language. one question now.. is this portable.. i mean will this work on lets say a linux system? :)

If you figure out how to implement a timer in Linux and manage to modify my Tools/FPSCounter and Tools/Timer, you're gold [smile]

### #50OpenGL_Guru  Members

104
Like
0Likes
Like

Posted 16 June 2005 - 08:38 AM

Quote:
 If you figure out how to implement a timer in Linux and manage to modify my Tools/FPSCounter and Tools/Timer, you're gold

UGHH -- well in linux i really dont care about the FPS counter or keeping track of the FPS counter.

im gonna work on it and try things out though....

also gonan look at the GLUT version you have there.. oh yeah if you still need that favor, whatever that is, lemme know :)

### #51JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 08:42 AM

Quote:
Original post by OpenGL_Guru
Quote:
 If you figure out how to implement a timer in Linux and manage to modify my Tools/FPSCounter and Tools/Timer, you're gold

UGHH -- well in linux i really dont care about the FPS counter or keeping track of the FPS counter.

im gonna work on it and try things out though....

also gonan look at the GLUT version you have there.. oh yeah if you still need that favor, whatever that is, lemme know :)

The Timer is crucial for the subtle fading effect that you're seeing in the GUI, as a matter of fact I need to measure the time interval from one frame to the other and provide the GUIFrame with it at rendering time.

### #52OpenGL_Guru  Members

104
Like
0Likes
Like

Posted 16 June 2005 - 08:52 AM

ahhh i see... ok then...hmm.. well i will have to look into that then...

i guess you couldnt simply use an alpha for the transparency of the texture and just do a increment or decrement to make it opaque or transparent.. cos some computer will render slower or faster...

just out of curiousity did you try doing a GUI like this in just plain 'ol openGL? like just drawing the quads and buttons all in straight openGL. of course you would have to keep up with everything located in ortho mode i would assume.. i dunno.

### #53rick_appleton  Members

857
Like
0Likes
Like

Posted 16 June 2005 - 08:54 AM

Thanks for the quick tutorial. If I hadn't rated you up all the way already I'd do so now.

Unfortunately for me, the design of how to take action just doesn't appeal to me. I guess I'll just have to finish work on DaedalusGUI :D

Since you asked for other options, here's how I do it. The root widget is actually a kind of manager for the entire GUI (since I can have multiple OS windows, each window has it's own manager/root widget. You can register callbacks with the root like so:
guiRootNew.AddCommand(widgetPointer, GUI::MOUSE1_UP,	boost::bind(&GUI::IBase::ProcessMessage, base, GUI::HIDE, mMouse) );guiRootNew.AddCommand("testbutton2", GUI::MOUSE1_UP, boost::bind(&GUI::IBase::ProcessMessage, base, GUI::SHOW, mMouse) );guiRootNew.AddCommand("quitbutton", GUI::MOUSE1_UP, boost::bind(&Daedalus::Quit) );

So a combination of the widget you want to attach the callback to (although under the hood, it's stored with the root instead), the message that you want to react to, and a function object that will be called.

At the moment all widgets react to all messages, but I'm going to change that so images for instance don't react to button presses.

To me this design seems cleaner to use than the if/else statements you have. My design is comparable to a kind of signal/slot system as is also available in boost.

### #54JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 08:55 AM

Quote:
 Original post by OpenGL_Guruahhh i see... ok then...hmm.. well i will have to look into that then...i guess you couldnt simply use an alpha for the transparency of the texture and just do a increment or decrement to make it opaque or transparent.. cos some computer will render slower or faster... just out of curiousity did you try doing a GUI like this in just plain 'ol openGL? like just drawing the quads and buttons all in straight openGL. of course you would have to keep up with everything located in ortho mode i would assume.. i dunno.

That is how I do it, pure OpenGL that is [wink]

### #55JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 09:02 AM

Quote:
 Original post by rick_appletonThanks for the quick tutorial. If I hadn't rated you up all the way already I'd do so now.Unfortunately for me, the design of how to take action just doesn't appeal to me. I guess I'll just have to finish work on DaedalusGUI :DSince you asked for other options, here's how I do it. The root widget is actually a kind of manager for the entire GUI (since I can have multiple OS windows, each window has it's own manager/root widget. You can register callbacks with the root like so:guiRootNew.AddCommand(widgetPointer, GUI::MOUSE1_UP, boost::bind(&GUI::IBase::ProcessMessage, base, GUI::HIDE, mMouse) );guiRootNew.AddCommand("testbutton2", GUI::MOUSE1_UP, boost::bind(&GUI::IBase::ProcessMessage, base, GUI::SHOW, mMouse) );guiRootNew.AddCommand("quitbutton", GUI::MOUSE1_UP, boost::bind(&Daedalus::Quit) );So a combination of the widget you want to attach the callback to (although under the hood, it's stored with the root instead), the message that you want to react to, and a function object that will be called.At the moment all widgets react to all messages, but I'm going to change that so images for instance don't react to button presses.To me this design seems cleaner to use than the if/else statements you have. My design is comparable to a kind of signal/slot system as is also available in boost.

Yeah I like that design of yours, post binaries and screenshots when you're done mate :)
I had to resort to callback strings in my GUI because in some of my unreleased projects I deal with a lot and lot of widgets, and frankly I'd rather load them all up from a separate file than hardcoding them.
Just a different approach brother [wink]

### #56OpenGL_Guru  Members

104
Like
0Likes
Like

Posted 16 June 2005 - 09:02 AM

yah..i know you did it in openGL silly..as far as drawing the quads etc etc
but i mean without using xml to help you locate and define all the buttons, widgets etc etc. :)

btw -- i guess there is no mouseover/mousehover function for GLUT, unless its hidden under mousespecialfunc(); ?????

oh yeah about your timer..did you try using the glut TImer? that way it can be cross platform :)

heres the link to GLUT callback functions

Glut Callback Functions

### #57JavaCoolDude  Members

670
Like
0Likes
Like

Posted 16 June 2005 - 08:33 PM

OpenGL_guru, I'm gonna have to look into that but unfortunately won't be able to do so until sometimes next week when I'm all settled down in Silicon Valley.
My next priority is fixing the text box and adding DropDown menus, List boxes and text areas.
Stay tuned.
PS: Any luck in porting the GLUT code to Linux anyone? Come on it shouldn't be tough [pig]
Alright off to catch my airplane [smile]

### #58evolutional  Moderators

1373
Like
0Likes
Like

Posted 16 June 2005 - 09:12 PM

Quote:
 Original post by rick_appletonUnfortunately for me, the design of how to take action just doesn't appeal to me. I guess I'll just have to finish work on DaedalusGUI :DTo me this design seems cleaner to use than the if/else statements you have. My design is comparable to a kind of signal/slot system as is also available in boost.

I also used to handle callbacks in this manner and I think this approach works very well if you want to hardcode a lot of the logic to a specific type of object (eg: you know that a Button will react to OnClick but a Label won't). With a little work, you could easily build a central message dispatcher that will delegate the messages out to the respective named widgets. If you send the message straight to the widget and let it be handled internally this should work quite well. Of course, it means that every widget will receive every message, which could result in a speed hit.

### #59todderod  Members

152
Like
0Likes
Like

Posted 18 June 2005 - 11:21 AM

After alot of brutal messing around got it running on Linux.
Not untill it was to late I realised how to use GNU Autotools to in a good way™ to use the source structure JavaCoolDude used so I will need to redo it once I get some more free time (I flattened it and placed all .cpp and .h files in a src directory). And hmm, fix the mouse events cause at the moment they are not being sent to widgets properly so can't use any of the widgets really, bargh, but that should not be to hard to fix, just wanted to show of a screenshot running 2 instances of the GLUT test app on Linux before I went to bed.

Edit: My gosh I spell bad.

### #60HellRiZZer  Members

308
Like
0Likes
Like

Posted 19 June 2005 - 10:04 AM

Have you got any tools for your source? Is it documented? Do you have some kind of an editor for your GUI?
Just curious, because how would you go about locating/positioning your GUI widgets around the screen? Do you use keyboard to move them or a mouse??

A cool looking GUI, can you do any animations with it, like for buttons??

Good work mate.

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.