How do I make a full on, Proper GUI app with ImGUI?

[Advik-B]

Many people (including me) use ImGUI for its true intended purpose, Immediate mode GUI.

However, because of the sheer low-level control and customisations you can do with it, I want to use it as a GUI library insted.
So, Mr Omar, do you recommend I go thorough with this idea (I know it will be complex but still).
If so, what Graphics backend should I use for the smallest executable size possible.

How do I make proper windows. (Not window inside a window like the default style)
How do I get started, are there any examples?
What about custom menu bars?
How do I achieve this?

I am looking for suggestions, resources and feedback from the community 😊
Thanks in advance

[Advik-B]

Just look at #6897 soo many BEAUTIFUL UIs, I wanna learn how do this.

[GamingMinds-DanielC]

If so, what Graphics backend should I use for the smallest executable size possible.

Depends on many things. You have example code for all of the backends. Build them all with your preferred build setup and see what suits you best.

What about custom menu bars?

What do you mean by that? You open a menu bar and submit custom menu items (or other widgets) to it.

How do I achieve this?

These UIs are mostly collections of "simpler" windows that are neatly docked. To get you started on more complex stuff, you should get the docking branch, create a dockspace over the entire viewport (with ImGui::DockSpaceOverViewport) and dock your windows there. Then experiment a lot and ask when specific problems arise. The FAQ, examples and the demo window can help, but of course they don't provide fully fledged applications.

If you want a full tutorial, there seem to be a lot of resources out there if you search, but I can't recommend anything in particular since I didn't read/watch them. This is a far to broad topic to just answer.

[Advik-B]

What do you mean by that? You open a menu bar and submit custom menu items (or other widgets) to it.

I am talking about this #6897 (comment) or this #6897 (comment)

I really want to know how or what steps they took to achieve this.

[ocornut]

This is too generic/wide of a topic to be meaningfully answered here. As you get acquainted to Dear ImGui you will find it more natural over time to do things like this, but all the tools are available it's up to you to assemble the code.

In the first link I see:

• Loading a nice font + icon fonts (see https://github.com/ocornut/imgui/blob/master/docs/FONTS.md)
• Custom image buttons.
• Custom widgets for asset with a slight border drawn.

In the second link I see:

• Loading a nice font + Icon fonts
• Animated toggle widget (from Toggle Button? #1537)
• Custom slider widgets.
• Careful manual layout.
• Custom shapes drawn being the window (perhaps first thing done in the window are calls to ImDrawList drawing API).
• Blur on window title bar (this is a little more complicated and requires interaction with your backend and shader). If it a blur being the full platform window it seems like Gallery: Post your screenshots / code here (PART 16) #5886 (comment) can be used.

Also see https://github.com/ocornut/imgui/wiki/Useful-Extensions for code reference.

[GamingMinds-DanielC]

So, basically a toolbar with custom widgets inside. The way to start the process goes like this...

First you need to think about what your toolbar should be able to do. Usually it's a bar of fixed size that sits directly under the main menu (if there is any). Docking is not allowed to split it, the user can't move or resize it, ... so what comes to mind that already does this kind of thing? The main menu bar. Since you have the complete source code available, you can take a look at the implementation of ImGui::BeginMainMenuBar() as a reference.

As per the main menu bar, you need this:
ImGuiViewportP* viewport = (ImGuiViewportP*)(void*)ImGui::GetMainViewport();

If you look where this structure is defined, you will see that you need to include imgui_internal.h for this. If you delve deeper into the code (specifically BeginViewportSideBar(), you see why you need it: to manipulate the work offset of the viewport (usually viewport->BuildWorkOffsetMin.y).

The toolbar is placed at BuildWorkOffsetMin, has a width of BuildWorkOffsetMax.x - BuildWorkOffsetMin.x and a fixed height of your choosing. So for your window, you can prepare the placement with SetNextWindowPos() and SetNextWindowSize(), call SetNextWindowContentSize() and SetNextWindowViewport() (get the ID from your main viewport) as well.

To get rid of decorations and unwanted interactions, you can set a few flags, start with ImGuiWindowFlags_NoTitleBar, ImGuiWindowFlags_NoMove, ImGuiWindowFlags_NoResize, ImGuiWindowFlags_NoScrollbar, ImGuiWindowFlags_NoCollapse, ImGuiWindowFlags_NoSavedSettings and ImGuiWindowFlags_NoDocking. Next, push a few style vars, ImGuiStyleVar_WindowPadding to an ImVec2 of your choosing, ImGuiStyleVar_WindowRounding to 0.0f and ImGuiStyleVar_WindowBorderSize to 0.0f. Don't forget to pop those values again right after beginning the window. If you followed all this, you should now have an empty toolbar that you can fill with widgets of your choice. If you don't want to SameLine() all the time, you can retrieve the current window and in it set DC.LayoutType to ImGuiLayoutType_Horizontal.

The steps for custom widgets are similar. You think about what you want, take a look at stock widgets that do something similar and use them as a reference to implement your own. You can use groups to group widgets together, you can use invisible buttons to define an interactive area and retrieve draw lists to draw them as you see fit.

Of course there are lots of other things you can do as well. You can put it at the bottom, you can do a vertical layout on the left or right. Experiment. The best thing about diving into the code is that you learn useful things you otherwise won't even think to ask about.

[Advik-B]

Thank you, Mr Omar, Daniel Cremers.
These resources have been very helpful for me.