Arduino TFT LCD Dokunmatik Keypad Yapımı

Arduino TFT LCD Dokunmatik Keypad Yapımı

Bu projemizde, Arduino Uno ve SPFD5408 / TFT LCD dokunmatik ekran modülünü kullanarak ekran üzerinde dinamik bir 4x3 keypad (tuş takımı) arayüzü oluşturuyoruz. Ekranda çizdiğimiz butonlara dokunulduğunda hangi tuşa basıldığını algılayıp Seri Port (Serial Monitor) üzerinden bilgisayarımıza gönderiyoruz.

Görsel: TFT LCD Ekran Üzerinde Dokunmatik Tuş Takımı Arayüzü

Projenin Öne Çıkan Özellikleri

• Grafiksel Arayüz: Ekranda her bir tuş için özel koordinat hesaplamasıyla butonlar çizilir.
• Görsel Geri Bildirim (Efekt): Bir tuşa dokunulduğunda, buton rengi anlık olarak beyaza dönerek basılma hissi (klik efekti) yaratır.
• Paylaşımlı Pin Yönetimi: TFT ekranlar ve dokunmatik paneller aynı pinleri (A1, A2 vb.) ortak kullanır. Kodumuzda her okuma sonrası pin modları otomatik olarak düzeltilir.

Arduino Proje Kodları

#include "TFTLCD.h"
#include "TouchScreen.h"

// Dokunmatik Ekran Donanımsal Pinleri
#define YP A1
#define XM A2
#define YM 7
#define XP 6

// Dokunmatik Panel Kalibrasyon Sınırları (Standart Değerler)
#define TS_MINX 150
#define TS_MINY 120
#define TS_MAXX 920
#define TS_MAXY 940

TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);

// TFT LCD Kontrol Pinleri
#define LCD_CS A3
#define LCD_CD A2
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4

// 16-bit Renk Paleti
#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define WHITE 0xFFFF
#define GRAY 0x7BEF
#define DARK_GRAY 0x31A6

TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

// 4x3 Keypad Düzeni Karakter Matrisi
char keys[4][3] = {
  {'1','2','3'},
  {'4','5','6'},
  {'7','8','9'},
  {'#','0','*'}
};

// Buton Yerleşim Ölçüleri
#define START_X 15   // İlk butonun sol kenar uzaklığı
#define START_Y 80   // İlk butonun üst kenar uzaklığı
#define BTN_W   65   // Buton genişliği
#define BTN_H   50   // Buton yüksekliği
#define GAP_X   12   // Butonlar arası yatay boşluk
#define GAP_Y   10   // Butonlar arası dikey boşluk

#define MINPRESSURE 10
#define MAXPRESSURE 1000

void setup(void) {
  Serial.begin(9600);

  tft.reset();
  tft.initDisplay();
  tft.setRotation(0); // Ekran yönü

  keypadArayuzuCiz();
}

void loop() {
  // Dokunmatik panelden koordinat çekiyoruz
  TSPoint p = ts.getPoint();

  // Paylaşımlı pinleri tekrar ekran kontrolü için çıkış yapıyoruz
  pinMode(XM, OUTPUT);
  pinMode(YP, OUTPUT);

  if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {

    int mappedX = map(p.x, TS_MINX, TS_MAXX, 0, tft.width());
    int mappedY = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());

    // Dokunmatik koordinat eşlemesi (Mevcut formülün)
    int x = mappedX;
    int y = tft.height() - mappedY;

    // Hangi butona basıldığını kontrol eden döngü
    for (int satir = 0; satir < 4; satir++) {
      for (int sutun = 0; sutun < 3; sutun++) {
        
        // Her bir butonun ekran üzerindeki sınır koordinatlarını hesaplıyoruz
        int btnX = START_X + (sutun * (BTN_W + GAP_X));
        int btnY = START_Y + (satir * (BTN_H + GAP_Y));

        // Dokunulan yer bu butonun sınırları içinde mi?
        if (x > btnX && x < (btnX + BTN_W) && y > btnY && y < (btnY + BTN_H)) {
          
          // Basılan tuşu seri porttan gönder
          Serial.println(keys[satir][sutun]);
          
          // Ekranda basılan tuşu görsel olarak hissettirmek için anlık renk değiştir (Efekt)
          tft.fillRect(btnX, btnY, BTN_W, BTN_H, WHITE);
          tft.drawString(btnX + 25, btnY + 18, String(keys[satir][sutun]).c_str(), BLACK, 2);
          
          delay(200); // Debounce / Çoklu basımı engelleme süresi
          
          // Butonu eski rengine geri döndür
          tft.fillRect(btnX, btnY, BTN_W, BTN_H, DARK_GRAY);
          tft.drawRect(btnX, btnY, BTN_W, BTN_H, WHITE);
          tft.drawString(btnX + 25, btnY + 18, String(keys[satir][sutun]).c_str(), WHITE, 2);
        }
      }
    }
  }
}

void keypadArayuzuCiz() {
  tft.fillScreen(BLACK);
  
  // Üst Başlık Alanı
  tft.fillRect(0, 2, tft.width(), 38, BLUE);
  tft.drawString(20, 14, "DOKUNMATIK KEYPAD", WHITE, 2); 

  // Matrisi tarayarak 4x3 butonları ekrana çiziyoruz
  for (int satir = 0; satir < 4; satir++) {
    for (int sutun = 0; sutun < 3; sutun++) {
      
      // Her butonun sol-üst köşe koordinatını hesapla
      int btnX = START_X + (sutun * (BTN_W + GAP_X));
      int btnY = START_Y + (satir * (BTN_H + GAP_Y));
      
      // Buton kutusunu çiz (Koyu Gri gövde, Beyaz kenarlık)
      tft.fillRect(btnX, btnY, BTN_W, BTN_H, DARK_GRAY);
      tft.drawRect(btnX, btnY, BTN_W, BTN_H, WHITE);
      
      // Karakteri butonun tam ortasına yazdır
      // char veri tipini stringe çevirip string.c_str() ile drawString'e gönderiyoruz
      String tusKarakteri = String(keys[satir][sutun]);
      tft.drawString(btnX + 25, btnY + 18, tusKarakteri.c_str(), WHITE, 2);
    }
  }
}Kopyala

Nasıl Çalışır?

Kod, setup fonksiyonunda ekrana 4x3 yerleşim planına uygun butonları çizer. loop fonksiyonu içerisinde dokunmatik ekrandan sürekli basma kuvveti (basınç) ve koordinat verisi alınır. Eğer ekrana dokunulmuşsa, dokunulan noktanın X ve Y koordinatları, çizilen butonların alanlarıyla matematiksel olarak karşılaştırılır. Eşleşen alan tespit edildiğinde ilgili tuş algılanır.