[2026] Modern C++ GUI: Debug Tools & Dashboards with Dear ImGui [#36-1]

Introduction: beyond printf—visible state

Dear ImGui is an immediate-mode GUI library: every frame you call widgets; interaction is returned from those calls. It is small, easy to integrate, and ideal for in-engine overlays, profilers, and tuning panels. Covers: what ImGui is, minimal window flow, GLFW+OpenGL backends, debugging dashboards, common crashes (frame order, local state), best practices, production notes.

Table of contents

1. What is Dear ImGui?
2. Immediate mode
3. Minimal example
4. Backend (GLFW + OpenGL)
5. Complete example
6. Dashboards
7. Common errors
8. Best practices
9. Production patterns

---

1. What is Dear ImGui?

Header-friendly, minimal dependencies, backends for GLFW/SDL/DX/Vulkan/Metal. Best for tools inside an engine—not full desktop app frameworks like Qt for every case. Why Dear ImGui: Immediate-mode GUI is perfect for debug tools, game editors, and prototypes. No complex state management—just call ImGui::Button() every frame. Integrates easily with OpenGL, Vulkan, DirectX. Used in Unreal Engine editor, Unity profiler, and countless game dev tools. Learning curve: 30 minutes to first window, 2 hours to production-ready debug dashboard. The simplicity is its strength—no XML layouts, no signal/slot boilerplate, just C++ function calls. 아래 코드는 mermaid를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

flowchart TB
    subgraph app[App]
        loop["Main loop"]
        ui["ImGui Begin…End"]
    end
    subgraph imgui[Dear ImGui]
        core["imgui core"]
        backend["impl_* backends"]
    end
    loop --> ui --> core --> backend

---

2. Immediate mode vs retained UI

Retained toolkits build widget objects and fire callbacks; ImGui redraws widgets each frame and uses return values (if (Button(...))).

3. Minimal frame order

Backend NewFrame → ImGui::NewFrame → Begin/End widgets → ImGui::Render → Backend RenderDrawData

Critical: slider/state must live in static or member storage—not fresh locals reset every frame.

4. GLFW + OpenGL

Clone official examples (example_glfw_opengl3), copy backend sources, initialize context, and run the loop—the full main.cpp listing below ties the steps together.

5. Complete example

The full main_imgui_minimal.cpp example includes PlotLines, buttons, and a second window—keep comments in your team’s language in your repo copy.

6. Dashboards

Bind ServerStats fields to Text, PlotLines, and buttons for live ops panels.

7. Common errors

• NewFrame/Render ordering wrong → blank UI or crash.
• Missing backend init → no input / black screen.
• Widgets only called once behind a flag → UI disappears (ImGui needs every frame).
• SliderFloat on a stack local → value resets.

---

8. Best practices

PushID/##suffix to avoid ID clashes; CollapsingHeader for sections; tooltips; keep style setup in one place.

9. Production patterns

ImGui is not thread-safe—call only from the main thread; pass stats via queues. Docking/viewports optional. Handle GPU errors from backends explicitly.

Keywords

Dear ImGui tutorial, immediate mode GUI, GLFW ImGui, OpenGL debug UI, C++ dashboard Next: Qt basics (#36-2)
Previous: Wasm (#35-2)