Archived

This topic is now archived and is closed to further replies.

hogosha

OpenGL GUI in OpenGL

Recommended Posts

This isn''t the best way, but its the way I do it...

1. Make a list of widgets your going to use, and the functions you''ll need to use them
2. Make a base GUI class, call it CGUI
3. GUI contains all the functions common to all you widgets(gain focus, lose focus, keypress, etc), and virtual functions to the ones that arn''t.
4. Create a class for all your widgets, inherite CGUI to each one, that way you already have obtained all your functinos.


5. Now, make a array of CGUI*, and initalize all your gui

array[0] = new CGUIBUTTON(location);
array[1] = new CGUITEXTBOX(location);

Then, whatever you have a need for a new press, do this

OnKeyPress()
{
for i = 0 to array_size
array->key_press();
}

etc, etc, so on and so forth.

Share this post


Link to post
Share on other sites
depending on how flexible you want to be you can use function or method pointers. so you write your onclick function for a certain button and just "link" it via the function pointer.

my current version:
http://festini.device-zero.de/downloads/ui.zip

only the source and it requires glut for now.. if you just want to have a look you can download the binary (i left out most textures in the src version)
http://festini.device-zero.de/downloads/srcc.zip

you still have to write your own class derived from dialogue and a a way to parse external files to build them at runtime wouldnt be a bad modification, but i wouldnt know how to add event functions without writing an interpreter for them.

Share this post


Link to post
Share on other sites
@ dede:

A better way to do this is to:
1) Register all windows to somekind of 'GUIBase' object
2) Link GUI elements (like buttons) to a window, so they get rendered relatively to the window coordinates
3) When registering a window, also register a function that is called each render loop, that does actions on the controls:



GUIBase guibase;
GUIWindow window(&guibase, callbackFunction, x, y);
GUIButton button1(&window, x, y, width, height);
GUIText textfield1(&window, &string, x, y, width, height);


callbackFunction()
{
// render button and return 'true' if button was clicked

if (button1.DoActions())
DoStuff();
// render and set &string if text was changed

textfield1.DoActions();
}


[edit] This, together with GUI elements like checkboxes, textfields, labels and other took about 3 days to code. The window manager took 1/3 of that time. I didn't mention it because it's kinda complex, but If you need more info:
The window manager sits between the window and the gui base. It makes sure that all windows are rendered in a good order and checks if the user clicks a window and if that window needs to be brought to the front of the screen. I first worked with a linked list, but working with priority ID's (1 per window) is a better thing to do imho.

[edited by - Vich on July 3, 2003 4:57:22 PM]

Share this post


Link to post
Share on other sites
if you need some impressions
here is the start of my Gui

i have created a basic CGui object which i am going to use as base object for all controls and so on

and a CGuiManager
the manager stores all the menus

and the controls are added to a child list of each individual menu

you can even add a button to a button LOL


here s some sample code( not much done though)


#include "standardheader.h"

CGui::CGui(int x, int y, int width, int height)
{
m_pChildren=NULL;
m_pNext=NULL;
m_pParent=NULL;
}

CGui::CGui(int x, int y, int width, int height, CGui *pParent)
{
CGui(x,y,width,height);
SetParent(pParent);
}

//Set
void CGui::SetParent(CGui *pParent)
{
if(!pParent)
return;

m_pParent=pParent;
pParent->AddChild(this);
}

void CGui::SetVisible(BOOL bVisible)
{
m_bVisible=bVisible;
}

void CGui::SetBorder(int size)
{
m_iBorderSize=size;
}

void CGui::SetFgColorfv(float *color)
{
if(!color)
return;
m_flFgColor[0]=color[0];
m_flFgColor[1]=color[1];
m_flFgColor[2]=color[2];
m_flFgColor[3]=color[3];
}

void CGui::SetFgColorf(float r,float g, float b, float a)
{
m_flFgColor[0]=r;
m_flFgColor[1]=g;
m_flFgColor[2]=b;
m_flFgColor[3]=a;
}

void CGui::SetFgColoriv(int *color)
{
if(!color)
return;
m_flFgColor[0]=color[0]/255;
m_flFgColor[1]=color[1]/255;
m_flFgColor[2]=color[2]/255;
m_flFgColor[3]=color[3]/255;
}

void CGui::SetFgColori(int r, int g, int b, int a)
{
m_flFgColor[0]=r/255;
m_flFgColor[1]=g/255;
m_flFgColor[2]=b/255;
m_flFgColor[3]=a/255;
}

void CGui::SetBgColorfv(float *color)
{
if(!color)
return;
m_flBgColor[0]=color[0];
m_flBgColor[1]=color[1];
m_flBgColor[2]=color[2];
m_flBgColor[3]=color[3];
}

void CGui::SetBgColorf(float r,float g, float b, float a)
{
m_flBgColor[0]=r;
m_flBgColor[1]=g;
m_flBgColor[2]=b;
m_flBgColor[3]=a;
}

void CGui::SetBgColoriv(int *color)
{
if(!color)
return;
m_flBgColor[0]=color[0]/255;
m_flBgColor[1]=color[1]/255;
m_flBgColor[2]=color[2]/255;
m_flBgColor[3]=color[3]/255;
}

void CGui::SetBgColori(int r, int g, int b, int a)
{
m_flBgColor[0]=r/255;
m_flBgColor[1]=g/255;
m_flBgColor[2]=b/255;
m_flBgColor[3]=a/255;
}

void CGui::SetPos(int x, int y)
{
m_iX=x;
m_iY=y;
}

void CGui::SetSize(int width, int height)
{
m_iWidth=width;
m_iHeight=height;
}

//Add
void CGui::AddChild(CGui *pChild)
{
if(!pChild)
return;
CGui *p=NULL;;
if(m_pChildren==NULL)
{
m_pChildren=pChild;
}
else
{
p=m_pChildren;
while(p)
{
if(p->m_pNext==NULL)
{
p->m_pNext=pChild;
return;
}
p=p->m_pNext;
}
}
}

//Get/Is
BOOL CGui::IsVisible()
{
return m_bVisible;
}

//on

void CGui::onPaint()
{
}

void CGui::onPaintBackground()
{
}






















Share this post


Link to post
Share on other sites
hm.. if youre using a simple linked list (why not stl list or a minimal own list storing at least a first and last pointer?)... does the order matter? because if not it would seem a lot easier to do:

pChild->m_pNext=m_pChildren;
m_pChildren=pChild;

instead of:

if(m_pChildren==NULL) m_pChildren=pChild;
else {
p=m_pChildren;
while(p){
if(p->m_pNext==NULL) {
p->m_pNext=pChild;
return;
}
p=p->m_pNext;
}
}

or in other words: add them to the front, not the back.

Share this post


Link to post
Share on other sites
performance is not an issue in my implementation since these functions are only called at start up time
when i initialize all the menues

that s only because i usually only work with lists where order matters

of course you could change itbut you probably get crazy when you have positioned an object incorrect

i am planning to implement a function that automatically aligns the controls so they don t intersect and that s easiest to do when you have got a sorted list

Share this post


Link to post
Share on other sites
Hi!

Since you''re using OGL, why wouldn''t use use one of the existing libraries? I''d suggest ParaGUI as the best one(search on google), I''d use it myself if it didn''t use OGL and SDL The other option would be glgui(I think it''s glgui.sourceforge.net), so give it a try.



--------
Leave all your expectations behind, or
they''ll pull you down on your way to the top.

-Ivan

Share this post


Link to post
Share on other sites
I define GUIs using XML and then push and pop them to and from the screen when required. For example I define an About GUI:


<gui name="About">

<component name="AboutCanvas" type="hbGuiCanvas">

<size>1.0, 1.0</size>
<position>0.0, 0.0</position>
<hpos>left</hpos>
<vpos>top</vpos>
<hsize>relative</hsize>
<vsize>relative</vsize>

<component name="AboutFrame" type="hbGuiBitmapFrame">
<position>0.2, 0.2</position>
<hpos>centre</hpos>
<vpos>centre</vpos>
<size>0.7, 360</size>
<hsize>relative</hsize>
<vsize>absolute</vsize>
<colour>128, 128, 128, 255</colour>
<bitmap>./data/gui/frame.png</bitmap>
<border>20, 20, 20, 20</border>

