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.
