How to make an ImageButton selected (highlighted/focused) by default?

[wn2000]

I'm creating a UI for an embedded device. Most of the time it's expected that the user would use a game controller or keyboard to navigate the UI.
The UI contains several ImageButtons and a text area. When the program starts, I noticed that there's no widget highlighted, but pressing the arrow key once would highlight one of the buttons. What I want is to designate one button to receive the highlight upon program start. I see there's a SetItemDefaultFocus() call in the demo code. But it has no effect on the ImageButtons. It does work on normal Button.
Is there a way to achieve this?

[PathogenDavid]

It sounds like you might be looking for SetKeyboardFocusHere rather than SetItemDefaultFocus. IE:

if (ImGui::IsWindowAppearing())
    ImGui::SetKeyboardFocusHere();

ImGui::ImageButton(/* ... */);

---

Also for future reference, discussions should only be used for build/link/run/font issues only. Questions should be posted as issues.

[ocornut]

But it has no effect on the ImageButtons. It does work on normal Button.

My gut reaction reading this was that you may be mistaken, since Button() and ImageButton() use nearly identical code.
I tested this and it worked.

// 3. Show another simple window.
if (show_another_window)
{
    ImGui::Begin("Another Window", &show_another_window);   // Pass a pointer to our bool variable (the window will have a closing button that will clear the bool when clicked)
    ImGui::Text("Hello from another window!");
    if (ImGui::Button("Close Me"))
        show_another_window = false;

    ImTextureID my_tex_id = io.Fonts->TexID;
    if (ImGui::ImageButton("blah", my_tex_id, ImVec2(50, 50)))
        show_another_window = false;
    ImGui::SetItemDefaultFocus();

    if (ImGui::Button("Another button"))
        show_another_window = false;

    ImGui::End();
}

It sounds like you might be looking for SetKeyboardFocusHere rather than SetItemDefaultFocus. IE:
if (ImGui::IsWindowAppearing())
ImGui::SetKeyboardFocusHere();

SetItemDefaultFocus() achieves more or less the same thing, there are differences I forgot about right now but in essence it should be close to the same.

[PathogenDavid]

SetItemDefaultFocus() achieves more or less the same thing, there are differences I forgot about right now but in essence it should be close to the same.

You're right, I had a brain fart.

Although one of the differences seems to be that SetKeyboardFocusHere shows the nav highlight by default while SetItemDefaultFocus does not, which seems useful in OP's case.

[wn2000]

Thanks @PathogenDavid and @ocornut. SetKeyboardFocusHere worked for me. Not sure why SetItemDefaultFocus didn't work. Probably because I put the ImageButton inside another function as I wanted to put some text on top of it:

bool ImageButtonWithText(ImTextureID texture, const std::string &text, float x, float y, float w, float h)
{
    ImGui::SetCursorPos({x, y});
    bool clicked = ImGui::ImageButton(("Button_" + text).c_str(), texture, {w, h});
    ImVec2 text_size = ImGui::CalcTextSize(text.c_str());
    ImGui::SetCursorPos({x + (w - text_size.x) * 0.5f, y + (h - text_size.y) * 0.5f});
    ImGui::Text(text.c_str());
    return clicked;
}

[PathogenDavid]

Ah yeah, that would do it. Since SetItemDefaultFocus acts on the previous item (whereas SetKeyboardFocusHere acts on the next item by default) you were basically trying to focus the Text which isn't focusable so nothing happened.

You might be better off adding text by using ImGui::GetForegroundDrawList()->AddText instead so it doesn't create a separate widget.

("Button_" + text).c_str()

FYI this isn't actually necessary here, Text widgets don't have IDs so there's no ID conflict to avoid.

Also if you plan to keep using ImGui::Text instead of the draw list, you should probably use ImGui::TextUnformatted instead to avoid issues if someone uses a % in their button text.

[wn2000]

Since SetItemDefaultFocus acts on the previous item (whereas SetKeyboardFocusHere acts on the next item by default) you were basically trying to focus the Text which isn't focusable so nothing happened.

Nope. I thought of that but that doesn't seem to be the reason.
For example I tried this:

bool ImageButtonWithText(ImTextureID texture, const std::string &text, float x, float y, float w, float h, bool is_default_focused)
{
    ImGui::SetCursorPos({x, y});
    bool clicked = ImGui::ImageButton(("Button_" + text).c_str(), texture, {w, h});
    if (is_default_focused) ImGui::SetItemDefaultFocus();
    ...
}

But that didn't work either (no effect).

I do like the ImGui::GetForegroundDrawList()->AddText(...) approach to keep it as a single widget. But even with that, SetItemDefaultFocus() still didn't work for me. Not sure why...

I did observe a strange behavior with ImGui::GetForegroundDrawList()->AddText(...) combined with SetKeyboardFocusHere().
So in my original code I have this line

SetCursorPos({x + (w - text_size.x) * 0.5f, y + (h - text_size.y) * 0.5f});

to get the text center aligned in both x and y. That worked well with the "two widgets" approach. But with the ->AddText(...) approach, SetKeyboardFocusHere() seems to change the meaning of y.
For example, this works as expected (text center aligned):

if (ImageButtonWithText(...)) {
  ...
}
if (ImageButtonWithText(...)) {
  ...
}

But with the following code, text is shifted down. It appears that y now means the center of the ImageButton (x still behaves the same):

if (ImageButtonWithText(...)) {
  ...
}
if (first_loop) {
  SetKeyboardFocusHere();
  first_loop = false;
}
if (ImageButtonWithText(...)) {
  ...
}

And the shift of text happens on all ImageButtons (I guess that's because the effect was carried over in the 2nd loop onward).

And just for reference, my AddText version of ImageButtonWithText now looks like this:

bool ImageButtonWithText(ImTextureID texture, const std::string &text, float x, float y, float w, float h)
{
    ImGui::SetCursorPos({x, y});
    bool clicked = ImGui::ImageButton(("Button_" + text).c_str(), texture, {w, h});
    ImVec2 text_size = ImGui::CalcTextSize(text.c_str());
    ImGui::GetForegroundDrawList()->AddText(
        {x + (w - text_size.x) * 0.5f, y + (h - text_size.y) * 0.5f},
        ImGui::GetColorU32(ImGuiCol_Text),
        text.c_str());
    return clicked;
}

In any case, I have a working solution now, so thanks a lot for the help!