Introduction to the ImGui C++ Library with Conan

Hello, and welcome to another screencast brought to by the Conan development team.
My name is Jerry Wiltse, and today we will
talk about an amazing graphical user interface library called ImGui.
To show the basics of this library, we will create a simple application with some controls,
like buttons, scroll bars, color editors, and more. We will show
easily and quickly you can create graphical user interfaces with this library.
But let’s first talk a little bit about the library and what makes imGui different from
other GUI libraries. Imgui is a MIT licensed GUI library mainly used in game development. It is
focused on simplicity and productivity using what is called the immediate mode gui paradigm.
ImGui is renderer agnostic. This means that you have to provide the tools to render the data.
This is a bit of extra work, but it’s very easy to integrate your code with
these tools as ImGui provides multiple bindings for popular window and event handling libraries
such as glfw, sdl and GLUT, and multiple popular renderers like OpenGL, DirectX and Vulkan.
Dear ImGui comes with lots of widgets like windows, labels, input boxes, progress bars,
buttons, sliders, trees, and more. We’ll use a few of these in our application,
so lets get started. The purpose of our application is to draw an interactive triangle
shape, and adding some real-time controls to edit it’s position, rotation and color.
As we said earlier, Imgui is renderer independent, so besides adding imgui to our project
we also have to add the libraries which will do the rendering and event handling. We are going to
use OpenGL3, GLEW, and GLFW for that purpose. We will use the premade bindings from the Dear ImGui
repository to connect ImGui to the renderer. Now lets start working on the source code of our
program. The minimal code to make this work is in main.cpp. First, you initialize the window
for rendering. Then you have to initialize a Dear ImGui context, the helper platform,
and Renderer bindings. You can also change the rendering style if you want as well.
Next let’s look at the while loop inside the main() function. It is an infinite while loop
which draws the screen on every iteration. As we said earlier, this is one of the defining
characteristics of the Immediate-Mode UI paradigm. Finally, at the end of the program,
we have to perform some cleanup as well. So, if we render this initial code, here’s what we get. It’s
an empty window, but it is fully functional. It’s an empty window, but it’s fully functional.
Next, we want to add some code to paint a static triangle inside the main window.
When we run the application with this code, here’s how it looks.
Now we want to add some controls to our application which will allow us to modify some
of the triangle’s properties in real-time. Imgui comes with a function called ShowDemoWindow(),
which gives us an interactive demonstration of most of the controls ImGui provides. When we add
this function call and run our program, here is the window. For our example, we’ll use the slider
to modify the triangle’s position and rotation and the color picker to modify the color.
Here is the code which creates our controls. First we create a slider to control the rotation of the
triangle. We provide the string which will appear as the label on the control, along with an initial
value, and a min/max value. Next, we create a second slider which will control the position.
Finally, we create a control called ColorEdit3 which also takes a string for a label,
and an array of floats which will be used to hold a base color, and color
values for each corner of our triangle. Ok. That’s it. We’ve added three new controls
to our window. As you saw it’s very easy to get started making a simple GUI application
and add controls iteratively. Again, feel free to clone this code and continue adding
more controls and exploring more of what the ImGui library has to offer.
Now that we’ve shown what ImGui can do, we want to demonstrate one of the easiest ways to setup
a C or C++ project to use it. Sometimes in C and C++, the hardest part of setting up a
new project is the dependency management. For example, with our demo,we not only have ImGui,
but also the window and event-handling libraries, and all the renderers. Since many of these are
platform-specific, it becomes a LOT to manage very quickly. Fortunately, the GIT repository with this
demo contains a complete project which handles all of this dependency management with ease.
Our solution for dependency management is Conan, the package manager for C and C++. Next,
we are going to explain how setting a project to use a library like imgui or any other is just
a matter of minutes using Conan. Conan has a central repository called “Conan Center”, which
holds packages containing many popular open-source C and C++ libraries. You can search it on the web,
or via the conan search command. As we can see, we have Conan packages
for each of them. We can use these Conan packages in our project no matter what build system we’re
using. In our example, we use CMake, so if you want to build our example project, you’ll need
to have Cmake installed on your system. To use packages from ConanCenter in our project,
we started by creating a file named “conanfile.txt”,
which let us list our dependencies with a simple syntax. We also specified that
we’re targeting the cmake build system. Finally, we added an “imports” section,
which declares that we want to copy the source and header files for the bindings provided by imgui
from the package to our project’s bindings directory. This will all take
place before we run our build. Let’s also inspect the CMake file:
It adds the bindings for GLFW and OpenGL3 and two more files to handle OpenGL shaders and file
reading. It will also copy the shaders that render the triangle to the working directory
each time the application is recompiled. The only requirement for using Conan is to have
Python installed. We always recommend installing Conan using a Python virtual environment,
so if you’re not familiar with that, you can check out the installation
instructions in the Conan documentation. With the conanfile in place, we can run the
commands shown here to perform the build, which will get our dependencies from the Conan packages.
The operative command here is the conan install command. It does two major things for our project.
First, it downloads all the dependencies to a local binary cache on our system.
If there are pre-built binaries available for our system, it will download them.
If there are not, it will build them from source on-the fly and store them in the cache. Second,
it produces the necessary cmake files to enable CMake to locate the dependencies in this cache.
From there, we can use cmake to build our application, and run it.
So that’s all it takes. As you can see, with Conan installed and a fairly simple text file,
we were able to take a non-trivial set of open-source dependencies, and plug them
into our new project with ease. We hope you enjoyed this screencast.
If you did, and want to stay updated on our upcoming videos, please be sure
to hit the like and subscribe buttons on our youtube channel. Thanks for watching!