Panduan ILI9341 Arduino: Pengkabelan Layar TFT, Layar Sentuh, dan Gambar dari SD

Rangkaian ILI9341 Arduino adalah cara termurah dan paling populer untuk menambahkan layar 240×320 piksel dengan 65 ribu warna ke proyekmu. Modul TFT 2,4 dan 2,8 inci dengan PCB merah ini terhubung lewat SPI hanya dengan beberapa kabel, dan versi sentuhnya juga membawa kontroler sentuh XPT2046 serta slot kartu microSD. Dengan satu modul saja kamu bisa menampilkan grafik berwarna, tombol sentuh, dan gambar yang dibaca dari kartu. Modul ini ideal untuk menu, dasbor, game, dan bingkai foto, ketika OLED atau LCD karakter sudah tidak cukup lagi.

Di panduan ini kamu akan belajar langkah demi langkah cara kerja modul ini, cara aman menghubungkan output 5 V Arduino Uno ke input 3,3 V layar, cara menggambar teks, bentuk, dan warna dengan library Adafruit_ILI9341 dan Adafruit GFX, cara membaca layar sentuh, dan cara menampilkan gambar BMP dari kartu SD. Setelah itu kita bahas menggambar jauh lebih cepat di ESP32 dengan TFT_eSPI, memakai MicroPython di Raspberry Pi Pico, dan semua penyebab masalah “layar putih” yang hampir semua orang alami setidaknya sekali.

Apa itu layar TFT ILI9341 dan bagaimana cara kerjanya?

ILI9341 adalah chip driver di balik kaca layar. Di dalamnya ada sekitar 172 KB memori tampilan (GRAM) yang menyimpan seluruh 240×320 piksel. Arduino mengirim perintah dan data warna ke memori ini lewat SPI, lalu chip menyegarkan gambar sendiri puluhan kali per detik. Karena itu gambar tidak perlu disimpan di RAM Arduino: bahkan Uno dengan RAM 2 KB bisa mengendalikan layar warna yang besar. Untuk menggambar sesuatu, kamu memilih sebuah jendela (x, y, lebar, tinggi) lebih dulu, lalu mengirim piksel jendela itu satu per satu secara berurutan. Pin DC memberi tahu chip apakah byte yang dikirim adalah perintah (LOW) atau data (HIGH). Warna biasanya dikirim dalam format RGB565, artinya 16 bit per piksel: 5 bit merah, 6 bit hijau, dan 5 bit biru. Cara kerja bus SPI secara detail bisa kamu baca di Apa Itu SPI?.

2,4 inci atau 2,8 inci? Modul SPI vs shield Uno

Artikel ini membahas modul SPI, karena modul ini juga bisa dipakai dengan ESP32 dan Pico dan membiarkan sebagian besar pin Uno tetap bebas. Kedua modul SPI punya pin dan kode yang persis sama; layar 2,8 inci punya piksel sedikit lebih besar, jadi tombol sentuh lebih mudah ditekan. Jika layarmu langsung dipasang di atas Uno sebagai shield, library SPI tidak bisa mengendalikannya, dan hasilnya biasanya layar putih. Untuk shield seperti itu, instal library MCUFRIEND_kbv, baca ID driver dengan tft.readID() (0x9341 untuk ILI9341), lalu jalankan dengan tft.begin(ID). Untuk alternatif yang lebih kecil tapi lebih tajam, lihat layar TFT ST7789, dan untuk membandingkan semua pilihan, baca jenis-jenis layar Arduino.

Pinout ILI9341 dan tabel pengkabelan

Satu sisi modul punya header utama 14 pin: 9 pin pertama untuk layar dan 5 pin terakhir yang diawali T_ untuk sentuh. 4 pin di sisi seberangnya (SD_CS, SD_MOSI, SD_MISO, SD_SCK) menuju slot kartu. Ketiga perangkat bisa berbagi bus SPI yang sama (SCK, MOSI, MISO); hanya pin CS masing-masing yang harus terpisah. Tabel di bawah cocok dengan semua sketch di artikel ini; di Pico, sentuh dihubungkan ke bus SPI terpisah karena perbedaan kecepatan.

Penurunan level ke 3,3 V di Arduino Uno

ESP32 dan Raspberry Pi Pico sudah bekerja di 3,3 V, jadi kamu bisa menghubungkan layar secara langsung. Di board 5 V seperti Uno, Nano, dan Mega, setiap jalur dari Arduino ke layar harus diturunkan ke 3,3 V: CS, DC, RESET, SCK, MOSI, dan jika kamu memakai sentuh dan SD, juga T_CLK, T_DIN, T_CS, SD_CS, SD_MOSI, dan SD_SCK. Jalur SDO, T_DO, SD_MISO, dan T_IRQ yang datang dari layar ke Arduino tidak butuh konverter: Uno membaca tegangan di atas 3 V sebagai HIGH, dan output 3,3 V memenuhi itu. Dalam praktiknya ada empat cara:

• Chip buffer 74HC4050 (solusi paling rapi): chip ini diberi daya 3,3 V, menerima 5 V di input-nya, dan mengonversi 6 jalur dalam satu chip. Chip ini cepat dan bekerja tanpa masalah pada SPI 8 MHz. CD4050 yang lebih lama juga bisa, tapi lambat; jika gambar rusak, kamu perlu menurunkan kecepatan SPI. Layar saja butuh 5 jalur; dengan sentuh dan SD, kamu menambah T_CS dan SD_CS sehingga menjadi 7 jalur, jadi pakai chip kedua atau pembagi tegangan untuk jalur ketujuh.
• Pembagi tegangan resistor: untuk setiap jalur, pasang 1 kΩ antara pin Arduino dan pin layar, serta 2 kΩ antara pin layar dan GND; hasilnya 5 V × 2 / 3 ≈ 3,3 V. Pasangan resistor lain bisa kamu hitung dengan kalkulator pembagi tegangan. Cara ini murah, tapi 10 resistor untuk 5 jalur membuat breadboard penuh sesak.
• Modul level shifter siap pakai: modul 4 atau 8 kanal dengan MOSFET BSS138 mudah dirangkai, tapi resistor pull-up-nya melunakkan tepi sinyal pada kecepatan tinggi. Jika gambar rusak, turunkan SPI ke 4 MHz dengan tft.begin(4000000). Perbandingan metodenya ada di konverter level logika.
• Metode yang harus dihindari: trik populer “resistor seri 10 kΩ di setiap jalur” membuang kelebihan tegangan ke dioda proteksi internal chip. Mungkin bekerja untuk sementara, tapi tidak andal dan bisa merusak layar dalam jangka panjang.

Langkah demi langkah: tes pertama dengan Adafruit_ILI9341

1. Buka Library Manager di Arduino IDE, cari Adafruit ILI9341, lalu instal. Ketika ditanya soal dependensi, pilih Install all supaya Adafruit GFX dan Adafruit BusIO ikut terinstal. Jika ini library pertamamu, Cara Instal Library Arduino akan membantu.
2. Untuk sentuh, instal juga library XPT2046_Touchscreen buatan Paul Stoffregen. Library SD sudah ikut bersama Arduino IDE.
3. Hubungkan layar sesuai tabel di atas, lewat level shifter di Uno. Untuk tes pertama, pin sentuh dan SD boleh dibiarkan tidak terhubung.
4. Upload sketch di bawah dan buka Serial Monitor di 9600 baud. Kamu seharusnya melihat teks dan bentuk di layar, serta kode diagnostik layar di Serial Monitor.
5. Coba juga contoh bawaannya: File > Examples > Adafruit ILI9341 > graphicstest mengukur berapa mikrodetik yang dibutuhkan setiap operasi menggambar.

1#include <SPI.h>
2#include <Adafruit_GFX.h>
3#include <Adafruit_ILI9341.h>
4
5#define TFT_CS  10   // ekran seçme / chip select
6#define TFT_DC  9    // komut/veri seçimi / command/data select
7#define TFT_RST 8    // donanım reset / hardware reset
8
9Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);   // donanım SPI: D11 MOSI, D13 SCK / hardware SPI
10uint16_t orange;                                  // kendi rengimiz / our own colour
11
12void setup() {
13  Serial.begin(9600);
14  tft.begin();                                    // Uno'da 8 MHz SPI / 8 MHz SPI on Uno
15
16  // Teşhis: çalışan ekranda 0x94 ve 0xC0 beklenir / Diagnostics: a working display reports 0x94 and 0xC0
17  Serial.print(F("Power Mode: 0x"));
18  Serial.println(tft.readcommand8(ILI9341_RDMODE), HEX);
19  Serial.print(F("Self Diagnostic: 0x"));
20  Serial.println(tft.readcommand8(ILI9341_RDSELFDIAG), HEX);
21
22  tft.setRotation(1);                             // yatay, 320x240 / landscape, 320x240
23  tft.fillScreen(ILI9341_BLACK);
24  orange = tft.color565(255, 128, 0);             // RGB'den RGB565'e / RGB to RGB565
25
26  tft.setTextColor(ILI9341_WHITE);
27  tft.setTextSize(3);                             // 18x24 piksel karakter / 18x24 px characters
28  tft.setCursor(10, 10);
29  tft.print(F("BlueGrays"));
30  tft.setTextColor(ILI9341_CYAN);
31  tft.setTextSize(2);
32  tft.setCursor(10, 45);
33  tft.print(F("ILI9341 320x240"));
34
35  tft.fillRect(10, 75, 90, 60, ILI9341_RED);                  // dolu dikdörtgen / filled rectangle
36  tft.drawRect(115, 75, 90, 60, ILI9341_GREEN);               // çerçeve / outline
37  tft.fillCircle(265, 105, 30, ILI9341_BLUE);                 // dolu daire / filled circle
38  tft.fillRoundRect(10, 150, 140, 50, 10, orange);            // yuvarlak köşeli düğme / rounded button
39  tft.drawTriangle(180, 200, 240, 150, 300, 200, ILI9341_YELLOW);
40  tft.drawFastHLine(0, 220, 320, ILI9341_MAGENTA);            // yatay çizgi / horizontal line
41}
42
43void loop() {
44  // Arka plan rengiyle yazınca eski rakam silinir, ekran titremez / writing with a background colour erases the old digits, no flicker
45  tft.setTextColor(ILI9341_WHITE, orange);
46  tft.setTextSize(2);
47  tft.setCursor(22, 167);
48  tft.print(millis() / 1000);
49  tft.print(F(" s"));
50  delay(200);
51}

Konstanta warna siap pakai (19 buah, seperti ILI9341_RED, ILI9341_NAVY, dan ILI9341_ORANGE) sudah ikut bersama library; untuk warnamu sendiri, pakai color565(). Fungsi ini menyusun 5 bit teratas merah, 6 bit teratas hijau, dan 5 bit teratas biru berdampingan: warna = (R >> 3) << 11 | (G >> 2) << 5 | (B >> 3). Untuk oranye (255, 165, 0), misalnya, 31 << 11 = 0xF800 dan 41 << 5 = 0x0520 digabung menjadi 0xFD20, yang persis sama dengan nilai ILI9341_ORANGE di library. Hijau mendapat satu bit tambahan karena mata manusia lebih peka terhadap hijau.

Membaca layar sentuh XPT2046

Di modul sentuh ada lapisan resistif tipis di atas kaca. Di titik yang ditekan jarimu atau stylus, dua lapisan konduktif saling bersentuhan; chip XPT2046 mengukur posisi X dan Y titik itu dengan ADC 12-bit sebagai nilai mentah dari 0 sampai 4095, dan juga memberikan nilai tekanan (Z). Library menganggap nilai Z di bawah 400 sebagai tidak ada sentuhan. Chip ini berada di bus SPI yang sama dengan layar, tetapi berkomunikasi dengan kecepatan lebih rendah, sekitar 2 MHz; library mengatur kecepatannya sendiri di setiap pembacaan. Pin T_IRQ menjadi LOW ketika layar disentuh, sehingga prosesor tidak perlu membaca dengan sia-sia. Sketch di bawah mengubah layar menjadi papan gambar kecil: kamu memilih warna dari kotak-kotak di bagian atas dan membersihkan layar dengan tombol “SIL” (bahasa Turki untuk “hapus”).

1#include <SPI.h>
2#include <Adafruit_GFX.h>
3#include <Adafruit_ILI9341.h>
4#include <XPT2046_Touchscreen.h>
5
6#define TFT_CS  10
7#define TFT_DC  9
8#define TFT_RST 8
9#define T_CS    7    // dokunmatik seçme / touch chip select
10#define T_IRQ   2    // dokununca LOW olur / goes LOW on touch
11#define SD_CS   4    // SD kullanılmıyor, HIGH tutulur / SD unused, kept HIGH
12
13// Kalibrasyon: Seri Monitör'deki ham değerlerle değiştir / Calibration: replace with the raw values from Serial Monitor
14#define TS_MINX 300
15#define TS_MAXX 3800
16#define TS_MINY 300
17#define TS_MAXY 3800
18
19Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);
20XPT2046_Touchscreen ts(T_CS, T_IRQ);
21
22uint16_t brush = ILI9341_YELLOW;                  // fırça rengi / brush colour
23
24void drawPalette() {
25  tft.fillRect(0, 0, 40, 40, ILI9341_RED);
26  tft.fillRect(40, 0, 40, 40, ILI9341_GREEN);
27  tft.fillRect(80, 0, 40, 40, ILI9341_BLUE);
28  tft.fillRect(120, 0, 40, 40, ILI9341_YELLOW);
29  tft.drawRect(260, 0, 60, 40, ILI9341_WHITE);    // silme düğmesi / clear button
30  tft.setTextColor(ILI9341_WHITE);
31  tft.setTextSize(2);
32  tft.setCursor(273, 13);
33  tft.print(F("SIL"));
34}
35
36void setup() {
37  Serial.begin(9600);
38  pinMode(SD_CS, OUTPUT);
39  digitalWrite(SD_CS, HIGH);                      // SD kart hattı meşgul etmesin / keep the SD card off the bus
40  tft.begin();
41  tft.setRotation(1);                             // ekran yatay / display landscape
42  ts.begin();
43  ts.setRotation(1);                              // dokunmatik de aynı yönde / touch in the same orientation
44  tft.fillScreen(ILI9341_BLACK);
45  drawPalette();
46}
47
48void loop() {
49  if (!ts.touched()) return;                      // dokunma yok / no touch
50  TS_Point p = ts.getPoint();                     // ham x, y (0-4095) ve basınç z / raw x, y and pressure z
51  Serial.print(p.x); Serial.print(',');
52  Serial.print(p.y); Serial.print(',');
53  Serial.println(p.z);
54
55  int16_t x = constrain(map(p.x, TS_MINX, TS_MAXX, 0, 319), 0, 319);   // ekran koordinatı / screen coordinate
56  int16_t y = constrain(map(p.y, TS_MINY, TS_MAXY, 0, 239), 0, 239);
57
58  if (y < 40) {                                   // üst şerit: palet ve düğme / top strip: palette and button
59    if (x < 40)        brush = ILI9341_RED;
60    else if (x < 80)   brush = ILI9341_GREEN;
61    else if (x < 120)  brush = ILI9341_BLUE;
62    else if (x < 160)  brush = ILI9341_YELLOW;
63    else if (x >= 260) { tft.fillScreen(ILI9341_BLACK); drawPalette(); }
64  } else {
65    tft.fillCircle(x, y, 3, brush);               // parmağın altına nokta / dot under the finger
66  }
67}

Nilai mentah tidak tepat 0 dan 4095 di sudut-sudut layar; di kebanyakan modul, tepinya berada kira-kira di antara 200–400 dan 3700–3900. Untuk kalibrasi, buka Serial Monitor, sentuh sudut kiri atas dan kanan bawah dengan stylus, lalu masukkan nilai x dan y yang kamu lihat ke konstanta TS_MINX, TS_MAXX, TS_MINY, dan TS_MAXY. Jika titik muncul tercermin dari posisi jarimu, tukar nilai min dan max sumbu itu di map(); jika X dan Y tertukar sepenuhnya, coba nilai ts.setRotation() dari 0 sampai 3. Menu sungguhan bekerja dengan cara yang sama: kamu menggambar tombol dan memeriksa titik yang disentuh jatuh di persegi panjang mana. Lapisan resistif juga bekerja dengan jari, tapi ujung seperti stylus lebih akurat untuk tombol kecil.

Menampilkan gambar BMP dari kartu SD

Slot microSD di bagian belakang modul memungkinkanmu menyimpan logo, latar, dan foto di kartu lalu menampilkannya di layar. Untuk menyiapkan gambar, ubah ukuran foto menjadi 320×240 piksel dan simpan di Paint sebagai Bitmap 24-bit (.bmp). Karena library SD Arduino bekerja dengan nama file pendek, pakai nama paling banyak 8 karakter seperti RESIM.BMP dan format kartu sebagai FAT32. Detail tentang kartunya sendiri dan solusi error initialization failed ada di modul kartu SD. Ingat, slot ini juga 3,3 V: di Uno, jalur SD_CS, SD_MOSI, dan SD_SCK juga harus melewati level shifter.

