A Hands-On Guide to Displaying Images with an ESP8266 and a Full-Color TFT Display

				
					/*
 * ESP8266 + 1.54" 240x240 TFT (ST7789) ultra-detailed starter example
 * Libraries: Adafruit GFX, Adafruit ST7789
 * Wiring (recommended):
 *   TFT_SCLK -> D5 (GPIO14)
 *   TFT_MOSI -> D7 (GPIO13)
 *   TFT_CS   -> D1 (GPIO5)
 *   TFT_DC   -> D2 (GPIO4)
 *   TFT_RST  -> D0 (GPIO16)  (or connect to board RST and set TFT_RST to -1)
 *   BLK/LED  -> 3V3 (or to D6 for brightness control)
 */

#include <Arduino.h>
#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ST7789.h>

// ----------- Modify to match your wiring -----------
#define TFT_CS   D1   // GPIO5
#define TFT_DC   D2   // GPIO4
#define TFT_RST  D0   // GPIO16; if your screen's RES is tied to the board RST, set this to -1
// Optional backlight PWM pin (if BLK is tied to D6): comment the two lines below out if unused
//#define TFT_BLK  D6   // GPIO12
//#define USE_BL_PWM
// --------------------------------------------------

// Use hardware SPI: SCLK=D5 (GPIO14), MOSI=D7 (GPIO13)
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);

void drawGradientDemo();    // Decl: demo of "full-screen image" (color gradient)
void drawShapesDemo();      // Decl: geometric shapes demo

void setup() {
  Serial.begin(115200);
  delay(100);

#ifdef USE_BL_PWM
  pinMode(TFT_BLK, OUTPUT);
  analogWriteRange(1023);   // ESP8266 PWM 0~1023
  analogWriteFreq(1000);    // 1 kHz to avoid visible flicker
  analogWrite(TFT_BLK, 900); // Backlight level (0~1023), higher = brighter
#endif

  // Initialize ST7789: resolution 240x240, no offset
  tft.init(240, 240);
  tft.setRotation(2); // 0~3; try and choose; 2 is usually upright when the USB port is on the right/top
  tft.fillScreen(ST77XX_BLACK);

  // Boot text
  tft.setTextWrap(true);
  tft.setTextSize(2);
  tft.setTextColor(ST77XX_WHITE);
  tft.setCursor(10, 10);
  tft.println(F("ESP8266 + ST7789"));
  tft.setTextSize(1);
  tft.setCursor(10, 35);
  tft.println(F("Hello! Screen OK if you see this."));

  delay(1200);

  drawShapesDemo();     // Draw lines, circles, rectangles, etc.
  delay(1200);

  drawGradientDemo();   // "Show a full-screen picture" (color gradient)
  // Reaching here means: driver/wiring/libraries are all OK!
}

void loop() {
  // Do nothing in loop; screen stays as-is
}

void drawShapesDemo() {
  tft.fillScreen(ST77XX_BLACK);

  // Color stripes
  uint16_t colors[] = {
    ST77XX_RED, ST77XX_ORANGE, ST77XX_YELLOW, ST77XX_GREEN,
    ST77XX_CYAN, ST77XX_BLUE, ST77XX_MAGENTA, ST77XX_WHITE
  };
  for (int i = 0; i < 8; i++) {
    tft.fillRect(i * 30, 0, 30, 40, colors[i]);
  }

  // White frames
  tft.drawRect(5, 45, 230, 120, ST77XX_WHITE);
  tft.drawRoundRect(10, 50, 220, 110, 12, ST77XX_CYAN);

  // Circles and line
  tft.fillCircle(60, 100, 20, ST77XX_YELLOW);
  tft.drawCircle(60, 100, 28, ST77XX_WHITE);
  tft.drawLine(10, 200, 230, 200, ST77XX_GREEN);

  // Text
  tft.setTextSize(2);
  tft.setTextColor(ST77XX_WHITE, ST77XX_BLACK);
  tft.setCursor(20, 160);
  tft.println(F("Graphics OK"));

  delay(800);
}

void drawGradientDemo() {
  // Generate and display a 240x240 color gradient (equivalent to showing an "image")
  // Technically uses pushColor to stream pixels; looks smooth and saturated.
  tft.startWrite();
  tft.setAddrWindow(0, 0, 240, 240);
  for (int y = 0; y < 240; y++) {
    for (int x = 0; x < 240; x++) {
      // Compute an RGB565 gradient: R left->right, G top->bottom, B varies along the diagonal
      uint8_t r = (uint8_t)((x * 255) / 239);
      uint8_t g = (uint8_t)((y * 255) / 239);
      uint8_t b = (uint8_t)(((x + y) * 255) / (239 + 239));
      // Convert to RGB565
      uint16_t color = ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
      tft.pushColor(color);
    }
  }
  tft.endWrite();

  tft.setTextSize(2);
  tft.setTextColor(ST77XX_WHITE);
  tft.setCursor(10, 10);
  tft.println(F("Full-screen gradient = 'image'"));
}