TFT 2.4 Arduino Teks, Gambar dan Layar Sentuh

Pendahuluan

TFT 2.4 Arduino – TFT LCD atau Thin-Film Transistor Liquid Crystal Display adalah layar LCD yang terbuat dari sekumpulan transistor, dimana satu transistor akan mengontrol satu piksel. 

Piksel adalah titik terkecil LCD yang mana ia mewakili satu blok warna. Ini adalah modul LCD 2.4″ TFT LCD Shield Arduino  dengan format resolusi layar 320*240 piksel.

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

LCD mampu menampilkan tampilan warna RGB. Resolusi 320*240 artinya terdapat 76.800 piksel, yang tersusun secara vertikal 320 piksel dan horizontal 240 piksel. Piksel dibentuk oleh piksel kristal cair yang mana akan berubah cahaya ketika diberi tegangan listrik. 

LCD juga dilengkapi dengan SD Card yang berguna untuk menyimpan atau menampilkan gambar yang ada di SD Card. Dilengkapi dengan fitur layar sentuh, LCD semakin cocok untuk digunakan sebagai interface pengganti tombol. Dengan menggunakan Arduino, anda bisa membuat projek yang banyak menggunakan LCD.

Sebagai contoh:

  • Televisi mini
  • Jam digital
  • Speedometer
  • Layar handphone
  • Sistem kontrol rumah
  • Game station mini
  • Kamera poket
  • Kalkulator
  • Tampilan lokasi GPS
  • Tampilan cuaca
  • dan masih banyak lagi

LCD yang dibahas pada tutorial adalah 2.4″ TFT LCD yang memiliki alamat/address dengan ID 0x2035. Dengan 2 IC HC245 sebagai Octal Bus Transceiver, LCD mampu melakukan buffer dan mengirimkan data dengan kecepatan tinggi. 

Transceiver artinya IC mampu melakukan komunikasi dua arah, transmitter (mengirim) dan receiver (menerima). Semakin tinggi kecepatan maka semakin banyak data yang bisa di kirim.


TFT 2.4 Pinout

LCD TFT belum bisa berkomunikasi via SPI, jadi pin SPI yang tersedia hanya untuk SD Card saja. Untuk konfigurasi pin ditunjukkan seperti pada gambar disamping:

Keterangan:
* Pin 5V, 3.3V dan Gnd berguna untuk menyuplai arus listrik ke LCD
* LCD_RST adalah pin Reset LCD
* LCD_CS adalah pin Chip Select
* LCD_RS adalah pin Register Select
* LCD_WR adalah pin Write Data
* LCD_RD adalah pin Read Data
* LCD_D0 – D8 adalah pin yang berguna untuk mengirimkan data 8-bit ke TFT LCD secara paralel.
* Pin D0 sebagai LSB dan D8 sebagai MSB.
* SD_SS adalah pin Select Slave (SPI)
* SD_DI adalah pin MOSI (SPI)
* SD_DO adalah pin MISO (SPI)
* SD_SCK adalah pin Clock (SPI)

Bagaimana caranya kita gunakan LCD dengan kontrollernya adalah Arduino?

Selanjutnya akan kita bahas mengenai libray yang akan kita gunakan untuk bisa menampilkan tulisan juga gambar pada LCD .


Cara Menampilkan Teks di TFT

Untuk dapa tmemahami bagaimana LCD ini bekerja, ada beberapa langkah yang mesti kita pelajari yaitu, sistem koordinat, library, dan Jenis Font yang digunakan.

1.Sistem koordinat LCD

Teman-teman perhatikan gambar diatas. LCD tersusun dari piksel-piksel. Setiap piksel memiliki alamat lokasi. Ketika satu piksel ingin kita aktifkan, berarti kita harus aktifkan piksel tersebut dengan menyertakan koordinat lokasi piksel.

Penulisan koordinat dimulai dari huruf “x” kemudian “y”. Contoh Piksel (x, y) yaitu piksel (9,8). Pada gambar diatas saya beri contoh menghidupkan 3 piksel saja, yaitu pada koordinat (9,8), (36, 3) dan (46, 22).


2. Install Library

Ada dua library yang populer untuk TFT ini. Pertama library yang berisikan fungsi-sungsi LCD dan Oled yang telah disediakan oleh Adafruit Industry. Nama library tersebut adalah Adrafruit GFX.

Kedua adalah library yang berisikan konfigurasi hardware LCD dan OLED seperti ID, Resolusi layar, dll. Nama Library tersebut adalah MCUFRIEND.

Untuk library Adafruit GFX silahkan teman-teman install melalui library manager Arduino IDE. Atau silahkan kunjungi website .

Untuk artikel ini saya menggunakan library MCUFRIEND. Silahkan teman-teman download library MCUFRIEND dibawah :

Setelah ketiga library tersebut selesai di download. Silahkan install ke Arduino IDE anda.


3. Tampilkan Text di LCD

Kemudian pasangkan modul LCD 2.4″ TFT ke Arduino dan upload program berikut:

//------------------- kinisayangerti.com -------------------//
#include <Adafruit_GFX.h>   // Library yang berisikan fungsi-fungsi LCD dan OLED
#include <MCUFRIEND_kbv.h>  // Library yang berisikan konfigurasi hardware dari LCD
MCUFRIEND_kbv tft;
#include <FreeDefaultFonts.h>  //Menggunakan Font Standar

//defsikan warna
#define BLACK 0x0000
#define RED 0xF800
#define GREEN 0x07E0
#define WHITE 0xFFFF
#define GREY 0x8410
#define BLUE 0x001F
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0

void setup(void) {
  uint16_t ID = tft.readID();

  //membaca ID Hardware
  if (ID == 0xD3) ID = 0x9481;
  tft.begin(ID);

  //set pengaturan sesuai dengan ID yang didapat
  tft.setRotation(0);  //0 untuk potrait dan 1 untuk landscape
  tft.fillScreen(BLACK);
  showmsgXY(80, 40, 1, NULL, "Selamat Datang");

  //tampilkan pesan "Selamat Datang"
  showmsgXY(30, 80, 2, NULL, "Hambo Elektronik");

  //tampilkan pesan "Hambo Elektronik"
}

void loop(void) {}

void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)  //fungsi tampilan
{
  tft.setFont(f);           // Karena font adalah default, maka di tulis NULL
  tft.setCursor(x, y);      // tetapkan kursor atau koordinat awal tulisan
  tft.setTextColor(GREEN);  //tetapkan tulisan warna hijau
  tft.setTextSize(sz);      //tetapkan ukuran font, dis contohnya adalah 1 dan 2px
  tft.print(msg);           //tampilkan tulisan ke layar LCD
}

Dari kode program diatas, hasilnya adalah sebagai berikut:

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

4. Jenis Font

Library Adafruit telah menyediakan 48 font yang terbagi atas 3 kategori font yaitu, Serif, Sans dan Mono. Adapun fontnya adalah sebagai berikut:

