What do you use to design your screen layout?

Other Hardware Displays
1

Even on my small 128x160 TFT screen, it's a pain to make a layout for all the text.

I now use a Grid and I'm very happy with that, it's very helpful!
Just one function call to include or comment out while coding.

But I'm curious what others use as a guide??

image
image1280×1707 243 KB 

// I'm using the TFT_eSPI library, but it should be compatible with the Adafruit GFX lib?

void drawGrid()
{
// minor lines: 5,15,25 etc.
// major lines: 10,20,30 etc.
// make the major lines a bit brighter!
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 160

#define MINOR_GRID tft.color565(150, 150, 150)
#define MAJOR_GRID tft.color565(180, 180, 180)
#define GRID_EDGE tft.color565(255, 0, 0)
#define V_CENTER tft.color565(255, 0, 0)
#define H_CENTER tft.color565(255, 0, 0)

  // draw minor lines first so that the major lines overlap them on the
  // cross-sections
  for (int v = 5; v < SCREEN_WIDTH; v += 10)
  {
    // minor: 5,15,25 etc /
    tft.drawFastVLine(v, 0, SCREEN_HEIGHT, MINOR_GRID);
  }
  for (int h = 5; h < SCREEN_HEIGHT; h += 10)
  {
    // minor: 5,15,25 etc
    tft.drawFastHLine(0, h, SCREEN_HEIGHT, MINOR_GRID);
  }

  // next major lines, overlapping the minor lines at cross-sections
  for (int v = 10; v < SCREEN_WIDTH; v += 10)
  {
    // main: 0,10,20 etc
    tft.drawFastVLine(v, 0, SCREEN_HEIGHT, MAJOR_GRID);
  }
  for (int h = 10; h < SCREEN_HEIGHT; h += 10)
  {
    // main: 0,10,20 etc
    tft.drawFastHLine(0, h, SCREEN_HEIGHT, MAJOR_GRID);
  }
  // edge lines
  tft.drawFastVLine(0, 0, SCREEN_HEIGHT - 1, GRID_EDGE);
  tft.drawFastVLine(SCREEN_WIDTH - 1, 0, SCREEN_HEIGHT - 1, GRID_EDGE);
  tft.drawFastHLine(0, 0, SCREEN_WIDTH - 1, GRID_EDGE);
  tft.drawFastHLine(0, SCREEN_HEIGHT - 1, SCREEN_HEIGHT - 1, GRID_EDGE);
  // center lines
  tft.drawFastVLine(SCREEN_WIDTH / 2 - 1, 0, SCREEN_HEIGHT - 1, V_CENTER);
  tft.drawFastHLine(0, SCREEN_HEIGHT / 2 - 1, SCREEN_HEIGHT - 1, V_CENTER);
}
2

Why do you need this grid ? And wouldn't it be better if it was a grid of 8 pixels instead of 10 ?

3

Why? :thinking:

He's human, with ten fingers (unless some went missing :grin:).

The microcontroller "thinks" in terms of binary, but the compiler doesn't care greatly what number system you use. That's the whole point of computer coding - making the system do things the way it suits you. :sunglasses:

4

Maybe because usually the resolution of the displays is a multiple of 8. I'm just guessing.

5

But then you actually miss out on the last grid line anyway, or the last row/ column is smaller. Note the picture.

6

Exactly. This in the picture is a grid with step 10, isn't it? If it was a grid with step 8, I guess the squares might be more even. Otherwise, in the photo, even the two grids, red and blue, do not match well.

7

I never thought of dividing the grid in multiples of 8... :thinking:
This is much better...

It's hard to get the photo right but as an impression:

image
image1280×1707 258 KB 

void drawGrid()
{
// make the major lines a bit brighter!
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 160
#define GRID_STEP 8

#define MINOR_GRID tft.color565(150, 150, 150)
#define MAJOR_GRID tft.color565(180, 180, 180)
#define GRID_EDGE tft.color565(255, 0, 0)
#define V_CENTER tft.color565(255, 0, 0)
#define H_CENTER tft.color565(255, 0, 0)

  // draw minor lines first so that the major lines overlap them on the
  // cross-sections
  for (int v = (GRID_STEP / 2) - 1; v < SCREEN_WIDTH; v += GRID_STEP)
  {
    // minor
    tft.drawFastVLine(v, 0, SCREEN_HEIGHT, MINOR_GRID);
  }
  for (int h = (GRID_STEP / 2) - 1; h < SCREEN_HEIGHT; h += GRID_STEP)
  {
    // minor
    tft.drawFastHLine(0, h, SCREEN_HEIGHT, MINOR_GRID);
  }

  // next major lines, overlapping the minor lines at cross-sections
  for (int v = GRID_STEP - 1; v < SCREEN_WIDTH; v += GRID_STEP)
  {
    // main
    tft.drawFastVLine(v, 0, SCREEN_HEIGHT, MAJOR_GRID);
  }
  for (int h = GRID_STEP - 1; h < SCREEN_HEIGHT; h += GRID_STEP)
  {
    // main:
    tft.drawFastHLine(0, h, SCREEN_HEIGHT, MAJOR_GRID);
  }
  // edge lines
  // tft.drawFastVLine(0, 0, SCREEN_HEIGHT - 1, GRID_EDGE);
  // tft.drawFastVLine(SCREEN_WIDTH - 1, 0, SCREEN_HEIGHT - 1, GRID_EDGE);
  // tft.drawFastHLine(0, 0, SCREEN_WIDTH - 1, GRID_EDGE);
  // tft.drawFastHLine(0, SCREEN_HEIGHT - 1, SCREEN_HEIGHT - 1, GRID_EDGE);
  // center lines
  tft.drawFastVLine(SCREEN_WIDTH / 2 - 1, 0, SCREEN_HEIGHT - 1, V_CENTER);
  tft.drawFastHLine(0, SCREEN_HEIGHT / 2 - 1, SCREEN_HEIGHT - 1, V_CENTER);
}
8

Yes in my opinion it's better like this, but I still don't understand why you need this grid ? In TFT_ESPI library there are functions to draw text at center (horizontally, vertically, or both), and to get text width and height, then you can use simple math to align and place things without having to count pixels manually... :slight_smile:

9

I agree! But I'm a visual oriented person, so this is helpful for me to position the text... I need to SEE how I can place text and what room is left for other purposes etc. Then, in the code I use an array for the x and y positioning of the text and editing cursor.

10

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.