Followers 0

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

## 207 posts in this topic

~ 800fps windowed.
~200 fullscreen

AMD 3000+
ATI Radeon 256mb 9600xt
1gb of RAM

Just an idea...

Maybe the ability to select the text in the text box.

The ability to put radio buttons into different groups so that each group of radio buttons could only have one selected at a time.

Maybe like a grid box or a grid of editable fields(forget what its called..lol).

Able to have different colored characters in a string for a label or button, ie a smiple text markup language ^1 would represent red or ^3 green, etc...

Maybe a Messagebox system (modal non-modal).

How about a custom cusor?

Hope that helps and I'll try and come up with more later.
0

##### Share on other sites
Thanks for your feedback guys, I appreciate it a lot.
Ok so I went ahead and implemented few more things like Vertical sliders, and tiled textured buttons.
Also I simplified the setup file by breaking it into several smaller files, look into the Data/GUI folder for more details [smile]
Check the main post for the updated binaries and pictures, ok back to implementing the rest of the suggested features.
Peace
PS: Kusma, I set the radio buttons to fade and come back three times as fast as anything else in the current frame, you can change the timing by modifying the alphaFadeScale in the XML files.

[Edited by - JavaCoolDude on June 15, 2005 7:56:36 PM]
0

##### Share on other sites
Looks like a great GUI, can't wait to see it in some games. The one improvment that I found immediately is the fact that arrows keys don't work in the text boxes, and I use the arrow keys all the time. Just an idea.

Other than that, and the improvements already stated, looks really nice, can't wait to see the code :)

~Zix~

EDIT: And it runs at ~1000 FPS on my system, 2.6 ghz, Gefroce 6600
0

##### Share on other sites
Really good job! :D

430 FPS with default windowed size
210 FPS with 1280*1024 windowed size

CPU: Intel P4 3GHz (Prescott 478)
RAM: 1GB PC3200
Card: ATI Radeon 9600 256MB DDR (Sapphire)
0

##### Share on other sites
hmm as this is an on going thread which might be of intrest to some people i'm gonna sticky it for a while, as a decent GUI is something alot of people have been asking for [smile]
0

##### Share on other sites
W00t, thanks Phantom my man :D
Now I am trying to remove the GUI dependance from my own engine, I would like one of you fellas to provide me with a simple GLUT application with a mouse and keyboard listener as well as a main loop [smile]

[Edited by - JavaCoolDude on June 15, 2005 9:21:41 PM]
0

##### Share on other sites
Very nice, hope to make one this good myself.

~270 FPS
CPU: 2.8GHz Celeron
GPU: 128MB ATI Radeon 9250 Xtasy Series
RAM: 1GB PC3200

0

##### Share on other sites
Quote:
 Original post by JavaCoolDudeNow I would like one of you fellas to provide me with a simple GLUT application with a mouse and keyboard listener and a main loop; I'm trying to remove the GUI dependance from my own engine :)

