ST77xx TFT Color LCD
Overview
ST77xx TFT color LCD module that supports various screen sizes and resolutions. Uses SPI interface.
Supported Modules
- ST7735S/R (0.96″, 1.44″, 1.8″…)
- ST7789 (1.14″, 1.3″, 1.54″, 1.69″…)
- ST7796S (4″)
Supported GPIO
- Raspberry Pi 0~4
- Raspberry Pi 5
- BeagleBone Black/Green
- Jetson Nano
- FT232H, FT2232H, FT4232H
Commands
[INIT]
Enters initial configuration settings.
| Item | Type | Description |
|---|---|---|
| Type * | WRITE | Select the module type. |
| DC Pin | WRITE | Enter the GPIO number for the D/C (Data/Command) pin. |
| RESET Pin (Optional) ** | WRITE | Enter the GPIO number for the RESET pin. If not using RESET function, enter -1 and connect the pin to 3.3V. |
| SPI Mode *** | WRITE | Most ST7789 modules use SPI mode 0, but modules without CS pin must use SPI mode 3. |
* Applies only when I/O device is ST7735 or ST7789.
** ST7789 modules may not work properly without hardware RESET at startup. Therefore, it is recommended to use the RESET pin whenever possible.
*** Applies only when I/O device is ST7789. Some ST7789 modules do not have a CS pin, and in this case, SPI mode 3 must be selected for proper operation.
** ST7789 modules may not work properly without hardware RESET at startup. Therefore, it is recommended to use the RESET pin whenever possible.
*** Applies only when I/O device is ST7789. Some ST7789 modules do not have a CS pin, and in this case, SPI mode 3 must be selected for proper operation.
[SET_ROTATION]
Sets the display orientation.
| Item | Type | Description |
|---|---|---|
| Rotation | WRITE | Select the orientation for displaying text, images, etc. on the display. (0°, 90°, 180°, 270°) |
[CLEAR]
Clears all content displayed on the screen.
[SET_CURSOR]
Sets the position where text will be written on the display.
| Item | Type | Description |
|---|---|---|
| Position (x) | WRITE | Enter the starting position (x) for the text. The leftmost pixel is 0, increasing to the right. |
| Position (y) | WRITE | Enter the starting position (y) for the text. The topmost pixel is 0, increasing downward. |
[PRINT_TEXT]
Writes text to the display.
| Item | Type | Description |
|---|---|---|
| Text | WRITE | Enter the text to display. |
| Size | WRITE | Text size. (1~255) |
| Auto Wrap | WRITE | Determines whether to automatically wrap text when it exceeds the horizontal display length. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[DRAW_PIXEL]
Draws a pixel on the display.
| Item | Type | Description |
|---|---|---|
| Position (x) | WRITE | Enter the pixel position (x). The leftmost pixel is 0, increasing to the right. |
| Position (y) | WRITE | Enter the pixel position (y). The topmost pixel is 0, increasing downward. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[DRAW_LINE]
Draws a straight line on the display.
| Item | Type | Description |
|---|---|---|
| Start Point (x) | WRITE | Enter the starting point position (x) of the line. The leftmost pixel is 0, increasing to the right. |
| Start Point (y) | WRITE | Enter the starting point position (y) of the line. The topmost pixel is 0, increasing downward. |
| End Point (x) | WRITE | Enter the ending point position (x) of the line. The leftmost pixel is 0, increasing to the right. |
| End Point (y) | WRITE | Enter the ending point position (y) of the line. The topmost pixel is 0, increasing downward. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[DRAW_TRIANGLE]
Draws a hollow triangle on the display.
| Item | Type | Description |
|---|---|---|
| Point 1 (x) | WRITE | Enter the position (x) of point 1 of the triangle. The leftmost pixel is 0, increasing to the right. |
| Point 1 (y) | WRITE | Enter the position (y) of point 1 of the triangle. The topmost pixel is 0, increasing downward. |
| Point 2 (x) | WRITE | Enter the position (x) of point 2 of the triangle. The leftmost pixel is 0, increasing to the right. |
| Point 2 (y) | WRITE | Enter the position (y) of point 2 of the triangle. The topmost pixel is 0, increasing downward. |
| Point 3 (x) | WRITE | Enter the position (x) of point 3 of the triangle. The leftmost pixel is 0, increasing to the right. |
| Point 3 (y) | WRITE | Enter the position (y) of point 3 of the triangle. The topmost pixel is 0, increasing downward. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[FILL_TRIANGLE]
Draws a filled triangle on the display.
| Item | Type | Description |
|---|---|---|
| Point 1 (x) | WRITE | Enter the position (x) of point 1 of the triangle. The leftmost pixel is 0, increasing to the right. |
| Point 1 (y) | WRITE | Enter the position (y) of point 1 of the triangle. The topmost pixel is 0, increasing downward. |
| Point 2 (x) | WRITE | Enter the position (x) of point 2 of the triangle. The leftmost pixel is 0, increasing to the right. |
| Point 2 (y) | WRITE | Enter the position (y) of point 2 of the triangle. The topmost pixel is 0, increasing downward. |
| Point 3 (x) | WRITE | Enter the position (x) of point 3 of the triangle. The leftmost pixel is 0, increasing to the right. |
| Point 3 (y) | WRITE | Enter the position (y) of point 3 of the triangle. The topmost pixel is 0, increasing downward. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[DRAW_RECT]
Draws a hollow rectangle on the display.
| Item | Type | Description |
|---|---|---|
| Start Point (x) | WRITE | Enter the starting point (top-left) position (x) of the rectangle. The leftmost pixel is 0, increasing to the right. |
| Start Point (y) | WRITE | Enter the starting point (top-left) position (y) of the rectangle. The topmost pixel is 0, increasing downward. |
| Width | WRITE | Enter the width of the rectangle. |
| Height | WRITE | Enter the height of the rectangle. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[FILL_RECT]
Draws a filled rectangle on the display.
| Item | Type | Description |
|---|---|---|
| Start Point (x) | WRITE | Enter the starting point (top-left) position (x) of the rectangle. The leftmost pixel is 0, increasing to the right. |
| Start Point (y) | WRITE | Enter the starting point (top-left) position (y) of the rectangle. The topmost pixel is 0, increasing downward. |
| Width | WRITE | Enter the width of the rectangle. |
| Height | WRITE | Enter the height of the rectangle. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[DRAW_ROUND_RECT]
Draws a hollow rounded rectangle on the display.
| Item | Type | Description |
|---|---|---|
| Start Point (x) | WRITE | Enter the starting point (top-left) position (x) of the rectangle. The leftmost pixel is 0, increasing to the right. |
| Start Point (y) | WRITE | Enter the starting point (top-left) position (y) of the rectangle. The topmost pixel is 0, increasing downward. |
| Width | WRITE | Enter the width of the rectangle. |
| Height | WRITE | Enter the height of the rectangle. |
| Corner Radius | WRITE | Enter the radius of the rectangle corners. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[FILL_ROUND_RECT]
Draws a filled rounded rectangle on the display.
| Item | Type | Description |
|---|---|---|
| Start Point (x) | WRITE | Enter the starting point (top-left) position (x) of the rectangle. The leftmost pixel is 0, increasing to the right. |
| Start Point (y) | WRITE | Enter the starting point (top-left) position (y) of the rectangle. The topmost pixel is 0, increasing downward. |
| Width | WRITE | Enter the width of the rectangle. |
| Height | WRITE | Enter the height of the rectangle. |
| Corner Radius | WRITE | Enter the radius of the rectangle corners. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[DRAW_CIRCLE]
Draws a hollow circle on the display.
| Item | Type | Description |
|---|---|---|
| Center (x) | WRITE | Enter the center position (x) of the circle. The leftmost pixel is 0, increasing to the right. |
| Center (y) | WRITE | Enter the center position (y) of the circle. The topmost pixel is 0, increasing downward. |
| Radius | WRITE | Enter the radius of the circle. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[FILL_CIRCLE]
Draws a filled circle on the display.
| Item | Type | Description |
|---|---|---|
| Center (x) | WRITE | Enter the center position (x) of the circle. The leftmost pixel is 0, increasing to the right. |
| Center (y) | WRITE | Enter the center position (y) of the circle. The topmost pixel is 0, increasing downward. |
| Radius | WRITE | Enter the radius of the circle. |
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[FILL_SCREEN]
Fills the entire display with the specified color.
| Item | Type | Description |
|---|---|---|
| Color Type | WRITE | Select the type of color to set. |
Color Type: RGB
| Item | Type | Description |
|---|---|---|
| R | WRITE | Enter the R component of the color. (0~255) |
| G | WRITE | Enter the G component of the color. (0~255) |
| B | WRITE | Enter the B component of the color. (0~255) |
Color Type: HSV
| Item | Type | Description |
|---|---|---|
| H | WRITE | Enter the H (Hue) component of the color. (0~360) |
| S | WRITE | Enter the S (Saturation) component of the color. (0~100) |
| V | WRITE | Enter the V (Value, brightness) component of the color. (0~100) |
[DRAW_RGB_BITMAP]
Displays a BMP format image file on the display.
| Item | Type | Description |
|---|---|---|
| File Path * | WRITE | Enter the local path of the image file. (e.g., /home/pi/test.bmp) |
| Start Point (x) | WRITE | Enter the pixel position (x) where the top-left corner of the image will be located. The leftmost is 0, increasing to the right. |
| Start Point (y) | WRITE | Enter the pixel position (y) where the top-left corner of the image will be located. Increases downward. |
* Only Windows bitmap (*.bmp) format images can be used. (OS/2 bitmap is not supported)
* Image files must be located in the local path of the controller. (SD slot mounted on the display module is not used)
* Image files must be located in the local path of the controller. (SD slot mounted on the display module is not used)
[INVERT_DISPLAY]
Sets whether to invert the display colors.
| Item | Type | Description |
|---|---|---|
| Color Inversion | WRITE | If true, displays inverted colors; if false, displays original colors. |
Example (ST7789)
Objective
Alternately display the following at 1-second intervals:
- “Hello Grablo” white text
- A filled red circle with center at (120, 160) and radius of 70
- BMP image
Parts
| Part | Quantity |
|---|---|
| Raspberry Pi 4 * | 1 |
| ST7789 TFT LCD | 1 |
* Other hardware can also be used. Refer to Supported GPIO.
Wiring
| ST7789 TFT LCD | GPIO |
|---|---|
| VCC | 3.3V |
| GND | GND |
| CS | 8 (SPI0 CE0) |
| RST | 23 * |
| D/C | 24 * |
| SDI (MOSI) | 10 (SPI0 MOSI) |
| SCK (SCLK) | 11 (SPI0 SCLK) |
| LED (BL) | 3.3V |
* Any GPIO pins can be used.
Project Link
