Auto layout containers

[Karam-Sabbagh]

I would like to see a container that automatically laid out gui elements without having to do manual positioning which can waist time some times.

So If I have some thing like this as shown in the image below I would like it to be done automatically:

and it would be a bigger problem and more waist of time if the container even have more buttons(which can happen alot I made that image just fast for an example) ,
and ofc the gui element doesn't have to be a button it can be anything and also with different sizes not the same as the image and that would be even harder for the user.

So I think an Auto container is so good and useful for this cases and lets the user focus more on the thing he really wanna develop.

And I also think that the Auto container is so possible without even having to let the user do anything manually,
And if the user like to set a default spacing between the gui elements in the Auto container this is possible by making like a parameter in the make_Auto_container function that he is free to set or not as if not the spacing will be set to default,

And if the user want a specific element to be in a new line alone there it's also possible to make a function like "add_line_spacing(30 pixels)",

And also if the user want a specific item to be a bit far away it is also possible to make a function like
"add_spacing(10 pixles)",

And ofc the names can be not the same this is just like an idea,

So making this functions will make the user to not be limited with that either !
So it can be easier and at the same time doesn't limit the user alot with the style.

So what do you think about this idea?

[Saccharine-Coal]

I agree that this array like inventory element would be a useful addition to pygame gui!

I am currently working on this in my own code, as pictured below. The process to implement this is fairly straightforward with current pygame_gui. However, the issue I am encountering is merging the functionality of a UIButton element with a UIImage as you describe above.

I would share my code, but it is not in a presentable state as it stands. Although, I hope to contribute to this repo once I am able to create a proper subclass for the image + button element :).

[Karam-Sabbagh]

I agree that this array like inventory element would be a useful addition to pygame gui!

I am currently working on this in my own code, as pictured below. The process to implement this is fairly straightforward with current pygame_gui. However, the issue I am encountering is merging the functionality of a UIButton element with a UIImage as you describe above.

I would share my code, but it is not in a presentable state as it stands. Although, I hope to contribute to this repo once I am able to create a proper subclass for the image + button element :).

Hi.
Oh yeah I am also working on this in my own code right now and I also want to do what you want to do,
But as I said before if this system was allready in pygame_gui it would not waist our time and let us focus on the thing that we are working on.

but for the image you can set an image for default buttons in the theme file and also set an image for a specific button using its "object_id" and theming its image in the theme file too.

And do you have any other Ideas that can be useful for the Auto container ?

[Karam-Sabbagh]

Hello guys,
I made an auto layout container class that can give you the right position and anchors for the element.

here is the code of the auto layout container class in the link:
https://paste.pythondiscord.com/hucomonamo

and u can use it like this for example:

ui_window = pygame_gui.elements.ui_window.UIWindow(
    rect=pygame.Rect(0, 0, 400, 400),
    window_display_title="Test",
    resizable=False,
    manager=ui_manager,
    object_id="#TEST")

auto_sort_container = AutoSortContainer(default_elements_spacing=4)

auto_sort_container.add_same_raw_spacing(ui_window, 20)

element_width, element_height = 75, 60

pos_x, pos_y, anchors = auto_sort_container.generate_element_pos(ui_window,
                                                                 element_size=(element_width, element_height))

pygame_gui.elements.UIButton(
    relative_rect=pygame.Rect(pos_x, pos_y, element_width, element_height),
    anchors=anchors,
    text="element",
    manager=ui_manager,
    container=ui_window
)

[wadsworj]

@Karam-Sabbagh could you repost the original code - I can't find it

[Karam-Sabbagh]

@wadsworj Hello.

yeah so the code have been quite edited and it's cleaner now(even if it needs more cleaning I think), and now using it works in a different way.
and the name of it is changed to auto_layout_positioning_generator, but it's still the same thing.

Auto_layout_positioning_generator.txt
and idk I couldn't set the file as a .py so I sent it as a .txt :P.

and yeah here is a little example on how to use it:

window_size = 300, 260

window = pygame_gui.elements.ui_window.UIWindow(pygame.Rect(200, 200, window_size[0], window_size[1]),
                                                window_display_title="Set dynamic rect properties",
                                                resizable=False, manager=self.ui_manager,
                                                object_id="#Set_dynamic_rect_properties_window")

auto_positioning_generator = Auto_layout_positioning_generator.AutoLayoutPositioningGenerator(container=window,
                                                                                              default_elements_spacing=7)

button_1 = pygame_gui.elements.UIButton(relative_rect=pygame.Rect((0, 0, 75, 30)), text="Button_1",
                                        manager=self.ui_manager, container=window, object_id="#Button_1")

auto_positioning_generator.generate_and_set_element_pos(element=button_1)

auto_positioning_generator.add_vertical_spacing(vertical_spacing=10)

button_2 = pygame_gui.elements.UIButton(relative_rect=pygame.Rect((0, 0, 75, 30)), text="Button_2",
                                        manager=self.ui_manager, container=window, object_id="#Button_2")

auto_positioning_generator.generate_and_set_element_pos(element=button_2)

I hope that this is helpful, tell me if you are having some issues with it.
and good luck !

[LondonClass]

I hope UIelement has a component based design pattern. This way, multiple functions can be implemented simultaneously on a UIElement.

For example, the click effect component, with this component, the elements can handle clicks, so that any UI element can generate a click event.

Or it could be a container component, adding this component allows any UI element to have its own child components.

[MeteorShower2004]

So is it possible to decide the position of elements when add_element()?
When I work on this I got a recurision error because of container size update (I think it's caused by this lib itself)