Tutorial panduan mengakses LCD TFT 1.8 dengan modul ESP32 yang sudah dilengkapi wifi dan bluetooth. LCD TFT 1.8 belum memliki fitur layar sentuh atau touchscreen, tapi lcd TFT ini sudah sangat modern yang dapat menampilkan warna RGB. Artikel ini akan menjelaskan secara lengkap bagaimana cara mengakses antarmuka esp32 dengan LCD TFT 1.8 ST7735.
LCD TFT 1.8 harganya sangat terjangkau sekitar 70 ribu rupiah an yang bisa anda beli di marketplace terpercaya, biasanya saya membeli di tokopedia.com
ESP32 yang saya gunakan adalah tipe Wemos D1 Mini ESP32 karena bentuk fisiknya lebih kecil dibanding yang tipe NodeMCU atau TTGO. Jika kalian ingin menggunakan ESP32 jenis lain untuk mengakses LCD TFT 1.8 juga sangat bisa karena memang pinout ESP32 sama saja.
Langkah Mengakses LCD TFT 1.8 dengan ESP32
Untuk memulai menyalakan LCD TFT 1.8 kita perlu memiliki modulnya terlebih dahulu karena jika tidak punya akan sulit mengaplikasikanya
Untuk software simulasi juga saya belum menemukan software simulasi arduino yang sudah dilengkapi dengan library LCD TFT 1.8 dan ESP32
Setelah memiliki modul yang dibutuhkan kemudian anda bisa merangkainya dan membuat koding dengan arduino IDE untuk ESP32
Keterangan Pin LCD TFT 1.8 dan juga ESP32
| PIN ESP32 | PIN LCD TFT 1.8 | Keterangan |
| 18 | SCK | Bisa diganti ke pin lain tapi nanti lebih lambat prosesnya |
| 23 | SDA / MOSI | Bisa diganti ke pin lain tapi nanti lebih lambat prosesnya |
| 3.3V | LED | Untuk menyalakan lampu dilatar belakang |
| VCC | 5V | Power |
| GND | GND | Power |
| 14 | Reset | Bisa diganti pin GPIO lain |
| 33 | CS | Bisa diganti pin GPIO lain |
| 26 | DC/A0 | Bisa diganti pin GPIO lain |
Tutorial ESP32 dan LCD TFT 1.8
- Rangkai ESP32 Wemos atau NodeMCU dengan LCD TFT 1.8 seperti pada gambar diatas
- Download library Adafruit_GFX.h
- Download library Adafruit_ST7735.h
- Perhatikan pinout yang ada di tabel pin LCD TFT dan fungsinya
- Buka program Example dan sesuaikan konfigurasi pin
- Atau Copy Paste Program dibawah ini
#include <Adafruit_GFX.h> // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library for ST7735
#include <Adafruit_ST7789.h> // Hardware-specific library for ST7789
#include <SPI.h>
// For the breakout, you can use any 2 or 3 pins
// These pins will also work for the 1.8" TFT shield
#define TFT_CS 33
#define TFT_RST 14 // you can also connect this to the Arduino reset
// in which case, set this #define pin to -1!
#define TFT_DC 26
// Option 1 (recommended): must use the hardware SPI pins
// (for UNO thats sclk = 13 and sid = 11) and pin 10 must be
// an output. This is much faster - also required if you want
// to use the microSD card (see the image drawing example)
// For 1.44" and 1.8" TFT with ST7735 use
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
// For 1.54" TFT with ST7789
//Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);
// Option 2: use any pins but a little slower!
//#define TFT_SCLK 13 // set these to be whatever pins you like!
//#define TFT_MOSI 11 // set these to be whatever pins you like!
//Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST);
float p = 3.1415926;
void setup(void) {
Serial.begin(9600);
Serial.print("Hello! ST77xx TFT Test");
// Use this initializer if you're using a 1.8" TFT
tft.initR(INITR_BLACKTAB); // initialize a ST7735S chip, black tab
// Use this initializer (uncomment) if you're using a 1.44" TFT
//tft.initR(INITR_144GREENTAB); // initialize a ST7735S chip, black tab
// Use this initializer (uncomment) if you're using a 0.96" 180x60 TFT
//tft.initR(INITR_MINI160x80); // initialize a ST7735S chip, mini display
// Use this initializer (uncomment) if you're using a 1.54" 240x240 TFT
//tft.init(240, 240); // initialize a ST7789 chip, 240x240 pixels
Serial.println("Initialized");
uint16_t time = millis();
tft.fillScreen(ST77XX_BLACK);
time = millis() - time;
Serial.println(time, DEC);
delay(500);
// large block of text
tft.fillScreen(ST77XX_BLACK);
testdrawtext("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing ante sed nibh tincidunt feugiat. Maecenas enim massa, fringilla sed malesuada et, malesuada sit amet turpis. Sed porttitor neque ut ante pretium vitae malesuada nunc bibendum. Nullam aliquet ultrices massa eu hendrerit. Ut sed nisi lorem. In vestibulum purus a tortor imperdiet posuere. ", ST77XX_WHITE);
delay(1000);
// tft print function!
tftPrintTest();
delay(4000);
// a single pixel
tft.drawPixel(tft.width()/2, tft.height()/2, ST77XX_GREEN);
delay(500);
// line draw test
testlines(ST77XX_YELLOW);
delay(500);
// optimized lines
testfastlines(ST77XX_RED, ST77XX_BLUE);
delay(500);
testdrawrects(ST77XX_GREEN);
delay(500);
testfillrects(ST77XX_YELLOW, ST77XX_MAGENTA);
delay(500);
tft.fillScreen(ST77XX_BLACK);
testfillcircles(10, ST77XX_BLUE);
testdrawcircles(10, ST77XX_WHITE);
delay(500);
testroundrects();
delay(500);
testtriangles();
delay(500);
mediabuttons();
delay(500);
Serial.println("done");
delay(1000);
}
void loop() {
tft.invertDisplay(true);
delay(500);
tft.invertDisplay(false);
delay(500);
}
void testlines(uint16_t color) {
tft.fillScreen(ST77XX_BLACK);
for (int16_t x=0; x < tft.width(); x+=6) {
tft.drawLine(0, 0, x, tft.height()-1, color);
delay(0);
}
for (int16_t y=0; y < tft.height(); y+=6) {
tft.drawLine(0, 0, tft.width()-1, y, color);
delay(0);
}
tft.fillScreen(ST77XX_BLACK);
for (int16_t x=0; x < tft.width(); x+=6) {
tft.drawLine(tft.width()-1, 0, x, tft.height()-1, color);
delay(0);
}
for (int16_t y=0; y < tft.height(); y+=6) {
tft.drawLine(tft.width()-1, 0, 0, y, color);
delay(0);
}
tft.fillScreen(ST77XX_BLACK);
for (int16_t x=0; x < tft.width(); x+=6) {
tft.drawLine(0, tft.height()-1, x, 0, color);
delay(0);
}
for (int16_t y=0; y < tft.height(); y+=6) {
tft.drawLine(0, tft.height()-1, tft.width()-1, y, color);
delay(0);
}
tft.fillScreen(ST77XX_BLACK);
for (int16_t x=0; x < tft.width(); x+=6) {
tft.drawLine(tft.width()-1, tft.height()-1, x, 0, color);
delay(0);
}
for (int16_t y=0; y < tft.height(); y+=6) {
tft.drawLine(tft.width()-1, tft.height()-1, 0, y, color);
delay(0);
}
}
void testdrawtext(char *text, uint16_t color) {
tft.setCursor(0, 0);
tft.setTextColor(color);
tft.setTextWrap(true);
tft.print(text);
}
void testfastlines(uint16_t color1, uint16_t color2) {
tft.fillScreen(ST77XX_BLACK);
for (int16_t y=0; y < tft.height(); y+=5) {
tft.drawFastHLine(0, y, tft.width(), color1);
}
for (int16_t x=0; x < tft.width(); x+=5) {
tft.drawFastVLine(x, 0, tft.height(), color2);
}
}
void testdrawrects(uint16_t color) {
tft.fillScreen(ST77XX_BLACK);
for (int16_t x=0; x < tft.width(); x+=6) {
tft.drawRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color);
}
}
void testfillrects(uint16_t color1, uint16_t color2) {
tft.fillScreen(ST77XX_BLACK);
for (int16_t x=tft.width()-1; x > 6; x-=6) {
tft.fillRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color1);
tft.drawRect(tft.width()/2 -x/2, tft.height()/2 -x/2 , x, x, color2);
}
}
void testfillcircles(uint8_t radius, uint16_t color) {
for (int16_t x=radius; x < tft.width(); x+=radius*2) {
for (int16_t y=radius; y < tft.height(); y+=radius*2) {
tft.fillCircle(x, y, radius, color);
}
}
}
void testdrawcircles(uint8_t radius, uint16_t color) {
for (int16_t x=0; x < tft.width()+radius; x+=radius*2) {
for (int16_t y=0; y < tft.height()+radius; y+=radius*2) {
tft.drawCircle(x, y, radius, color);
}
}
}
void testtriangles() {
tft.fillScreen(ST77XX_BLACK);
int color = 0xF800;
int t;
int w = tft.width()/2;
int x = tft.height()-1;
int y = 0;
int z = tft.width();
for(t = 0 ; t <= 15; t++) {
tft.drawTriangle(w, y, y, x, z, x, color);
x-=4;
y+=4;
z-=4;
color+=100;
}
}
void testroundrects() {
tft.fillScreen(ST77XX_BLACK);
int color = 100;
int i;
int t;
for(t = 0 ; t <= 4; t+=1) {
int x = 0;
int y = 0;
int w = tft.width()-2;
int h = tft.height()-2;
for(i = 0 ; i <= 16; i+=1) {
tft.drawRoundRect(x, y, w, h, 5, color);
x+=2;
y+=3;
w-=4;
h-=6;
color+=1100;
}
color+=100;
}
}
void tftPrintTest() {
tft.setTextWrap(false);
tft.fillScreen(ST77XX_BLACK);
tft.setCursor(0, 30);
tft.setTextColor(ST77XX_RED);
tft.setTextSize(1);
tft.println("Hello World!");
tft.setTextColor(ST77XX_YELLOW);
tft.setTextSize(2);
tft.println("Hello World!");
tft.setTextColor(ST77XX_GREEN);
tft.setTextSize(3);
tft.println("Hello World!");
tft.setTextColor(ST77XX_BLUE);
tft.setTextSize(4);
tft.print(1234.567);
delay(1500);
tft.setCursor(0, 0);
tft.fillScreen(ST77XX_BLACK);
tft.setTextColor(ST77XX_WHITE);
tft.setTextSize(0);
tft.println("Hello World!");
tft.setTextSize(1);
tft.setTextColor(ST77XX_GREEN);
tft.print(p, 6);
tft.println(" Want pi?");
tft.println(" ");
tft.print(8675309, HEX); // print 8,675,309 out in HEX!
tft.println(" Print HEX!");
tft.println(" ");
tft.setTextColor(ST77XX_WHITE);
tft.println("Sketch has been");
tft.println("running for: ");
tft.setTextColor(ST77XX_MAGENTA);
tft.print(millis() / 1000);
tft.setTextColor(ST77XX_WHITE);
tft.print(" seconds.");
}
void mediabuttons() {
// play
tft.fillScreen(ST77XX_BLACK);
tft.fillRoundRect(25, 10, 78, 60, 8, ST77XX_WHITE);
tft.fillTriangle(42, 20, 42, 60, 90, 40, ST77XX_RED);
delay(500);
// pause
tft.fillRoundRect(25, 90, 78, 60, 8, ST77XX_WHITE);
tft.fillRoundRect(39, 98, 20, 45, 5, ST77XX_GREEN);
tft.fillRoundRect(69, 98, 20, 45, 5, ST77XX_GREEN);
delay(500);
// play color
tft.fillTriangle(42, 20, 42, 60, 90, 40, ST77XX_BLUE);
delay(50);
// pause color
tft.fillRoundRect(39, 98, 20, 45, 5, ST77XX_RED);
tft.fillRoundRect(69, 98, 20, 45, 5, ST77XX_RED);
// play color
tft.fillTriangle(42, 20, 42, 60, 90, 40, ST77XX_GREEN);
}
Penjelasan Beberapa Fungsi Program LCD TFT 1.8 dari Adafruit
tft.fillScreen(ST77XX_BLACK);
Program diatas untuk mengatur warna background layar atau screen lcd TFT 1.8 menjadi warna hitam, anda bisa merubah menjadi warna kesukaan anda, dengan kode warna 16 bit atau RGB56, contohnya bisa lihat daftar code dibawah ini
#define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF
Untuk mencari code warna lain, bisa menggunakan color picker untuk LCD TFT 1.8 di website ini http://www.barth-dev.de/online/rgb565-color-picker/
tft.setCursor(0, 0);
Fungsi dari kode diatas adalah untuk menentukan posisi kursor, yang sebelah kiri adalah X dan yang kanan adalah Y
tft.setTextColor(color);
Kode diatas untuk mengatur warna teks yang akan ditampilkan, untuk colornya bisa disamakan sesuai code warna yang anda mau.
tft.print(text);
dan kode diatas untuk menampilkan teks atau karakter dalam bentuk char array, atau char *variable. jika variable yang anda buat adalah string maka bisa di konvert dengan fungsi sprintf atau toCharArray().
Keyword
- ESP32 LCD TFT 1.8
- LCD TFT dengan ESP32
- Tutorial ESP32 LCD TFT 1.8
- Program ESP32 LCD TFT 1.8
- Library LCD TFT 1.8 ESP32
- ST7735 LCD ESP32