#include "glut.h"void changeSize( int w, int h ){	// Prevent a divide by zero, when window is too short	// (you cant make a window of zero width).	if(h == 0)		h = 1;	float ratio = 1.0f * w / h;	// Reset the coordinate system before modifying	glMatrixMode(GL_PROJECTION);	glLoadIdentity();	// Set the viewport to be the entire window	glViewport(0, 0, w, h);	// Set the clipping volume	gluPerspective( 45, ratio, 1, 1000 );	glMatrixMode( GL_MODELVIEW );	glLoadIdentity();}void initScene() {	glEnable(GL_DEPTH_TEST);}void renderScene(void) {	glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	glutSwapBuffers();}void processNormalKeys(unsigned char key, int x, int y) {	if (key == 27) 		exit(0);}void inputKey(int key, int x, int y) {	switch (key) 	{		case GLUT_KEY_LEFT : 			break;		case GLUT_KEY_RIGHT : 			break;		case GLUT_KEY_UP : 			break;		case GLUT_KEY_DOWN : 			break;	}}void processMouse(int button, int state, int x, int y) {	int specialKey = glutGetModifiers();	// if both a mouse button, and the ALT key, are pressed  then	if ((state == GLUT_DOWN) && (specialKey == GLUT_ACTIVE_ALT)) 	{		// set the color to pure red for the left button		// if (button == GLUT_LEFT_BUTTON) 		// set the color to pure green for the middle button		//else if (button == GLUT_MIDDLE_BUTTON) 				// set the color to pure blue for the right button		// else	}}void processMouseActiveMotion(int x, int y) {	//if (specialKey == GLUT_ACTIVE_SHIFT) 	//else if (specialKey == GLUT_ACTIVE_CTRL)	//else if (specialKey == GLUT_ACTIVE_ALT)	//else}void processMousePassiveMotion(int x, int y) {	//if (specialKey == GLUT_ACTIVE_SHIFT) 	//else if (specialKey == GLUT_ACTIVE_CTRL)	//else if (specialKey == GLUT_ACTIVE_ALT)	//else}void processMouseEntry(int state) {	//if ( state == GLUT_LEFT )	//if( state == GLUT_ENTERED )}int main(int argc, char **argv){	glutInit(&argc, argv);	glutInitDisplayMode(GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA);	glutInitWindowPosition(100,100);	glutInitWindowSize(640,360);	glutCreateWindow("GLUT");	initScene();		// Keyboard	glutKeyboardFunc(processNormalKeys);	glutSpecialFunc(inputKey);	// Display and Idle	glutDisplayFunc(renderScene);	glutIdleFunc(renderScene);	glutReshapeFunc(changeSize);	// Mouse stuff	glutMouseFunc(processMouse);	glutMotionFunc(processMouseActiveMotion);	glutPassiveMotionFunc(processMousePassiveMotion);	glutEntryFunc(processMouseEntry);	glutMainLoop();	return(0);}

Ok here is something put together from a lot of the LightHouse3D Glut tutorials. If you take a look at the tutorials under the 'Input' category, it shows the mouse and keyboard stuff in more detail as to what you can use.

For more information on stuff that you can use, right click on a define'd expression and 'Go to declaration' to see more of it's kind. Good luck!
0

##### Share on other sites
WOW! it ran steady at 1000fps.

athlon 3200 (32bit)
1gb pc3200
9800pro

btw dude ive seen your work, absolutely awesome!!! u seem to be a god of graphic programming. i hope to be as good as you someday...
0

##### Share on other sites
Quote:
 Original post by Drew_BentonOk here is something put together from a lot of the LightHouse3D Glut tutorials. If you take a look at the tutorials under the 'Input' category, it shows the mouse and keyboard stuff in more detail as to what you can use.For more information on stuff that you can use, right click on a define'd expression and 'Go to declaration' to see more of it's kind. Good luck!

Thanks dude, the code you posted helped me out a lot.

Ok ladies and gentlemen, announcing SXML GUI 0.5 for WIN users, grab it right here while it's still hot.
Here's a list of what you get:
Buttons, TextBoxes, vertical and horizontal sliders, Radio Buttons, CheckBoxes, Panels, Separators, Labels.
A TextureLoader and manager, no image would be loaded twice ;)
A MediaPathManager.
A lousy XML loader [pig]
Some other cool stuff.

I haven't used Linux that much therefore I have no clue on how to go about implementing a robust timer in the said environment. If anyone out there can look at the code and modify Tools/FPSCounter and Tools/Benchmark to whatever Linux uses you'll be my hero...well for a day or two :D
0

##### Share on other sites
Oh wow, that's great! I just tried it in the GLUT example and I must say, quite impressive! When I get my dev computer up and running in a week or so, I will definitly start messing with this library [wink] Thanks for all the hard work!
0

##### Share on other sites
yeah nice work mate, the demo run's just fine ...haven't had a chance yet to play around with it but will do in the next few days

0

##### Share on other sites
okay, i think you kinda misunderstood me ;)
the fade i was talking about wasn't the hover-fade, but rather the selection-change-fade. another note is that in the 0.5-release, moving the cursor in textboxes with the arrow-keys seems to be broken. as a user, i would also like to be able to select a chunk of text with both shift+arrow-keys and the mouse-cursor if possible. other than that, this seems like a really nice gui-library, by the way :)
0

##### Share on other sites
Going to give this a try, I'll need some form of GUI for my 4E4 entry ;)
0

##### Share on other sites
how would you make this GUI in pure openGL/glut style mode..kinda like what JavaDude was asking about? i mean yeah you have your textures and your font etc etc but i guess how do you make them react to each other.. i guess by checking mouse over or something, i concur that someone would get some major props for writing a tut on this :)
0

##### Share on other sites
Hellrizzer wrote some tutorials for his own OpenGL GUI which you might find useful
0

##### Share on other sites
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?
0

##### Share on other sites
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]
0

##### Share on other sites
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.
0

##### Share on other sites
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]
0

##### Share on other sites
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]
glClearColor(red, green, blue, 0.0f);
[code]

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]
0

##### Share on other sites

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

##### Share on other sites
++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? :)
0

##### Share on other sites
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]
0

##### Share on other sites
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 :)
0

## Create an account or sign in to comment

You need to be a member in order to leave a comment

## Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Followers 0

• ### Similar Content

• So it's been a while since I took a break from my whole creating a planet in DX11. Last time around I got stuck on fixing a nice LOD.
A week back or so I got help to find this:
https://github.com/sp4cerat/Planet-LOD
In general this is what I'm trying to recreate in DX11, he that made that planet LOD uses OpenGL but that is a minor issue and something I can solve. But I have a question regarding the code
He gets the position using this row
vec4d pos = b.var.vec4d["position"]; Which is then used further down when he sends the variable "center" into the drawing function:
if (pos.len() < 1) pos.norm(); world::draw(vec3d(pos.x, pos.y, pos.z));
Inside the draw function this happens:
draw_recursive(p3[0], p3[1], p3[2], center); Basically the 3 vertices of the triangle and the center of details that he sent as a parameter earlier: vec3d(pos.x, pos.y, pos.z)
Now onto my real question, he does vec3d edge_center[3] = { (p1 + p2) / 2, (p2 + p3) / 2, (p3 + p1) / 2 }; to get the edge center of each edge, nothing weird there.
But this is used later on with:
vec3d d = center + edge_center[i]; edge_test[i] = d.len() > ratio_size; edge_test is then used to evaluate if there should be a triangle drawn or if it should be split up into 3 new triangles instead. Why is it working for him? shouldn't it be like center - edge_center or something like that? Why adding them togheter? I asume here that the center is the center of details for the LOD. the position of the camera if stood on the ground of the planet and not up int he air like it is now.

Full code can be seen here:
https://github.com/sp4cerat/Planet-LOD/blob/master/src.simple/Main.cpp
If anyone would like to take a look and try to help me understand this code I would love this person. I'm running out of ideas on how to solve this in my own head, most likely twisted it one time to many up in my head
Toastmastern

• I googled around but are unable to find source code or details of implementation.
What keywords should I search for this topic?
Things I would like to know:
A. How to ensure that partially covered pixels are rasterized?
Apparently by expanding each triangle by 1 pixel or so, rasterization problem is almost solved.
But it will result in an unindexable triangle list without tons of overlaps. Will it incur a large performance penalty?
B. A-buffer like bitmask needs a read-modiry-write operation.
How to ensure proper synchronizations in GLSL?
GLSL seems to only allow int32 atomics on image.
C. Is there some simple ways to estimate coverage on-the-fly?
In case I am to draw 2D shapes onto an exisitng target:
1. A multi-pass whatever-buffer seems overkill.
2. Multisampling could cost a lot memory though all I need is better coverage.
Besides, I have to blit twice, if draw target is not multisampled.

• By mapra99
Hello

