Utilisation des widgets courants d’ImGui

Tout d’abord, nous allons supprimer tous les widgets de la leçon précédente et créer une fenêtre vide minimaliste sans aucun contrôle à l’intérieur.

#pragma comment(linker, "/SUBSYSTEM:windows /ENTRY:mainCRTStartup")
#pragma execution_character_set("utf-8")

#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>
#include <string>
#include <fstream>
#include <windows.h>
#include <io.h>
#include <commdlg.h>  // En-tête requis pour les boîtes de dialogue de fichiers

#include <iostream>
using namespace std;

// Configurer la police pour corriger les caractères affichés sous forme de "??"
// Ajoutez ici le chemin de police correspondant à votre environnement système, ou utilisez le chemin de police par défaut
void SetupFont(ImGuiIO& io)
{
    // Chemin de police chinoise courant sur Windows
    const char* font_path = "C:/Windows/Fonts/msyh.ttc"; // Microsoft YaHei
    float font_size = 18.0f;

    // Charger la plage de caractères chinois simplifiés couramment utilisés
    ImVector<ImWchar> ranges;
    ImFontGlyphRangesBuilder builder;
    builder.AddRanges(io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
    builder.BuildRanges(&ranges);

    // Charger la police personnalisée
    io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, ranges.Data);

    // Ajouter des plages de polices supplémentaires pour la prise en charge multilingue si nécessaire :
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesJapanese());
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesKorean());
}


int main()
{

    if (!glfwInit())
    {
        printf("Échec de l'initialisation de GLFW\n");
        return -1;
    }

    const char* glsl_version = "#version 330";
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    GLFWwindow* window = glfwCreateWindow(800, 600, "Titre", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1);

    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui::StyleColorsLight();

    SetupFont(io); // Charger la police pour résoudre le problème de caractères déformés

    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        ImGui::SetNextWindowPos(ImVec2(0, 0));
        ImGui::SetNextWindowSize(io.DisplaySize);

        ImGuiWindowFlags window_flags = ImGuiWindowFlags_NoDecoration
            | ImGuiWindowFlags_NoMove
            | ImGuiWindowFlags_NoResize
            | ImGuiWindowFlags_NoSavedSettings;

        ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.0f);
        ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);

        ImGui::Begin("Titre", nullptr, window_flags);

        // Début de la zone de rendu des widgets

        // Fin de la zone des widgets

        ImGui::End();
        ImGui::PopStyleVar(2);

        ImGui::Render();
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
        glClearColor(0.12f, 0.12f, 0.12f, 1.f);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        glfwSwapBuffers(window);
    }

    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Langage du code : Texte brut (plaintext)

Nous allons maintenant créer les widgets ImGui un par un.

Widget de texte

ImGui::Text("Bonjour le monde %d", 123);Langage du code : Texte brut (plaintext)

Il affiche le texte de gauche à droite en commençant par le coin supérieur gauche.

Bouton

        // Afficher un bouton ; le code interne s'exécute au clic
        if (ImGui::Button("Enregistrer"))
        {
            // Le code ici s'exécute après le clic
        }Langage du code : Texte brut (plaintext)

Des dizaines de widgets sont disponibles. Regardons le code de démonstration complet ci-dessous qui affiche tous les widgets courants en une fois.

#pragma comment(linker, "/SUBSYSTEM:windows /ENTRY:mainCRTStartup")
#pragma execution_character_set("utf-8")

#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>
#include <string>
#include <cstring>
#include <windows.h>
#include <io.h>
#include <iostream>
using namespace std;

// Configurer la police pour corriger les caractères affichés sous forme de "??"
// Ajoutez ici le chemin de police correspondant à votre environnement système, ou utilisez le chemin de police par défaut
void SetupFont(ImGuiIO& io)
{
    // Chemin de police chinoise courant sur Windows
    const char* font_path = "C:/Windows/Fonts/msyh.ttc"; // Microsoft YaHei
    float font_size = 18.0f;

    // Charger la plage de caractères chinois simplifiés couramment utilisés
    ImVector<ImWchar> ranges;
    ImFontGlyphRangesBuilder builder;
    builder.AddRanges(io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
    builder.BuildRanges(&ranges);

    // Charger la police personnalisée
    io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, ranges.Data);

    // Ajouter des plages de polices supplémentaires pour la prise en charge multilingue si nécessaire :
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesJapanese());
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesKorean());
}

// ===================== Variables globales liées aux widgets =====================
char buf[256] = "Texte de test champ une ligne";
char bufMulti[1024] = "Zone de texte multiligne\nLigne 2\nLigne 3 test caractères chinois";
float fVal = 0.5f;
int iVal = 50;
bool checkBox1 = false;
bool checkBox2 = true;
int radioIdx = 0;
int comboSel = 0;
ImVec4 color = ImVec4(0.2f, 0.7f, 0.9f, 1.0f);
bool showPopupWin = false;
bool showModal = false;
int tabIndex = 0;
float progress = 0.35f;

