ডিসপ্লে ছাড়া 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:
| 🔗 কম্পোনেন্ট লিস্ট 🔗 | |
|---|---|
| কম্পোনেন্টের নাম | পরিমান |
| Breadboard | 1 |
| Male to Male Jumper Wire | 20 |
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 গুলো দিতে হবে।
| TFT Pin / Function | ESP32 Pin |
|---|---|
| T_IRQ (Touch IRQ) | GPIO 34 |
| T_OUT (Touch Output) | GPIO 35 |
| T_DIN (Touch Data In) | GPIO 32 |
| T_CS (Touch Chip Select) | GPIO 33 |
| T_CLK (Touch Clock) | GPIO 25 |
| SDO / MISO (SPI Data Out) | GPIO 12 |
| LED (Backlight) | GPIO 21 |
| SCK (SPI Clock) | GPIO 14 |
| SDI / MOSI (SPI Data In) | GPIO 13 |
| D/C (Data/Command) | GPIO 4 |
| RESET | EN / RESET pin |
| CS (SPI Chip Select) | GPIO 15 |
| GND | GND |
| VCC | 5V (or 3.3V)* |
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 কাজ করছে।
TFT Display এর হুকআপ গাইড পেতে আরো পড়তে পারো…………
TFT Display Interfacing সম্পর্কে জানতে পড়তে পারো………
ESP32 নিয়ে Beginner to Advance গাইডলাইন পেতে আরো পড়তে পারো………
- ESP32 মাইক্রোকন্ট্রোলারের অজানা কিছু তথ্য
- ESP32 পাওয়ার সিস্টেম ইঞ্জিনিয়ারিং
- ESP32 অটো প্রোগ্রাম রিসেট সার্কিট
- ESP প্রোগ্রামিং-এ Espressif IDE VS Arduino IDE
- ESP32 মাইক্রোকন্ট্রোলারের কথোপোকথন
