How to use a 1.77 inch TFT display with ESP8266?

How to use a 1.77 inch TFT display with ESP8266

To use a 1.77 inch 128x160 TFT display with an ESP8266, you need to connect the display’s SPI pins to the ESP8266’s GPIOs, install the Adafruit ST7735 and Adafruit GFX libraries in the Arduino IDE, and upload a sketch that initializes the display and draws graphics. The specific pin mapping is critical: the display’s CS (chip select) goes to GPIO 15, DC (data/command) to GPIO 2, RST (reset) to GPIO 4, MOSI to GPIO 13, SCK to GPIO 14, and VCC to 3.3V, with GND to ground. The backlight (LED) pin should connect to a 3.3V source through a 100-ohm resistor to limit current to about 20 mA, as the display’s backlight draws around 40 mA at full brightness. The ESP8266’s 3.3V regulator can supply up to 500 mA, but the display plus ESP8266 (which peaks at 300 mA during Wi-Fi transmission) can exceed this, so use a separate 3.3V regulator like the AMS1117-3.3 if you’re running from a 5V USB source. The 1.77 inch 128x160 tft display uses the ST7735S controller, which supports 262K colors (18-bit RGB) but the ESP8266 communicates via 16-bit color (RGB565) over SPI at up to 40 MHz, though the ESP8266’s SPI clock is typically limited to 20 MHz for reliable operation. The display’s resolution is 128x160 pixels, with a pixel pitch of 0.22 mm, giving a physical size of 28.03 mm x 35.04 mm. The viewing angle is 12 o’clock (typical for TN panels), so you’ll want to orient it in landscape mode for most applications, which requires setting the rotation in the library to 1 (0x80) or 3 (0xC0) depending on your wiring.

For the wiring, use female-to-female Dupont cables, keeping them under 10 cm to avoid signal degradation at higher SPI speeds. The ESP8266’s GPIO 15 (CS) must be pulled low with a 10k-ohm resistor to ground to ensure the display is selected by default; otherwise, the ESP8266 may boot into flash mode if GPIO 15 is high. Similarly, GPIO 0 (which is not used here) must be high during boot, so avoid connecting it to ground. The display’s SPI mode is mode 0 (CPOL=0, CPHA=0), meaning the clock idles low and data is sampled on the rising edge. The ST7735S datasheet specifies a maximum SPI clock of 15 MHz for write operations, but the ESP8266’s hardware SPI can run at 20 MHz with a 4-cycle delay, which is safe. To initialize the display, you need to send a sequence of commands: SWRESET (0x01) with a 150 ms delay, SLPOUT (0x11) with 150 ms, COLMOD (0x3A) with parameter 0x05 for 16-bit color, DISPON (0x29) with 100 ms, and then set the MADCTL (0x36) for orientation. The default orientation is portrait (MADCTL = 0x00), but for landscape, use 0x60 (row/column exchange) or 0xC0 (mirror + exchange). The display’s framebuffer is 128x160 pixels, which at 16-bit color is 40,960 bytes, but the ESP8266 has only 80 KB of RAM, so you cannot store a full framebuffer; instead, you must draw directly to the display using hardware SPI, which is fast enough for simple graphics at 30 FPS.

