-
-
Notifications
You must be signed in to change notification settings - Fork 9.9k
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 #261
Comments
I've actually made a slight tweak which to the gist which creates a child region before calling into the gui handler. This allows the tab bar to always be visible when the tab contents are scrollable! |
Functionality wise if you use a set of RadioButton() widgets you are getting the same feature as basic tab (apart from re-ordering). So proper tab would have to render differently than RadioButton() and allow for more natural ordering and horizontal scrolling. What else would be desirable? Not sure why you have both the selectables and a popup menu here (I suppose the popup menu helps if you have too many tabs, for the lack of arrows to scroll horizontally). For the column conflicting you can either name the columnset or just do a PushId()/PopId() encompassing the entire tab content. What assert did you get in the column code? I recall there was an id bug which would led to asserts but it was fixed more than two months ago. |
That's all I can think of right now!
That is the only reason. It was the simplest solution I could come up with to be able to get to all the tabs without forcing you to resize the window to see all of them. With respect to the column assert, I'd have to go back and try to recollect what I was doing exactly, but it was basically me doing a ImGui::GetColumnOffset() and ImGui::SetColumnOffset() just before and after the call to the gui handler, like this:
And the assertion would occur inside one of the get/set column offsets. Clearly this was just my fault, because there's no guarantee that any columns even exist when I call these functions at these locations. This was a really poorly thought out attempt at solving this problem anyways... I just tried your suggestion with the pushing IDs and that totally solves it. The reason why it didn't work for me was because I was pushing the same string for all the tabs. I changed it so that when I create the child region, I send the tab name instead so each tab can have their own ID space. Columns don't interfere now! |
Good to hear. Let me know if you spot an assert next time, they shouldn't happen in that sort of use case. Seems like you are losing lots of horizontal space with large widgets, I've seen this problem appears frequently, there's not a single answer unfortunately. Perhaps use more DragFloat, fit them two columns (save vertical space), include the label in the format string instead. Maybe you can allow to resize the game viewport to take say 75% of the space so that the rest is always free for ui, matching the typical Unity layout. If you have really large list e.g. for filename you can also consider using a smaller font such as ProggyTiny for those panels as well. |
Hi, I have create a simple class that help to create a set of tabs. It can be easily converted into a ImGUI full version. Just hope that this code can help someone ;-) class ImGuiTab
}; Example of use:
|
New code from @krys-spectralpixel from #427
|
@krys-spectralpixel : I have modified your code slightly, trying to include dynamic layout (useful in windows without horizontal scrollbars). It works, but the calculation of the widths should be improved. namespace ImGui {
IMGUI_API bool TabLabels(int numTabs, const char** tabLabels, int& selectedIndex, const char** tabLabelTooltips, bool autoLayout, int *pOptionalHoveredIndex) {
ImGuiStyle& style = ImGui::GetStyle();
const ImVec2 itemSpacing = style.ItemSpacing;
const ImVec4 color = style.Colors[ImGuiCol_Button];
const ImVec4 colorActive = style.Colors[ImGuiCol_ButtonActive];
const ImVec4 colorHover = style.Colors[ImGuiCol_ButtonHovered];
style.ItemSpacing.x = 1;
style.ItemSpacing.y = 1;
if (numTabs>0 && (selectedIndex<0 || selectedIndex>=numTabs)) selectedIndex = 0;
if (pOptionalHoveredIndex) *pOptionalHoveredIndex = -1;
// Parameters to adjust to make autolayout work as expected:----------
// The correct values are probably the ones in the comments, but I took some margin so that they work well
// with a (medium size) vertical scrollbar too [Ok I should detect its presence and use the appropriate values...].
const float btnOffset = 2.f*style.FramePadding.x; // [2.f*style.FramePadding.x] It should be: ImGui::Button(text).size.x = ImGui::CalcTextSize(text).x + btnOffset;
const float sameLineOffset = 2.f*style.ItemSpacing.x; // [style.ItemSpacing.x] It should be: sameLineOffset = ImGui::SameLine().size.x;
const float uniqueLineOffset = 2.f*style.WindowPadding.x; // [style.WindowPadding.x] Width to be sutracted by windowWidth to make it work.
//--------------------------------------------------------------------
float windowWidth = 0.f,sumX=0.f;
if (autoLayout) windowWidth = ImGui::GetWindowWidth() - uniqueLineOffset;
bool selection_changed = false;
for (int i = 0; i < numTabs; i++)
{
// push the style
if (i == selectedIndex)
{
style.Colors[ImGuiCol_Button] = colorActive;
style.Colors[ImGuiCol_ButtonActive] = colorActive;
style.Colors[ImGuiCol_ButtonHovered] = colorActive;
}
else
{
style.Colors[ImGuiCol_Button] = color;
style.Colors[ImGuiCol_ButtonActive] = colorActive;
style.Colors[ImGuiCol_ButtonHovered] = colorHover;
}
ImGui::PushID(i); // otherwise two tabs with the same name would clash.
if (!autoLayout) {if (i>0) ImGui::SameLine();}
else if (sumX > 0.f) {
sumX+=sameLineOffset; // Maybe we can skip it if we use SameLine(0,0) below
sumX+=ImGui::CalcTextSize(tabLabels[i]).x+btnOffset;
if (sumX>windowWidth) sumX = 0.f;
else ImGui::SameLine();
}
// Draw the button
if (ImGui::Button(tabLabels[i])) {selection_changed = (selectedIndex!=i);selectedIndex = i;}
if (autoLayout && sumX==0.f) {
// First element of a line
sumX = ImGui::GetItemRectSize().x;
}
if (pOptionalHoveredIndex) {
if (ImGui::IsItemHovered()) {
*pOptionalHoveredIndex = i;
if (tabLabelTooltips && tabLabelTooltips[i] && strlen(tabLabelTooltips[i])>0) ImGui::SetTooltip("%s",tabLabelTooltips[i]);
}
}
else if (tabLabelTooltips && tabLabelTooltips[i] && ImGui::IsItemHovered() && strlen(tabLabelTooltips[i])>0) ImGui::SetTooltip("%s",tabLabelTooltips[i]);
ImGui::PopID();
}
// Restore the style
style.Colors[ImGuiCol_Button] = color;
style.Colors[ImGuiCol_ButtonActive] = colorActive;
style.Colors[ImGuiCol_ButtonHovered] = colorHover;
style.ItemSpacing = itemSpacing;
return selection_changed;
}
} // namespace ImGui Usage example: ImGui::Text("Tabs (based on the code by krys-spectralpixel):");
static const char* tabNames[] = {"Render","Layers","Scene","World","Object","Constraints","Modifiers","Data","Material","Texture","Particle","Physics"};
static const int numTabs = sizeof(tabNames)/sizeof(tabNames[0]);
static const char* tabTooltips[numTabs] = {"Render Tab Tooltip","","","","Object Type Tooltip","","","","","Tired to add tooltips...",""};
static int selectedTab = 0;
static int optionalHoveredTab = 0;
/*const bool tabSelectedChanged =*/ImGui::TabLabels(numTabs,tabNames,selectedTab,tabTooltips,true,&optionalHoveredTab);
ImGui::Text("\nTab Page For Tab: \"%s\" here.\n",tabNames[selectedTab]);
if (optionalHoveredTab>=0) ImGui::Text("Mouse is hovering Tab Label: \"%s\".\n\n",tabNames[optionalHoveredTab]); It would be nice if we could fix it (and maybe add tab reordering functionality through drag and drop). EDIT: made some changes suggested by the posts following this code. However now this code is more like a snippet to be used as a reference rather than a possible extension to the library. EDIT again: I've just posted an extended version here: https://gist.github.com/Flix01/3bc3d7b3d996582e034e |
Looks nice 👍 |
Some ideas
|
True (with my current code we can't add a tab-label popup menu for example).
True. I usually use "persistent storage" or "not owned" inside C++ classes when strings are not copied to prevent users from passing temporary strings, but there's no need to use it here.
Yes, I was thinking about displaying it manually over the button rectangle (and maybe adding an ItemAdd(), or something like that, to support hovering on it), but I don't know if it would work and that is an advanced task for now.
Yes.
Maybe we can add some "tab-specific" style variables, or just leave the user override the "Button" style variables. |
That would be covered by #404, need some refactoring but not a very big amount. Button size like any framed object is by default TextSize + FramePadding*2. After the Button call you can also call GetItemRectSize(). |
Perfect! EDIT: I renamed the arguments, the method name and changed the widths in the code above, in case someone finds it useful. EDIT again: I've just posted an extended version here: https://gist.github.com/Flix01/3bc3d7b3d996582e034e |
Question. Is this code implemented in the new source or is it simple I will have to merge in? I prefer tab windows for a cleaner interface look. |
I've simplified and cleaned up that snippet above Feat. simplified API, no tooltips and sane default options (and colors :) Thanks to everyone involved! // Based on the code by krys-spectralpixel+Flix01
// [ref] https://github.com/ocornut/imgui/issues/261
#pragma once
#include <imgui.h>
namespace ImGui {
/*
tabLabels: name of all tabs involved
tabSize: number of elements
tabIndex: holds the current active tab
tabOrder: optional array of integers from 0 to tabSize-1 that maps the tab label order. If one of the numbers is replaced by -1 the tab label is not visible (closed). It can be read/modified at runtime.
// USAGE EXAMPLE
static const char* tabNames[] = {"First tab","Second tab","Third tab"};
static int tabOrder[] = {0,1,2};
static int tabSelected = 0;
const bool tabChanged = ImGui::TabLabels(tabNames,sizeof(tabNames)/sizeof(tabNames[0]),tabSelected,tabOrder);
ImGui::Text("\nTab Page For Tab: \"%s\" here.\n",tabNames[tabSelected]);
*/
IMGUI_API bool TabLabels(const char **tabLabels, int tabSize, int &tabIndex, int *tabOrder=NULL) {
ImGuiStyle& style = ImGui::GetStyle();
const ImVec2 itemSpacing = style.ItemSpacing;
const ImVec4 color = style.Colors[ImGuiCol_Button];
const ImVec4 colorActive = style.Colors[ImGuiCol_ButtonActive];
const ImVec4 colorHover = style.Colors[ImGuiCol_ButtonHovered];
const ImVec4 colorText = style.Colors[ImGuiCol_Text];
style.ItemSpacing.x = 1;
style.ItemSpacing.y = 1;
const ImVec4 colorSelectedTab = ImVec4(color.x,color.y,color.z,color.w*0.5f);
const ImVec4 colorSelectedTabHovered = ImVec4(colorHover.x,colorHover.y,colorHover.z,colorHover.w*0.5f);
const ImVec4 colorSelectedTabText = ImVec4(colorText.x*0.8f,colorText.y*0.8f,colorText.z*0.8f,colorText.w*0.8f);
if (tabSize>0 && (tabIndex<0 || tabIndex>=tabSize)) {
if (!tabOrder) tabIndex = 0;
else tabIndex = -1;
}
float windowWidth = 0.f,sumX=0.f;
windowWidth = ImGui::GetWindowWidth() - style.WindowPadding.x - (ImGui::GetScrollMaxY()>0 ? style.ScrollbarSize : 0.f);
static int draggingTabIndex = -1;int draggingTabTargetIndex = -1; // These are indices inside tabOrder
static ImVec2 draggingtabSize(0,0);
static ImVec2 draggingTabOffset(0,0);
const bool isMMBreleased = ImGui::IsMouseReleased(2);
const bool isMouseDragging = ImGui::IsMouseDragging(0,2.f);
int justClosedTabIndex = -1,newtabIndex = tabIndex;
bool selection_changed = false;bool noButtonDrawn = true;
for (int j = 0,i; j < tabSize; j++)
{
i = tabOrder ? tabOrder[j] : j;
if (i==-1) continue;
if (sumX > 0.f) {
sumX+=style.ItemSpacing.x; // Maybe we can skip it if we use SameLine(0,0) below
sumX+=ImGui::CalcTextSize(tabLabels[i]).x+2.f*style.FramePadding.x;
if (sumX>windowWidth) sumX = 0.f;
else ImGui::SameLine();
}
if (i != tabIndex) {
// Push the style
style.Colors[ImGuiCol_Button] = colorSelectedTab;
style.Colors[ImGuiCol_ButtonActive] = colorSelectedTab;
style.Colors[ImGuiCol_ButtonHovered] = colorSelectedTabHovered;
style.Colors[ImGuiCol_Text] = colorSelectedTabText;
}
// Draw the button
ImGui::PushID(i); // otherwise two tabs with the same name would clash.
if (ImGui::Button(tabLabels[i])) {selection_changed = (tabIndex!=i);newtabIndex = i;}
ImGui::PopID();
if (i != tabIndex) {
// Reset the style
style.Colors[ImGuiCol_Button] = color;
style.Colors[ImGuiCol_ButtonActive] = colorActive;
style.Colors[ImGuiCol_ButtonHovered] = colorHover;
style.Colors[ImGuiCol_Text] = colorText;
}
noButtonDrawn = false;
if (sumX==0.f) sumX = style.WindowPadding.x + ImGui::GetItemRectSize().x; // First element of a line
if (ImGui::IsItemHoveredRect()) {
if (tabOrder) {
// tab reordering
if (isMouseDragging) {
if (draggingTabIndex==-1) {
draggingTabIndex = j;
draggingtabSize = ImGui::GetItemRectSize();
const ImVec2& mp = ImGui::GetIO().MousePos;
const ImVec2 draggingTabCursorPos = ImGui::GetCursorPos();
draggingTabOffset=ImVec2(
mp.x+draggingtabSize.x*0.5f-sumX+ImGui::GetScrollX(),
mp.y+draggingtabSize.y*0.5f-draggingTabCursorPos.y+ImGui::GetScrollY()
);
}
}
else if (draggingTabIndex>=0 && draggingTabIndex<tabSize && draggingTabIndex!=j){
draggingTabTargetIndex = j; // For some odd reasons this seems to get called only when draggingTabIndex < i ! (Probably during mouse dragging ImGui owns the mouse someway and sometimes ImGui::IsItemHovered() is not getting called)
}
}
}
}
tabIndex = newtabIndex;
// Draw tab label while mouse drags it
if (draggingTabIndex>=0 && draggingTabIndex<tabSize) {
const ImVec2& mp = ImGui::GetIO().MousePos;
const ImVec2 wp = ImGui::GetWindowPos();
ImVec2 start(wp.x+mp.x-draggingTabOffset.x-draggingtabSize.x*0.5f,wp.y+mp.y-draggingTabOffset.y-draggingtabSize.y*0.5f);
const ImVec2 end(start.x+draggingtabSize.x,start.y+draggingtabSize.y);
ImDrawList* drawList = ImGui::GetWindowDrawList();
const float draggedBtnAlpha = 0.65f;
const ImVec4& btnColor = style.Colors[ImGuiCol_Button];
drawList->AddRectFilled(start,end,ImColor(btnColor.x,btnColor.y,btnColor.z,btnColor.w*draggedBtnAlpha),style.FrameRounding);
start.x+=style.FramePadding.x;start.y+=style.FramePadding.y;
const ImVec4& txtColor = style.Colors[ImGuiCol_Text];
drawList->AddText(start,ImColor(txtColor.x,txtColor.y,txtColor.z,txtColor.w*draggedBtnAlpha),tabLabels[tabOrder[draggingTabIndex]]);
ImGui::SetMouseCursor(ImGuiMouseCursor_Move);
}
// Drop tab label
if (draggingTabTargetIndex!=-1) {
// swap draggingTabIndex and draggingTabTargetIndex in tabOrder
const int tmp = tabOrder[draggingTabTargetIndex];
tabOrder[draggingTabTargetIndex] = tabOrder[draggingTabIndex];
tabOrder[draggingTabIndex] = tmp;
//fprintf(stderr,"%d %d\n",draggingTabIndex,draggingTabTargetIndex);
draggingTabTargetIndex = draggingTabIndex = -1;
}
// Reset draggingTabIndex if necessary
if (!isMouseDragging) draggingTabIndex = -1;
// Change selected tab when user closes the selected tab
if (tabIndex == justClosedTabIndex && tabIndex>=0) {
tabIndex = -1;
for (int j = 0,i; j < tabSize; j++) {
i = tabOrder ? tabOrder[j] : j;
if (i==-1) continue;
tabIndex = i;
break;
}
}
// Restore the style
style.Colors[ImGuiCol_Button] = color;
style.Colors[ImGuiCol_ButtonActive] = colorActive;
style.Colors[ImGuiCol_ButtonHovered] = colorHover;
style.Colors[ImGuiCol_Text] = colorText;
style.ItemSpacing = itemSpacing;
return selection_changed;
}
} // namespace ImGui |
@r-lyeh: Indeed this is very good for people who want to have Tab Labels in a more compact way! P.S. I had to change the styles, because I shared my ImGui::TabLabels code with ImGui::TabWindow and so it made sense to reuse its own style. P.S.2. I've recently added to my ImGui fork vertical Tab Labels too (but without "Wrap Mode"). Unfortunately the code for making them cannot be compacted in an easy way for better sharing... 😒 |
@Flix01 very nice , you've made bunch of useful controls already , many thanks |
Actually @guillaumechereau posted here: #705 a link to an extremely compact alternative implementation. |
I started working on Tabs! It won't be finished nor committed for a while because I want:
Anyway I am gathering ideas and requests now - if you have any specific feature request, please post in the TABS (#261) or DOCKING (#351) threads. |
I have pushed some early test code for Tabs in this branch: It's a little experimental in the sense that I expect that a lot of this code will be massaged, scrapped, rewritten when working on proper Docking. I only wrote this to give myself a base to think about Drag'n Drop, Docking, and expect the API to change/break. If you are feeling adventurous or curious you can give it a try.. The main reason I'm releasing this is that I don't expect the real v1.0 to materialize before at least a month.
It's in two separate files This is a GIF i recorded on Oct 19: (Various things got fixed/improved since but that should get you an idea where it is at). |
FYI I am also closing #1083 as a duplicate. In that thread @scottmudge posted his implementation of Tab, which you can find here https://github.com/ScottMudge/imgui_tabs and discussions in #1083 Arguably my version is more complete, but in the absence of persistence settings (order are not saved), and docking or dragging out as floating window, etc. it is still sitting in a weird spot where it doesn't do everything desirable. GIF of the code in #1083 |
Hey, I'm using these tabs! They work very nicely, I like the API, too! Do you have any idea when this will be merged into master? Having to juggle between branches when updating Imgui can become quite tedious. |
@codecat Sorry I have no ETA. Notice that imgui.cpp hasn't been modified in this branch, you could grab the latest _tabs files and update them occasionally. |
@zahirzohair You can customize my implementation (which is arguably a little stale and needs to be refreshed). All you would need to do is use a vector (either ImGui's version or STL implementionation) of a struct describing the different tab details -- title, type of tab (to determine behavior in a switch statement), etc., -- and then use a for loop to iterate over its members, using AddTab() to insert them into the TabBar. |
@ocornut if two tabs have the same name, it displays on top of each other and looks like one tab. |
Use a "##<string>" invisible ID demarcator after the label to with unique trailing strings to give two elements with the same label unique IDs. This is no different behavior than any other imgui element that uses the label to create an ID hash.
…On March 21, 2018 6:56:20 AM EDT, zahirzohair ***@***.***> wrote:
@ocornut if two tabs have the same name, it displays on top of each
other and looks like one tab.
is there any solution for that?
--
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#261 (comment)
|
@ocornut Hi Omar, first thanks for ImGui .. it is an awesome little piece of code! That being said, I integrated your wip imgui_tabs and wanted to report a problem with this piece of code:
If in the same frame, 2 tabs are reappearing in the tab bar (let's say you have a filter on the tab names that is filtering 2 TABs out of 4 and you then clear the filter string so all TABs suddenly need to reappear) .. the first one switching its position to TabsOrder.back() will memmove() all others down (without reindexing/updating the other tabs->CurrentOrder) so the next one will still have its CurrentOrder set on the old position. The next one will ImAssert in that code with a bad CurrentOrder vs TabOrders GlobalIndex. This code probably assumes one reappearing TAB per frame and never broke because the next call to TabBarLayout should fix all tabs CurrentOrder variable anyway. You can workaround this by skipping that code (ie creating your BeginTabBar with the ImGuiTabBarFlags_NoResetOrderOnAppearing flags OR updating all subsequent TABs after the memmove(). |
And while we're at it .. the tabs demo code doesn't use the usual early out strategy which I changed locally to :
.. small detail but it does prevent going into the tabbing code if the tab demo window is visible but closed. :) |
I am closing this issue and will obsolete the old |
For those transitioning from the old API, there's also an |
…ature from the from Docking branch so it can be used earlier as as standalone feature) - Added BeginTabBar(), EndTabBar(), BeginTabItem(), EndTabItem(), SetTabItemClosed() API. - Added ImGuiTabBarFlags flags for BeginTabBar(). - Added ImGuiTabItemFlags flags for BeginTabItem(). - Style: Added ImGuiCol_Tab, ImGuiCol_TabHovered, ImGuiCol_TabActive, ImGuiCol_TabUnfocused, ImGuiCol_TabUnfocusedActive colors. - Demo: Added Layout->Tabs demo code. - Demo: Added "Documents" example app showcasing possible use for tabs.
Everyone: I have now merged the Tab API into the API
(Bonus fact: I am currently working on the testing/automation API and those 3 screenshots were mostly auto-generated. / By "mostly" I mean that there's still various manual actions and hacks involved in my current automation/capturing pipeline, but I am narrowing the gap little by little toward being able to generate screenshots based on automation scripts.) |
That's awesome! Thanks for the heads up! |
…ropHold. (#261) incorrectly missing from the merge from Docking branch.
This is kind of a "here's what I'm trying out now, maybe others can try it" post, rather than a specific issue/feature request.
The quick screenshot comparisons. Up first, the original version I had before tabs:
![screenshot-brigador 231ef9e6d7a1a482302d01298b9fc010b46a3d9c 13 45 10 jul 6 2015 release-assertions](https://cloud.githubusercontent.com/assets/3121968/8530606/7d7c87f0-23e7-11e5-90db-5987200f9ff3.png)
Tabs version:
![screenshot-brigador fb8e92748d471f1208235c814022bf0c976a09d4 13 59 50 jul 6 2015 release-assertions](https://cloud.githubusercontent.com/assets/3121968/8530617/8f99b1ec-23e7-11e5-9f7e-5a4448f87203.png)
Video comparisons:
Since I first started using ImGui, our usage of it in the game has exploded quite rapidly to a point where the GUI itself has become cumbersome. Ever since I had 3 different debugging windows in our game, I've wanted to have a tab functionality (like all modern browsers). I think I could have come up with a reasonable implementation for a long time now, but it wasn't until 1.40 with the menu stuff that it really popped into my head that I could do it reasonably.
Over the weekend I went to work at it, but funnily enough, I didn't really need much of the menu API to really be able to pull it off (Popups sure come in handy though!).
My approach is really quite simple and behaves nicely with most of the API, but columns remain an issue, which I'll detail a little bit later. Instead of trying to explain everything in English, I'll just drop in the relevant code blocks here. You probably won't be able to use it directly, but should show enough of the approach that people can try it out on their own.
Code overview: https://gist.github.com/Roflraging/fe9a582cb7a79400b667
The one issue I've encountered with this is columns from one tab can interfere with columns from another tab. For example, if I resize columns from Tab 1 and Tab 3 also has columns, it is possible for Tab 3 to have the same offsets as columns in Tab 1, even though I never touched Tab 3's columns. I tried to work around this at the top level of my code by having PanelTab contain memory to retain column offsets and simply setting the column offsets before calling into the handler and retrieving them afterward. But this doesn't quite work... mainly because right now you'll hit asserts in the column offset code. I might have gotten this wrong, but I couldn't work around it.
An improvement I could make on this is to allow for tabs to be closable or reordered, but I don't need that functionality right now so I didn't implement it. Reordering is very easy to do. Just swap array elements and you're done!
The text was updated successfully, but these errors were encountered: