ImGui splitter

[aabilityuk]

Hi, i run the imgui-node-editor blueprints example successfully (https://github.com/thedmd/imgui-node-editor/tree/master/examples/blueprints-example), but i need to add one more Splitter to split the right pane window (i mean window pane that is using for nodes drawing), i need to split this part of window horizontally, not vertically/

Here is a code of Splitter function:

static bool Splitter(bool split_vertically, float thickness, float* size1, float* size2, float min_size1, float min_size2, float splitter_long_axis_size = -1.0f) { using namespace ImGui; ImGuiContext& g = *GImGui; ImGuiWindow* window = g.CurrentWindow; ImGuiID id = window->GetID("##Splitter"); ImRect bb; bb.Min = window->DC.CursorPos + (split_vertically ? ImVec2(*size1, 0.0f) : ImVec2(0.0f, *size1)); bb.Max = bb.Min + CalcItemSize(split_vertically ? ImVec2(thickness, splitter_long_axis_size) : ImVec2(splitter_long_axis_size, thickness), 0.0f, 0.0f); return SplitterBehavior(bb, id, split_vertically ? ImGuiAxis_X : ImGuiAxis_Y, size1, size2, min_size1, min_size2, 0.0f); }

Could you please help me to make changes in function code that i can split the node pane horizontally. Now if i set the split_vertically flag to false the splitter influence on the whole window (left and right panes), but i need to make it split only the right nodes pane.

Thank very much!!! And i am sorry if this is not the righ place to ask the questions like that because i understand that it is not imgui issue., if so could you please tell me a good forum to discuss the software development based on imgui library...

[ocornut]

Have you considered using the docking branch?

[aabilityuk]

Have you considered using the docking branch?

Thank you very much for reply! No i haven't, i am relly new to imgui and it would be very nice if you clarify a bit what you mean by the docking branch. Take a look please on the picture attached, i draw the red lines there i need a splitter. One splitter with child window already work (vertical splitter from blueprints example), so i need another horizontal splitter with another child window on the buttom. Help me please

[PathogenDavid]

what you mean by the docking branch

The docking branch is a semi-experimental branch of Dear ImGui, you can find more info in #2109.

---

I highly highly highly recommend you just use the docking branch. If you can't for whatever reason, I'd recommend studying this example I gave another user a while back: #4261 (comment)

[aabilityuk]

what you mean by the docking branch

The docking branch is a semi-experimental branch of Dear ImGui, you can find more info in #2109.

I highly highly highly recommend you just use the docking branch. If you can't for whatever reason, I'd recommend studying this example I gave another user a while back: #4261 (comment)

Thank you very much for reply! The docking feature looks great and i definitly will use it in my project in future, but for my current project i need to set the things statically without docking. I read the #4261 (comment) branch, it seems like you answered the same question as mine, but i am really new to imgui and i don't understand yet how to apply this approach in my case. Could you please provide a code example in relation to (https://github.com/thedmd/imgui-node-editor/tree/master/examples/blueprints-example) blueprints example and show me how to add a horizontal slider with child window to blueprints example cpp?

[PathogenDavid]

i need to set the things statically without docking

You can use the dock builder API to statically define layouts, it doesn't have to be flexible.

Could you please provide a code example in relation to

Sorry, but I can't make your app for you. At some point you need to sit down and learn how things work if you want to be able to use them effectively.

[aabilityuk]

i need to set the things statically without docking

You can use the dock builder API to statically define layouts, it doesn't have to be flexible.

Could you please provide a code example in relation to

Sorry, but I can't make your app for you. At some point you need to sit down and learn how things work if you want to be able to use them effectively.

Thank you very much! I will try to find a solution... don't close the issue please

[aabilityuk]

Excuse me, but i can't find a docking example code, there is no imgui/tree/docking pass in git repository
Where to find a code examples of docking?

[PathogenDavid]

Where to find a code examples of docking?

They live in the separate docking Git branch. Switching between branches depends on how you're interact with Git. You can read this article from the Git Book for all the conceptual and command line details.

On the GitHub web UI, you can switch between branches using the dropdown above the file listing:

If you aren't using Git directly, you can switch to the docking branch using that dropdown and download the source using the green "Code" dropdown and selecting "Download ZIP":

[aabilityuk]

separate docking Git branch

I really appreciate your help, thank you very much

[ocornut]

Also here's a small overview of the Docking branch: https://github.com/ocornut/imgui/wiki/Docking

To use the DockBuilderXXX api you'll need to find references in issues, at it is currently an internal api.

You could also use Splitter (#319) but you are giving us too little information to solve your problem with them, and you could probably solve it yourself.

[aabilityuk]

Also here's a small overview of the Docking branch: https://github.com/ocornut/imgui/wiki/Docking

To use the DockBuilderXXX api you'll need to find references in issues, at it is currently an internal api.

You could also use Splitter (#319) but you are giving us too little information to solve your problem with them, and you could probably solve it yourself.

Thank you very much for your help! I donwnloaded the docking branch from git hub and run the example it works great, but when i started to investigate the source code i realized that i have no idea how to work with docking and how to enable it in my project))) I will try to find out with approach and go through the link you provide, after i'll come back and announce the results