FreeMono12pt7b.h
FreeSansBoldOblique12pt7b.h
FreeMono18pt7b.h
FreeSansBoldOblique18pt7b.h
FreeMono24pt7b.h
FreeSansBoldOblique24pt7b.h
FreeMono9pt7b.h
FreeSansBoldOblique9pt7b.h
FreeMonoBold12pt7b.h
FreeSansOblique12pt7b.h
FreeMonoBold18pt7b.h
FreeSansOblique18pt7b.h
FreeMonoBold24pt7b.h
FreeSansOblique24pt7b.h
FreeMonoBold9pt7b.h
FreeSansOblique9pt7b.h
FreeMonoBoldOblique12pt7b.h
FreeSerif12pt7b.h
FreeMonoBoldOblique18pt7b.h
FreeSerif18pt7b.h
FreeMonoBoldOblique24pt7b.h
FreeSerif24pt7b.h
FreeMonoBoldOblique9pt7b.h
FreeSerif9pt7b.h
FreeMonoOblique12pt7b.h
FreeSerifBold12pt7b.h
FreeMonoOblique18pt7b.h
FreeSerifBold18pt7b.h
FreeMonoOblique24pt7b.h
FreeSerifBold24pt7b.h
FreeMonoOblique9pt7b.h
FreeSerifBold9pt7b.h
FreeSans12pt7b.h
FreeSerifBoldItalic12pt7b.h
FreeSans18pt7b.h
FreeSerifBoldItalic18pt7b.h
FreeSans24pt7b.h
FreeSerifBoldItalic24pt7b.h
FreeSans9pt7b.h
FreeSerifBoldItalic9pt7b.h
FreeSansBold12pt7b.h
FreeSerifItalic12pt7b.h
FreeSansBold18pt7b.h
FreeSerifItalic18pt7b.h
FreeSansBold24pt7b.h
FreeSerifItalic24pt7b.h
FreeSansBold9pt7b.h
FreeSerifItalic9pt7b.h

Namun bagaimana cara menggunakannya? Kita harus memasukkan dulu nama fontnya kedalam program kita menggunakan #include <jenis font.h>. Perhatikan program berikut:

//------------------- kinisayangerti.com -------------------//
#include <Adafruit_GFX.h>   // Library yang berisikan fungsi-fungsi LCD dan OLED
#include <MCUFRIEND_kbv.h>  // Library yang berisikan konfigurasi hardware dari LCD
MCUFRIEND_kbv tft;

#include <FreeDefaultFonts.h>
#include <Fonts/FreeMono12pt7b.h>
#include <Fonts/FreeSans12pt7b.h>
#include <Fonts/FreeSerif12pt7b.h>

//defsikan warna
#define BLACK 0x0000
#define RED 0xF800
#define GREEN 0x07E0
#define WHITE 0xFFFF
#define GREY 0x8410
#define BLUE 0x001F
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0

void setup(void) {
  uint16_t ID = tft.readID();

  //membaca ID Hardware
  if (ID == 0xD3) ID = 0x9481;
  tft.begin(ID);

  //set pengaturan sesuai dengan ID yang didapat
  tft.setRotation(0);  //0 untuk potrait dan 1 untuk landscape
  tft.fillScreen(BLACK);
  showmsgXY(10, 10, 2, NULL, "Hambo Elektronik");
  showmsgXY(10, 50, 1, &FreeMono12pt7b, "Hambo Elektronik");
  showmsgXY(10, 80, 1, &FreeSans12pt7b, "Hambo Elektronik");
  showmsgXY(10, 110, 1, &FreeSerif12pt7b, "Hambo Elektronik");
}

void loop(void) {}

void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)  //fungsi tampilan
{
  tft.setFont(f);
  tft.setCursor(x, y);
  tft.setTextColor(GREEN);
  tft.setTextSize(sz);
  tft.print(msg);
}

Maka tampilan TFT 2.4 Arduino adalah seperti :

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

Cara Menampilkan Gambar di TFT

Pada tutorial sebelumnya (menampilkan font) kita telah bisa menggunakan library GFX dari adafruit untuk menampilkan tulisan. Sekarang kita akan menampilkan bitmap atau gambar di LCD. Ada dua metode yang akan kita lakukan yaitu, membaca gambar dari memori arduino dan membaca gambar dari memori SD Card.


1. Tampilkan gambar dari SRAM

Membaca dari memori Arduino maksudnya adalah membaca dari SRAM ATmega328. Gambar yang ingin kita buat, kita konversi terlebh dahulu menjadi array. Kemudian array tersebut kita program kedalam arduino. Array bisa berupa data gambar RGB atau Hitam Putih. Caranya adalah teman-teman download aplikasi konversi yang namanya ImageConverter 565 dibawah :

Kemudian Jalankan Aplikasi. Ikuti cara :

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