1#include <SPI.h>
2#include <SD.h>
3#include <Adafruit_GFX.h>
4#include <Adafruit_ILI9341.h>
5
6#define TFT_CS  10
7#define TFT_DC  9
8#define TFT_RST 8
9#define SD_CS   4
10#define T_CS    7
11#define CHUNK   20   // tek okumada 20 piksel (60 bayt) / 20 pixels (60 bytes) per read
12
13Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);
14
15uint16_t read16(File &f) {                        // BMP sayıları küçük uçlu / BMP numbers are little-endian
16  uint16_t lo = f.read();
17  uint16_t hi = f.read();
18  return lo | (hi << 8);
19}
20
21uint32_t read32(File &f) {
22  uint32_t lo = read16(f);
23  uint32_t hi = read16(f);
24  return lo | (hi << 16);
25}
26
27bool drawBmp(const char *name, int16_t x, int16_t y) {
28  File f = SD.open(name);
29  if (!f) return false;                                   // dosya yok / file not found
30  if (read16(f) != 0x4D42) { f.close(); return false; }  // "BM" imzası / "BM" signature
31  read32(f);                                              // dosya boyutu / file size
32  read32(f);                                              // ayrılmış alan / reserved
33  uint32_t offset = read32(f);                            // piksel verisinin başı / start of pixel data
34  read32(f);                                              // başlık boyutu / header size
35  int32_t w = (int32_t)read32(f);
36  int32_t h = (int32_t)read32(f);
37  read16(f);                                              // düzlem sayısı / colour planes
38  uint16_t depth = read16(f);
39  uint32_t comp = read32(f);
40  if (depth != 24 || comp != 0) { f.close(); return false; }   // yalnız 24 bit, sıkıştırmasız / 24-bit uncompressed only
41
42  bool bottomUp = true;                                   // BMP satırları alttan üste / rows are stored bottom-up
43  if (h < 0) { h = -h; bottomUp = false; }
44  uint32_t rowSize = (w * 3 + 3) & ~3UL;                  // satırlar 4 baytın katı / rows padded to 4 bytes
45  int32_t drawW = w, drawH = h;
46  if (x + drawW > tft.width())  drawW = tft.width() - x;   // ekrana sığmayanı kırp / clip to the screen
47  if (y + drawH > tft.height()) drawH = tft.height() - y;
48
49  uint8_t sdBuf[CHUNK * 3];
50  uint16_t line[CHUNK];
51  for (int32_t row = 0; row < drawH; row++) {
52    uint32_t pos = offset + (bottomUp ? (h - 1 - row) : row) * rowSize;
53    f.seek(pos);                                          // satırın başına git / jump to the start of the row
54    for (int32_t col = 0; col < drawW; col += CHUNK) {
55      int16_t n = drawW - col;
56      if (n > CHUNK) n = CHUNK;
57      f.read(sdBuf, n * 3);
58      for (int16_t i = 0; i < n; i++) {                   // BGR'den RGB565'e / BGR to RGB565
59        line[i] = tft.color565(sdBuf[i * 3 + 2], sdBuf[i * 3 + 1], sdBuf[i * 3]);
60      }
61      tft.drawRGBBitmap(x + col, y + row, line, n, 1);    // parçayı ekrana bas / push the chunk to the screen
62    }
63  }
64  f.close();
65  return true;
66}
67
68void setup() {
69  Serial.begin(9600);
70  pinMode(T_CS, OUTPUT);
71  digitalWrite(T_CS, HIGH);                       // dokunmatik hattı meşgul etmesin / keep touch off the bus
72  tft.begin();
73  tft.setRotation(1);                             // 320x240 yatay / landscape
74  tft.fillScreen(ILI9341_BLACK);
75  tft.setTextSize(2);
76
77  if (!SD.begin(SD_CS)) {                         // kart başlatılamadı / card init failed
78    tft.setTextColor(ILI9341_RED);
79    tft.setCursor(10, 10);
80    tft.print(F("SD kart bulunamadi"));
81    return;
82  }
83  uint32_t t = millis();
84  if (!drawBmp("RESIM.BMP", 0, 0)) {
85    tft.setTextColor(ILI9341_YELLOW);
86    tft.setCursor(10, 10);
87    tft.print(F("RESIM.BMP okunamadi"));
88  }
89  Serial.print(F("Cizim suresi / Draw time (ms): "));
90  Serial.println(millis() - t);
91}
92
93void loop() {
94}

54 byte pertama file BMP adalah header: tanda tangan “BM”, posisi awal data piksel, lebar, tinggi, dan kedalaman warna disimpan di sana. Piksel disimpan dalam urutan biru, hijau, merah (BGR) dan biasanya dari bawah ke atas, dan setiap baris diisi hingga kelipatan 4 byte. Karena itu sketch melompat ke posisi yang tepat di file untuk setiap baris layar, membaca 20 piksel (60 byte) sekaligus, mengubahnya ke RGB565, lalu mengirimnya dengan drawRGBBitmap(). Bekerja dalam potongan kecil membuat semuanya muat di RAM Uno dan membuat kartu SD dan layar bisa bergantian memakai bus SPI yang sama. Waktu menggambar dicetak ke Serial Monitor; di Uno, gambar layar penuh muncul baris demi baris selama beberapa detik. Jika kamu ingin menampilkan file PNG atau JPEG dan menggambar jauh lebih cepat, pindahlah ke ESP32 dengan library TFT_eSPI dan TJpg_Decoder.

Menggambar cepat di ESP32 dengan TFT_eSPI