int main()
{
    SetConsoleOutputCP(65001);
    if (!glfwInit())
    {
        printf("Échec de l'initialisation de GLFW\n");
        return -1;
    }

    const char* glsl_version = "#version 330";
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    GLFWwindow* window = glfwCreateWindow(1000, 700, "Démonstration tous widgets courants ImGui", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1);

    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui::StyleColorsLight();

    SetupFont(io);

    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        ImGui::SetNextWindowPos(ImVec2(0, 0));
        ImGui::SetNextWindowSize(io.DisplaySize);

        ImGuiWindowFlags window_flags = ImGuiWindowFlags_NoDecoration
            | ImGuiWindowFlags_NoMove
            | ImGuiWindowFlags_NoResize
            | ImGuiWindowFlags_NoSavedSettings;

        ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.0f);
        ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0.0f);

        ImGui::Begin("Fenêtre principale", nullptr, window_flags);

        // ========== 1. Barre de menu supérieure ==========
        if (ImGui::BeginMenuBar())
        {
            if (ImGui::BeginMenu("Fichier"))
            {
                if (ImGui::MenuItem("Nouveau", "Ctrl+N")) {}
                if (ImGui::MenuItem("Enregistrer", "Ctrl+S")) {}
                ImGui::Separator();
                if (ImGui::MenuItem("Quitter"))
                    glfwSetWindowShouldClose(window, true);
                ImGui::EndMenu();
            }
            if (ImGui::BeginMenu("Outils"))
            {
                if (ImGui::MenuItem("Ouvrir démo popup"))
                    showPopupWin = true;
                ImGui::EndMenu();
            }
            ImGui::EndMenuBar();
        }
        ImGui::Spacing();

        // ========== 2. Widgets de texte basiques ==========
        ImGui::Text("===== Widgets de texte =====");
        ImGui::Text("Texte normal Bonjour le monde %d", 123);
        ImGui::TextColored(ImVec4(1, 0, 0, 1), "Texte rouge coloré");
        ImGui::TextDisabled("Texte gris désactivé");
        ImGui::BulletText("Texte à puce 1");
        ImGui::BulletText("Texte à puce 2");
        ImGui::Spacing();

        // ========== 3. Famille des boutons ==========
        ImGui::Text("===== Boutons =====");
        if (ImGui::Button("Bouton normal"))
            cout << "Clic sur bouton normal" << endl;
        ImGui::SameLine();
        if (ImGui::SmallButton("Petit bouton"))
            cout << "Clic sur petit bouton" << endl;
        ImGui::SameLine();
        if (ImGui::Button("Bouton large", ImVec2(120, 0)))
            cout << "Clic sur bouton large personnalisé" << endl;
        ImGui::Spacing();

        // ========== 4. Champs de saisie ==========
        ImGui::Text("===== Widgets de saisie =====");
        ImGui::InputText("Saisie une ligne", buf, IM_ARRAYSIZE(buf));
        ImGui::InputTextWithHint("Saisie avec indication", "Saisissez votre contenu ici...", buf, IM_ARRAYSIZE(buf));
        ImGui::InputFloat("Saisie nombre flottant", &fVal);
        ImGui::InputInt("Saisie entier", &iVal);
        ImGui::Spacing();
        ImGui::Text("Zone de texte multiligne :");
        ImVec2 multiSize = ImVec2(500, 80);
        ImGui::InputTextMultiline("##multi", bufMulti, IM_ARRAYSIZE(bufMulti), multiSize);
        ImGui::Spacing();

        // ========== 5. Curseurs & barres de glissement ==========
        ImGui::Text("===== Curseurs / Contrôles glissants =====");
        ImGui::SliderFloat("Curseur flottant", &fVal, 0.0f, 1.0f);
        ImGui::SliderInt("Curseur entier", &iVal, 0, 100);
        ImGui::DragFloat("Glisser flottant", &fVal, 0.01f);
        ImGui::DragInt("Glisser entier", &iVal, 1.0f);
        ImGui::Spacing();

        // ========== 6. Cases à cocher & boutons radio ==========
        ImGui::Text("===== Cases à cocher & boutons radio =====");
        ImGui::Checkbox("Case A", &checkBox1);
        ImGui::Checkbox("Case B", &checkBox2);
        ImGui::Text("Groupe radio :");
        ImGui::RadioButton("Option 1", &radioIdx, 0); ImGui::SameLine();
        ImGui::RadioButton("Option 2", &radioIdx, 1); ImGui::SameLine();
        ImGui::RadioButton("Option 3", &radioIdx, 2);
        ImGui::Spacing();

        // ========== 7. Liste déroulante combo ==========
        ImGui::Text("===== Liste déroulante Combo =====");
        const char* items[] = { "Option A", "Option B", "Option C", "Option D" };
        ImGui::Combo("Sélection déroulante", &comboSel, items, IM_ARRAYSIZE(items));
        ImGui::Spacing();

        // ========== 8. Sélecteur de couleur ==========
        ImGui::Text("===== Éditeur de couleur =====");
        ImGui::ColorEdit4("Couleur RGBA", (float*)&color);
        ImGui::ColorButton("Échantillon aperçu couleur", color);
        ImGui::Spacing();

        // ========== 9. Barre de progression & séparateurs ==========
        ImGui::Text("===== Barre de progression / Séparateurs =====");
        ImGui::ProgressBar(progress, ImVec2(300, 0));
        ImGui::Text("Valeur progression : %.2f", progress);
        ImGui::Separator(); // Ligne de séparation horizontale
        ImGui::Spacing();

        // ========== 10. Nœuds d'arbre repliables ==========
        ImGui::Text("===== Panneaux arbre repliables =====");
        if (ImGui::CollapsingHeader("Panneau repliable – Cliquez pour déplier"))
        {
            ImGui::Text("Contenu interne du panneau");
            ImGui::Button("Bouton dans le panneau");
        }
        if (ImGui::TreeNode("Nœud arbre"))
        {
            ImGui::BulletText("Sous-item 1");
            ImGui::BulletText("Sous-item 2");
            ImGui::TreePop();
        }
        ImGui::Spacing();

        // ========== 11. Barre d'onglets ==========
        ImGui::Text("===== Onglets / Barre d'onglets =====");
        ImGui::BeginTabBar("TabBar");
        if (ImGui::BeginTabItem("Onglet 1"))
        {
            ImGui::Text("Contenu de l'onglet 1");
            ImGui::EndTabItem();
        }
        if (ImGui::BeginTabItem("Onglet 2"))
        {
            ImGui::Text("Contenu de l'onglet 2");
            ImGui::EndTabItem();
        }
        ImGui::EndTabBar();
        ImGui::Spacing();

        // ========== 12. Widget tableau ==========
        ImGui::Text("===== Widget Tableau =====");
        if (ImGui::BeginTable("table1", 3, ImGuiTableFlags_Borders))
        {
            ImGui::TableSetupColumn("ID");
            ImGui::TableSetupColumn("Nom");
            ImGui::TableSetupColumn("Valeur");
            ImGui::TableHeadersRow();

            // Ligne 1
            ImGui::TableNextRow();
            ImGui::TableNextColumn(); ImGui::Text("1");
            ImGui::TableNextColumn(); ImGui::Text("Test A");
            ImGui::TableNextColumn(); ImGui::Text("%.2f", fVal);
            // Ligne 2
            ImGui::TableNextRow();
            ImGui::TableNextColumn(); ImGui::Text("2");
            ImGui::TableNextColumn(); ImGui::Text("Test B");
            ImGui::TableNextColumn(); ImGui::Text("%d", iVal);
            ImGui::EndTable();
        }
        ImGui::Spacing();

        // ========== 13. Menu contextuel clic droit ==========
        ImGui::Text("===== Menu clic droit (clic droit sur ce texte) =====");
        if (ImGui::IsItemClicked(ImGuiMouseButton_Right))
            ImGui::OpenPopup("RightMenu");
        if (ImGui::BeginPopup("RightMenu"))
        {
            ImGui::MenuItem("Élément contexte 1");
            ImGui::MenuItem("Élément contexte 2");
            ImGui::Separator();
            ImGui::MenuItem("Fermer le menu");
            ImGui::EndPopup();
        }
        ImGui::Spacing();

        // ========== 14. Fenêtre popup non modale ==========
        if (showPopupWin)
        {
            ImGui::OpenPopup("PopupWindow");
            showPopupWin = false;
        }
        if (ImGui::BeginPopup("PopupWindow"))
        {
            ImGui::Text("Popup non modal, la fenêtre principale reste manipulable");
            if (ImGui::Button("Fermer popup"))
                ImGui::CloseCurrentPopup();
            ImGui::EndPopup();
        }

        // ========== 15. Dialogue modal ==========
        if (ImGui::Button("Ouvrir dialogue modal"))
            showModal = true;
        if (showModal)
        {
            ImGui::OpenPopup("ModalDialog");
            showModal = false;
        }
        if (ImGui::BeginPopupModal("Dialogue modal", nullptr, ImGuiWindowFlags_AlwaysAutoResize))
        {
            ImGui::Text("Le modal verrouille la fenêtre principale ; vous devez d'abord le fermer");
            if (ImGui::Button("OK", ImVec2(120, 0)))
            {
                ImGui::CloseCurrentPopup();
            }
            ImGui::EndPopup();
        }

        ImGui::End();
        ImGui::PopStyleVar(2);

        ImGui::Render();
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
        glClearColor(0.12f, 0.12f, 0.12f, 1.f);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        glfwSwapBuffers(window);
    }

    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Langage du code : C++ (cpp)

Vous pouvez tester progressivement et apprendre l’utilisation de chaque widget.

La bibliothèque de widgets est très complète et répond parfaitement aux besoins de développement de logiciels utilitaires simples. Elle inclut des arbres repliables, des pages d’onglets, tous les contrôles de formulaire : zones de texte simple/multiligne, boutons radio, cases à cocher, listes déroulantes combo, barres de progression, panneaux repliables, tableaux, menus clic droit, sélecteurs de couleurs et bien plus encore. N’hésitez pas à les tester vous-même.