Access lcd tft 1.8 inch with esp32

Modul layar TFT LCD 1.8 inci adalah display berwarna berukuran kecil dengan resolusi (128 x 160) piksel. Layar ini sangat populer untuk proyek mikrokontroler seperti Arduino dan ESP32.

Berikut adalah detail spesifikasi dan panduan singkat untuk modul ini:

Spesifikasi Utama
  • Driver IC: Umumnya menggunakan ST7735 atau ST7735S
  • Resolusi: (128 x 160) piksel (warna RGB)
  • Komunikasi: Antarmuka SPI 4-wire (mendukung write-only untuk grafis)
  • Fitur Tambahan: Sering dilengkapi dengan slot MicroSD di bagian belakang.
Kompatibilitas Mikrokontroler
  • Arduino & ESP32: Kompatibel secara penuh. Biasanya membutuhkan pustaka (library) Adafruit_GFX dan Adafruit_ST7735 di IDE Arduino.
  • Tegangan Logika: Sebagian modul mendukung input (5V) dan (3.3V), namun ada pula yang memerlukan pembatas tegangan (voltage divider) jika langsung dihubungkan dengan pin (5V).
LCD TFT 1.8 Inch with driver ST7735

Koneksi kabel antara LCD TFT dengan ESP32

 

Table koneksi kabel antara LCD TFT 1.8 Inch dengan ESp32

Implementasi Rangkaian LCD TFT 1.8 Inch dengan ESP32

 

//This code was created by Gapmekatron
//Copyright © 2026 gapmekatron.com

#include Adafruit_GFX.h
#include Adafruit_ST7735.h
#include SPI.h

// TFT Pin Config sesuai gambar diatas
#define TFT_DC    12  //alternatif lain 16
#define TFT_CS    13  //alternatif lain 22 
#define TFT_MOSI  14  //alternatif lain 23
#define TFT_CLK   27  //alternatif lain 18
#define TFT_RST   0
#define TFT_MISO  0

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST);

// Warna
#define BLACK    ST77XX_BLACK
#define WHITE    ST77XX_WHITE
#define RED      ST77XX_RED
#define GREEN    ST77XX_GREEN
#define BLUE     ST77XX_BLUE
#define CYAN     ST77XX_CYAN
#define MAGENTA  ST77XX_MAGENTA
#define YELLOW   ST77XX_YELLOW
 
// Nilai sensor & target
int pm25 = 56, pm10 = 60, co = 60, tempC = 29, hum = 70, voc = 45;
int target_pm25, target_pm10, target_co, target_tempC, target_hum, target_voc;

unsigned long lastUpdate = 0;
unsigned long newDataTimer = 0;

// Koordinat untuk angka
int x_pm25 = 10, y_pm25 = 38;
int x_pm10 = 10, y_pm10 = 66;
int x_co   = 10, y_co   = 94;
int x_temp = 88, y_temp = 38;
int x_hum  = 88, y_hum  = 66;
int x_voc  = 88, y_voc  = 94;

void drawStaticLayout() {
  tft.fillScreen(BLACK);

  // Judul
  tft.setTextColor(YELLOW);
  tft.setTextSize(1);
  tft.setCursor(8, 2);
  tft.println("Air Quality Monitoring");
  tft.setCursor(35, 12);
  tft.println("System (AQMS)");

  // Kotak kiri
  tft.fillRect(5, 28, 72, 25, BLUE);
  tft.fillRect(5, 56, 72, 25, BLUE);
  tft.fillRect(5, 84, 72, 25, MAGENTA);

  // Kotak kanan
  tft.fillRect(83, 28, 72, 25, RED);
  tft.fillRect(83, 56, 72, 25, RED);
  tft.fillRect(83, 84, 72, 25, MAGENTA);

  // Label
  tft.setTextColor(WHITE);
  tft.setCursor(10, 30);  tft.print("PM2.5 :");
  tft.setCursor(10, 58);  tft.print("PM10  :");
  tft.setCursor(10, 86);  tft.print("CO    :");

  tft.setCursor(88, 30);  tft.print("Temp :");
  tft.setCursor(88, 58);  tft.print("Humidity:");
  tft.setCursor(88, 86);  tft.print("VOC :");
}

void updateValue(int x, int y, int ¤tValue, int targetValue, String unit) {
  // Hapus angka lama (hanya area angka)
  tft.fillRect(x, y, 60, 10, BLACK);

  // Gerakkan angka perlahan ke target
  if (currentValue < targetValue) currentValue++;
  else if (currentValue > targetValue) currentValue--;

  // Tulis angka baru
  tft.setTextColor(WHITE);
  tft.setCursor(x, y);
  tft.printf("%d %s", currentValue, unit.c_str());
}

void setup() {
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(1);
  randomSeed(analogRead(34));

  drawStaticLayout();

  // Set target awal sama dengan nilai awal
  target_pm25 = pm25;
  target_pm10 = pm10;
  target_co   = co;
  target_tempC = tempC;
  target_hum  = hum;
  target_voc  = voc;
}

void loop() {
  unsigned long now = millis();

  // Ganti target setiap 3 detik
  if (now - newDataTimer > 3000) {
    newDataTimer = now;
    target_pm25  = random(10, 100);
    target_pm10  = random(20, 150);
    target_co    = random(1, 100);
    target_tempC = random(20, 35);
    target_hum   = random(40, 90);
    target_voc   = random(10, 70);
  }

  // Update angka tiap 50 ms
  if (now - lastUpdate > 500) {
    lastUpdate = now;

    updateValue(x_pm25, y_pm25, pm25, target_pm25, "ug/m3");
    updateValue(x_pm10, y_pm10, pm10, target_pm10, "ug/m3");
    updateValue(x_co,   y_co,   co,   target_co,   "ppm");

    updateValue(x_temp, y_temp, tempC, target_tempC, "C");
    updateValue(x_hum,  y_hum,  hum,   target_hum,   "%");
    updateValue(x_voc,  y_voc,  voc,   target_voc,   "ug/m3");
  }
}