[aabilityuk]

I can't belive, all the magic is in one string of code: ImGui::GetIO().ConfigFlags |= ImGuiConfigFlags_DockingEnable;

It's great!!! But still have some troubles with setup, just for testing reason i add two test windows to blueprints-example.cpp in Application_Frame() function., when i start docking one of the test windows to any side (left, right, top, buttom) it docks not to the side, but opens on the full window and docks to the centr.

Here is the way i create windows:
` ImGui::Begin("One more window");
ImGui::Text("Window1");
ImGui::End();

ImGui::Begin("One more window");
ImGui::Text("Window2");
ImGui::End();`

Here is some picture attached (the second picture shows the docking after i try to dock the first window to the left side)

Please tell me what am i doing wrong? Thank you!

You could also use Splitter (#319) but you are giving us too little information to solve your problem with them, and you could probably solve it yourself.

Unfortunately i cant solve the problem by myself , i will try to explain one more time want i want to achieve, Take a look please on the picture attached below, i draw the red lines im MS Paint to show where i need a splitters. One splitter as i mentioned before work good (vertical splitter from blueprints example), so i need to add one more horizontal splitter and child window to the buttom (i showed it with a green rectangle the place where i need the child window with horizontal splitter):

May i ask you to take a brief look at blueprints-example.cpp (914 string of code, here is Splitter function calls)

Splitter(true, 4.0f, &leftPaneWidth, &rightPaneWidth, 50.0f, 50.0f);

Finally i need one more horizontal splitter and child window as i showed on the picture (greed rectangle a place for child window), another words i need the same behavior like the output window in visual studio. On the left side of my GUI i need a settings panel, on the centr i need the main window area, on the buttom i need the text output window.

I hope it is clear for now what i need to achieve? Let me know please if you need any additional information.

[aabilityuk]

Guys, thank you all for replies! Finally i found my mistake:)) I should include the code of node editor inside of child window declaration... The splitter problem closed. (#319) code of splitter example work for me. thank you very much

As for the docking question it would be interesting to get it done, will wait for the answer

[aabilityuk]

Ok, i found out by myself, it needs to be one of the windows main dock and after that the other could be docked!!! Docking is the best feture i've ever used ))) It is great

Dear developers i want to thank you very much for your job and time, this is the best library

[aabilityuk]

The last question i hope))) In splitter approach i used the x coordinates like this:

if (ImGui::IsItemActive())
        w += ImGui::GetIO().MouseDelta.x;

How to know when the ImGui window "Settings" splitter active? IsItemActive() doesnt work in docking approach for me anymore. here is my code for imgui windows, "Settings" window is docked to the left side of "Node Editor" window and i need to know when the docking slider is active for recalculation the width

  static float w = 400.0f;

    ImGui::Begin("Settings"); 
    if(ImGui::IsItemActive()) // HERE CODE doesnt work
    w += ImGui::GetIO().MouseDelta.x;
    ShowLeftPane(w - 4.0f);
    ImGui::End();

    ImGui::Begin("Node Editor");
    DrawNodeEditor();
    ImGui::End();

    ImGui::Begin("Sorce Editor");
    ShowDownPane(400);
    ImGui::End();

[aabilityuk]

I Think the issue should be closed)) Finally i come to solution that there is no need in determine the active or not the window state.

Love the docking, highly recommend to use !!!