Penggunaan Widget Umum ImGui

Pertama-tama, kita akan menghapus semua widget dari pelajaran sebelumnya dan membuat jendela kosong minimal tanpa kontrol apa pun di dalamnya.

#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>  // Header yang dibutuhkan untuk dialog berkas

#include <iostream>
using namespace std;

// Atur font untuk memperbaiki karakter rusak yang tampil sebagai "??"
// Tambahkan jalur font yang sesuai dengan lingkungan OS kamu di sini, atau pakai jalur font bawaan sistem
void SetupFont(ImGuiIO& io)
{
    // Jalur font Mandarin yang umum di Windows
    const char* font_path = "C:/Windows/Fonts/msyh.ttc"; // Microsoft YaHei
    float font_size = 18.0f;

    // Muat rentang karakter Mandarin Sederhana yang sering dipakai
    ImVector<ImWchar> ranges;
    ImFontGlyphRangesBuilder builder;
    builder.AddRanges(io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
    builder.BuildRanges(&ranges);

    // Muat font kustom
    io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, ranges.Data);

    // Tambahkan rentang font tambahan untuk dukungan multibahasa jika perlu:
    // 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("Inisialisasi GLFW gagal\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, "Judul", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1);

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

    SetupFont(io); // Muat font untuk mengatasi teks yang rusak

    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("Judul", nullptr, window_flags);

        // Mulai area rendering widget

        // Akhir area widget

        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;
}Code language: C++ (cpp)

Sekarang kita akan membuat widget ImGui satu per satu.

Widget Teks

ImGui::Text("Halo dunia %d", 123);Code language: plaintext (plaintext)

Widget ini menampilkan teks dari kiri ke kanan dimulai dari sudut kiri atas.

Tombol

        // Gambar tombol; kode di dalam akan dijalankan saat diklik
        if (ImGui::Button("Simpan"))
        {
            // Kode di sini akan berjalan setelah tombol diklik
        }Code language: plaintext (plaintext)

Terdapat puluhan widget yang tersedia. Mari lihat kode demo lengkap di bawah yang menampilkan semua widget umum sekaligus.

#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;

// Atur font untuk memperbaiki karakter rusak yang tampil sebagai "??"
// Tambahkan jalur font yang sesuai dengan lingkungan OS kamu di sini, atau pakai jalur font bawaan sistem
void SetupFont(ImGuiIO& io)
{
    // Jalur font Mandarin yang umum di Windows
    const char* font_path = "C:/Windows/Fonts/msyh.ttc"; // Microsoft YaHei
    float font_size = 18.0f;

    // Muat rentang karakter Mandarin Sederhana yang sering dipakai
    ImVector<ImWchar> ranges;
    ImFontGlyphRangesBuilder builder;
    builder.AddRanges(io.Fonts->GetGlyphRangesChineseSimplifiedCommon());
    builder.BuildRanges(&ranges);

    // Muat font kustom
    io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, ranges.Data);

    // Tambahkan rentang font tambahan untuk dukungan multibahasa jika perlu:
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesJapanese());
    // io.Fonts->AddFontFromFileTTF(font_path, font_size, nullptr, io.Fonts->GetGlyphRangesKorean());
}