To set up the Arduino IDE, install the ESP8266 board package via the Boards Manager (URL: http://arduino.esp8266.com/stable/package_esp8266com_index.json), then select the NodeMCU 1.0 (ESP-12E) board. Install the Adafruit ST7735 library (version 1.10.0 or later) and the Adafruit GFX library (version 1.11.0 or later). In your sketch, include #include <Adafruit_GFX.h> and #include <Adafruit_ST7735.h>, then define the pins: #define TFT_CS 15, #define TFT_DC 2, #define TFT_RST 4, and create an instance: Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST). In setup(), call tft.initR(INITR_BLACKTAB) for the ST7735S (the black tab version), then tft.setRotation(1) for landscape. The library automatically handles the SPI initialization, but you can manually set SPI speed with tft.setSPISpeed(20000000) (20 MHz). To draw a pixel, use tft.drawPixel(x, y, ST7735_RED), which sends a command to set the address window and then write the pixel data. For bulk operations, use tft.fillScreen(ST7735_BLUE) to fill the screen in 12 ms at 20 MHz, or tft.drawBitmap(0, 0, myBitmap, 128, 160, ST7735_WHITE) to display a monochrome bitmap. The GFX library supports text with tft.setCursor(0, 0) and tft.print("Hello"), but the font is 5x7 pixels, so you can fit 25 characters per line (128/5) and 22 lines (160/7) in portrait mode.

Power consumption is a key consideration. The ESP8266 in deep sleep mode draws 80 µA, but the display’s backlight draws 40 mA, so for battery-powered projects, you should control the backlight via a MOSFET (e.g., 2N7002) connected to GPIO 5, which can be toggled with digitalWrite. The display itself draws 2 mA in standby (when backlight is off) and 5 mA during active drawing. The total current draw with the backlight on is about 45 mA (display) + 80 mA (ESP8266 active) = 125 mA, which is within the ESP8266’s regulator limit if you use a 500 mA supply. However, during Wi-Fi transmission, the ESP8266 can spike to 300 mA, so the total can reach 345 mA, requiring a 500 mA regulator or a 1A regulator like the LM1117-3.3. For a 3.7V LiPo battery, use a boost converter to 3.3V, as the display’s minimum voltage is 2.8V, but the ST7735S requires 3.3V for stable operation. The display’s logic voltage is 3.3V, but the ESP8266’s GPIOs are 3.3V tolerant, so no level shifting is needed. However, the SPI signals from the ESP8266 have a rise time of about 5 ns at 3.3V, which is fine for the display’s input threshold of 2.0V (Vih) and 0.8V (Vil).

For advanced usage, you can implement double buffering using the ESP8266’s SPI RAM (if you have an external 23K256 SRAM via SPI), but the internal RAM is too small. Instead, use partial updates: only update the region that changes. For example, to display a counter, redraw only the text area using tft.fillRect(x, y, w, h, ST7735_BLACK) and then tft.setCursor(x, y) with the new number. The display’s write speed is 10 ms per 128x160 full screen at 20 MHz, but the SPI transaction overhead adds 2 ms, so you can achieve 60 FPS for small updates. The ST7735S supports 8-bit parallel mode as well, but the ESP8266 lacks enough GPIOs for that (needs 8 data lines plus control), so SPI is the only practical option. The display’s command set includes 0x2A (CASET) and 0x2B (RASET) to set the column and row address windows, and 0x2C (RAMWR) to write pixel data. You can send raw pixel data in RGB565 format (5 bits red, 6 bits green, 5 bits blue) by packing two bytes per pixel: high byte (R[4:0] and G[5:3]) and low byte (G[2:0] and B[4:0]). For example, to send a red pixel (R=31, G=0, B=0), send 0xF8 0x00. The display’s gamma correction is set by default, but you can adjust it with commands 0xE0 (positive gamma) and 0xE1 (negative gamma), though this is rarely needed.

If you encounter issues, check the wiring: common mistakes include swapping MOSI and MISO (the display has no MISO pin, so it’s write-only), or connecting the backlight to a GPIO without a resistor, which can draw 40 mA and damage the pin. The ESP8266’s GPIOs are rated for 12 mA max, so always use a resistor or transistor. Another issue is the initial display color: if the screen shows a white or garbled pattern, the init sequence may be wrong. The ST7735S requires a 150 ms delay after reset, and the COLMOD command must be sent before any pixel data. The Adafruit library’s initR(INITR_BLACKTAB) works for the 1.77-inch display, but if you have a different variant (e.g., red tab), use INITR_REDTAB or INITR_GREENTAB. The display’s driver IC is the ST7735S, which is identical to the ST7735 but with a different init sequence, so the library handles it. To test the display, upload a simple sketch that fills the screen with red, green, blue, and white in sequence, with 1-second delays. If the colors are swapped (e.g., red appears blue), the RGB order is wrong; you can fix it by calling tft.setAddrWindow(0, 0, 128, 160) and then sending pixel data manually with the correct byte order.

For real-world applications, you can use this display for weather stations (showing temperature, humidity, and pressure from a BME280 sensor), clock displays (using an RTC DS3231), or game consoles (like a Pong clone). The ESP8266’s Wi-Fi capability allows you to fetch data from APIs, such as OpenWeatherMap, and display it on the screen. For example, to show the current temperature, you’d parse JSON data and draw text with tft.print(temperature). The display’s contrast is 350:1 typical, and the brightness is 250 cd/m², which is readable indoors but not in direct sunlight. The response time is 15 ms (rise) and 20 ms (fall), so it’s suitable for static or slow-moving graphics, but not video. The operating temperature range is -20°C to 70°C, so it’s fine for most indoor and outdoor use. The display’s interface is 4-wire SPI (CS, DC, MOSI, SCK), plus RST and backlight, totaling 6 pins. The connector is a 0.1-inch pitch header, which is breadboard-friendly. The display module itself measures 34.0 mm x 44.0 mm x 3.5 mm (including the PCB), and the active area is 28.03 mm x 35.04 mm, with a 0.5 mm bezel around the edges.

To optimize performance, use the ESP8266’s hardware SPI (SPI class) instead of bit-banging, as it’s 10x faster. The library uses SPI.beginTransaction() and SPI.transfer() for each command, which adds overhead. For bulk writes, you can use SPI.writeBytes() to send multiple pixels at once. The maximum SPI clock for the ESP8266 is 80 MHz, but the display’s limit is 15 MHz, so set it to 20 MHz for a safe margin. The display’s internal RAM is 128x160x18 bits = 368,640 bits, or 46,080 bytes, which is refreshed at 60 Hz. The ESP8266’s SPI transaction time for a full screen is 128*160*2 bytes = 40,960 bytes, sent at 20 MHz (20,000,000 bits per second), so 40,960*8/20,000,000 = 16.4 ms, plus overhead, total about 20 ms, giving 50 FPS. However, the ESP8266’s CPU is busy during SPI transfers, so you cannot do other tasks (like Wi-Fi) simultaneously. To solve this, use the ESP8266’s asynchronous SPI (via the ESPAsyncTCP library) or use a separate core (the ESP8266 has a single core, so multitasking is not possible). Instead, use a timer to update the display at 10 Hz and handle Wi-Fi in the main loop.

When using the display with the ESP8266, be aware of the boot process: GPIO 0 must be high, GPIO 2 must be high, and GPIO 15 must be low. Our wiring uses GPIO 2 for DC, which is high at boot (since it’s pulled up internally), and GPIO 15 for CS, which is pulled low with a resistor. GPIO 4 for RST is also high at boot, so no issues. If you connect the display’s CS to GPIO 0, the ESP8266 will boot into flash mode. Similarly, avoid using GPIO 1 (TX) or GPIO 3 (RX) for the display, as they are used for serial communication during programming. The recommended pins are: CS=15, DC=2, RST=4, MOSI=13, SCK=14, and backlight=5. These pins are all available on the NodeMCU and Wemos D1 Mini boards. For the Wemos D1 Mini, the pin mapping is different: D8=15, D4=2, D3=4, D7=13, D5=14, D1=5. The SPI pins (MOSI and SCK) are fixed to GPIO 13 and 14 on the ESP8266, so you cannot change them. The CS and DC pins can be any GPIO, but using the hardware SPI’s default CS (GPIO 15) is recommended for efficiency.

For a practical example, let’s build a simple weather station. Connect a DHT22 sensor to GPIO 12 (D6 on NodeMCU), and the display as above. In the sketch, include #include <DHT.h>, define the DHT pin, and in the loop, read temperature and humidity every 2 seconds, then display them. The code would look like: tft.fillScreen(ST7735_BLACK); tft.setCursor(0, 0); tft.setTextColor(ST7735_WHITE); tft.setTextSize(2); tft.print("Temp: "); tft.print(temp); tft.print(" C");. The text size 2 uses 10x14 pixels per character, so you can fit 12 characters per line (128/10) and 11 lines (160/14). To show the humidity, move the cursor to (0, 30). The DHT22 has a 2-second sampling interval, so the display updates at 0.5 Hz. If you want to add Wi-Fi, fetch weather data from an API once every 10 minutes, and display it. The ESP8266’s Wi-Fi library uses WiFi.begin(ssid, password), and you can use HTTPClient to get JSON data. Parse it with the ArduinoJson library, and display the temperature, humidity, and pressure. The display’s 128x160 resolution is enough for three lines of text with icons, but for icons, you’ll need to create bitmaps (e.g., a sun icon at 32x32 pixels) and use tft.drawBitmap(). The bitmap data must be stored in PROGMEM to save RAM, using const unsigned char sun[] PROGMEM = { ... }. The GFX library’s drawBitmap() accepts PROGMEM data automatically.

In terms of reliability, the display’s FPC cable is fragile, so avoid bending it more than 10 times. The connector is a ZIF type, which requires inserting the cable straight and locking the latch. The display’s operating voltage is 3.3V, but the backlight LED has a forward voltage of 3.2V at 20 mA, so a 100-ohm resistor from 3.3V gives 1 mA, which is too low; use a 10-ohm resistor for 20 mA (3.3V - 3.2V = 0.1V, 0.1V/0.02A = 5 ohms, so use 10 ohms for safety). The backlight current should not exceed 25 mA, as the LED’s max rating is 25 mA. The display’s power consumption at