This article shows you how to create GUI controls for your OpenGL application and organize them into
GLUI subwindows. In this article, we will take the source code from the previous article GLUI Window Template, and modify it so that our
GLUI controls will be laid out inside two subwindows rather than in a single window.
This article can be used in the following ways:
- Learn how to use
- Understand the Viewport concept in OpenGL
- Use the program as a template for your OpenGL applications that require GUI controls
If you don't know what is OpenGL,
GLUI, check the GLUT Window Template article first.
Having a separate window to contain our
GLUI controls could be sometimes annoying for the user, as she or he will have to lose the focus on the OpenGL context window every time she or he wants to do an action. A nice way to avoid this is to place the
GLUI controls directly into the
GLUT OpenGL window by embedding them into a
To avoid having to write the same code every time you want to create an OpenGL graphical application with controls inside
GLUI subwindows, this program code can be used as a template to get you directly started.
GLUI subwindow template has the following properties:
- Window Title: "
GLUI Subwindow Template"
GLUI subwindows containing
- The first subwindow would contain some of the controls and will be placed on the left of the window. It will be called the vertical
GLUI subwindow as controls will be laid out vertically inside it
- The second subwindow would contain the remaining controls and will be placed on the bottom of the window. It will be called the horizontal subwindow as controls will be laid out horizontally inside it
GLUI window where our graphics will be drawn and our two
GLUI subwindows will be placed
- Handling of events for our
GLUT window and our
- Showing when and where events occur and their meaning through the command prompt
For information on how to compile and run the program, please check the Usage section in the GLUI Window Template article.
The source code is intended to be used as a template for your OpenGL applications. To use it in your new application, you can simply rename the CPP file and add it to your Visual Studio project.
Please note that
GLUI is a C++ library, and thus doesn't work with C. So if you're obtaining linkage errors while trying to build a
GLUI program, just check that all file extensions are CPP and not C.
Since we have already gone through the details of creating a
GLUI window with controls and event handling in the previous GLUI Window Template article, what we care for in this article is how to create subwindows and lay out the controls inside them.
We will be replacing the window in the previous article with two subwindows placed on the left and bottom of the main graphics window.
The image below shows how our controls were laid out into a single
GLUI window in the previous article:
The image below shows how our controls will be laid out into two separate subwindows placed on the left and the bottom of our main
GLUI subwindows are created as follows:
GLUI *glui_h_subwindow, *glui_v_subwindow;
glui_h_subwindow = GLUI_Master.create_glui_subwindow
glui_v_subwindow = GLUI_Master.create_glui_subwindow
Here is the
create_glui_subwindow function definition, as described in the GLUI manual:
GLUI *GLUI_Master_Object::create_glui_subwindow( int window, int position );
|Attribute ||Description |
|ID of existing |
GLUT graphics window
Position of new subwindow, relative to the
GLUT graphics window it is embedded in. This argument can take one of the following values:
You can place any number of subwindows at the same relative position; in this case, multiple subwindows will simply be stacked on top of one another. For example, if two subwindows are created inside the same
GLUT window, and both use
GLUI_SUBWINDOW_TOP, then the two are placed at the top of the window, although the first subwindow will be above the second.
Fortunately, adding controls to
GLUI subwindows is exactly the same as adding controls to a
GLUI window. Thus, for example, to add the Object Properties panel to the
GLUI vertical subwindow instead of adding it to the
GLUI window, we can simply change the following code fragment:
GLUI_Panel *op_panel = glui_window->add_panel ("Object Properties");
GLUI_Panel *op_panel = glui_v_subwindow->add_panel ("Object Properties");
Thus, for all the controls that we need to place into the
GLUI vertical subwindow, we can simply replace
glui_v_subwindow, and for all the controls that we want to place into the
GLUI horizontal subwindow, we need to replace
After creating our two
GLUI subwindows, we need to let each of them know where its main graphics window is:
glui_h_subwindow->set_main_gfx_window( main_window );
glui_v_subwindow->set_main_gfx_window( main_window );
When a control in a
GLUI subwindow changes value, a redisplay request will be sent to this main graphics window.
When the main window is resized, we need to change the viewport size, where our OpenGL graphics are drawn. However, this time, we can't simply set the viewport width and height to be equal to the width and height of the main window due to the
GLUI subwindows that we have added into the main window. Thus, we need to take the following into consideration:
- Viewport X Position = Width of
GLUI subwindow placed on left
- Viewport Width =
GLUI Window Width - Width of
GLUI subwindow placed on left - Width of
GLUI subwindow placed on right
- Viewport Y Position = Height of
GLUI subwindow placed on top
- Viewport Height = Height of main
GLUI window - Height of
GLUI subwindow placed on top - Height of
GLUI subwindow placed on bottom
GLUI library supports us with a method to automatically determine the x, y, width, and height of the viewport drawing area. This would be done through the following code snippet that will be placed in the reshape function:
int vx, vy, vw, vh;
GLUI_Master.get_viewport_area( &vx, &vy, &vw, &vh );
glViewport(vx, vy, vw, vh);
GLUI library also supports us with a function that can even make things easier. Thus, the above code snippet can be replaced with the following code:
Below is the specification of each of the
auto_set_viewport functions as they appear in the GLUI manual:
Determines the position and dimensions of the drawable area of the current window. This function is needed when
GLUI subwindows are used, since the subwindows will occupy some of the area of a window, which the graphics app should not overwrite. This function should be called within the
GLUT reshape callback function.
void GLUI_Master_Object::get_viewport_area(int *x, int *y, int *w, int *h );
|Attribute ||Description |
|When the function returns, these variables will hold the x, y, width, and height of the drawable area of the current window. These values should then be passed into the OpenGL viewport command, |
Automatically sets the viewport for the current window. This single function is equivalent to the following series of commands:
int x, y, w, h;
GLUI_Master.get_viewport_area( &x, &y, &w, &h );
glViewport( x, y, w, h );
The function prototype is as follows, and it does not take any parameters:
void GLUI_Master_Object::auto_set_viewport( void );
The mouse passive motion and display events will not be logged so that we can clearly see other events on the command prompt log.
The purpose of this article is to teach you how to set up a
GLUT window with multiple
GLUI subwindows with controls inside them, along with event handling. At the same time, the template can be used to save lots of copy and paste from old projects or the Internet.
In case you find this template useful or have any suggestions, please let me know.
- 25/09/2007: Original article posted