Building an Immediate-Mode GUI (IMGUI) from scratch

Broadly, there are two paradigms of interfacing with a UI library to create a Graphical User Interface (GUI) - Retained-Mode (RM) and Immediate-Mode (IM). This talk is for anyone who wants to understand how to make an immediate-mode GUI from scratch. I will explain the inner workings of an immediate-mode UI library and show one possible way to implement simple widgets like buttons, sliders, and text-boxes from scratch.

Link: https://github.com/Sid-Bhatia-0/SimpleIMGUI.jl

Needless to say, Graphical User Interfaces (GUIs) are used in a wide variety of applications. For example, several desktop applications like web browsers, computer games etc. have some form of a GUI. Typically, a GUI has some widgets like buttons, text-boxes etc. and the user can interact with those widgets with the help of a mouse or a keyboard in order to use the application.

Broadly, there are two paradigms of interfacing with a UI library to create a GUI - Retained-Mode (RM) and Immediate-Mode (IM). This talk is for anyone who wants to understand how to make an immediate-mode GUI from scratch. I will attempt to explain the inner workings of an immediate-mode UI library and show one possible way to implement simple widgets like buttons, sliders, and text-boxes from scratch.

We will look at one possible way to structure the render loop for a desktop application and dive deeper into input handling and widget interaction. The goal is to strip out as many unnecessary features as possible and explain the barebones structure of how to make an IMGUI from scratch. For this purpose, I will stick to the lightweight libraries GLFW.jl (to create and manage windows) and SimpleDraw.jl (to draw the user interface).

SimpleIMGUI.jl: https://github.com/Sid-Bhatia-0/SimpleIMGUI.jl Supplementary material: https://github.com/Sid-Bhatia-0/JuliaCon2022Talk