New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs system implementation #1083

Closed
scottmudge opened this Issue Mar 31, 2017 · 10 comments

Comments

4 participants
@scottmudge

scottmudge commented Mar 31, 2017

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:
alt text

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

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Mar 31, 2017

Owner

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.

Owner

ocornut commented Mar 31, 2017

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

This comment has been minimized.

Show comment
Hide comment
@scottmudge

scottmudge Apr 1, 2017

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

scottmudge commented Apr 1, 2017

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

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Apr 1, 2017

@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.

Flix01 commented Apr 1, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@scottmudge

scottmudge Apr 1, 2017

@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.

scottmudge commented Apr 1, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Apr 1, 2017

Owner

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.

Owner

ocornut commented Apr 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@scottmudge

scottmudge Apr 1, 2017

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!

scottmudge commented Apr 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ebachard

ebachard May 10, 2017

@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).

imgui_1 50wip tabs imgui image vertsliders

@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 commented May 10, 2017

@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).

imgui_1 50wip tabs imgui image vertsliders

@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

This comment has been minimized.

Show comment
Hide comment
@ebachard

ebachard May 10, 2017

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 commented May 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ebachard

ebachard Jul 21, 2017

@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.

ebachard commented Jul 21, 2017

@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 ocornut referenced this issue Oct 23, 2017

Open

Tabs #261

@ocornut ocornut added the enhancement label Oct 23, 2017

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Oct 23, 2017

Owner

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 :)

Owner

ocornut commented Oct 23, 2017

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment