Jilid 2 : LCD TFT Module 2,4" "Syntax Umum Penggunaan Library"

Menyambung dari Jilid 1, pada jilid 2 kali ini kita akan bahas Sintax command / perintah penulisan Fungsi untuk Operasional Module LCD TFT 2.4" Arduino Uno Shield dengan Library SPFFD5408

Diatas saya Gambarkan bahwa LCD ini mempunyai Resolusi 320 x 240 pixel (Total pixel = 76800)
Pixel (0,0) atau (x=0,y=0) SELALU dimulai dari "Pojok Kiri Atas" pada Set Rotation apapun.
Kita akan gunakan gambar diatas sebagai acuan untuk Syntax Command yang akan kita bahas di bawah ini.

Syntax Command Library SPFD5408 LCD TFT Module 2,4" 320x240 Shield

Sebelum menuliskan syntax program anda harus melakukan beberapa define pin dan memanggil beberapa library untuk diikutkan ke dalam sketch program yang akan dibuat.berikut adalah  BareMinimum untuk memulai sketch program TFT LCD Module SPFD5408 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

// *** SPFD5408 change -- Begin #include <SPFD5408_Adafruit_GFX.h> // Core graphics Adafruit library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> // Touchscreen library // *** SPFD5408 change -- End // *** Define Touchscreen Pin #define YP A3 #define XM A2 #define YM 9 #define XP 8 // *** Define Value of Touchscreen input #define TS_MINX 150 #define TS_MINY 120 #define TS_MAXX 920 #define TS_MAXY 940 TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300); // *** Define Pin of LCD used #define LCD_CS A3 #define LCD_CD A2 #define LCD_WR A1 #define LCD_RD A0 #define LCD_RESET A4 // *** Define Name of Color #define BLACK 0x0000 #define WHITE 0xFFFF #define RED 0xF800 #define GREEN 0x07E0 #define BLUE 0x001F #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); void setup() { tft.reset(); //Reset LCD to begin tft.begin(0x9341); //SDFP5408 Chipset ID on Library tft.setRotation(0); // Set Rotation at 0 degress (default) tft.fillScreen(BLACK); //Set Background Color with BLACK } void loop() { // put your main code here, to run repeatedly: }

