DS Log

In my blog, I delve into the world of programming web technologies, Linux, Unix-like, and graphic design using free tools on Linux.

Dear ImGui

To search for package on Debian based (Ubuntu/Mint):

🚀 apt-cache search imgui
libdart-external-imgui-dev - Kinematics Dynamics and Optimization Library - imgui dev
libdart-external-imgui6.12 - Kinematics Dynamics and Optimization Library - imgui lib
libimgui-dev - Bloat-free Immediate Mode Graphical User interface for C++
r-cran-vim - GNU R visualization and imputation of missing values

Ok, we will use and install libimgui-dev:

🚀 sudo apt-get install libimgui-dev 

🚀 sudo apt-get install build-essential 

Example

Here's a simple example of using ImGui (Immediate Mode GUI) in C++ with two frames displaying "Hello World":

#include "imgui.h"
#define IMGUI_IMPL_OPENGL_LOADER_GL3W
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include 

int main()
{
    // Initialize GLFW
    glfwInit();

    // Create a GLFW window
    GLFWwindow* window = glfwCreateWindow(800, 600, "ImGui Example", NULL, NULL);
    glfwMakeContextCurrent(window);

    // Initialize ImGui
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init("#version 330");

    // Main loop
    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        // Start a new ImGui frame
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        // First frame
        ImGui::Begin("Frame 1");
        ImGui::Text("Hello World");
        ImGui::End();

        // Second frame
        ImGui::Begin("Frame 2");
        ImGui::Text("Hello World");
        ImGui::End();

        // Render the ImGui frames
        ImGui::Render();
        int display_w, display_h;
        glfwGetFramebufferSize(window, &display_w, &display_h);
        glViewport(0, 0, display_w, display_h);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        // Swap buffers and poll events
        glfwSwapBuffers(window);
    }

    // Cleanup
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();

    return 0;
}

To compile use this terminal command:

🚀 g++ -o my_program main.cpp -I/usr/include/imgui -lGL -lGLEW -lglfw -lGLU -ldl `pkg-config --static --libs imgui` 

Run compiled:

🚀 ./my_program

Update #1

#include "imgui.h"
#define IMGUI_IMPL_OPENGL_LOADER_GL3W
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <GLFW/glfw3.h>
#include <iostream>


