GC9A01 NodeMCU ESP8266 TFT Tutorial Pemula

By Posted on

Tutorial LCD 1.28 Inci TFT Arduino IDE

Membuat sebuah projek menggunakan layar TFT merupakan satu hal yang banyak dicari oleh pengembang elektronika. Layar TFT memberikan nilai plus dibandingkan dengan LCD tipe Monochrome. TFT menyediakan warna yang lebih banyak. Oleh karena itu, pada artikel ini saya akan membantu kalian dalam menggunakan 1.28 inci TFT GC9A01 NodeMCU ESP8266.

Tentang Driver GC9A01

Driver GC9A01 adalah sebuah chip kontroller yang digunakan untuk mengendalikan tampilan pada layar TFT (Thin Film Transistor). Kemampuan chip ini hingga resolusi 240×240 piksel. Untuk tampilan warna RGB hingga 64K. Selain itu, chip ini dapat beroperasi pada tegangan 2.8V hingga 3.3V. Konsumsi daya kurang dari 10mA. Driver ini juga dilengkapi dengan fitur sleep mode untuk menghemat daya. Ukuran chip ini sangat kecil yang dapat anda lihat pada gambar berikut ini:

GC9A01 NodeMCU ESP8266 TFT Tutorial Pemula

Driver GC9A01 bekerja dengan mikrokontroler melalui interface SPI. Untuk koneksinya ke NodeMCU kita akan lihat pada sesi rangkaian nantinya..

Koordinat TFT

Sebelum kita masuk ke kode program GC9A01 NodeMCU ESP8266, alangkah baiknya kita mengetahui koordinat dari TFT yang akan kita gunakan dan dimana posisi x, dan y dari piksel LCD. Pemahaman ini perlu untuk dikuasai agar dapat menentukan dimana posisi text tau gambar yang ingin di tampilkan pada LCD TFT 1.28 inci ini. Perhatikan gambar berikut:

sistem koorinat GC9A01 NodeMCU ESP8266 TFT Tutorial Pemula

Rangkaian

Sekarang silahkan anda hubungkan NodeMCU ke TFT 1.28 inch seperti yang ditunjukkan pada gambar berikut. Pastikan anda benar menghubungkan VCC (TFT) ke 3V (NodeMCU) dan GND ke G.

rangkaian GC9A01 NodeMCU ESP8266 TFT wiring schematic

Jika rangkaian diatas sulit untuk dibaca, anda dapat membaca hubungan antar kedua komponen ini dengan melihat tabel rangkaian berikut:

1.28 TFTNodeMCU ESP8266
VCC3V
GNDG
CSD6
RESD4
A0D3
SDAD7
SCKD5
LED3V

Library

Setelah rangkaian selesai, selanjutnya adalah menambahkan library untuk menampilkan objek (grafik, text atau gambar) di GC9A01 NodeMCU ESP8266.

Oleh karena driver dari TFT ini adalah GC9A01, maka sebuah library yang bagus menurut saya adalah TFT_eSPI. Cara menambahkan library ini ke Arduino adalah sebagai berikut:

  1. Buka Arduino IDE
  2. Klik menu Sketch > Include Library > Manage Libraries
  3. Pada form search, masukkan kata “tft_espi“, lalu enter
  4. Cari library “TFT_eSPI“, lalu klik Install
  5. Selesai

Konfigurasi Library

Setelah library terinstall, maka kita perlu memodifikasi library tersebut agar TFT 1.28 dapat berjalan untuk NodeMCU ESP8266. Silahkan ikuti langkah berikut:

  1. Masuk ke folder Arduino > libraries
  2. Cari folder TFT_eSPI
  3. Buka file User_Setup.h
  4. Cari baris “#define ILI9341_DRIVER“, jadikan komentar dengan berikan dua garis miring, sehingga menjadi:
    //#define ILI9341_DRIVER
  5. Cari baris “//#define GC9A01_DRIVER“, hilangkan dua garis miring sehingga menjadi:
    #define GC9A01_DRIVER
  6. Cari baris “EDIT THE PIN NUMBERS IN THE LINES FOLLOWING TO SUIT YOUR ESP8266 SETUP“. Dibawahnya akan ada baris #define seperti :
    #define TFT_CS PIN
    #define TFT_DC PIN
    #define TFT_RST PIN
  7. Gunakan #define berikut:
    #define TFT_CS PIN_D6
    #define TFT_DC PIN_D3
    #define TFT_RST PIN_D4
  8. Lalu Save file User_Setup.h
  9. Selesai