1.tft.fillScreen

  Fungsi : Fill Color/memberi warna pada semua bagian layar
  Syntax : tft.fillScreen(uint16_t color)
  uint16_t color = warna (hex code atau yang sudah ada pada define

  Contoh : tft.fillScreen(BLACK); atau tft.fillScreen(0x0000);
  keterangan : Mengisi semua bagian layar dengan warna Hitam

2.tft.setRotation

  Fungsi : Menentukan posisi rotasi layar/ X axis (default = 0)
  Syntax : tft.setRotation(uint8_t x)
  uint8_t x = 0 //Rotasi layar 0 derajat (default)
  uint8_t x = 1 //Rotasi layar 90 derajat
  uint8_t x = 2 //Rotasi layar 180 derajat
  uint8_t x = 3 //Rotasi layar 270 derajat

  Contoh : tft.setRotation(1);
  keterangan : Rotasi Layar pada 90derajat (x=320px, y=240px)

3.tft.drawFastHLine 

  Fungsi : Menggambar Garis Horisontal
  Syntax : tft.drawFastHLine(int16_t x, int16_t y, int16_t length, uint16_t color)
  int16_t x = posisi koordinat X awal garis
  int16_t y = posisi koordinat Y awal garis
  int16_t length = panjang garis (satuan pixel)
  uint16_t color = warna garis

  Contoh : tft.drawFastHLine(0,10,20,RED);
  keterangan : Menggambar garis horisontal MERAH dengan panjang 20pixel dari titik awal (0,10)
 Coba masukan coding berikut ke dalam void setup :

1 2 3 4 5 6 7 8 9

tft.fillScreen(BLACK); //Set Background Color with BLACK tft.drawFastHLine (0,10,25, CYAN); tft.drawFastHLine (5,30,50, MAGENTA); tft.drawFastHLine (10,50,75, YELLOW); tft.drawFastHLine (15,80,100, RED); tft.drawFastHLine (20,110,125, GREEN); tft.drawFastHLine (25,140,150, BLUE); tft.drawFastHLine (30,170,175, WHITE);

Hasil pada LCD akan seperti berikut :

4.tft.drawFastVLine 

  Fungsi : Menggambar Garis Vertikal
  Syntax : tft.drawFastVLine(int16_t x, int16_t y, int16_t length, uint16_t color)
  int16_t x = posisi koordinat X awal garis
  int16_t y = posisi koordinat Y awal garis
  int16_t length = panjang garis (satuan pixel)
  uint16_t color = warna garis

  Contoh : tft.drawFastVLine(10,5,30,GREEN);
  keterangan : Menggambar garis Vertikal HIJAU dengan panjang 30pixel dari titik awal (10,5)
 Coba masukan coding berikut ke dalam void setup :

1 2 3 4 5 6 7 8 9

tft.fillScreen(BLACK); //Set Background Color with BLACK tft.drawFastVLine (10,5,30, CYAN); tft.drawFastVLine (20,25,50, MAGENTA); tft.drawFastVLine (30,45,75, YELLOW); tft.drawFastVLine (40,65,100, RED); tft.drawFastVLine (50,85,125, GREEN); tft.drawFastVLine (60,105,150, BLUE); tft.drawFastVLine (70,125,175, WHITE);

Hasil pada LCD akan seperti berikut :

 

5.tft.fillRect

  Fungsi : Menggambar Rectangle/persegi dengan semua bagian berwarna/fill color
  Syntax : tft.fillRect(int16_t x1, int16_t y1, int16_t w, int16_t h, uint16_t fillcolor)
  int16_t x1 = koordinat x titik awal
  int16_t y1 = koordinat y titik awal
  int16_t w  = panjang rectangle (satuan pixel)
  int16_t h   = lebar/tinggi rectangle (satuan pixel)
  uint16_t fillcolor = warna rectangle

  Contoh : tft.fillRect(10,15 , 50, 40, YELLOW);
  keterangan : Menggambar persegi dari titik (10,15) dengan panjang 50pixe,tinggi 40pixel warna persegi KUNING
 Coba masukan coding berikut ke dalam void setup :

1 2 3 4 5 6

tft.fillScreen(BLACK); //Set Background Color with BLACK tft.fillRect(10,15 , 50, 40, YELLOW); tft.fillRect(100,50 , 100, 60, RED); tft.fillRect(30,120 , 30, 80, GREEN); tft.fillRect(10,250 , 200, 30, BLUE);

Hasil pada LCD akan seperti berikut :

6.tft.drawRect

  Fungsi : Menggambar Garis Rectangle/persegi denganbagian tengah no color/hanya line saja
  Syntax : tft.drawRect(int16_t x1, int16_t y1, int16_t w, int16_t h, uint16_t fillcolor)
  int16_t x1 = koordinat x titik awal
  int16_t y1 = koordinat y titik awal
  int16_t w  = panjang rectangle (satuan pixel)
  int16_t h   = lebar/tinggi rectangle (satuan pixel)
  uint16_t fillcolor = warna garis rectangle

  Contoh : tft.drawRect(10,15 , 50, 40, YELLOW);
  keterangan : Menggambar garis persegi dari titik (10,15) dengan panjang 50pixe,tinggi 40pixel warna garis KUNING
 Coba masukan coding berikut ke dalam void setup :

1 2 3 4 5 6

tft.fillScreen(BLACK); //Set Background Color with BLACK tft.drawRect(10,15 , 50, 40, YELLOW); tft.drawRect(100,50 , 100, 60, RED); tft.drawRect(30,120 , 30, 80, GREEN); tft.drawRect(10,250 , 200, 30, BLUE);

Hasil pada LCD akan seperti berikut :

7.tft.drawPixel

  Fungsi : Memberi warna pada 1 atau lebih pixel melalui koordinat x,y
  Syntax : tft.drawPixel(int16_t x, int16_t y, uint16_t color)
  int16_t x = koordinat x target pixel
  int16_t y = koordinat y target pixel
  uint16_t color = warna pixel

  Contoh : tft.drawPixel(119,159, RED);
  keterangan : Menggambar sebuah titik/pixel warna merah pada koordinat (119,159)

Fungsi drawPixel biasa digunakan untuk membuat grafik,gelombang,atau interface yang sifatnya berubah ubah.

8.tft.fillCircle

  Fungsi : Menggambar Lingkaran Sempurna dengan semua bagian berwarna/fill color
  Syntax : tft.fillCircle(int16_t x, int16_t y, int16_t r, uint16_t fillcolor)
  int16_t x = koordinat x titik pusat lingkaran
  int16_t y = koordinat y titik pusat lingkaran
  int16_t r  = diameter lingkaran (satuan pixel)
  uint16_t fillcolor = warna lingkaran

  Contoh : tft.fillCircle(10,15 , 50, YELLOW);
  keterangan : Menggambar Lingkaran KUNING dari titik (10,15) dengan diameter 50pixel
 Coba masukan coding berikut ke dalam void setup :

1 2 3 4 5 6 7 8 9

tft.fillScreen(BLACK); //Set Background Color with BLACK tft.fillCircle(10,15 , 50, YELLOW); tft.fillCircle(200,70 , 20, WHITE); tft.fillCircle(100,50 , 70, RED); tft.fillCircle(30,120 , 30, GREEN); tft.fillCircle(170,170 , 40, CYAN); tft.fillCircle(10,250 , 100, BLUE); tft.fillCircle(235,300 , 60, MAGENTA);

Hasil pada LCD akan seperti berikut :

9.tft.drawCircle

  Fungsi : Menggambar Garis Lingkaran Sempurna dengan bagian dalam tidak berwarna
  Syntax : tft.drawCircle(int16_t x, int16_t y, int16_t r, uint16_t fillcolor)
  int16_t x = koordinat x titik pusat lingkaran
  int16_t y = koordinat y titik pusat lingkaran
  int16_t r = diameter lingkaran (satuan pixel)
  uint16_t fillcolor = warna Garis lingkaran

  Contoh : tft.drawCircle(10,15 , 50, YELLOW);
  keterangan : Menggambar Garis Lingkaran KUNING dari titik (10,15) dengan diameter 50pixel
 Coba masukan coding berikut ke dalam void setup :

1 2 3 4 5 6 7 8 9

tft.fillScreen(BLACK); //Set Background Color with BLACK tft.drawCircle(10,15 , 50, YELLOW); tft.drawCircle(200,70 , 20, WHITE); tft.drawCircle(100,50 , 70, RED); tft.drawCircle(30,120 , 30, GREEN); tft.drawCircle(170,170 , 40, CYAN); tft.drawCircle(10,250 , 100, BLUE); tft.drawCircle(235,300 , 60, MAGENTA);

Hasil pada LCD akan seperti berikut :

10.tft.drawLine

  Fungsi : Menggambar Garis Lurus baik Vertikal,Horisontal atau pun Diagonal
  Syntax : tft.drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1,uint16_t color)
  int16_t x0 = koordinat x awal garis
  int16_t y0 = koordinat y awal garis
  int16_t x1 = koordinat x akhir garis
  int16_t y1 = koordinat y akhir garis
  uint16_t color = warna garis
  Contoh : tft.drawLine(10,15 , 50,70, YELLOW);
  keterangan : Menggambar Garis Lurus KUNING dari titik awal (10,15) menuju titik akhir (50,70)
  Coba masukan coding berikut ke dalam void loop :

