Membuat kalkulator penjumlahan sederhana dengan ImGui

Kita akan membuat fitur penjumlahan dengan dua kotak input angka, simbol + di tengah, dan tombol sama dengan. Setelah memasukkan dua angka lalu klik tombol =, hasil perhitungan akan muncul di kotak input ketiga.

Fitur ini sangat sederhana, namun dari contoh ini kita bisa mempelajari widget formulir dasar milik ImGui.

Pertama, lihat tangkapan layar program saat berjalan

Ini contoh kode yang sangat minimalis. Sebagian besar kode sama dengan contoh pelajaran sebelumnya, hanya bagian rendering antarmuka yang berbeda. Kita juga menambahkan variabel untuk menyimpan nilai angka dan mengganti tema menjadi mode terang agar mirip dengan aplikasi GUI desktop umum.

#pragma comment(linker, "/SUBSYSTEM:windows /ENTRY:mainCRTStartup")

#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>

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(500, 200, "Kalkulator Penjumlahan", nullptr, nullptr); // Ukuran dan judul jendela
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1);

    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
	ImGui::StyleColorsLight(); // Aktifkan tema warna terang

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

    // Variabel global kalkulator penjumlahan
    float num1 = 0.0f;    // Bilangan pertama yang dijumlahkan
    float num2 = 0.0f;    // Bilangan kedua yang dijumlahkan
    float result = 0.0f;  // Hasil penjumlahan dua bilangan

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

        // Judul kalkulator
        ImGui::Text("Masukkan dua angka"); // Teks statis, menempati satu baris penuh
	ImGui::Spacing();// Tambah jarak vertikal

        // Kotak input angka pertama, lebar 120 piksel
	ImGui::SetNextItemWidth(120);// Atur lebar widget berikutnya, tidak menampilkan konten apapun sendiri
	ImGui::InputFloat("##num1", &num1);// Kotak input bilangan pecah terikat variabel num1, label tersembunyi, satu baris sendiri

        // Gambar simbol plus di baris yang sama
	ImGui::SameLine(); // Widget selanjutnya digambar di baris yang sama; tanpa ini akan pindah baris otomatis
	ImGui::Text(" + "); // Simbol plus sejajar dengan kotak input pertama

        // Kotak input angka kedua
	ImGui::SameLine(); // Panggil sebelum setiap widget yang ingin sejajar horizontal
        ImGui::SetNextItemWidth(120);// Atur lebar kotak input kedua
        ImGui::InputFloat("##num2", &num2);

        // Tombol sama dengan, jalankan penjumlahan saat diklik
        ImGui::SameLine();
        if (ImGui::Button(" = ", ImVec2(40, 0)))
        {
            // Hitung total penjumlahan dan simpan ke variabel hasil
            result = num1 + num2;
        }

        // Kotak hasil hanya bisa dibaca, tampil dua angka desimal, tidak bisa diedit manual
        ImGui::SameLine();
        ImGui::SetNextItemWidth(180);
        ImGui::InputFloat("##result", &result, 0.0f, 0.0f, "%.2f", ImGuiInputTextFlags_ReadOnly);

        ImGui::End();

	// Kembalikan gaya sementara yang disimpan sebelumnya
        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)

Untuk mengaktifkan tema terang hanya ubah satu baris kode ini: ImGui::StyleColorsLight(); // Ubah antarmuka ke tema warna terang

Untuk menyesuaikan judul dan ukuran jendela edit baris ini: GLFWwindow* window = glfwCreateWindow(400, 60, “Kalkulator Penjumlahan”, nullptr, nullptr); // Tentukan lebar, tinggi dan teks judul jendela

ImGui::Text("Masukkan dua angka");

ImGui::Spacing(); // Buat jarak vertikal antara judul dan kotak input di bawahnyaCode language: PHP (php)

Baris ini menampilkan teks tetap di baris pertama, lalu sisipkan jarak vertikal di baris berikutnya.

Lihat komentar kode di atas untuk properti widget lainnya. Secara bawaan Text, InputFloat dan Button masing-masing menempati satu baris terpisah. Jika tidak ingin ganti baris, panggil ImGui::SameLine(); sebelum menggambar setiap elemen yang ingin sejajar mendatar.

Gunakan fungsi SetNextItemWidth() jika perlu menentukan lebar widget berikutnya secara manual.

Cara Kerja Klik Tombol

if (ImGui::Button(" = ", ImVec2(40, 0)))
 {
            // Hitung jumlah dua bilangan dan simpan ke variabel hasil
            result = num1 + num2;
 }Code language: C++ (cpp)

Dalam potongan kode ini, ImGui::Button(” = “, ImVec2(40, 0)) membuat tombol interaktif. Parameter pertama adalah tulisan di tombol, parameter kedua menentukan lebar dan tinggi; tinggi bernilai 0 berarti ukuran akan menyesuaikan widget secara otomatis.

Fungsi ini hanya mengembalikan nilai true jika klik sempurna (tekan lalu lepaskan mouse di area tombol), di semua kondisi lain akan mengembalikan false. Jika nilai yang dikembalikan true, seluruh kode di dalam kurung kurawal {} akan dijalankan.

Bayangkan seluruh proses sebagai loop rendering yang terus berulang. Antarmuka diperbarui tiap frame, semua kode di dalam while akan berjalan setiap kali refresh. Jika pengguna tidak melakukan aksi apapun, tampilan tiap frame akan sama persis. Jika di satu frame pengguna mengklik tombol, ImGui::Button() akan mengembalikan true dan logika perhitungan akan dieksekusi.

Kode di dalam tombol menjumlahkan dua nilai yang terikat ke kotak input, menyimpan total ke variabel result lalu menggambar kotak hasil di baris yang sama.

ImGui::SameLine();
ImGui::SetNextItemWidth(180);
ImGui::InputFloat("##result", &result, 0.0f, 0.0f, "%.2f", ImGuiInputTextFlags_ReadOnly);Code language: C++ (cpp)

Kode ini tetap berada di baris yang sama dengan tombol sama dengan dan menampilkan hasil penjumlahan di kotak input ketiga yang diatur hanya bisa dibaca.

Setelah satu frame selesai digambar, pada refresh berikutnya hasil sebelumnya akan tetap terlihat jika pengguna tidak melakukan tindakan baru.

Mekanisme rendering ini sama persis dengan cara kerja video game, animasi game juga dibuat dengan sistem refresh frame berulang seperti ini.