Grid System

PynamicUI Grid System

The PynamicUI Grid System is a powerful and versatile tool for laying out and placing elements on the UI. It allows the creation of flexible layouts that adapt to varying content and window sizes.

Understanding Grids

A grid in PynamicUI is defined as a 2D array of identifiers (ids). These ids are used to refer to and manage the layout of elements within the grid. The grid system interprets the ids to determine how elements should be positioned and sized within the layout.

Each cell in the grid is uniquely identified by its id, and cells with the same id are considered as a single unit by the grid system. This allows the creation of layouts where some elements span multiple cells, creating a larger, composite cell.

Parent-Child Relationships in Grids

The placement of child elements within a grid is entirely dependent on their parent element's grid layout. Each child element can only be placed within its immediate parent's grid - it cannot be placed directly within a grandparent or sibling element's grid.

This parent-child relationship allows for the creation of complex, nested layouts. Each element can define its own grid layout, and each of its children can define further grid layouts, allowing for a high degree of layout customization and flexibility.

The grid system in PynamicUI, with its usage of IDs and parent-child relationships, offers a robust and intuitive way to create dynamic, flexible layouts in your UI.

Creating Grids

To create a grid, you use the setGrid method of an element:

element.setGrid(width, height, grid_ids)

width and height specify the dimensions of the grid, while grid_ids is a list of ids specifying the layout of the grid. The grid_ids list should contain width * height elements.

Here's an example of creating a 2x2 grid:

element.setGrid(2, 2, [
    "1", "2",
    "3", "4",
])

Accessing Grid Cells

Once a grid has been created, you can access individual cells using their ids. The grid attribute of an element is a dictionary where keys are cell ids and values are the relative positions and sizes of the cells within the grid.

Here's how to access the cell with id "1":

cell_1_geometry = element.grid["1"]

This returns a dictionary with keys "relwidth", "relheight", "relx", and "rely", specifying the cell's width, height, and position relative to the grid.

Creating Grid Elements

To create child elements within a grid, you iterate through the grid dictionary and create a new child element for each cell. Here's an example:

for gridId in element.grid.keys():
    child_element = createElement(element, "Button", id=gridId)

In this example, a new button is created for each cell in the grid. The id of each button is set to the corresponding grid cell id, allowing the button to be placed within the correct cell.

The hierarchy of the grid system is determined by the order in which cells are defined in the grid_ids list and the parent-child relationships between elements. Child elements are always placed within the grid of their parent element, and cells are filled in the order they appear in the grid_ids list.

Visualizing Grids

Visualizing the grid can be helpful when designing complex layouts. You can think of a grid as a table, with each cell corresponding to an id in the grid_ids list. Cells with the same id span together to form a larger cell.

Consider this 3x3 grid:

element.setGrid(3, 3, [
    "1", "1", "2",
    "1", "1", "3",
    "4", "5", "5",
])

You can visualize it as follows:

1 1 2
1 1 3
4 5 5

Cells with the id "1" form a larger, composite cell that spans two columns and two rows.

The grid system in PynamicUI offers powerful and flexible layout capabilities, from simple, single-cell layouts to complex, multi-cell arrangements. It provides an intuitive way of creating dynamic UI layouts with varying hierarchies.