<component name="AboutButton" type="hbGuiBitmapButton">
<normal>./data/gui/TestExitNormal.tga</normal>
<focus>./data/gui/TestExitFocused.tga</focus>
<active>./data/gui/TestExitActive.tga</active>
<position>0.5, 0.05</position>
<hpos>centre</hpos>
<vpos>bottom</vpos>
<hsize>absolute</hsize>
<vsize>absolute</vsize>
<size>50.0, 33.0</size>
<audioOver>ButtonOver</audioOver>
<audioClick>Buttwhenclickedon</audioClick>
<command>ExitAbout</command>
</component>

<component name="TextArea1" type="hbGuiTextArea">
<font>DebugText</font>
<position>0.0, 0.0</position>
<hpos>centre</hpos>
<vpos>top</vpos>
<hsize>relative</hsize>
<vsize>relative</vsize>
<size>1.0, 0.8</size>
<text>./data/gui/about.txt</text>
<colour>225, 225, 225, 255</colour>
</component>

</component>

</component>

</gui>


I then push it to the screen with a Lua script call like this:


Gui:Push("About")


Gui components are coded in C++ and call Lua script functions when events occur, such as a button being pressed.

Edit: Fixed the source tags (I was using code instead of source - must remember that!).

[edited by - stodge on July 4, 2003 12:25:26 PM]

Share this post


Link to post
Share on other sites
That's a very neat system there, stodge. I was wondering which XML parser (if any) you use to interpret the scripts?

An XML GUI would be very useful tool...



