OpenGL GUI anyone? Updated on 11/17/05
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?
Author
Yup, in the GLUT example if look for this section of the code in the Main.cpp file:
If the user performs any of the following actions on a given widget
the actionPerformed function in the EventHandler will be called. Let's concentrate on this particular chunk:
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]
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]
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.
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.
Author
Not necessarily, one can always retrieve the name of the parent panel and direct the event to another function, check this out:
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]
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]
Author
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
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:
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:
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
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:
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
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:
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
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:
In the renderScene() function, let's add this line right after counter.markFrameStart();
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 CORNERRDdrawBounds 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();
glClearColor(red, green, blue, 0.0f);
Now in "void EventsHandler::actionPerformed(GUIEvent evt)" right after
if(callbackString == "s2") slider->setLabelString(String("Slider 2: ") + int(slider->getProgress()*10));
add these lines
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]
Author
The final result of the quick tutorial, btw I updated the main post with the recent binaries.
++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? :)
Author
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]
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 :)
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
