Dear Imgui

[Brian Beuken]

One of my students has been using this on their project I must say it looks rather nice now that I've seen it in action.
Its not massively hard to set up but it does need a bit of effort... Once done though, it gives a very cool input system you can use to set up values/variables in game via a very nice usable menu, scroll bar system

https://github.com/ocornut/imgui

[Brian Beuken]

To get it working you only need the base imgui files, and the imgui_imp_opengl3.h version header, to get ES2.0 you need to uncomment the IMGUI_IMP_OPENGL_ES2 value which is in imgui_imp_opengl3.h

You will need to provide key and mouse data to it, in its frame update, be sure to set your mouse pos info correctly depending on screen/window size. Since our keys and mouse are on a thread its not a problem to feed it the mouse and key data from an input handler as normal. I wouldn't give it its own input handler though, try to only use 1

Then there is 1 final problem where it has a slight issue with some GL3 flags not supported by ES2 but you can hard code them to allow it to compile.
last_blend_equation_rgb and last_blendequation_alpha, expect to be set by an interrogation of the API, but it will never return a valid value (we don't have opengl3), so just set them to GL_FUNC_ADD (or NULL???) For sure they are supposed to do something but so far I've not found out what .

If you are doing an engine or need a lot of menu/setup input its excellent, but for general gui use in game be careful, its not especially fast, and can drag your frame rate down quite a bit.
There's plenty of examples in the github to show you how to use it. Have fun!

props to my student David van Scheppingen for introducing this to me and doing the groundwork to get it working on Rpi

[Brian Beuken]

As Im now doing some work to select resolutions in game I am using Dear Imgui to do that so I'll document what you need to do

1st, create a small subfilter in your visual solution.
You will need the following files
imconfig.h
imgui.h
imgui_impli_opengl3.h
imgui_internal.h

and

imgui.cpp
imgui_draw.cpp
imgui_impl_opengl3.cpp
imgui_widgets.cpp


Those are the base files you can get from github, either include the whole of the master dir in your work dir, or just do as I did and copy the files

you need of course to undelete the #define IMGUI_IMPL_OPENGL_ES2  (or ES3 if you have it)
You should also add 
#define IMGUI_IMPL_OPENGL_LOADER_CUSTOM
in imconfig.h as indeed we will not be using glfw or sdl or anything else.

That will now allow you to build code with imgui in place, so now its time to use it

After you have done all your setups and initiaisations, of your OpenGL, you can then init img
use these 4 lines
// imgui setup
const char* glsl_version = "#version 100";
ImGui::CreateContext();
ImGui::StyleColorsDark();
ImGui_ImplOpenGL3_Init(glsl_version);

if using GLES3.0 then set version to 300 (not sure about this, you may need to have other things set up, leaving it at 100, works for both es2 and es3 labels)

you're pretty much ready to go, of course no rendering is happening yet, you've just compiled and initialised the system.

I'll detail getting it to work shortly as I need to make some small changes to the input system to allow me to transfer info.

[Brian Beuken]

and to finish off, once its all set up creating a basic window is very simple, you do this.

ImGuiIO& io = ImGui::GetIO();
io.DisplaySize = ImVec2(SCRWIDTH, SCRHEIGHT);
io.DeltaTime = DT;
// we should also pass on mouse and key info into the IO here
// now if just displaying text there's no need to send key and mouse info, but if you want interaction then is simple enough to pass the mouse down and position as well as keys pressed.


// get on with the text/windows
ImGui_ImplOpenGL3_NewFrame();
ImGui::NewFrame(); // do this at the start of any frame
// position the window
ImGui::SetNextWindowPos(ImVec2(200, 200));
ImGui::SetNextWindowSize(ImVec2(400, 200));
// make sure you begin by naming the window
ImGui::Begin("Resolution Info"); // begin starts the window up and provides the name for it, you can fill in all manner of content from this point on and when done use end to close the content
// send text or buttons or sliders or whatver
ImGui::Text("hello there");
// end
ImGui::End();
// you can of course have more than one window....repeat the above at a different point and do a new begin/end sandwich.


// now render it somewhere in your main loop, ideally after you render all your other content.
ImGui::Render();
// and finally render to the GPU
ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

[Brian Beuken]

Now one thing I have discovered is that my mouse handling systems do not work very well with ImGui, its not impossible to get them working but its a lot of effort and is quite imprecise and will require some trial and error to work out different settings in different resolutions. So I've had a look to see if I could get hold of the Linux Gui's mouse systems, more accuratly the X11 systems, and indeed thats possible
I'm sure there are equivilent ways to do this on Pi 1,2,3 and 3b but I've not looked into it yet, for now this is an X11 system and it also depends on the screen being full size. It should also allow for a variable screen res, but for now I've set SCRWIDTH and SCRHEIGHT to a fixed 1080p res.

Two things not clear here are win and x_display. Those come from the OpenGL set up code where an X11 window is set up, and I made them global to allow access here as I didn't want to pass graphic classes.

This gives much more accurate and totally effective access to the ImGui windows and menus, and is rather effective. I should also try to do a key input system that will let me press keys but for now mouse control is perfect.


Window window_returned; // we don't really care too much about this as we should only have 1 window

int root_x;
int root_y;
int win_x;
int win_y;
uint mask_return;
bool result = XQueryPointer(
x_display,
win,
&window_returned,
&window_returned,

&root_x,
&root_y,
&win_x,
&win_y,
&mask_return);

ImGuiIO& io = ImGui::GetIO();
io.DisplaySize = ImVec2(SCRWIDTH, SCRHEIGHT);
io.DeltaTime = DT;
// we should also pass on mouse and key info into the IO here

io.MousePos = ImVec2(root_x, root_y);
io.MouseDown[0] = mask_return & (1 << 8); // left
io.MouseDown[1] = mask_return & (1 << 10); // right


and now ImGui knows where your mouse is, and when buttons are pressed...have fun

[jomoengineer]

This is very impressive. It looks like something from Qt or another GUI tool.

Nice work for those working on it.

[Brian Beuken]

As noted elsewhere, I rather musinderstood what DispmanX was and indeed you do actually have an X11 window in place, so this was portable to the Pi with a bit of effort and headscratching.
I now have this 95% working on Raspberry,  the only big issue is mouse visability and when using the DispmanX system to display your EGL, it needs to use the resolution of the Framebuffer rather than the screen. But thats a fairly simple thing to sort out.
(hahaha, thats the kiss of death)
I'll be posting a framework soon to allow everyone to use this and a few other things.

edit...now got the mouse cursor displaying just fine, there was a nice function in DearImgui...though I need to stop the underlying OS mouse cursor which it tracks, being active..

[Brian Beuken]

Here's an example of DearImGui in action on a Raspi 4, set to 1024x768 res

this is my new basic framework for students, with DearImGui, Bullet, OpenAL, RakNet, Xrandr and OpenGLES2.x/3.x

Going to build in a few more things and lay out some instructions for use and make it available