I am working on a recent project and I have been learning how to code in C# using OpenGL libraries for some graphics. I have achieved some quite interesting things using TAO Framework writing in Console Applications, creating a GLUT Window. But my problem now is that I need to incorporate the Graphics in a Windows Form so I can relate the objects that I render with some .NET Controls.

To deal with this problem, I have seen in some forums that it's better to use OpenTK instead of TAO Framework, so I can use the glControl that OpenTK libraries offer. However, I haven't found complete articles, tutorials or source codes that help using the glControl or that may insert me into de OpenTK functions. Would somebody please share in this forum some links or files where I can find good documentation about this topic? Or may I use another library different of OpenTK?

Thanks!

• Hello, I have been working on SH Irradiance map rendering, and I have been using a GLSL pixel shader to render SH irradiance to 2D irradiance maps for my static objects. I already have it working with 9 3D textures so far for the first 9 SH functions.
In my GLSL shader, I have to send in 9 SH Coefficient 3D Texures that use RGBA8 as a pixel format. RGB being used for the coefficients for red, green, and blue, and the A for checking if the voxel is in use (for the 3D texture solidification shader to prevent bleeding).
My problem is, I want to knock this number of textures down to something like 4 or 5. Getting even lower would be a godsend. This is because I eventually plan on adding more SH Coefficient 3D Textures for other parts of the game map (such as inside rooms, as opposed to the outside), to circumvent irradiance probe bleeding between rooms separated by walls. I don't want to reach the 32 texture limit too soon. Also, I figure that it would be a LOT faster.
Is there a way I could, say, store 2 sets of SH Coefficients for 2 SH functions inside a texture with RGBA16 pixels? If so, how would I extract them from inside GLSL? Let me know if you have any suggestions ^^.
• By KarimIO
EDIT: I thought this was restricted to Attribute-Created GL contexts, but it isn't, so I rewrote the post.
Hey guys, whenever I call SwapBuffers(hDC), I get a crash, and I get a "Too many posts were made to a semaphore." from Windows as I call SwapBuffers. What could be the cause of this?
Update: No crash occurs if I don't draw, just clear and swap.
static PIXELFORMATDESCRIPTOR pfd = // pfd Tells Windows How We Want Things To Be { sizeof(PIXELFORMATDESCRIPTOR), // Size Of This Pixel Format Descriptor 1, // Version Number PFD_DRAW_TO_WINDOW | // Format Must Support Window PFD_SUPPORT_OPENGL | // Format Must Support OpenGL PFD_DOUBLEBUFFER, // Must Support Double Buffering PFD_TYPE_RGBA, // Request An RGBA Format 32, // Select Our Color Depth 0, 0, 0, 0, 0, 0, // Color Bits Ignored 0, // No Alpha Buffer 0, // Shift Bit Ignored 0, // No Accumulation Buffer 0, 0, 0, 0, // Accumulation Bits Ignored 24, // 24Bit Z-Buffer (Depth Buffer) 0, // No Stencil Buffer 0, // No Auxiliary Buffer PFD_MAIN_PLANE, // Main Drawing Layer 0, // Reserved 0, 0, 0 // Layer Masks Ignored }; if (!(hDC = GetDC(windowHandle))) return false; unsigned int PixelFormat; if (!(PixelFormat = ChoosePixelFormat(hDC, &pfd))) return false; if (!SetPixelFormat(hDC, PixelFormat, &pfd)) return false; hRC = wglCreateContext(hDC); if (!hRC) { std::cout << "wglCreateContext Failed!\n"; return false; } if (wglMakeCurrent(hDC, hRC) == NULL) { std::cout << "Make Context Current Second Failed!\n"; return false; } ... // OGL Buffer Initialization glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT); glBindVertexArray(vao); glUseProgram(myprogram); glDrawElements(GL_TRIANGLES, indexCount, GL_UNSIGNED_SHORT, (void *)indexStart); SwapBuffers(GetDC(window_handle));

• 19
• 14
• 23
• 11
• 28