// ===================== Variabel global yang terhubung dengan widget =====================
char buf[256] = "Teks uji input satu baris";
char bufMulti[1024] = "Kotak teks multibaris\nBaris ke-2\nBaris ke-3 uji karakter Mandarin";
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("Inisialisasi GLFW gagal\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, "Demo Semua Widget Umum 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("Jendela Utama", nullptr, window_flags);

        // ========== 1. Bilah Menu Atas ==========
        if (ImGui::BeginMenuBar())
        {
            if (ImGui::BeginMenu("Berkas"))
            {
                if (ImGui::MenuItem("Baru", "Ctrl+N")) {}
                if (ImGui::MenuItem("Simpan", "Ctrl+S")) {}
                ImGui::Separator();
                if (ImGui::MenuItem("Keluar"))
                    glfwSetWindowShouldClose(window, true);
                ImGui::EndMenu();
            }
            if (ImGui::BeginMenu("Alat"))
            {
                if (ImGui::MenuItem("Buka Demo Popup"))
                    showPopupWin = true;
                ImGui::EndMenu();
            }
            ImGui::EndMenuBar();
        }
        ImGui::Spacing();

        // ========== 2. Widget Teks Dasar ==========
        ImGui::Text("===== Widget Teks =====");
        ImGui::Text("Teks Normal Halo dunia %d", 123);
        ImGui::TextColored(ImVec4(1, 0, 0, 1), "Teks Berwarna Merah");
        ImGui::TextDisabled("Teks Abu-abu Nonaktif");
        ImGui::BulletText("Teks titik 1");
        ImGui::BulletText("Teks titik 2");
        ImGui::Spacing();

        // ========== 3. Kelompok Tombol ==========
        ImGui::Text("===== Tombol =====");
        if (ImGui::Button("Tombol Normal"))
            cout << "Tombol normal diklik" << endl;
        ImGui::SameLine();
        if (ImGui::SmallButton("Tombol Kecil"))
            cout << "Tombol kecil diklik" << endl;
        ImGui::SameLine();
        if (ImGui::Button("Tombol Lebar", ImVec2(120, 0)))
            cout << "Tombol lebar kustom diklik" << endl;
        ImGui::Spacing();

        // ========== 4. Kolom Input ==========
        ImGui::Text("===== Widget Input =====");
        ImGui::InputText("Input Satu Baris", buf, IM_ARRAYSIZE(buf));
        ImGui::InputTextWithHint("Input Petunjuk", "Ketik konten di sini...", buf, IM_ARRAYSIZE(buf));
        ImGui::InputFloat("Input Bilangan Pecahan", &fVal);
        ImGui::InputInt("Input Bilangan Bulat", &iVal);
        ImGui::Spacing();
        ImGui::Text("Kotak Teks Multibaris:");
        ImVec2 multiSize = ImVec2(500, 80);
        ImGui::InputTextMultiline("##multi", bufMulti, IM_ARRAYSIZE(bufMulti), multiSize);
        ImGui::Spacing();

        // ========== 5. Slider & Bilah Seret ==========
        ImGui::Text("===== Slider / Kontrol Seret =====");
        ImGui::SliderFloat("Slider Pecahan", &fVal, 0.0f, 1.0f);
        ImGui::SliderInt("Slider Bulat", &iVal, 0, 100);
        ImGui::DragFloat("Seret Pecahan", &fVal, 0.01f);
        ImGui::DragInt("Seret Bulat", &iVal, 1.0f);
        ImGui::Spacing();

        // ========== 6. Kotak Centang & Tombol Radio ==========
        ImGui::Text("===== Kotak Centang & Tombol Radio =====");
        ImGui::Checkbox("Centang A", &checkBox1);
        ImGui::Checkbox("Centang B", &checkBox2);
        ImGui::Text("Grup Radio:");
        ImGui::RadioButton("Opsi 1", &radioIdx, 0); ImGui::SameLine();
        ImGui::RadioButton("Opsi 2", &radioIdx, 1); ImGui::SameLine();
        ImGui::RadioButton("Opsi 3", &radioIdx, 2);
        ImGui::Spacing();

        // ========== 7. Dropdown Combo ==========
        ImGui::Text("===== Dropdown Combo =====");
        const char* items[] = { "Opsi A", "Opsi B", "Opsi C", "Opsi D" };
        ImGui::Combo("Pilihan Dropdown", &comboSel, items, IM_ARRAYSIZE(items));
        ImGui::Spacing();

        // ========== 8. Pemilih Warna ==========
        ImGui::Text("===== Editor Warna =====");
        ImGui::ColorEdit4("Warna RGBA", (float*)&color);
        ImGui::ColorButton("Contoh Pratinjau Warna", color);
        ImGui::Spacing();

        // ========== 9. Bilah Progres & Pemisah ==========
        ImGui::Text("===== Bilah Progres / Pemisah =====");
        ImGui::ProgressBar(progress, ImVec2(300, 0));
        ImGui::Text("Nilai Progres: %.2f", progress);
        ImGui::Separator(); // Garis pemisah horizontal
        ImGui::Spacing();

        // ========== 10. Node Pohon Dapat Dilipat ==========
        ImGui::Text("===== Panel Pohon Dapat Dilipat =====");
        if (ImGui::CollapsingHeader("Panel Lipat – Klik untuk buka"))
        {
            ImGui::Text("Isi dalam panel");
            ImGui::Button("Tombol di dalam panel");
        }
        if (ImGui::TreeNode("Node Pohon"))
        {
            ImGui::BulletText("Sub-item 1");
            ImGui::BulletText("Sub-item 2");
            ImGui::TreePop();
        }
        ImGui::Spacing();

        // ========== 11. Bilah Tab ==========
        ImGui::Text("===== Tab / TabBar =====");
        ImGui::BeginTabBar("TabBar");
        if (ImGui::BeginTabItem("Tab 1"))
        {
            ImGui::Text("Isi Tab 1");
            ImGui::EndTabItem();
        }
        if (ImGui::BeginTabItem("Tab 2"))
        {
            ImGui::Text("Isi Tab 2");
            ImGui::EndTabItem();
        }
        ImGui::EndTabBar();
        ImGui::Spacing();

        // ========== 12. Widget Tabel ==========
        ImGui::Text("===== Widget Tabel =====");
        if (ImGui::BeginTable("table1", 3, ImGuiTableFlags_Borders))
        {
            ImGui::TableSetupColumn("ID");
            ImGui::TableSetupColumn("Nama");
            ImGui::TableSetupColumn("Nilai");
            ImGui::TableHeadersRow();

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

        // ========== 13. Menu Klik Kanan ==========
        ImGui::Text("===== Menu Klik Kanan (Klik kanan teks ini) =====");
        if (ImGui::IsItemClicked(ImGuiMouseButton_Right))
            ImGui::OpenPopup("RightMenu");
        if (ImGui::BeginPopup("RightMenu"))
        {
            ImGui::MenuItem("Item Konteks 1");
            ImGui::MenuItem("Item Konteks 2");
            ImGui::Separator();
            ImGui::MenuItem("Tutup Menu");
            ImGui::EndPopup();
        }
        ImGui::Spacing();

        // ========== 14. Jendela Popup Non-Modal ==========
        if (showPopupWin)
        {
            ImGui::OpenPopup("PopupWindow");
            showPopupWin = false;
        }
        if (ImGui::BeginPopup("PopupWindow"))
        {
            ImGui::Text("Popup non-modal, jendela utama masih bisa dioperasikan");
            if (ImGui::Button("Tutup Popup"))
                ImGui::CloseCurrentPopup();
            ImGui::EndPopup();
        }

        // ========== 15. Dialog Modal ==========
        if (ImGui::Button("Buka Dialog Modal"))
            showModal = true;
        if (showModal)
        {
            ImGui::OpenPopup("ModalDialog");
            showModal = false;
        }
        if (ImGui::BeginPopupModal("Dialog Modal", nullptr, ImGuiWindowFlags_AlwaysAutoResize))
        {
            ImGui::Text("Modal mengunci jendela utama; kamu harus tutup ini terlebih dahulu");
            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;
}Code language: C++ (cpp)

Kamu bisa bereksperimen perlahan dan mempelajari penggunaan setiap widget.

Pustaka widget ini sangat lengkap dan sepenuhnya memenuhi kebutuhan pengembangan perangkat lunak utilitas sederhana. Terdiri dari pohon lipat, halaman tab, semua kontrol formulir: kotak teks satu/multibaris, tombol radio, kotak centang, dropdown combo, bilah progres, panel lipat, tabel, menu klik kanan, pemilih warna dan masih banyak lagi. Silakan coba sendiri semuanya.