Skip to content

Use the GridXY object

To GridXY object simplifies the design of a page by using relative coordinates and sizes.

Configure

GridXY myXY;

The constructor GridXY creates the grid object.

1
2
3
4
myXY.define(0, 0, 
    myScreen.screenSizeX(), myScreen.screenSizeY(), 
    3, 5, 
    true);
define()
sets the total size of the grid and the number of columns and rows.

The required parameters are

  • The first line defines the origin of the grid, here 0, 0;

  • The second line defines the size of the grid, here myScreen.screenSizeX(), myScreen.screenSizeY();

  • The third line defines the number of divisions on the x- and y-axis, here 3, 5.

The optional parameter is

  • The fourth line sets whether the origin should be adjusted to center the grid.

Example

Setting 3 divisions on a grid of 296 pixels results on an individual size of 98 pixels.

However, 98 * 3 gives 294 pixels instead of 296. The origin is adjusted by half the error, 2 / 2 = 1.

Use

Place and size each element using the grid-based dx and dy sizes in pixels.

myScreen.dRectangle(myXY.x(i), myXY.y(j), myXY.dX(), myXY.dY(), myColours.grey);
x() and y()
return the x and y coordinates of the selected division.

The optional parameter is the division. Default value is 0.

dX() and dY()
return the x and y sizes of the selected number of divisions.

The optional parameter is the number of divisions. Default value is 1.

Warning

x() and y(), dX() and dY() do not check overflow.

Example

This is the core of the code from example Common_Grid.ino.

The two parts, with manual calculations and with GridXY, are preparing the exact same page.

///
/// @brief Example of grid
/// @param flagNew true = default = with GridXY, false = manual
///
void displayGrid(bool flagNew = true)
{
    myScreen.setOrientation(ORIENTATION_LANDSCAPE);
    myScreen.clear();
    uint16_t ix = 5;
    uint16_t jy = 3;

    if (flagNew == false) // Manual
    {
        uint16_t x0 = 0;
        uint16_t y0 = 0;
        uint16_t x = myScreen.screenSizeX();
        uint16_t y = myScreen.screenSizeY();
        uint16_t dx = x / ix;
        uint16_t dy = y / jy;

        myScreen.selectFont(fontLarge);
        myScreen.gText(x0 + dx * 0, y0 + dy * 0, "GridXY manual");

        myScreen.selectFont(fontMedium);
        for (uint8_t i = 0; i < ix; i++)
        {
            for (uint8_t j = 1; j < jy; j++)
            {
                myScreen.gText(x0 + dx * i, y0 + dy * j, formatString("%i.%i", i, j));
            }
        }
        myScreen.dRectangle(x0 + dx * 0, y0 + dy * 1, dx * (ix - 0), dy * (jy - 1), myColours.black);
    }
    else // With GridXY
    {
        myScreen.setOrientation(ORIENTATION_LANDSCAPE);
        myScreen.clear();
        myScreen.selectFont(fontLarge);
        myScreen.gText(0, 0, "GridXY");

        GridXY myXY;
        myXY.define(0, 0, myScreen.screenSizeX(), myScreen.screenSizeY(), ix, jy, true);

        myScreen.selectFont(fontLarge);
        myScreen.gText(myXY.x(0), myXY.y(0), "GridXY");

        myScreen.selectFont(fontMedium);
        for (uint8_t i = 0; i < ix; i++)
        {
            for (uint8_t j = 1; j < jy; j++)
            {
                myScreen.gText(myXY.x(i), myXY.y(j), formatString("%i.%i", i, j));
            }
        }
        myScreen.dRectangle(myXY.x(0), myXY.y(1), myXY.dX(ix - 0), myXY.dY(jy - 1), myColours.black);
    }

    myScreen.flushFast();
}

See also