Resizing two windows simultaneously in layout container

[funbiscuit]

Hello!

Suppose we have a frame window of some size. We add a horizontal layout container into it. And then add to container two FrameWindows. And width of both windows is set to 0.5 of parent.
So the question is: is there a way to simultaneously resize (by click and drag of border with mouse) width of both windows so they still fill all parent window? So if we reduce width of left window, then width of right window will automatically increase so total width of those windows still is the same as width of parent window.

If there is no built in way, can you suggest how I can achieve such functionality?

[YaronCT]

funbiscuit: Afaik that's impossible. You'll have to subscribe to the "EventSized" of one child in which you resize the other child.

[Ident]

I know what you are going after but we dont have good auto-size windows for this, at least not yet. Horizontal layout container might not be necessary for what you wanna do, here is what I would do:
Consider a parent container of whatever size you want it to be, you add the framewindows into it with relative height 1 and align one of them to the left horizontally and one to the right horizontally. Then you do as yaronct just said, subscribe to said event for BOTH framewindows and in the event handler you will get the final size of the currently sized framewindow and then you resize the other (find out via pointer comparison which is the current to figure which is the other) framewindow width of the other window to one minus the relative width of the one being sized. In order to not get an infiniteloop, you mute the events for the other framewindow before settings its new width: That can be done via setMutedState(false) and afterwards set it to true again.

Does that make sense?

[funbiscuit]

Afaik that's impossible...

Thanks for suggestion, I also thought about that. It might work with two widgets.

I know what you are going after but ...

As I already said thanks for suggestion and a detailed answer! Yes, that makes sense and I should be able to do that for two windows inside of custom layout container that will handle all the logic of resizing and have just function addChildToPosition (or smth like that) and allow only 0 and 1 positions.
Problem will arise again when I'll need to add multiple widgets.
But I think it should be doable with similar approach. I would need to "prohibit" resizing of the left widget on left border and of the right widget on the right border. BTW, is there a way to restrict widget resizing to only certain borders?
Or maybe it will be better to create some kind of custom widget that will represent draggable border and add it between windows? I hope this picture tells it better.

Do you think this will be a good solution? This way I don't need to handle resize event of widgets at all. I only need to handle event of moving this custom borders and resize widgets appropriately. And also check that new position of border is okay and doesn't cross other borders. And I would need to change icon of mouse when it hovers over custom border so it tells that user can resize it.

UPD. Also I would need to disable some event listeners of child windows so they don't resize themselves automatically and don't mess up with my layout system.
Also if I create custom layout container will I be able to create it in C++ just as other widgets? With call to createWindow? Or will I need to add some extra code? So basically what should I do to create factory for this type of window or will it be created automatically?

[YaronCT]

funbiscuit:

Or maybe it will be better to create some kind of custom widget that will represent draggable border and add it between windows?

That's exactly what I was going to say. Seems like what u want requires a specially made widget. Such widgets are common in other UI toolkits. I think ideally such a widget would support any combination of horizontal and vertical splitters, structured hierarchichally. Some of them can be draggable, perhaps up to some constraints. If you're up to that task it could b a wonderful contribution to cegui, but bear in mind it's prolly gonna b complicated.

Even if u just implemented such a widget that only supports a single vertical splitter that would be great, though, and can be improved later to support the more general case. It's still complicated, though.

[YaronCT]

funbiscuit: If u do wanna try to do it, I'll try to help u as best as I can.

[funbiscuit]

That's exactly what I was going to say...

