Grid Layout

Introduced in 1.1.0

The last guide showed how to create and position controls but it is not uncommon to have many controls and the user will want to manage the relative positioning relative to each other. This feature can help organise controls inside a rectangular grid.

The first step is to get a grid layout k=like this -

let grid = gui.grid(x, y, w, h);

x, y	the pixel location for the top-left corner of the grid.
w, h	the width and height of the grid in pixels.

Once the grid is created the next step is to set the number and relative sizes of the columns and rows -

cols(nbr | [relative widths])	If this parameter is a single integer it determnes the number of eaqual width columns. If it is an array then the number of columns is defined by the array length and the relative column widths the array element values.
rows(nbr | [relative heights])	Same as cols but sets the number of rows and their heights.
size(col-parameter, row-parameter)	Peforms the same action as cols and rows and accepts same parameter values.

Positioning the gui controls

In this sketch the white rectangle represents a grid area 5 columns by 4 rows. Initially all cells are the same size and are numbered starting with [0, 0] in the top-left cell. The green rectangle represents the control that would be created for that cell-area.

The sketch allows the user to change the colum widths, row heights and the cell-area. The source code to recreate this grid is displayed and is updated live as the user makes changes to the grid.

Experiment with the sketch then look at the table below it to discover the grid methods available.

Methods used to get control position and size.

insets(horz, vert)	These parameters determines the amount of space (in pixels) to leave clear arround the control. Setting a value >0 means that adjacent controls are separated visually in the sketch. The default value for both horizontal and vertical insets is 2 pixels.
cell(ax, ay, aw, ah)	The parameters specify the cell numbers for the top-left of the cell area and its width and height in cells. The method returns the array [px, py, pw, ph] representing both the screen position and size (pixels) for the gui control. This takes into account the inset values.
border(ax, ay, aw, ah)	Same behaviour as cell(...) but the returned array ignores the inset values so can be used to draw borders round groups of controls.