Skip to content

Toggles module

Stanislav Vasilev edited this page Apr 1, 2023 · 17 revisions

The imgui_toggle library, adds toggle widgets to dear imgui, like these:

toggle

Enabling the module

To enable the toggles module, you can either hardcode the USE_TOGGLES_MODULE option in your CMakeLists.txt file by finding the following line:

option(USE_TOGGLES_MODULE "Use the plotting module" OFF)

and modifying the line to look like this:

option(USE_TOGGLES_MODULE "Use the plotting module" ON)

Alternatively, you can also generate trough the CMake CLI:

cmake .. -DCMAKE_BUILD_TYPE=RELEASE -DUSE_TOGGLES_MODULE=ON

Next, in your source file, include the Modules.hpp header:

#include <Modules/Modules.hpp>

Testing out the module

In one of your widgets, add the following code to your tick function:

const ImVec4 green(0.16f, 0.66f, 0.45f, 1.0f);
const ImVec4 green_hover(0.0f, 1.0f, 0.57f, 1.0f);

const ImVec4 gray_dim(0.45f, 0.45f, 0.45f, 1.0f);
const ImVec4 gray(0.65f, 0.65f, 0.65f, 1.0f);

// use some lovely gray backgrounds for "off" toggles
// the default will use your theme's frame background colors.
ImGui::PushStyleColor(ImGuiCol_FrameBg, gray_dim);
ImGui::PushStyleColor(ImGuiCol_FrameBgHovered, gray);

static bool values[] = { true, true, true, true, true, true, true, true };
size_t value_index = 0;

const ImVec4 salmon(1.0f, 0.43f, 0.35f, 1.0f);
const ImVec4 green_shadow(0.0f, 1.0f, 0.0f, 0.4f);

// a default and default animated toggle
ImGui::Toggle("Default Toggle", &values[value_index++]);
ImGui::Toggle("Animated Toggle", &values[value_index++], ImGuiToggleFlags_Animated);

// this toggle draws a simple border around it's frame and knob
ImGui::Toggle("Bordered Knob", &values[value_index++], ImGuiToggleFlags_Bordered, 1.0f);

// this toggle draws a simple shadow around it's frame and knob
ImGui::PushStyleColor(ImGuiCol_BorderShadow, green_shadow);
ImGui::Toggle("Shadowed Knob", &values[value_index++], ImGuiToggleFlags_Shadowed, 1.0f);

// this toggle draws the shadow & and the border around it's frame and knob.
ImGui::Toggle("Bordered + Shadowed Knob", &values[value_index++], ImGuiToggleFlags_Bordered | ImGuiToggleFlags_Shadowed, 1.0f);
ImGui::PopStyleColor(1);

// this toggle uses stack-pushed style colors to change the way it displays
ImGui::PushStyleColor(ImGuiCol_Button, green);
ImGui::PushStyleColor(ImGuiCol_ButtonHovered, green_hover);
ImGui::Toggle("Green Toggle", &values[value_index++]);
ImGui::PopStyleColor(2);

ImGui::Toggle("Toggle with A11y Labels", &values[value_index++], ImGuiToggleFlags_A11y);

// this toggle shows no label
ImGui::Toggle("##Toggle With Hidden Label", &values[value_index++]);

// pop the FrameBg/FrameBgHover color styles
ImGui::PopStyleColor(2);

after compiling and running, the result should look like this:

image

Learning the module

To learn more about this third party library, check out the imgui_toggle github repository

Clone this wiki locally