Interfacing TFT LCD Touch Display with ESP32

ডিসপ্লে ছাড়া Graphical User Interface (GUI) ভিত্তিক এ্যপ্লিকেশন তৈরির পরিকল্পনা, সে তো একদমই অসম্ভব! মাইক্রোকন্ট্রোলার ব্যবহার করে Input/Output, Button, Text, এবং Animation এর মত simple তথ্য গুলো Display-তে প্রদর্শন করার মাধ্যমে যে কোন প্রোজেক্টকে খুবই আকর্ষণীয়  এবং স্মার্টফোনের মতোই স্মার্ট করে তোলা যায়।
যেহেতু এই ধরণের Display অপারেট করতে ব্যবহৃত লাইব্রেরী গুলো Universal হয়ে থাকে। মানে একই Library দিয়ে অনেক ধরণের Controller ভিত্তিক ডিসপ্লে কে অপারেট করা যায়। তাই লাইব্রেরীকে নির্দিষ্ট ডিসপ্লের উপর ভিত্তি করে configuration করার প্রয়োজন হয়। 

আর এই configuration করতে গিয়েই, আমরা ফেইস করি বিভিন্ন ধরণের জটিলতা। ইনস্ট্রাকশন এবং প্রোডাক্ট match না করলেই, এই ধরণের জটিলতা তৈরি হতে পারে। এই টিউটরিয়্যালে মূলত আজ আমরা টেকশপবিডি’র 2.8 Inch TFT Display এর কনফিগারেশন সম্পর্কে জানবো।

দেখাবো কিভাবে জনপ্রিয় মাইক্রোকন্ট্রোলার ESP32 এর সাথে TFT LCD Touch Display-কে Interface করতে হয়।

ইন্টারফেইসিং

প্রথমেই 2.8 inch TFT LCD Touch Display টি, ESP32 মাইক্রোকন্ট্রোলারের সাথে ব্যবহারের জন্য কিছু Requirements ফুলফিল করতে হবে। 

Requirements

• Supporting Component Collection.
• Arduino IDE Install.
• Adding ESP32 Board to Arduino IDE
• Related Library Install and Configuration.

Supporting Component Collection:

2.8 inch TFT LCD Touch Display এবং ESP32 কে ইন্টারফেইস করার জন্য কিছু সাপোর্টিং কম্পোনেন্ট ব্যবহারের প্রয়োজন হবে। যদি তোমার সংগ্রহে ইতিমধ্যে কম্পোনেন্টগুলো থেকে থাকে তাহলে তুমি এই পার্টটি Skip করতে পারো আর যদি না থাকে নিচের লিংক থেকে Purchase করে ফেলো!!!

Component List:

Arduino IDE Install:

যদি তোমার কম্পিউটারে আগে থেকেই Arduino IDE ইনস্টল করা থাকে, তবে এই ধাপটি Skip করে যেতে পারো। আর যদি না থাকে, তাহলে সর্বপ্রথম Arduino IDE ডাউনলোড করার জন্য সরাসরি এই লিংকে ভিজিট করো।

তারপর এখানে Download বাটনটি চেপে Arduino IDE এর নতুন ভার্সনটি ডাউনলোড করে, Install করে নাও।

Adding ESP32 Board to Arduino IDE:

এ পর্যায়ে আমাদের Arduino IDE তে ESP32 Board ইনষ্টল করতে হবে। যাতে খুবই সহজেই Arduino IDE ব্যবহার করে, আমরা ESP32 তে প্রোগ্রাম করতে পারি। 

কিভাবে খুব সহজেই Arduino IDE তে ESP32 Board ইনষ্টল করতে হয়, জানতে এই টিউটোরিয়্যালটি ফলো করতে পারো। আর যদি ইতিমধ্যে তোমার Arduino IDE তে ESP32 Board ইনষ্টল করা থাকে, তাহলে পরের স্টেপে চলে যাও!!!

Related Library Install and Configuration:

এই স্টেপটি TFT Touch Display Interfacing এর জন্য সব থেকে Important স্টেপ তাই অবশ্যই একটু মনোযোগ দিয়ে, প্রতিটি কাজ করতে হবে। 

প্রথমে তোমার Arduino IDE এর Sketch>Include Library>Manage Library গিয়ে নিচের লাইব্রেরী দুইটি সার্চ করে Install করে নাও!

• TFT_eSPI by Bodmer

• XPT2046_Touchscreen by Paul Stoffregen 

এখন ইন্সটল করা TFT_eSPI লাইব্রেরীর কিছু কনফিগারেশন করতে হবে। যাতে করে TFT Display কে সঠিক ভাবে Interface করা যায়।

প্রথমে User_Setup.h ফাইলটি ডাউনলোড করে Unzip/Extract করতে হবে।

তারপর Arduino IDE ওপেন করে File থেকে Preference মেন্যুতে যেতে হবে।

এখন Sketchbook location থেকে Arduino File Location টি কপি করতে হবে।

তারপর File Manager এর Address Bar এর লোকেশনটি পেস্ট করে Enter চাপো। দেখবে সেখানে libraries নামে একটি ফোল্ডার রয়েছে। 

এখন libraries>TFT_eSPI ফোল্ডারে প্রবেশ করো। নিচে দেখতে পাবে User_Setup.h নামে একটি Header File রয়েছে। 

আমাদের নিজেদের কাস্টমাইজ করা Header File (User_Setup.h) কপি করে, এইখানে পেস্ট করো। Replace or Skip Files নামে একটি ডায়ালগ বক্স Appear হবে, “Replace the file in the destination” অপশনটি ক্লিক করে Existing User_Setup.h ফাইলটি রিপ্লেস করে নাও। 