void RenderUI(float& sidebar_width)
{
    // Get the window size
    ImGuiIO& io = ImGui::GetIO();
    ImVec2 window_size = io.DisplaySize;

    // Set the size of the main window and sidebar
    ImVec2 main_window_size = ImVec2(window_size.x - sidebar_width, window_size.y);
    ImVec2 sidebar_size = ImVec2(sidebar_width, window_size.y);

    // Start the main window
    ImGui::SetNextWindowPos(ImVec2(0, 0));
    ImGui::SetNextWindowSize(main_window_size);
    ImGui::Begin("Main Window", nullptr, ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove);
    ImGui::Text("This is the main window");

    // Input Text
    static char inputText[128] = "";
    if (ImGui::InputText("Input Text", inputText, IM_ARRAYSIZE(inputText))) {
        std::cout << "Input Text: " << inputText << std::endl;
    }

    // Combo Box (Dropdown)
    const char* items[] = { "Option 1", "Option 2", "Option 3" };
    static int itemIndex = 0;
    if (ImGui::Combo("Combo", &itemIndex, items, IM_ARRAYSIZE(items))) {
        std::cout << "Combo selected: " << items[itemIndex] << std::endl;
    }

    // Checkbox
    static bool checkboxState = false;
    if (ImGui::Checkbox("Checkbox", &checkboxState)) {
        std::cout << "Checkbox state: " << (checkboxState ? "Checked" : "Unchecked") << std::endl;
    }

    // Radio Buttons
    static int radioButton = 0;
    if (ImGui::RadioButton("Radio 1", &radioButton, 0)) {
        std::cout << "Radio 1 selected" << std::endl;
    }
    if (ImGui::RadioButton("Radio 2", &radioButton, 1)) {
        std::cout << "Radio 2 selected" << std::endl;
    }

    // Button
    if (ImGui::Button("Button")) {
        std::cout << "Button pressed" << std::endl;
    }

    // Slider
    static float sliderValue = 0.5f;
    if (ImGui::SliderFloat("Slider", &sliderValue, 0.0f, 1.0f)) {
        std::cout << "Slider value: " << sliderValue << std::endl;
    }

    // Color Picker
    static ImVec4 color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f);
    if (ImGui::ColorEdit3("Color Picker", (float*)&color)) {
        std::cout << "Color selected: (" << color.x << ", " << color.y << ", " << color.z << ")" << std::endl;
    }

    // Progress Bar
    static float progress = 0.0f;
    progress += 0.001f; // Simulating progress
    if (progress >= 1.0f) progress = 0.0f;
    ImGui::ProgressBar(progress, ImVec2(0.0f, 0.0f));

    // Input Number
    static int intValue = 42;
    if (ImGui::InputInt("Input Int", &intValue)) {
        std::cout << "Integer value: " << intValue << std::endl;
    }

    // Tree View
    if (ImGui::TreeNode("Tree View")) {
        ImGui::Text("Item 1");
        ImGui::Text("Item 2");
        if (ImGui::TreeNode("Subtree")) {
            ImGui::Text("Subitem 1");
            ImGui::Text("Subitem 2");
            ImGui::TreePop();
        }
        ImGui::TreePop();
    }

    // Tab Bar
    if (ImGui::BeginTabBar("Tab Bar")) {
        if (ImGui::BeginTabItem("Tab 1")) {
            ImGui::Text("Content for Tab 1");
            ImGui::EndTabItem();
        }
        if (ImGui::BeginTabItem("Tab 2")) {
            ImGui::Text("Content for Tab 2");
            ImGui::EndTabItem();
        }
        ImGui::EndTabBar();
    }

    // List Box
    static int listboxItemIndex = 0;
    if (ImGui::ListBox("List Box", &listboxItemIndex, items, IM_ARRAYSIZE(items))) {
        std::cout << "ListBox selected: " << items[listboxItemIndex] << std::endl;
    }

    // Tooltip
    ImGui::Text("Hover over me for a tooltip.");
    if (ImGui::IsItemHovered())
        ImGui::SetTooltip("This is a tooltip!");

    ImGui::End();

    // Start the sidebar window
    ImGui::SetNextWindowPos(ImVec2(main_window_size.x, 0));
    ImGui::SetNextWindowSize(sidebar_size);
    ImGui::Begin("Sidebar", nullptr, ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove);
    ImGui::Text("This is the sidebar");
    ImGui::End();

    // Handle resizing
    ImGui::SetCursorPosX(main_window_size.x - 4);
    ImGui::SetCursorPosY(0);
    ImGui::InvisibleButton("splitter", ImVec2(8, window_size.y));
    if (ImGui::IsItemActive())
    {
        sidebar_width -= io.MouseDelta.x;
        if (sidebar_width < 100.0f) sidebar_width = 100.0f; // Minimum sidebar width
        if (sidebar_width > window_size.x - 100.0f) sidebar_width = window_size.x - 100.0f; // Maximum sidebar width
    }
}

int main()
{
    // Initialize GLFW
    glfwInit();

    // Create a GLFW window
    GLFWwindow* window = glfwCreateWindow(800, 600, "ImGui Example", NULL, NULL);
    glfwMakeContextCurrent(window);

    // Initialize ImGui
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init("#version 330");

    // Variable to track sidebar width
    float sidebar_width = 200.0f; // Initial sidebar width

    // Main loop
    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        // Start a new ImGui frame
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        // Render the UI
        RenderUI(sidebar_width);

        // Render the ImGui frames
        ImGui::Render();
        int display_w, display_h;
        glfwGetFramebufferSize(window, &display_w, &display_h);
        glViewport(0, 0, display_w, display_h);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        // Swap buffers and poll events
        glfwSwapBuffers(window);
    }

    // Cleanup
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();

    return 0;
}

posted by damirs @ August 08, 2024