b. Setelah masukkan gambar, kemudian Atur Resolusi seperti gambar dibawah:

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

c. Klik Save dengan extensi file .c dan target Board Arduino (AVR).

d. Setelah selesai di save, teman-teman akan mendapatkan file doraemon.c dengan isiannya seperti :

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

e. Buka Arduino IDE teman-teman, kemudian gunakan program berikut:

//------------------- kinisayangerti.com ------------------//
#include "MCUFRIEND_kbv.h"
MCUFRIEND_kbv tft;
#define LOWFLASH (defined(__AVR_ATmega328P__) && defined(MCUFRIEND_KBV_H_))
//#include "bitmap.h"  //masukkan file bitmap.h

//defenisikan warna dengan kode warna
#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define GREY 0x8410
#define ORANGE 0xE880

void setup() {
  Serial.begin(9600);
  uint16_t ID = tft.readID();  //akan membaca ID dari tipe LCD
  tft.begin(ID);

  int x = 5, y = 0, w = 240, h = 320;  //defsikan piksel yang akan digunakan

  const int SZ = w * h;
  uint8_t sram[SZ];
  tft.fillScreen(BLACK);
  tft.drawRGBBitmap(x, y, doraemon, 100, 82);  //tampilkan gambar di LCD
}

void loop(void) {}

f. Kemudian buat sebuah tab baru dan tulis dengan nama bitmap.h. Lihat pada gambar dibawah:

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

g. copy semua data yang ada pada file doraemon.c, kemudian paste-kan kedalam bitmap.h. Kemudian ganti kata unsigned short menjadi uint16_t. Terlihat pada gambar berikut.

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

h. Klik Upload, maka gambar akan tampil seperti pada gambar dibawah:

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

2. Membaca Gambar Dari Memori Card

TFT 2.4 Arduino, Membaca gambar dari memori lebih baik digunakan kerena tidak menggunakan SRAM. Jadi, gambar yang ditampilkan mencarapi resolusi 320*240 piksel. Pada tutorial , contoh akan menampilkan gambar dengan format gambar adalah .bmp. Ikuti langkah-langkah berikut:

a. Pada tutorial saya menggunakan gambar “doraemon.png”, dan saya konvert ke “doraemon.bmp” menggunakan aplikasi “Paint” yang merupakan aplikasi bawaan Windows. Gambar memiliki resolusi 290×238 px.

Layar Sentuh TFT 2.4 Arduino dan Tampilkan Teks dan Gambar

b. Letakkan gambar tersebut kedalam memori card dan masukkan memori card kedalam slot di LCD.

c.Gunakan program berikut:

//-------------------////hamboelektronik.com////-------------------//
#include <SPI.h>
#include <SD.h>
#include <Adafruit_GFX.h>
#include <MCUFRIEND_kbv.h>

MCUFRIEND_kbv tft;
#if defined(ESP32)
#define SD_CS     5
#else
#define SD_CS     10
#endif

#define NAMEMATCH "doraemon"  // doraemon.bmp
#define PALETTEDEPTH   0
#define BMPIMAGEOFFSET 54
#define BUFFPIXEL      20

char namaBuffer[32] = "/";   //karakter "/" artinya root, atau halaman awal memori bukan folder
// char namaBuffer[32] = "/namaFolder/";  //jika gambar berada didalam folder maka ditulis "/namaFolder/doraemon.bmp

int bmpWidth, bmpHeight;    // lebar dan tinggi gambar dalam satuan piksel