1 2 3 4 5 6 7

void loop() { // put your main code here, to run repeatedly: for (int i=0; i<64; i++){ tft.drawLine(0,0,239,i*5,CYAN); delay (10); } }

Hasil pada LCD akan seperti berikut :

11.tft.drawRoundRect

  Fungsi : Menggambar Rectangle/persegi dengan sudut radius dan bagian tengah kosong
  Syntax : tft.drawRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, int16_t r, uint16_t color)

  int16_t x = koordinat x sudut kiri atas rectangle
  int16_t y = koordinat y sudut kiri atas rectangle
  int16_t w = panjang rectangle
  int16_t h = tinggi rectangle
  int16_t r = radius sudut melingkar (pixel)
  uint16_t color = warna garis rectangle
  Contoh : tft.drawRoundRect(10,15 , 50,50,5, YELLOW);
  keterangan : Menggambar Garis Persegi KUNING dengan sudut radius 5pixel dari titik awal (10,15)  dengan panjang 50pixel dan tinggi 20pixel.

12.tft.fillRoundRect

  Fungsi : Menggambar Rectangle/persegi dengan sudut radius dan bagian tengah terisi warna
  Syntax : tft.fill RoundRect(int16_t x, int16_t y, int16_t w, int16_t h, int16_t r, uint16_t color)
  int16_t x = koordinat x sudut kiri atas rectangle
  int16_t y = koordinat y sudut kiri atas rectangle
  int16_t w = panjang rectangle
  int16_t h = tinggi rectangle
  int16_t r = radius sudut melingkar (pixel)
  uint16_t color = warna rectangle
  Contoh : tft.fillRoundRect(10,15 , 50,50,5, YELLOW);
  keterangan : Menggambar Persegi KUNING dengan sudut radius 5pixel dari titik awal (10,15)  dengan panjang 50pixel dan tinggi 20pixel.

