imgui icon indicating copy to clipboard operation
imgui copied to clipboard

Color too dark custom checkbox color fill

Open Raplhs opened this issue 1 year ago • 2 comments
trafficstars

Version/Branch of Dear ImGui:

Version 1.96, Branch: master

Back-ends:

imgui_widgets.cpp

Compiler, OS:

Windows 10

Full config/build information:

No response

Details:

My issue: I have a custom filled checkbox instead of default, it fills with a color when clicked.

However the color I defined is clearly green, but when I compile and click the box, it is more DARK green. I don't know if this can be changed, or imgui colors have to be improved.

Please if there is a better option to make this checkbox the real proper green and not dark green, tell me.

Screenshots/Video:

dark green problem clicked1

the value I defined gren color

the real color brightness of the value real gren

Minimal, Complete and Verifiable Example code:

bool ImGui::Checkbox(const char* label, bool* v)
{
    ImGuiWindow* window = GetCurrentWindow();
    if (window->SkipItems)
        return false;

    ImGuiContext& g = *GImGui;
    const ImGuiStyle& style = g.Style;
    const ImGuiID id = window->GetID(label);
    const ImVec2 label_size = CalcTextSize(label, NULL, true);

    const float square_sz = GetFrameHeight() * 0.5f; // Half the usual size
    const float vertical_alignment = (label_size.y - square_sz) * 0.5f; // Calculate alignment to center checkbox with text
    const ImVec2 pos = window->DC.CursorPos + ImVec2(0, vertical_alignment); // Adjust position for vertical alignment
    const ImRect total_bb(pos, pos + ImVec2(square_sz + style.ItemInnerSpacing.x + label_size.x, label_size.y + style.FramePadding.y * 2.0f)); // Adjusted size for proper alignment
    ItemSize(total_bb, style.FramePadding.y);
    if (!ItemAdd(total_bb, id))
    {
        IMGUI_TEST_ENGINE_ITEM_INFO(id, label, g.LastItemData.StatusFlags | ImGuiItemStatusFlags_Checkable | (*v ? ImGuiItemStatusFlags_Checked : 0));
        return false;
    }

    bool hovered, held;
    bool pressed = ButtonBehavior(total_bb, id, &hovered, &held);
    if (pressed)
    {
        *v = !(*v);
        MarkItemEdited(id);
    }

    const ImRect check_bb(pos, pos + ImVec2(square_sz, square_sz));
    RenderNavHighlight(total_bb, id);
    ImU32 check_col = *v ? IM_COL32(0, 255, 0, 255) : IM_COL32(0, 0, 0, 0); // Brightest red color
    window->DrawList->AddRectFilled(check_bb.Min, check_bb.Max, check_col, style.FrameRounding); // Fill the checkbox with color

    // Remove the conditional rendering based on hovered or held
    RenderFrame(check_bb.Min, check_bb.Max, GetColorU32(ImGuiCol_FrameBg), true, style.FrameRounding);

    ImVec2 label_pos = ImVec2(check_bb.Max.x + style.ItemInnerSpacing.x, pos.y - vertical_alignment); // Adjusted position for vertical alignment
    if (g.LogEnabled)
        LogRenderedText(&label_pos, *v ? "[x]" : "[ ]");
    if (label_size.x > 0.0f)
        RenderText(label_pos, label);

    IMGUI_TEST_ENGINE_ITEM_INFO(id, label, g.LastItemData.StatusFlags | ImGuiItemStatusFlags_Checkable | (*v ? ImGuiItemStatusFlags_Checked : 0));
    return pressed;
}

Raplhs avatar May 18 '24 23:05 Raplhs

if the green is not a good representation, here are some more screenshots for a bright pink, but comes out as purple.

coded rgb value another value

the real color the real color

the color on imgui the problem

Raplhs avatar May 18 '24 23:05 Raplhs

It seems you're drawing something over the color-filled rectangle.

// Remove the conditional rendering based on hovered or held
RenderFrame(check_bb.Min, check_bb.Max, GetColorU32(ImGuiCol_FrameBg), true, style.FrameRounding);

Can you remove corresponding line and see if the color is still darker?

p.s. Imgui recommends not to use RenderFrame() on user code. https://github.com/ocornut/imgui/blob/aa5a6098ee24ca30b3e0a180282619777e95fc67/imgui_internal.h#L3409-L3417

ruby3141 avatar May 20 '24 06:05 ruby3141

It seems you're drawing something over the color-filled rectangle. RenderFrame(check_bb.Min, check_bb.Max, GetColorU32(ImGuiCol_FrameBg), true, style.FrameRounding)

Correct, thanks for spotting that.

(also technically color space depends on your backend, swap-chain and other esoteric features that may be part of your app or driver so it's a wider issue and there's no such thing as a "real" color. But here your issue is clearly that you are drawing something over your color anyhow)

ocornut avatar May 23 '24 18:05 ocornut