Skip to content

Design a page

To design a page, proceed as follow:

  • Select the orientation;
  • Define the grid;
  • Place and size the elements;
  • Check the result.

Select the orientation

Select the orientation.

Example

The orientation is horizontal.

myScreen.setOrientation(ORIENTATION_LANDSCAPE);

Define the grid

Define the number of columns and lines of the grid.

Example

The grid includes 5 columns by 4 lines.

uint16_t x, y, dx, dy;
x = myScreen.screenSizeX();
y = myScreen.screenSizeY();
dx = x / 5;
dy = y / 4;

Place and size the elements

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

Example

The horizontal plus-minus combined button is placed on the first and second columns of the last line of the grid.

plusMinus myPlusMinus1;
myPlusMinus1.dDefine(0, dy * 3, dx * 2, dy);
myPlusMinus1.setOption(optionHorizontal);
myPlusMinus1.setState(stateEnabled);
myPlusMinus1.draw();

Check the result

Final result is

As an additional benefit, the page is automatically adapted when taking another size of screen.

Example

The same page on the 176x264 2.71” (top or left) and the 240x416 3.70” (bottom or right). Screens are to size.

Back to top