Using the 1.77″ ST7735 TFT LCD with ESP32

The 1.77″ ST7735 TFT LCD is a popular small-sized display, widely used in DIY projects for its vivid colors and compact size. Coupled with the powerful ESP32 microcontroller, it becomes an excellent choice for IoT projects. This tutorial will guide you through the process of interfacing the ST7735 with the ESP32 using the Adafruit ST7735 library.

Materials Needed

Wiring Diagram

The ST7735 module typically has the following pins:

• VCC: Power (3.3V or 5V)
• GND: Ground
• CS: Chip Select
• RESET: Reset
• RS/DC: Register Select or Data/Command
• SDI/MOSI: Serial Data Input / Master Out Slave In
• SCK: Serial Clock
• LED: Backlight control (optional)

Here’s the wiring setup for connecting the ST7735 to the ESP32:

Setting Up the Arduino IDE

Install the ESP32 Board Package:

If this is not your first time using ESP32 and has compiled code for it before using Arduino IDE, skip this step.

• Go to File > Preferences.
• Add the following URL to the “Additional Boards Manager URLs” field: https://dl.espressif.com/dl/package_esp32_index.json
• Go to Tools > Board > Boards Manager and search for “ESP32”. Install the package.

Install the Adafruit ST7735 Library:

• Go to Sketch > Include Library > Manage Libraries.
• Search for “Adafruit ST7735” and click Install. Agree to install other dependencies.

Install Adafruit GFX Library:

• Search for “Adafruit GFX Library” in the Library Manager and install it.

Writing the Code

Below is a sample code to initialize and display text on the ST7735:

#include <Adafruit_ST7735.h>
#include <Adafruit_ST7735.h>

// Define pins
#define TFT_CS    5
#define TFT_RST   4
#define TFT_DC    2

// Create an instance of the ST7735 class
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

void setup() {
  // Initialize serial communication
  Serial.begin(115200);

  // Initialize the display
  tft.initR(INITR_BLACKTAB); // For 1.8" displays, use INITR_144GREENTAB for 1.44"
  tft.setRotation(1); // Adjust orientation

  // Clear the screen with a color
  tft.fillScreen(ST77XX_BLACK);

  // Display text
  tft.setTextColor(ST77XX_WHITE);
  tft.setTextSize(2);
  tft.setCursor(10, 30);
  tft.println("Hello, ST7735!");
}

void loop() {
  // You can update the screen here if needed
}

Uploading the Code

1. Connect your ESP32 to your computer via USB.
2. In the Arduino IDE, go to Tools > Board and select your ESP32 board (e.g., “ESP32 Dev Module”).
3. Select the correct Port from the Tools menu.
4. Click the Upload button.

Once the code is uploaded, the display should show “Hello, ST7735!”.

Additional Features

Displaying Shapes

// Draw a red rectangle
tft.fillRect(20, 50, 60, 30, ST77XX_RED);

Displaying Images

Use libraries like Adafruit_ImageReader to display BMP images stored on an SD card.

Adjusting Brightness

If your module supports LED pin control, you can adjust the backlight brightness using PWM.

Troubleshooting

1. No Display Output:
   • Double-check your wiring.
   • Ensure the correct pin definitions in the code.
2. Distorted Colors:
   • Verify the initialization code (e.g.,  INITR_BLACKTAB for your specific display).
3. Compilation Errors:
   • Ensure both the Adafruit ST7735 and GFX libraries are installed.

Conclusion

Using the 1.77″ ST7735 TFT LCD with the ESP32 is a straightforward process with the Adafruit library. This guide covered everything from wiring and setup to displaying text and shapes. With these basics, you can expand your project to include graphics, animations, or IoT dashboards.

If you want to create custom graphics or convert images to LCD bitmap, try our online LCD bitmap converter.

Happy tinkering!