edit

Basics of the TFT LCD Screen

Pixel Coordinates Systems

A digital 2-D image is made up of rows and columns of pixels. A pixel in the image is specified by saying which column and which row the pixel is in. In simple terms, a pixel can be identified by a pair of integers providing the column number and the row number. For example, the pixel with coordinates (4,7) would lie in column 4, and row 7.

Conventionally, columns are numbered from the top left to right, starting from zero, but in some cases, it can also start from other corners(by setting rotation).

8-bit & 16-bit colour model

Pixels also expressed in colour form, so also better to cover some colour models. The 8 bit and 16 bit colour models are good for MCUs to work with so this is a good start. Theses two colour models consist of 3 colour components - Red, Green, and Blue. Depending on the colour model, these 3 colour components will be stored into 8 bits or 16 bits variable.

8-bit colour

Bit 7 6 5 4 3 2 1 0
Data Red Red Red Green Green Green Blue Blue

16-bit colour

Bit 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0
Data Red Red Red Red Red Green Green Green Green Green Green Blue Blue Blue Blue Blue

Here are some basic pre-defined example colours(16-bit) including in the LCD library:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
#define TFT_BLACK       0x0000      /*   0,   0,   0 */
#define TFT_NAVY        0x000F      /*   0,   0, 128 */
#define TFT_DARKGREEN   0x03E0      /*   0, 128,   0 */
#define TFT_DARKCYAN    0x03EF      /*   0, 128, 128 */
#define TFT_MAROON      0x7800      /* 128,   0,   0 */
#define TFT_PURPLE      0x780F      /* 128,   0, 128 */
#define TFT_OLIVE       0x7BE0      /* 128, 128,   0 */
#define TFT_LIGHTGREY   0xC618      /* 192, 192, 192 */
#define TFT_DARKGREY    0x7BEF      /* 128, 128, 128 */
#define TFT_BLUE        0x001F      /*   0,   0, 255 */
#define TFT_GREEN       0x07E0      /*   0, 255,   0 */
#define TFT_CYAN        0x07FF      /*   0, 255, 255 */
#define TFT_RED         0xF800      /* 255,   0,   0 */
#define TFT_MAGENTA     0xF81F      /* 255,   0, 255 */
#define TFT_YELLOW      0xFFE0      /* 255, 255,   0 */
#define TFT_WHITE       0xFFFF      /* 255, 255, 255 */
#define TFT_ORANGE      0xFDA0      /* 255, 180,   0 */
#define TFT_GREENYELLOW 0xB7E0      /* 180, 255,   0 */

TFT LCD Screen Initialisation

To initialise the TFT LCD screen on Wio Terminal:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#include"TFT_eSPI.h"
TFT_eSPI tft;

void setup() {
  ...
    tft.begin();
    tft.setRotation(r);
    digitalWrite(LCD_BACKLIGHT, HIGH); // turn on the backlight
  ...
}

where r is the rotation of the TFT LCD screen (from 0 to 3), meaning which corner it will start.

Example code

This example initialises the TFT LCD screen on Wio Terminal and fills the screen with colour red.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
#include"TFT_eSPI.h"
TFT_eSPI tft;

void setup() {
    tft.begin();
    tft.setRotation(3);

    tft.fillScreen(TFT_RED); // fills entire the screen with colour red
}

void loop() {

}