uint8_t bmpDepth; uint32_t bmpImageoffset;   // memulai data gambar pada file
uint32_t rowSize; uint8_t sdbuffer[3 * BUFFPIXEL];   // piksel didalam buffer (R+G+B per piksel)
uint16_t lcdbuffer[(1 << PALETTEDEPTH) + BUFFPIXEL], *palette = NULL;
uint8_t bitmask, bitshift; boolean flip = true;       // File gambar nanti akan di simpan dari baris bawah ke atas//Jika nilainya adalah "false" maka tampilan akan dimulai dari bawah ke atas gambar//Jika nilainya adalah "true" maka tampilan akan dimulai dari atas ke kebawah
int w, h, row, col, lcdbufsiz = (1 << PALETTEDEPTH) + BUFFPIXEL, buffidx;
uint32_t pos;
boolean is565 = false;
uint16_t bmpID;
uint16_t n;                 // blok baca
uint8_t ret;
int pjgPath;
char *nm = namaBuffer + pjgPath;
uint32_t start;

File root;
File f;

void setup() {

  uint16_t ID;
  ID = tft.readID();
  tft.begin(ID);
  tft.setRotation(1);     //Jadikan tampilan landscape, jika "0" maka akan potrait
  tft.fillScreen(0x001F); //tetapkan warna latar sebelum memuat gambar

  //cek apakah ada memori card
  bool ada = SD.begin(SD_CS);

  if (!ada) {                                   //jika tidak ada
    Serial.print(F("SD tidak terdeteksi"));     //beritahu melalui serial monitor
    while (1);
  }

  root = SD.open(namaBuffer); //root artinya buka pada halaman awal memori atau "/"
  pjgPath = strlen(namaBuffer); //menghitung panjang dari sebuah string dari namaBuffer

}

void loop() {
  f = root.openNextFile();
  if (f != NULL) {
#ifdef USE_SDFAT
    f.getName(nm, 32 - pjgPath);
#else
    strcpy(nm, (char *)f.name());
#endif
    f.close();
    strlwr(nm);
    if (strstr(nm, ".bmp") != NULL && strstr(nm, NAMEMATCH) != NULL) {
      Serial.print(namaBuffer);
      Serial.print(F(" - "));
      tft.fillScreen(0);
      start = millis();
      ret = showBMP(namaBuffer, 5, 5);
      delay(10000);
    }
  }  else root.rewindDirectory();
}

uint16_t read16(File& f) {
  uint16_t result;
  f.read((uint8_t*)&result, sizeof(result));
  return result;
}

uint32_t read32(File& f) {
  uint32_t result;
  f.read((uint8_t*)&result, sizeof(result));
  return result;
}