IMPORTANT: গুগল সার্চে যেসব User_Setup.h ফাইল পাওয়া যাবে, সেগুলো সম্ভবত TechShop Blog এর এক্সাম্পলের সাথে কাজ করবে না। তাই অবশ্যই এই আর্টিকেলে দেওয়া সঠিক User_Setup.h ফাইলটিই ব্যবহার করতে হবে এবং উল্লেখিত নির্দেশনা অনুযায়ী Connection দিতে হবে।

Connections

নিচের কানেকশন টেবিল অনুযায়ী TFT Display এবং ESP32 এর মধ্যে Connections গুলো দিতে হবে।

Code

নিচের কোডটি কপি করে Arduino IDE তে কপি করে, পেস্ট করো এবং সঠিক বোর্ড ও COM Port সিলেক্ট করে কোডটি মাইক্রোকন্ট্রোলারে আপলোড করে নাও। 

/*

   Developed by TechshopBD R&D Dept

   ---------------------------------

   ESP32 + 2.8" TFT + XPT2046 Touchscreen

   --------------------------------------

   This code shows a simple button on the TFT display

   that toggles the ESP32's built-in LED when touched.

   Hardware:

   - ESP32 board

   - ILI9341 TFT Display (320x240)

   - XPT2046 Touchscreen controller

   Libraries needed:

   - TFT_eSPI by Bodmer  →  https://github.com/Bodmer/TFT_eSPI

   - XPT2046_Touchscreen by Paul Stoffregen  →  https://github.com/PaulStoffregen/XPT2046_Touchscreen

   IMPORTANT:

   - Make sure to configure `User_Setup.h` in TFT_eSPI to match your wiring!

   - Wiring here matches the Cheap Yellow Display (CYD) / ESP32-2432S028R.

*/

#include <SPI.h>                       // SPI communication library

#include <TFT_eSPI.h>                  // TFT display library

#include <XPT2046_Touchscreen.h>       // Touchscreen library

// Create TFT display object

TFT_eSPI tft = TFT_eSPI();

// ==== Touchscreen Pin Definitions ====

#define XPT2046_IRQ   34   // Touch interrupt pin (T_IRQ)

#define XPT2046_MOSI  32   // Touch data in (T_DIN)

#define XPT2046_MISO  35   // Touch data out (T_OUT)

#define XPT2046_CLK   25   // Touch clock (T_CLK)

#define XPT2046_CS    33   // Touch chip select (T_CS)

// Create SPI object for touchscreen

SPIClass touchscreenSPI = SPIClass(VSPI);

// Create touchscreen object

XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

// ==== Screen Dimensions ====

#define SCREEN_WIDTH  320

#define SCREEN_HEIGHT 240

#define FONT_SIZE     2    // Text font size

// ==== LED Setup ====

#define LED_BUILTIN 2      // ESP32 built-in LED pin

bool ledState = false;     // Store LED ON/OFF state

// ==== Button Position and Size ====

int btnX = 100;   // Button top-left X position

int btnY = 90;    // Button top-left Y position

int btnW = 120;   // Button width

int btnH = 60;    // Button height

// Function to draw the button on the screen

void drawButton(bool state) {

  tft.fillScreen(TFT_WHITE);  // Clear the whole screen to white

  // Draw button rectangle

  // Green when LED is ON, Red when LED is OFF

  tft.fillRect(btnX, btnY, btnW, btnH, state ? TFT_GREEN : TFT_RED);

  tft.drawRect(btnX, btnY, btnW, btnH, TFT_BLACK); // Button border

  // Draw button label text in the center

  tft.setTextColor(TFT_WHITE, state ? TFT_GREEN : TFT_RED);

  tft.drawCentreString(state ? "LED ON" : "LED OFF",

                       btnX + btnW / 2, btnY + (btnH / 2) - 8, FONT_SIZE);

}

void setup() {

  Serial.begin(115200);  // Start serial monitor for debugging

  // Setup LED pin as output

  pinMode(LED_BUILTIN, OUTPUT);

  digitalWrite(LED_BUILTIN, LOW); // LED initially OFF

  // ==== Initialize Touchscreen ====

  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);

  touchscreen.begin(touchscreenSPI);

  touchscreen.setRotation(1); // Set touch rotation to match screen

  // ==== Initialize TFT Display ====

  tft.init();

  tft.setRotation(1); // Landscape mode

  // Draw the initial button

  drawButton(ledState);

}

void loop() {

  // Check if screen is touched

  if (touchscreen.tirqTouched() && touchscreen.touched()) {

    // Read touch point

    TS_Point p = touchscreen.getPoint();

    // Convert raw touch coordinates to screen coordinates

    int x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);

    int y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);

    int z = p.z; // Touch pressure (not used here)

    // Debug: print touch info

    Serial.printf("Touch: X=%d, Y=%d, Pressure=%d\n", x, y, z);

    // Check if the touch is inside the button area

    if (x > btnX && x < (btnX + btnW) && y > btnY && y < (btnY + btnH)) {

      // Toggle LED state

      ledState = !ledState;

      digitalWrite(LED_BUILTIN, ledState ? HIGH : LOW);

      // Update button appearance

      drawButton(ledState);

      delay(300); // Delay to prevent multiple toggles from a single touch

    }

  }

}

Output

উপরের প্রোগ্রামটি সঠিক ভাবে আপলোড (Done Uploading) হলে, তুমি ডিসপ্লে তে একটি বাটন দেখতে পাবে। বাটনটি প্রেস করলে তোমার ESP32 এর Build In LED টি পর্যায়ক্রমে ON/OFF হবে সাথে Button State Color ও ডিসপ্লে-তে পরিবর্তন হবে। অর্থাৎ তোমার হাতে থাকা TFT Touch Display টির ফিচার (টাচ এবং ডিসপ্লে) গুলো perfectly কাজ করছে।