ESP32 bekerja di 3,3 V dan bisa menjalankan SPI hingga 40 MHz, jadi kamu tidak butuh level shifter, dan secara teori mengisi seluruh layar hanya butuh sekitar 31 milidetik. Untuk benar-benar memanfaatkan kecepatan itu, library TFT_eSPI buatan Bodmer adalah pilihan yang umum. Library ini mengakses hardware SPI ESP32 secara langsung dan mendukung font anti-aliasing (halus) dan, yang paling penting, buffer di luar layar yang disebut sprite. Kamu bisa menggambar sebanyak apa pun ke sprite di RAM lalu mengirim hasilnya ke layar sekaligus, sehingga grafik yang berubah cepat pun tidak berkedip. Yang membuat TFT_eSPI berbeda: pin tidak diatur di sketch-mu, melainkan di file User_Setup.h di dalam folder library. Buka file itu, jadikan komentar baris pin ESP8266 (NodeMCU) yang aktif secara default, lalu aktifkan baris-baris ini:

1// TFT_eSPI/User_Setup.h içinde yalnız bu satırlar açık kalsın / keep only these lines active in TFT_eSPI/User_Setup.h
2#define ILI9341_DRIVER
3
4#define TFT_MISO 19
5#define TFT_MOSI 23
6#define TFT_SCLK 18
7#define TFT_CS   15   // ekran seçme / chip select
8#define TFT_DC    2   // komut/veri / data/command
9#define TFT_RST   4   // sıfırlama / reset
10#define TOUCH_CS 21   // dokunmatik seçme (T_CS) / touch chip select (T_CS)
11
12#define LOAD_GLCD     // 1: 8 piksel yazı tipi / 8 px font
13#define LOAD_FONT2    // 2: 16 piksel / 16 px
14#define LOAD_FONT4    // 4: 26 piksel / 26 px
15#define LOAD_FONT7    // 7: 7 segment rakamlar / 7-segment digits
16#define LOAD_GFXFF    // Adafruit FreeFont'lar / Adafruit FreeFonts
17#define SMOOTH_FONT
18
19#define SPI_FREQUENCY       40000000   // kablolar uzunsa 27000000 / 27 MHz with long wires
20#define SPI_READ_FREQUENCY  20000000
21#define SPI_TOUCH_FREQUENCY  2500000

1#include <SPI.h>
2#include <TFT_eSPI.h>                     // pinler User_Setup.h içinde / pins are set in User_Setup.h
3
4TFT_eSPI tft = TFT_eSPI();
5TFT_eSprite graph = TFT_eSprite(&tft);    // ekran dışı çizim alanı / off-screen canvas
6
7// Touch_calibrate örneğinin verdiği 5 sayıyla değiştir / replace with the 5 numbers from the Touch_calibrate example
8uint16_t calData[5] = {286, 3534, 283, 3600, 6};
9
10const int GW = 300, GH = 100;             // grafik boyutu / graph size
11uint8_t samples[GW];                      // son 300 ölçüm / last 300 readings
12uint32_t frames = 0, fps = 0, lastFps = 0;
13
14void setup() {
15  tft.init();
16  tft.setRotation(1);                     // yatay, 320x240 / landscape, 320x240
17  tft.setTouch(calData);
18  tft.fillScreen(TFT_BLACK);
19  tft.setTextColor(TFT_WHITE, TFT_BLACK);
20  tft.drawString("ESP32 + TFT_eSPI", 10, 8, 4);   // 4 numaralı yazı tipi, 26 px / font 4, 26 px
21  graph.createSprite(GW, GH);             // 300x100x2 bayt = 60 KB RAM / 60 KB of RAM
22}
23
24void loop() {
25  memmove(samples, samples + 1, GW - 1);                          // grafiği sola kaydır / scroll the graph left
26  samples[GW - 1] = map(analogRead(34), 0, 4095, 0, GH - 1);       // GPIO 34'teki potansiyometre / pot on GPIO 34
27
28  graph.fillSprite(TFT_BLACK);
29  for (int y = 0; y < GH; y += 25) graph.drawFastHLine(0, y, GW, TFT_DARKGREY);   // ızgara / grid
30  for (int x = 1; x < GW; x++) {
31    graph.drawLine(x - 1, GH - 1 - samples[x - 1], x, GH - 1 - samples[x], TFT_GREEN);
32  }
33  graph.setTextColor(TFT_YELLOW);
34  graph.drawString(String(fps) + " FPS", 4, 4, 2);
35  graph.pushSprite(10, 50);               // tek seferde ekrana gönder, titreme yok / push in one go, no flicker
36
37  uint16_t tx, ty;
38  if (tft.getTouch(&tx, &ty)) {           // dokunulduysa / if touched
39    tft.fillRect(10, 170, 300, 30, TFT_BLACK);
40    tft.setTextColor(TFT_CYAN, TFT_BLACK);
41    tft.drawString("Dokunma / Touch: " + String(tx) + ", " + String(ty), 10, 175, 2);
42  }
43
44  frames++;
45  if (millis() - lastFps >= 1000) {       // saniyede bir FPS hesapla / compute FPS once per second
46    fps = frames;
47    frames = 0;
48    lastFps = millis();
49  }
50}