Well, for beginnig it will be quite hard to support any combination of horizontal/vertical splitters. And I don't even know how to approach that correctly (with your suggestion of hierarchy).
But I think anything should be possible to achieve with just two widgets and their combination. Horizontal and Vertical layout containers (maybe even default ones, but I don't think so). And each of them will be storing multiple splitters. Horizontal container will have only vertical splitters and vertical - only horizontal splitters. And by including one containers into another one can create any layout that can be resized. Of course user will not be able to add splitters, he will add child widgets. And container should add appropriate amount of splitters between them. Well, there will be a lot of thinking it out
So if I create only horizontal splitter then it will be not very hard to make everything else work properly.

Yeah, I know that it is complicated but I don't think I have a choice when I'll have something working - I'll post it here and then maybe add to wiki when I have time to write an article.

I'll try to help u as best as I can.

Thanks for your offer! I skipped through code for frame window and titlebar and it doesn't seem like very difficult task to do. Since they already have implementation of dragging and sizing. Unfortunately I will not have time till the end of the week to actually do something so I'll start a little bit later. And if I'll have questions I'll be sure to ask for your help, thanks

[funbiscuit]

Well, I played a little bit with code and now I have a kinda working resizable horizontal layout for multiple windows (any amount). It worlks properly only in ideal condition and breaks quite easily. So I'll fix it in the future.
Also kind of major drawback (although for me it's perfectly fine) is that it "forgets" about initial width of all widgets. And stretches them so they fill all available space (but only horizontally, it keeps vertical sizes). And I'm not sure that I'll fix this.

Here's the video:

[Ident]

Looks good

I wonder how we could make this concept into a container widget for CEGUI. If QT or another widget toolkit has something similar we could probably study its behaviour and rebuild a widget based on that. There is of course many many many edge cases to consider here.

[YaronCT]

@funbiscuit: This looks really cool, and you've done it pretty fast!

I do hope though u eventually find the time to improve its stability coz I think we require some level of stability to merge code into cegui.

@Ident: What r u talking about?! Qt should learn from us..

[funbiscuit]

@Ident my widget currently inherits from LayoutContainer. I didn't inherit from SequentialLayout or any other since I'm not sure that I'll be able to follow their principles. Maybe when I get everything to work I'll try to adopt code to inherit from SequentialLayout or even HorizontalLayout.
Just need to add a lot of "ifs" and it will be pretty stable

@yaronct Yes, I know about that. And that's the reason why I didn't even post any code yet. Don't want people to throw rotten tomatoes because of how raw and ugly it is currently

[funbiscuit]

I almost made widget to work as Sequential Layout Container. Actually all functions work (like swap children and move child to position) only need to change few small things.

Meanwhile I'd like to ask small question about adding property. If I understand correctly, one can add multiple properties so we can set them in looknfeel xml file like this:

Code: Select all

<Property name="EWSizingCursorImage" value="TaharezLook/MouseEsWeCursor" />

And in order to this line actually set it I found in FrameWindow.cpp following line:

Code: Select all

CEGUI_DEFINE_PROPERTY(FrameWindow, Image*,
"EWSizingCursorImage", "Property to get/set the E-W (left-right) sizing cursor image for the FrameWindow. Value should be \"set:[imageset name] image:[image name]\".",
&FrameWindow::setEWSizingCursorImage, &FrameWindow::getEWSizingCursorImage, 0
);

And the problem is that if I try to use this line in my custom widget, it gives an error because cegui seems to not "understand" what class I'm trying to give it:

Code: Select all

CEGUI_DEFINE_PROPERTY(HSplitter, Image*,
"EWSizingCursorImage", "Property to get/set the E-W (left-right) sizing cursor image for the Splitter. Value should be \"set:[imageset name] image:[image name]\".",
&HSplitter::setEWSizingCursorImage, &HSplitter::getEWSizingCursorImage, 0
);

Error:
"   2   IntelliSense: no instance of constructor "CEGUI::TplWindowProperty<C, T>::TplWindowProperty [with C=CEGUI::HSplitter, T=CEGUI::Image *]" matches the argument list
argument types are: (const char [20], const char [137], const CEGUI::String, void (CEGUI::HSplitter::*)(const CEGUI::String &name), const CEGUI::Image *(CEGUI::HSplitter::*)() const, int)   
"

So I can of course set cursor image manually from code (what I do currently) but I would like to be able to do that from XML file also.
I've looked through code a little more and it looks like this macro is working only for built in classes, right? And for custom class I need to use function addProperty? Well, I don't have ideas how I should do it correctly.
Hope you can help.

[YaronCT]

funbiscuit: Any chance u can upload your project somewhere? Preferebly, to a cegui fork in Bitbucket.

[funbiscuit]

@yaronct
Yes, I can upload code somewhere. It's just 6 files (and two of them are xml) but not sure that it will be in fork since I'm not very familiar with git.
Anyway, I wanted to fix what I can by myself and then upload it. That's why I asked about adding property.

Btw, small video about what it can do currently:

[YaronCT]

@funbiscuit: Thanx for the video, it looks very nice!

===

Still, plz upload it so it can help me find your error. U can always upload it again later..