Tabs system implementation

[scottmudge]

Just curious if anyone wanted my modular implementation of tabs for ImGui.

Code like this:

ImGui::BeginTabBar("Settings#left_tabs_bar");
if (ImGui::AddTab("General")){
    bool fullscreen = mGUICfg->fullScreen.value;
    if(ImGui::Checkbox("Fullscreen Mode",&fullscreen)){
        mGUICfg->toggleFullscreenMode = true;
    }
    if(ImGui::Checkbox("Enable Multisampling",&mGUICfg->enableMultisampling.value)){
        mGUICfg->settingsChanged = true;
    }

    if(ImGui::SliderInt("MSAA Count",(int*)&mGUICfg->multisampleCount.value,mGUICfg->multisampleCount.lowerLimit,mGUICfg->multisampleCount.upperLimit))
        mGUICfg->settingsChanged = true;
}
if (ImGui::AddTab("GUI")){
    ImGui::Text("Tab 2");
}
if (ImGui::AddTab("Tab Name")){
    ImGui::Text("Tab 3");
}
if (ImGui::AddTab("Tab Name")){
    ImGui::Text("Tab 4");
}
ImGui::EndTabBar();

ImGui::Dummy(ImVec2(0,20));

ImGui::BeginTabBar("#Additional Parameters");
float value = 0.0f;
if (ImGui::AddTab("Tab Name2")){
    ImGui::SliderFloat("Slider",&value,0,1.0f);
}
if (ImGui::AddTab("Tab Name3")){
    ImGui::Text("Tab 2");
}
if (ImGui::AddTab("Tab Name4")){
    ImGui::Text("Tab 3");
}
if (ImGui::AddTab("Tab Name5")){
    ImGui::Text("Tab 4");
}
ImGui::EndTabBar();

Yields results like this:

Size and spacing of the tabs adjusts automatically to font sizes, number of tabs, etc. Dynamically changing the number of tabs (removing/adding at any time) is also supported.

Just seeing if the community wanted it. It should be forward compatible, as it extends ImGui by using the imgui_user.h and imgui_user.cpp files.

[ocornut]

Linking to #261
It would be good to post it as a reference, yes. Note that there is no reason of using the sort-of old imgui_user.h system, you can call your files imgui_tabs.h imgui_tabs.cpp and include imgui_internal.h in the .cpp file.

Luckily I should return back to imgui from mid-april so there is a chance I will finally tackle this and see how we could derive an official feature/extension from the various existing implementations.

[scottmudge]

Alright I moved it to a separate header/source file: https://github.com/ScottMudge/imgui_tabs

[Flix01]

@scottmudge : your tab system looks good to me (and code seems compact enough)!
The only problem is that it needs STL (std::vector and std::string), that Dear ImGui does not use by default.
But for all the projects that already use STL your tabs are good and useful.

[scottmudge]

@Flix01 Fair point, I used STL for simplicity's sake while reasoning through how it would work, but I'll go ahead and replace the STL functions and structures with more portable counterparts and add a subdirectory for each flavor in the repo.

[ocornut]

If you fork it in two it will be annoying for you to maintain it tho, so I'd suggest just keeping one version for sanity purpose! If you don't mind I may grab some parts and ideas from this and other implementations to make one later.

[scottmudge]

Good point, suppose I'll back up the STL version and move forward without STL. And for sure, take from it whatever you'd like!

[ebachard]

@scottmudge

Thanks a lot for your tabs, working very well. As proof of concept, a little screenshot, including ImGui::Image() + vertical sliders (as testing purpose).

@ocornut : thanks again, your dear ImGui is impressive, and I didn't test everything yet (and I'm very far to).

Last but not least, my next try will be around SDL_gpu from Jonathan Dearborn ( see https://github.com/grimfang4/sdl-gpu). People who tested should recognize the image ;-)

The relevant code is very simple (limited to tabs use there):

''''
ImGui::Begin("miniDart 0.4.1");
ImGui::Dummy(ImVec2(0,20));

ImGui::BeginTabBar("#miniDart test des onglets");

if (ImGui::AddTab("Atelier retard"))
{
    ImGui::Text(" ");
    ImGui::Text("Exemple : séquençage vidéo");
    ImGui::SliderFloat("Difficulté estimée",&value,0,1.0f);
}

if (ImGui::AddTab("Atelier analyse"))
{
    ImGui::Text(" ");
    ImGui::Text("Exemple : slow-motion, trace image par image, annotations ...");
}

if (ImGui::AddTab("Préférences"))
{
    ImGui::Text(" ");
    ImGui::Text("Configuration de la webcam");
    ImGui::SliderFloat("Correction de la luminance",&value2,0,1.0f);
}

if (ImGui::AddTab("Crédits"))
{
    ImGui::Text("moi !");
    ImGui::Text("les autres !");
}

if (ImGui::AddTab("Aide"))
{
    ImGui::Text("Cette page permet de mieux utiliser miniDart.");

    backgroundTexId = glConvertMatToTexture(backgroundImage);
    ImGui::Image((void *)backgroundTexId, ImVec2(256, 256), ImVec2(0,0), ImVec2(1,1), 
                            ImColor(255,255,255,255), ImColor(255,255,255,255));

    ImGui::SameLine();
    ImGui::Text("          ");
    ImGui::SameLine();
    static float values[7] = { 0.0f, 0.60f, 0.35f, 0.9f, 0.70f, 0.20f, 0.0f };
    ImGui::PushID("set1");
    for (int i = 0; i < 7; i++)
    {
        if (i > 0) ImGui::SameLine();
        ImGui::PushID(i);
        ImGui::PushStyleColor(ImGuiCol_FrameBg, ImColor::HSV(i/7.0f, 0.5f, 0.5f));
        ImGui::PushStyleColor(ImGuiCol_FrameBgHovered, ImColor::HSV(i/7.0f, 0.6f, 0.5f));
        ImGui::PushStyleColor(ImGuiCol_FrameBgActive, ImColor::HSV(i/7.0f, 0.7f, 0.5f));
        ImGui::PushStyleColor(ImGuiCol_SliderGrab, ImColor::HSV(i/7.0f, 0.9f, 0.9f));

// ImGui::VSliderFloat("##v", ImVec2(18,160), &values[i], 0.0f, 1.0f, "");
ImGui::VSliderFloat("##v", ImVec2(20,256), &values[i], 0.0f, 1.0f, "");
if (ImGui::IsItemActive() || ImGui::IsItemHovered())
ImGui::SetTooltip("%.3f", values[i]);
ImGui::PopStyleColor(4);
ImGui::PopID();
}
ImGui::PopID();
}

ImGui::EndTabBar();
ImGui::End();

''''

[ebachard]

Important : to avoid leaks, clean the textureID just after ImGui::Render() :

``
ImGui::Render();

// both seem to be equivalent in runtime => investigate
// SDL_GL_SwapWindow(window);
SDL_RenderPresent(renderer);

if (backgroundTexId != 0)
    glDeleteTextures(1, &backgroundTexId);

// (...) end of loop

``

[ebachard]

@scottmudge

There is an issue and I propose a fix. Since I don't know how to create a pull request, please have a look at https://github.com/ebachard/imgui_tabs

For the record, I'll attach a screenshot showing how it works now in an issue I'll create, directly on your repo.

[ocornut]

Closing this thread as a duplicate of #261 (and I made a post there to refer to this one). I started working an an officially maintained implementation of this. I don't yet know how it will be distributed, and I want to encourage extensions (just like the one you did), so it might end up in its own repository eventually.

Thanks Scott for working on it :)