ST7735 SPI color display with ESP8266: a flicker-free NTP clock

Step 1

What do you need for this?

Arduino IDE (free) — with the ESP8266 board manager URL configured
ST7735 display — e.g. on AliExpress
WiFiManager library — for a WiFi connection without a hard-coded password
TFT_eSPI library — fast and flicker-free, unlike the default Adafruit library
An ESP8266 board — e.g. an inexpensive starter pack
Solderless connecting wires

Wiring & sketch

SPI display ST7735 (160×128px) + ESP8266

With Adafruit's library, this code causes flickering on the screen. Therefore, the (much faster) library TFT_eSPI was chosen here. You have to put a file "User_Setup.h" in the folder of the library "TFT_eSPI" (see tip below).

Connections:

ESP8266   ======   128*160 display
==================================
  3V3   --------------- VCC
  GND   --------------- GND
  D8    --------------- CS
  D4    --------------- RESET
  D3    --------------- A0
  D7    --------------- SDA
  D5    --------------- SCK
  3V3   --------------- LED

Sketch:

#include <WiFiManager.h>  // https://github.com/tzapu/WiFiManager/
#include <TFT_eSPI.h>     // https://github.com/Bodmer/TFT_eSPI

WiFiManager myWiFi;
TFT_eSPI tft = TFT_eSPI();
TFT_eSprite sprite = TFT_eSprite(&tft);
struct tm tInfo;  // https://cplusplus.com/reference/ctime/tm/
char weekDay[7][10] = { "zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag" };

void setup() {
  tft.init(), tft.setRotation(1);
  myWiFi.setAPCallback(showMessageNoConnection);  // is called when no wifi was found
  myWiFi.autoConnect("ST7735_ESP");
  sprite.createSprite(160, 128);  // sprite for faster rendering
  configTzTime(PSTR("CET-1CEST,M3.5.0,M10.5.0/3"), "be.pool.ntp.org");
  sprite.setTextSize(1);  // time zones: https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
}

void loop() {
  getLocalTime(&tInfo);  // sntp sync at startup & every hour from then on (esp8266)
  sprite.fillScreen(TFT_BLACK);
  sprite.setTextColor(TFT_CYAN, TFT_BLACK);
  sprite.setTextFont(7), sprite.setCursor(0, 0, 7);
  sprite.printf("%02d:%02d", tInfo.tm_hour, tInfo.tm_min);
  sprite.setCursor(142, 34, 2);
  sprite.printf("%02d", tInfo.tm_sec);
  sprite.setTextColor(TFT_YELLOW, TFT_BLACK), sprite.setFreeFont(&FreeSansBold12pt7b);  // custom font
  sprite.drawCentreString(weekDay[tInfo.tm_wday], 80, 66, 1);
  sprite.setTextColor(TFT_GREEN, TFT_BLACK), sprite.setCursor(20, 120, 4);
  sprite.printf("%02d-%02d-%04d", tInfo.tm_mday, 1 + tInfo.tm_mon, 1900 + tInfo.tm_year);  // dd-mm-yyyy
  sprite.drawRect(-1, 56, 162, 40, TFT_WHITE);
  sprite.pushSprite(0, 0);
}

void showMessageNoConnection(WiFiManager* myWiFi) {
  tft.fillScreen(TFT_NAVY);
  tft.setTextColor(TFT_YELLOW), tft.setCursor(0, 0, 2);
  tft.print(F("WiFi: no connection\nConnect to hotspot\nST7735_ESP and open\n"));
  tft.print(F("a browser at address\n192.168.4.1\nto enter network name\nand password"));
}

You can find the contents of the "User_Setup.h" file for an ST7735 display at github.com/Bodmer/TFT_eSPI.

TFT_eSPI — heads up To keep this overview simple, we edit the contents of the "User_Setup.h" file directly. That's a quick solution if you want to get one screen working and see fast results.

If you use multiple displays and/or don't want to lose data when you install a new copy of this library, it's better to follow the tip from the library's designer: github.com/Bodmer/TFT_eSPI/#tips.

You can comment out the entire contents of "User_Setup.h" if you work that way.

More displays with the ESP8266 / ESP32

Curious about other displays? Check out the full overview, including TM1637, SSD1306, SH1106, ST7789, e-paper and integrated displays like the Lilygo T-Display and the Waveshare ESP32-S3.