Pilihan Warna

Mengetahui warna dasar yang tersedia juga hal yang perlu anda ketahui, agar dapat memilih warna text atau background yang akan digunakan pada TFT. Berikut adalah daftar warna yang tersedia dari library TFT_eSPI:


Kode Program

Aktifkan 1 Piksel

Untuk mengaktifkan atau menggambarkan 1 piksel, kita dapat menggunakan fungsi drawPixel(). Mari kita lihat kode programnya sebagai berikut: 

#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {
  tft.init();
  tft.fillScreen(TFT_BLACK);
  tft.drawPixel(10, 116, TFT_WHITE, 100, TFT_BLACK);
}

void loop() {
}

Hasil

Tutorial 1.28 TFT GC9A01 NodeMCU ESP8266 PemulaSetelah kode program ini selesai di upload, maka anda akan melihat hasil sebuah titik yang berwarna putih berada pada koordinat x=10, y=116.

tft.drawPixel() berfungsi untuk mengaktifkan piksel dengan format:
(Koordinat X, Koordinat X, Warna tulisan, Kecerahan 0-100, Warna background);

<- Klik untuk memperbesar gambar


Tampilkan Garis

Setelah anda mempelajari cara menampilkan teks dan piksel, sekarang mari kita belajar bagaimana cara menampilkan sebuah garis ke layar TFT yang kita punya. Berikut adalah kode program dasarnya: 

#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {
  tft.init();
  tft.fillScreen(TFT_BLACK);
  tft.drawLine(10, 115, 50, 115, TFT_WHITE);
  tft.drawLine(80, 100, 80, 130, TFT_WHITE);
  tft.drawLine(110, 130, 130, 100, TFT_WHITE);
}

void loop() {
}

Hasil

tft.drawLine 1.28 inch tft lcd tft.drawLine() merupakan fungsi untu menggambarkan garis, adapun formatnya adalah:

tft.drawLine(koordinat awal X, koordinat awal Y, koorinat akhir X, koordinat akhir Y, warna);

Tampilkan Lingkaran

Untuk menampilkan lingkaran ada fungsi yang dapat digunakan, namun favorit saya menggunakan mode smooth, sehingga tampilan lingkarannya tidak terlihat patah-patah. Adapun kode programnya adalah sebagai berikut: 

#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {
  tft.init();
  tft.fillScreen(TFT_BLACK);
  tft.drawSmoothCircle(120, 120, 60, TFT_SILVER, TFT_BLACK);
}

void loop() {
}

Hasil

Draw circle at tft lcd 1.28 inch nodemcu arduino esp8266tft.drawSmoothCircle() merupakan fungsi menggambarkan lingkaran menggunakan antialiasing. Untuk formatnya adalah sebagai berikut:

tft.drawSmoothCircle(koordinat X, koordinat Y, radius, warna lingkaran, warna latar belakang);

Tampilkan Persegi Radius

Membuat persegi ada perintah dasarnya, namun saya lebih menyukai perintah drawSmoothRoundRect(), karena dengan perintah ini kita dapat membuat persegi dengan radius tertentu di tiap sudutnya. Sebagai contoh saya membuat sudut persegi ini 10piksel. Berikut adalah kode program dasarnya: 

#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {
  tft.init();
  tft.fillScreen(TFT_BLACK);
  tft.drawSmoothRoundRect(80, 100, 10, 10, 60, 40, TFT_WHITE, TFT_BLACK);
}

void loop() {
}

Hasil

GC9A01 draw round rectangle tft nodemcu esp8266Fungsi dari tft.drawSmoothRoundRect() akan menampilkan persegi dengan lengkungan yang halus menggunakan anti aliasing.

Formatnya adalah:
tft.drawSmoothRoundRect(koordinat x, koordinat y, radius lekukan, radius lekukan dalam, lebar, tinggi, warna)

Tips:
1. gunakan nilai yang sama anatar radius dan radius dalam jika ingin menampilkan garis 1 piksel saja
2. jika anda ingin lebar garis agak tebal, maka radius dalam harus lebih kecil dari nilai radius.

Untuk tutorial cara menampilkan text di LCD TFT ini, silahkan ke halaman berikutnya:

Pages: 1 2 3 4