Coding Stuff ->  [ iNsAn1tY Games | DarkVertex | How To Do CSG | Direct3D Vs. OpenGL | Google ]
Fun Stuff    ->  [ Evil T-Shirts | Stick-Based Comedy | You're Already Here | The Best Film Reviews ]


[edited by - iNsAn1tY on July 4, 2003 3:11:56 PM]

Share this post


Link to post
Share on other sites
I also wanted to use something like XML. Do you mind I''ll try it with what you got?

BTW, I''m currently working on that GUI, so see many useful changes in it soon, ala siseable borders for any element, self-controlled elements etc.

Thanks.

" Do we need us? "


Ionware Productions - Games and Game Tools Development

Share this post


Link to post
Share on other sites
quote:
Original post by HellRiZZer
I also wanted to use something like XML. Do you mind I''ll try it with what you got?

BTW, I''m currently working on that GUI, so see many useful changes in it soon, ala siseable borders for any element, self-controlled elements etc.

Thanks.

" Do we need us? "


Ionware Productions - Games and Game Tools Development




Go ahead.

I''m considering open sourcing the engine or starting from scratch with an open source engine to use Python instead of Lua. But I''m not sure yet.

Anyway, this method is the cleanest I could think of for implementing different GUIs, unless anyone has some better ideas.

Share this post


Link to post
Share on other sites
my gui will feature concave polygon controls/menus with correct concave polygon mouse hit detection + background images and border images
i hate these blocky menus everythings square

Share this post


Link to post
Share on other sites

  • Announcements

  • Forum Statistics

    • Total Topics
      628400
    • Total Posts
      2982449
  • Similar Content

    • By test opty
      Hi all,
       
      I'm starting OpenGL using a tut on the Web. But at this point I would like to know the primitives needed for creating a window using OpenGL. So on Windows and using MS VS 2017, what is the simplest code required to render a window with the title of "First Rectangle", please?
       
       
    • By DejayHextrix
      Hi, New here. 
      I need some help. My fiance and I like to play this mobile game online that goes by real time. Her and I are always working but when we have free time we like to play this game. We don't always got time throughout the day to Queue Buildings, troops, Upgrades....etc.... 
      I was told to look into DLL Injection and OpenGL/DirectX Hooking. Is this true? Is this what I need to learn? 
      How do I read the Android files, or modify the files, or get the in-game tags/variables for the game I want? 
      Any assistance on this would be most appreciated. I been everywhere and seems no one knows or is to lazy to help me out. It would be nice to have assistance for once. I don't know what I need to learn. 
      So links of topics I need to learn within the comment section would be SOOOOO.....Helpful. Anything to just get me started. 
      Thanks, 
      Dejay Hextrix 
    • By mellinoe
      Hi all,
      First time poster here, although I've been reading posts here for quite a while. This place has been invaluable for learning graphics programming -- thanks for a great resource!
      Right now, I'm working on a graphics abstraction layer for .NET which supports D3D11, Vulkan, and OpenGL at the moment. I have implemented most of my planned features already, and things are working well. Some remaining features that I am planning are Compute Shaders, and some flavor of read-write shader resources. At the moment, my shaders can just get simple read-only access to a uniform (or constant) buffer, a texture, or a sampler. Unfortunately, I'm having a tough time grasping the distinctions between all of the different kinds of read-write resources that are available. In D3D alone, there seem to be 5 or 6 different kinds of resources with similar but different characteristics. On top of that, I get the impression that some of them are more or less "obsoleted" by the newer kinds, and don't have much of a place in modern code. There seem to be a few pivots:
      The data source/destination (buffer or texture) Read-write or read-only Structured or unstructured (?) Ordered vs unordered (?) These are just my observations based on a lot of MSDN and OpenGL doc reading. For my library, I'm not interested in exposing every possibility to the user -- just trying to find a good "middle-ground" that can be represented cleanly across API's which is good enough for common scenarios.
      Can anyone give a sort of "overview" of the different options, and perhaps compare/contrast the concepts between Direct3D, OpenGL, and Vulkan? I'd also be very interested in hearing how other folks have abstracted these concepts in their libraries.
    • By aejt
      I recently started getting into graphics programming (2nd try, first try was many years ago) and I'm working on a 3d rendering engine which I hope to be able to make a 3D game with sooner or later. I have plenty of C++ experience, but not a lot when it comes to graphics, and while it's definitely going much better this time, I'm having trouble figuring out how assets are usually handled by engines.
      I'm not having trouble with handling the GPU resources, but more so with how the resources should be defined and used in the system (materials, models, etc).
      This is my plan now, I've implemented most of it except for the XML parts and factories and those are the ones I'm not sure of at all:
      I have these classes:
      For GPU resources:
      Geometry: holds and manages everything needed to render a geometry: VAO, VBO, EBO. Texture: holds and manages a texture which is loaded into the GPU. Shader: holds and manages a shader which is loaded into the GPU. For assets relying on GPU resources:
      Material: holds a shader resource, multiple texture resources, as well as uniform settings. Mesh: holds a geometry and a material. Model: holds multiple meshes, possibly in a tree structure to more easily support skinning later on? For handling GPU resources:
      ResourceCache<T>: T can be any resource loaded into the GPU. It owns these resources and only hands out handles to them on request (currently string identifiers are used when requesting handles, but all resources are stored in a vector and each handle only contains resource's index in that vector) Resource<T>: The handles given out from ResourceCache. The handles are reference counted and to get the underlying resource you simply deference like with pointers (*handle).  
      And my plan is to define everything into these XML documents to abstract away files:
      Resources.xml for ref-counted GPU resources (geometry, shaders, textures) Resources are assigned names/ids and resource files, and possibly some attributes (what vertex attributes does this geometry have? what vertex attributes does this shader expect? what uniforms does this shader use? and so on) Are reference counted using ResourceCache<T> Assets.xml for assets using the GPU resources (materials, meshes, models) Assets are not reference counted, but they hold handles to ref-counted resources. References the resources defined in Resources.xml by names/ids. The XMLs are loaded into some structure in memory which is then used for loading the resources/assets using factory classes:
      Factory classes for resources:
      For example, a texture factory could contain the texture definitions from the XML containing data about textures in the game, as well as a cache containing all loaded textures. This means it has mappings from each name/id to a file and when asked to load a texture with a name/id, it can look up its path and use a "BinaryLoader" to either load the file and create the resource directly, or asynchronously load the file's data into a queue which then can be read from later to create the resources synchronously in the GL context. These factories only return handles.
      Factory classes for assets:
      Much like for resources, these classes contain the definitions for the assets they can load. For example, with the definition the MaterialFactory will know which shader, textures and possibly uniform a certain material has, and with the help of TextureFactory and ShaderFactory, it can retrieve handles to the resources it needs (Shader + Textures), setup itself from XML data (uniform values), and return a created instance of requested material. These factories return actual instances, not handles (but the instances contain handles).
       
       
      Is this a good or commonly used approach? Is this going to bite me in the ass later on? Are there other more preferable approaches? Is this outside of the scope of a 3d renderer and should be on the engine side? I'd love to receive and kind of advice or suggestions!
      Thanks!
    • By nedondev
      I 'm learning how to create game by using opengl with c/c++ coding, so here is my fist game. In video description also have game contain in Dropbox. May be I will make it better in future.
      Thanks.
  • Popular Now