Sketch ini menggambar nilai potensiometer di GPIO 34 sebagai grafik bergulir dan menampilkan jumlah frame per detik (FPS) di sudut sprite. Sprite 300×100 piksel dengan warna 16-bit memakai 60 KB RAM; itu sekitar 30 kali seluruh memori Uno, tapi tidak masalah bagi ESP32. Untuk sentuh, pin T_CLK, T_DIN, dan T_DO bergabung dengan jalur SCK, MOSI, dan MISO layar, dan hanya T_CS (GPIO 21) yang tetap terpisah. Untuk mendapatkan nilai kalibrasimu sendiri, jalankan contoh Generic > Touch_calibrate dari TFT_eSPI sekali, sentuh panah di sudut yang muncul, lalu salin 5 angka yang dicetak di Serial Monitor ke array calData. Baris siap pakai Setup42_ILI9341_ESP32.h di User_Setup_Select.h memilih pin layar yang sama, tapi baris TOUCH_CS harus kamu tambahkan sendiri. Jika kamu baru mengenal ESP32, baca dulu Apa Itu ESP32?.

ILI9341 dengan Raspberry Pi Pico dan MicroPython

Pico juga board 3,3 V, jadi layar terhubung langsung. Driver MicroPython yang paling banyak dipakai adalah pasangan ili9341.py dan xpt2046.py dari repositori micropython-ili9341 milik rdagger; cukup salin kedua file itu ke Pico dengan Thonny. Di kode di bawah, layar berada di SPI0 pada 40 MHz dan kontroler sentuh di bus SPI1 terpisah pada 1 MHz, jadi perbedaan kecepatan antara kedua chip tidak jadi masalah. Kode ini menggambar teks dan bentuk, lalu menaruh titik kuning di mana pun kamu menyentuh, sehingga menjadi papan gambar sederhana. Jika kamu baru pertama kali memakai Pico dan Thonny, mulailah dengan Apa Itu Raspberry Pi Pico?.

1from machine import Pin, SPI
2from time import sleep_ms
3from ili9341 import Display, color565      # ili9341.py Pico'da olmalı / must be on the Pico
4from xpt2046 import Touch                  # xpt2046.py Pico'da olmalı / must be on the Pico
5
6# Ekran: SPI0, 40 MHz / Display: SPI0, 40 MHz
7spi_tft = SPI(0, baudrate=40000000, sck=Pin(18), mosi=Pin(19), miso=Pin(16))
8tft = Display(spi_tft, cs=Pin(17), dc=Pin(20), rst=Pin(21), width=240, height=320, rotation=0)
9
10# Dokunmatik: ayrı SPI1, 1 MHz / Touch: separate SPI1, 1 MHz
11spi_touch = SPI(1, baudrate=1000000, sck=Pin(10), mosi=Pin(11), miso=Pin(12))
12touch = Touch(spi_touch, cs=Pin(13), width=240, height=320)
13
14WHITE = color565(255, 255, 255)
15YELLOW = color565(255, 255, 0)
16
17tft.clear(color565(0, 0, 0))                                   # ekranı temizle / clear the screen
18tft.draw_text8x8(10, 10, "BlueGrays + Pico", WHITE)
19tft.fill_rectangle(10, 30, 100, 50, color565(255, 0, 0))       # dolu dikdörtgen / filled rectangle
20tft.draw_rectangle(130, 30, 100, 50, color565(0, 255, 0))      # çerçeve / outline
21tft.fill_circle(60, 130, 30, color565(0, 128, 255))            # dolu daire / filled circle
22tft.draw_line(0, 175, 239, 175, color565(255, 0, 255))         # çizgi / line
23tft.draw_text8x8(10, 185, "Ekrana dokun / Touch me", YELLOW)
24
25while True:
26    raw = touch.raw_touch()                # dokunma yoksa None / None when not touched
27    if raw is not None:
28        x, y = touch.normalize(*raw)       # ham değeri piksele çevir / raw value to pixels
29        y = 319 - y                        # eksen ters ise / if the axis is inverted
30        x = min(max(x, 3), 236)            # ekran dışına taşma / keep inside the screen
31        y = min(max(y, 3), 316)
32        tft.fill_circle(x, y, 3, YELLOW)
33    sleep_ms(20)