uint8_t showBMP(char *nm, int x, int y) {
  File bmpFile;

  if ((x >= tft.width()) || (y >= tft.height()))
    return 1;               // matikan layar
  bmpFile = SD.open(nm);      // Penguraian file BMP
  bmpID = read16(bmpFile);    // BMP signature

  (void) read32(bmpFile);     // Baca dan abaikan ukuran file
  (void) read32(bmpFile);     // Baca dan abaikan byte pembuat
  bmpImageoffset = read32(bmpFile);       // Mulai dari data gambar
  (void) read32(bmpFile);     // Baca & abaikan ukuran header DIB
  bmpWidth = read32(bmpFile);
  bmpHeight = read32(bmpFile);
  n = read16(bmpFile);        // bidang harus 1
  bmpDepth = read16(bmpFile); // bit per pixel
  pos = read32(bmpFile);      // format
  if (bmpID != 0x4D42) ret = 2; // ID yang buruk
  else if (n != 1) ret = 3;   // terlalu banyak bidang
  else if (pos != 0 && pos != 3) ret = 4; // format: 0 = tidak terkompresi, 3 = 565
  else if (bmpDepth < 16 && bmpDepth > PALETTEDEPTH) ret = 5; // palette
  else {
    bool first = true;
    is565 = (pos == 3);               // Sudah dalam format 16-bit?    // Baris BMP diisi (jika perlu) hingga batas 4-byte
    rowSize = (bmpWidth * bmpDepth / 8 + 3) & ~3;

    if (bmpHeight < 0) {              // Jika negatif, gambar berada dalam urutan top-down.
      bmpHeight = -bmpHeight;
      flip = false;
    }

    w = bmpWidth;
    h = bmpHeight;

    if ((x + w) >= tft.width())      // Pangkas area yang akan dimuat
      w = tft.width() - x;
    if ((y + h) >= tft.height())
      h = tft.height() - y;
    if (bmpDepth <= PALETTEDEPTH) {  // Mode  memiliki palet terpisah
      bmpFile.seek(BMPIMAGEOFFSET); // palet selalu @ 54
      bitmask = 0xFF;
      if (bmpDepth < 8)
        bitmask >>= bmpDepth;
      bitshift = 8 - bmpDepth;
      n = 1 << bmpDepth;
      lcdbufsiz -= n;
      palette = lcdbuffer + lcdbufsiz;
      for (col = 0; col < n; col++) {
        pos = read32(bmpFile);    // peta palet ke 5-6-5
        palette[col] = ((pos & 0x0000F8) >> 3) | ((pos & 0x00FC00) >> 5) | ((pos & 0xF80000) >> 8);
      }
    }

    // Tetapkan jendela alamat TFT untuk memotong batas gambar
    tft.setAddrWindow(x, y, x + w - 1, y + h - 1);

    for (row = 0; row < h; row++) { // Untuk setiap garis pemindaian ...
      uint8_t r, g, b, *sdptr;
      int lcdidx, lcdleft;

      if (flip)
        pos = bmpImageoffset + (bmpHeight - 1 - row) * rowSize;
      else
        pos = bmpImageoffset + row * rowSize;

      if (bmpFile.position() != pos) {
        bmpFile.seek(pos);
        buffidx = sizeof(sdbuffer); // Paksa muat ulang buffer
      }

      for (col = 0; col < w; ) {  //piksel dalam baris
        lcdleft = w - col;
        if (lcdleft > lcdbufsiz) lcdleft = lcdbufsiz;

        for (lcdidx = 0; lcdidx < lcdleft; lcdidx++) { // buffer sekaligus
          uint16_t color;          // Waktu untuk membaca lebih banyak data piksel?

          if (buffidx >= sizeof(sdbuffer)) { // Indeed
            bmpFile.read(sdbuffer, sizeof(sdbuffer));
            buffidx = 0; // Set index untuk pemulaian
            r = 0;
          }


          switch (bmpDepth) {
            // Konversi pixel dari BMP ke format TFT
            case 1:
            case 4:
            case 8:
              if (r == 0)
                b = sdbuffer[buffidx++], r = 8;
              color = palette[(b >> bitshift) & bitmask];
              r -= bmpDepth;
              b <<= bmpDepth;
              break;
            case 24:
              b = sdbuffer[buffidx++];
              g = sdbuffer[buffidx++];
              r = sdbuffer[buffidx++];
              color = tft.color565(r, g, b);
              break;
            case 16:
              b = sdbuffer[buffidx++];
              r = sdbuffer[buffidx++];
              if (is565)
                color = (r << 8) | (b);
              else
                color = (r << 9) | ((b & 0xE0) << 1) | (b & 0x1F);
              break;
          }
          lcdbuffer[lcdidx] = color;
        }

        tft.pushColors(lcdbuffer, lcdidx, first);
        first = false;
        col += lcdidx;
      }           // berakhir kolom
    }               // berakhir baris
  }
  tft.setAddrWindow(0, 0, tft.width() - 1, tft.height() - 1); //kembalikan layar penuh
  ret = 0;
  bmpFile.close();
  return (ret);
}

d. Upload program diatas ke arduino.

Cara Menggunakan Layar Sentuh TFT

Sebelumnya kita telah membahas bagaimana konfigurasi PIN, menampilkan font, dan menampilkan bitmap/gambar pada 2.4″ TFT LCD . Sekarang saya sudah menyediakan progam yang mana digunakan untuk interaksi layar sentuh. Saya sudah menyiapkan programnya di bawah. 

Program sudah saya sesuaikan dengan LCD 2.4″ TFT LCD denga  ID = 0x2035. Bagi teman-teman yang menggunakan TFT dengan ID yang berbeda, silahkan merujuk ke link untuk melihat settingan yang sesuai dengan TFTnya.

