Interactive UI Programming with C++ and ImGui [2024]

Install Visual Studio 2022 Community Edition for desktop development with C++, on Windows 10 or 11, and verify the setup using Developer PowerShell and CMake.

Install git on Windows by downloading from the official site, running the wizard, accepting default options, and finishing the setup with the Windows console choice.

Set up a base graphics project with CMake and Visual Studio, then build and run a simple hello world in C++, introducing the viewer project.

Discover what windows are and how they work on Linux, macOS, and Windows, providing a graphical context and handling keyboard and mouse events, with next lesson introducing glfw.

Create a window with the Golf W library, set an error callback, initialize the library, configure width and height, run an event loop, and destroy the window before termination.

Adopts Google’s c++ style guide to enforce naming conventions, using snake_case for variables and k prefixes for constants, and implements a window class with initialization and termination logic.

The big two library simplifies monitor introspection, demonstrating a span-based get monitors function and range-based loops to print each monitor's name, resolution, and refresh rate.

Implement monitor management by adding functions to set full screen state and move the window to another monitor. Track window position and non full screen size.

Explore how the CPU and GPU interact, what a graphical API does, and how shaders and libraries like Bjf enable rendering via OpenGL, Vulkan, or DirectX.

Learn to initialize the bg graphics API, move the window to a valid monitor, set native window data and window resolution, and enable frame reset for smooth rendering.

Learn to set up frame buffers for multiple windows, get a native window handle, and link each view to its frame buffer to enable multi-window rendering.

Create a graphics context class to encapsulate window integration, manage view IDs with the big two ID manager, and move frame buffer handling, begin/end frame, and clear color from main.

Connect the graphics context to the window by adding a graphics context member and getter. Initialize the context with the window, and handle begin and end frame for multiple windows.

Learn to handle window resizing by tracking the last window size, detecting size changes, and updating the graphics context by destroying and recreating the framebuffer and adjusting the view rect.

Introduce ImGui basics by creating and configuring an ImGui context, selecting backends (Beegfs, OpenGL, Vulkan), and driving an immediate mode UI with a demo window, frames, and rendering.

We refactor imgui integration using the big two library, moving context management into the window, exposing begin and end frame, and wiring the init context pointer.

Learn to render multiple Imgui windows with separate contexts, explore the docking branch and Imgui viewport, and implement per-window event handling via a custom event queue and set context.

Create a full screen custom ImGui window using begin/end, set next window size from the screen resolution, and apply flags to remove decoration and fix top-left positioning.

Explore how ImGui buttons enable interactivity by a function that returns true when clicked. A should say hello variable shows the hello text across frames, with add and remove buttons.

Learn how ImGui assigns unique IDs to interactive elements, how identical IDs affect behavior, and how to use hash tags, push and pop IDs, and action-based naming in loops.

Learn how ImGui inputs work by implementing a text input with std::string support, showing how the field updates variables, formats text, and displays the result.

Learn to layout ImGui elements using same line and begin group and end group to align a label, an input, and the text within a group from top to bottom.

Build a functional ImGui calculator app in C++ by wiring a number dial, digit buttons, and a display. Implement backspace, clear, and chained addition with an operation state and equals.

Add the four basic operations to the integer calculator: addition, subtraction, division, and multiplication. Build the project together and see how I implemented it.

Extend the integer calculator by implementing add, subtract, multiply, and divide operations, wiring them through a switch statement and equals button, and verify all four operations on the UI.

Create an ImGui menu bar with a file dropdown by using begin menu bar, begin menu, and menu item, including a toggle to show or hide another window.

Explore advanced ImGui inputs by reworking a window, adding integer and array inputs, floats, sliders, and password fields, while learning step counts, flags, and formatting for dynamic UIs.

Apply ImGui styles by creating a styles window, enabling disabled states, and pushing and popping style colors and spacing to adjust button colors, hover behavior, and element gaps.

Learn to create and customize tooltips in ImGui, including simple and persistent tooltips, hover detection with is_item_hovered, and embedding content like text and buttons inside tooltips.

Explore custom drawing in ImGui by using the draw list to render a line and a circle inside a window, and align coordinates to the window position.

Enable math operations in ImGui by defining math operators above the includes, then use 2D vectors for line start and circle center and replace code with variables.

Customize the ImGui theme by editing the style and adjusting window background and text colors. Use colors array to gray with equal R G B values and make buttons greener.

Learn to build a custom ImGui link control that renders text, shows a URL tooltip on hover, returns true on left-click, and uses ImGui styling, underline, and drawing tools.

Add custom ttf fonts to ImGui by loading from a file or system path, and adjust the size to 16 for a cleaner, more professional UI.

Set up a C++ ImGui project from scratch by organizing folders, writing CMake files, fetching content, and linking an OpenGL‑dependent package and viewer for a successful build.