13.tft.drawTriangle

  Fungsi : Menggambar Triangle/Segitiga , bagian tengah kosong
  Syntax : tft.drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color)

  int16_t x0 = koordinat x sudut pertama Segitiga
  int16_t y0 = koordinat y sudut pertama Segitiga
  int16_t x1 = koordinat x sudut kedua Segitiga
  int16_t y1 = koordinat y sudut kedua Segitiga
  int16_t x2 = koordinat x sudut ketiga Segitiga
  int16_t y2 = koordinat y sudut ketiga Segitiga
  uint16_t color = warna garis segitiga
  Contoh : tft.drawTriangle(20,100 ,50,80, 30,120, YELLOW);
  keterangan : Menggambar Garis Segitiga KUNING dengan koordinat sudut 1 (20,100) , sudut 2 (50,80) , sudut 3 (30,120)

14.tft.fillTriangle

 Fungsi : Menggambar Triangle/Segitiga , bagian tengah berisi warna
  Syntax : tft.fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color)
  int16_t x0 = koordinat x sudut pertama Segitiga
  int16_t y0 = koordinat y sudut pertama Segitiga
  int16_t x1 = koordinat x sudut kedua Segitiga
  int16_t y1 = koordinat y sudut kedua Segitiga
  int16_t x2 = koordinat x sudut ketiga Segitiga
  int16_t y2 = koordinat y sudut ketiga Segitiga
  uint16_t color = warna segitiga
  Contoh : tft.fillTriangle(20,100 ,50,80, 30,120, YELLOW);
  keterangan : Menggambar Segitiga KUNING dengan koordinat sudut 1 (20,100) , sudut 2 (50,80) , sudut 3 (30,120)

Sementar sampai disini dulu..
Untuk nomor 15 sampai 23 ditunggu aja kelanjutanya

15.tft.drawBitmap(int16_t x, int16_t y,
                  const uint8_t *bitmap, int16_t w, int16_t h,
                  uint16_t color)

 

16.tft.drawBitmap(int16_t x, int16_t y,
            const uint8_t *bitmap, int16_t w, int16_t h,
            uint16_t color, uint16_t bg)

 

17.tft.drawXBitmap(int16_t x, int16_t y,
                              const uint8_t *bitmap, int16_t w, int16_t h,
                              uint16_t color)

 

18.tft.setCursor(int16_t x, int16_t y) 

 

19.tft.setTextSize(uint8_t s)

 

20.tft.setTextColor(uint16_t c)

 

21.tft.setTextColor(uint16_t c, uint16_t b)

22.tft.print

 

23.tft.drawChar(int16_t x, int16_t y, unsigned char c,
                uint16_t color, uint16_t bg, uint8_t size)