Program:

#include <Adafruit_GFX.h>
#include <MCUFRIEND_kbv.h>

MCUFRIEND_kbv tft;
#include <TouchScreen.h>
#define MINPRESSURE 10
#define MAXPRESSURE 1000

const int XP = 7, XM = A1, YP = A2, YM = 6;
const int TS_LEFT = 130, TS_RT = 910, TS_TOP = 100, TS_BOT = 905;

TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
Adafruit_GFX_Button tombolBiruLaut, tombolMerah, tombolHijau, tombolKuning;

int piksel_x, piksel_y;
bool Touch_getXY(void)
{
  TSPoint p = ts.getPoint();
  pinMode(YP, OUTPUT); pinMode(XM, OUTPUT);
  digitalWrite(YP, HIGH); digitalWrite(XM, HIGH);
  bool pressed = (p.z > MINPRESSURE && p.z < MAXPRESSURE);
  if (pressed) {
    piksel_x = map(p.x, TS_LEFT, TS_RT, 0, tft.width());
    piksel_y = map(p.y, TS_TOP, TS_BOT, 0, tft.height());
  } return pressed;
}

//defenisi warna menggunakan format RGB565
#define BLACK 0x0000
#define BLUE 0x001F
#define NAVY_BLUE 0x16DD
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF

void setup(void) {
  Serial.begin(9600);
  uint16_t ID = tft.readID();
  tft.begin(ID);
  tft.setRotation(0);
  tft.fillScreen(BLACK);
  tombolBiruLaut.initButton(&tft, 60, 130, 80, 40, WHITE, NAVY_BLUE, BLACK, "1", 2);
  tombolMerah.initButton (&tft, 180, 130, 80, 40, WHITE, RED, BLACK, "2", 2);
  tombolKuning.initButton (&tft, 60, 200, 80, 40, WHITE, YELLOW, BLACK, "3", 2);
  tombolHijau.initButton (&tft, 180, 200, 80, 40, WHITE, GREEN, BLACK, "4", 2);
  tombolBiruLaut.drawButton(false);
  tombolMerah.drawButton(false);
  tombolKuning.drawButton(false);
  tombolHijau.drawButton(false);
  tft.fillRect(00, 0, 240, 80, WHITE);
}

void loop(void) {
  bool deteksi = Touch_getXY();
  tombolBiruLaut.press(deteksi && tombolBiruLaut.contains(piksel_x, piksel_y));
  tombolMerah.press (deteksi && tombolMerah.contains(piksel_x, piksel_y));
  tombolKuning.press (deteksi && tombolKuning.contains(piksel_x, piksel_y));
  tombolHijau.press (deteksi && tombolHijau.contains(piksel_x, piksel_y));
  if (tombolBiruLaut.justReleased())tombolBiruLaut.drawButton();
  if (tombolMerah.justReleased())tombolMerah.drawButton();
  if (tombolKuning.justReleased())tombolKuning.drawButton();
  if (tombolHijau.justReleased())tombolHijau.drawButton();
  if (tombolBiruLaut.justPressed()) {
    tombolBiruLaut.drawButton(true);
    tft.fillRect(00, 0, 240, 80, NAVY_BLUE);
  } if (tombolMerah.justPressed()) {
    tombolMerah.drawButton(true);
    tft.fillRect(00, 0, 240, 80, RED);
  } if (tombolKuning.justPressed()) {
    tombolKuning.drawButton(true);
    tft.fillRect(00, 0, 240, 80, YELLOW);
  } if (tombolHijau.justPressed()) {
    tombolHijau.drawButton(true);
    tft.fillRect(00, 0, 240, 80, GREEN);
  }
}

Demikian tutorial , semoga artikel TFT 2.4 Arduino ini bermanfaat bagi teman-teman. Selamat belajar.

Baca juga: GC9A01 NodeMCU ESP8266 TFT Tutorial Pemula

Similar Posts