Dalam mode potret (rotation=0), lebarnya 240 dan tingginya 320; untuk memakai layar dalam mode lanskap, berikan width=320 dan height=240 bersama rotation=90. Kalibrasi default driver sentuh (x_min=100, x_max=1962) mungkin tidak cocok untuk setiap modul; jika titiknya meleset, cetak nilai raw_touch() dan berikan x_min, x_max, y_min, dan y_max milikmu sendiri ke Touch(). Untuk menampilkan gambar, fungsi draw_image() milik driver membaca file .raw yang sudah dikonversi ke RGB565; skrip utils/img2rgb565.py di repositori melakukan konversi itu di komputermu.

Masalah layar putih dan cara mengatasinya

Masalah ILI9341 yang paling terkenal adalah layar yang tetap putih sepenuhnya padahal lampu latarnya menyala. Layar putih sebenarnya adalah petunjuk: daya dan lampu latar bekerja, tapi chip driver tidak pernah diinisialisasi. Ketika panel tidak menerima perintah apa pun, piksel meloloskan cahaya dan layar tampak putih. Jadi masalahnya hampir selalu di komunikasi. Periksa tabel di bawah dari atas ke bawah:

Kesalahan umum lainnya

• Warna salah: jika merah tampil sebagai biru, panel memakai urutan BGR; ubah pengaturan TFT_RGB_ORDER di TFT_eSPI. Jika warnanya tampak seperti negatif foto, coba tft.invertDisplay(true).
• Gambar terbalik atau tercermin: ubah nilai setRotation() antara 0 dan 3, lalu sesuaikan sumbu sentuh agar cocok.
• Layar bekerja tapi sentuh atau SD tidak: pastikan T_CS dan SD_CS cocok dengan pin di kodemu. Di beberapa modul, output SDO layar tidak melepaskan bus; dalam kasus itu, coba lepaskan pin SDO layar, dan hanya pembacaan diagnostik yang akan berhenti bekerja.
• BMP tidak tampil: kartunya bukan FAT32, nama file lebih dari 8 karakter, atau gambarnya bukan 24-bit. Jangan lupa memilih 24-bit di Paint; BMP 16-bit dan 32-bit tidak digambar oleh sketch ini.
• Karakter khusus hilang: font GFX default tidak punya huruf beraksen seperti é atau ñ. Di TFT_eSPI kamu bisa membuat smooth font sendiri, atau memakai font GFX yang memuat karakter yang kamu butuhkan.
• Layar lambat: penyegaran layar penuh di Uno butuh setidaknya 0,15 detik. Untuk animasi dan game, pindah ke ESP32 atau Pico dan gambar ulang hanya area yang berubah.
• Modul menjadi panas: mungkin ada 5 V di VCC ketika jumper J1 tertutup, atau VCC dan GND terbalik; segera putuskan dayanya.

Ide proyek ILI9341

• Panel rumah pintar sentuh: kendalikan lampu dan relay dengan tombol besar di layar; untuk ide, lihat proyek rumah pintar Arduino.
• Layar cuaca berwarna: tampilkan cuaca yang kamu ambil dari internet dengan ESP32 memakai ikon dan angka besar (stasiun cuaca ESP32).
• Dasbor sensor: gambar suhu, kelembapan, dan tekanan dari BME280 sebagai jarum pengukur dengan grafik 24 jam terakhir.
• Konsol game retro: mainkan Snake, Pong, atau Tetris dalam warna; tambahkan modul joystick untuk kendali dan lihat proyek game Arduino untuk ide.
• Bingkai foto digital: tampilkan gambar BMP di kartu SD bergantian setiap beberapa detik.
• Osiloskop mini: gambar nilai analogRead sebagai bentuk gelombang yang mulus dengan sprite di ESP32.
• Kunci keypad sentuh: gambar papan angka di layar dan buka relay atau servo ketika kode yang benar dimasukkan.

ILI9341 adalah cara paling terjangkau untuk memberi proyekmu antarmuka sentuh berwarna: mulailah dengan Uno untuk mempelajari fungsi menggambar dasar, lalu pindah ke ESP32 dengan TFT_eSPI ketika kamu butuh kecepatan dan animasi yang mulus. Jika kamu lebih suka mulai dengan layar yang lebih kecil, layar OLED (SSD1306) adalah titik awal yang bagus. Di aplikasi BlueGrays kamu akan menemukan proyek layar cuaca ESP32, pencatat suhu, sensor parkir, dan game berbasis layar, lengkap dengan skema rangkaian dan kode langkah demi langkah.