Setting up a Visual Studio Project for a GUI App.

Divyansh GoyalDivyansh Goyal
4 min read

Magic involved: c++, Dear ImGui,Opengl3,GLFW,glad ,Visual Studio 2022(Community), Vcpkg, Windows(OS)

DEAR-IMGUI: https://github.com/ocornut/imgui

When it comes to building Gui apps, there exist 2 types of libraries, "Immediate-Mode" and "Retained-Mode". Dear-ImGui is an immediate mode Gui library, that is super handy to work with real-time data applications such as Game Engines, Graphics Simulations, and more.

For context:

Immediate Mode Gui Libraries, essentially have a main loop that redraws each individual component on the screen with each iteration.

Retained Mode Gui Libraries, keep a state of all the drawn components on the screen and update them further.

Visual Studio Projects Require prior configuration before you can jump in and start indulging in your external libraries. This publication will provide you with a starting point to write your own Graphical User Interface Applications in C++, with the help of an open-source Immediate mode GUI library "DEAR-IMGUI".

VCPKG:

Vcpkg is a package manager for Windows which can essentially be used to manage packages for your visual studio projects.

To get Vcpkg :

1:Clone the public repository at "https://github.com/microsoft/vcpkg.git"

2:Navigate to the cloned repository on your local machine and run "./bootstrap-vcpkg.bat"

3:Wait for the Installation, and finally run "./vcpkg integrate install"

Voila, now you are ready to get packages on your own machine using the vcpkg packager manager.

Package Search and Installation:

1:For searching packages, run "./vcpkg search package-name"

2:In this case, we will be installing 3 packages using the vcpkg pkg manager, which are "Imgui[opengl3-binding]", "glfw3", "glad"

3:Next, let's run the following commands to get these packages installed:

"./vcpkg install imgui[opengl3-binding]"

"./vcpkg install glfw3"

"./vcpkg install glad"

4:Running "./vcpkg integrate install" one last time, will set aside the work with vcpkg.

5:Now that we are done with the pkg installation, let's remember the path to our added libraries. In the root of your vcpkg directory, navigate to "packages" and list out the names of the contents.

6:Having contents of the directory listed out, we can find some more directories, but the ones we are looking for are "imgui_X86-windows", "glfw3_x86-windows" and "glad_x86-windows". Navigate to each of these directories one by one and change into the "lib" directory within them. With each finding, you will come across the relevant library files titled "imgui.lib", "glfw3dll.lib" and "glad.lib".

7:Let us note down the names of these files ending with ".lib" and also their path.

wooho! vcpkg work done!

VISUAL STUDIO 2022:

Having Visual Studio community edition installed with most of the checkboxes ticked during the installation window, will help you further in any future development work.

Now, let's get started in setting up our visual studio project to get Dear-ImGui up and running.

Setting up a Visual Studio Project:

1:Start by creating a new Empty Project in Visual Studio, and give it an arbitrary name.

2:Under the "Solution Explorer", right-click on your project's name and open the project properties window.

3:From here on we only got to look at the 2 sections, the "General Project Configuration" section, and the "Linker" section.

4:Let's start under the Linker Section. Select the "Input" option from the left-pane window and find the "Additional Dependencies" option. Double-click within the input field and list out the names of our libraries one by one on a new line.

so, Linker->Input->Additional Dependencies : imgui.lib

glfw3dll.lib

glad.lib

5:Again, under the linker section, select the General option from the left pane and find an input field labeled "Additional Dependencies Directories". Double-click over onto the input field and list out the full path to our libraries one by one on a new line.

so, Linker->General->Additional Dependencies Directories : [yourpath_to_vcpkg]:/vcpkg/packages/imgui_x86-windows/lib/imgui.lib

[yourpath_to_vcpkg]:/vcpkg/packages/glfw3_x86-windows/lib/glfw3dll.lib

[yourpath_to_vcpkg]:/vcpkg/packages/opengl3_x86-windows/lib/glad.lib

6:Nice, Linker work done, let's move on to the "General Project Configuration" Section at the top. Under this section, with the "VC++ Directories" option selected find an input field labeled "Include Directories".

7:Double-Click on the input field and let's put the path to our libraries one by one each on a new line once again, but this time, the path will look something like this:

"[path_tovcpkg]:/vcpkg/packages/imgui_x86-windows/include"

We, simply have to do the same for the rest of the packages as well. Remember the path will end in the "include" directory under your package.

So, General Project Configuration->VC++ Directories->Include Directories:

[path_tovcpkg]:/vcpkg/packages/imgui_x86-windows/include

[path_tovcpkg]:/vcpkg/packages/glfw3_x86-windows/include

[path_tovcpkg]:/vcpkg/packages/glad_x86-windows/include

Project configuration is done, Now you can create your source.cpp files and include all of these libraries to get your imgui code up and running.

I covered the entirety of this process in a video down here:

https://youtu.be/T4IFzJPkfMg

~adios amigos

0
Subscribe to my newsletter

Read articles from Divyansh Goyal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Divyansh Goyal
Divyansh Goyal

Microsoft Learn Student Ambassador Sentient Being | Julia Lang admirer