Rabu, 08 Juni 2016

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)

 

About the Author

iHoney

DANI ARDAN
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa.

7 komentar:

  1. Farhan11 Januari 2017 pukul 20.11

    yg no.23 dunk bang tutorialnya, saya coba tft.drawChar(28, 20, 'O', GREEN, 5); tpi malah error, atau harus masukin tambahan coding pada TFTLCD.h?

    if ((p.y > -4 && p.y < 74 && p.x > 3 && p.x < 82) && (ul == 1) && (gameover == 0)) {
    if (turn == 1) {
    tft.drawChar(28, 20, 'O', GREEN, 5);
    upperleft = 1;
    }
    if (turn == 2) {
    tft.drawChar(28, 20, 'X', RED, 5);
    upperleft = 2;
    }
    ul = 0;
    turntoggle();
    showturn();
    }

    BalasHapus
  2. christy dei9 Mei 2017 pukul 13.59

    mas, mau tanya..
    aku pakai 2.4" TFT LCD dengan LCD drivernya ILI9325, ada beberapa program bisa digunakan jika pakai librarynya adafruit/mcufriend, yang sering bermasalah itu untuk touchscreennya. menentukan nilai maxx,maxy,minx,miny itu gmn ya? kalau aku coba sesuai dengan libnya mcufriend kadang mau, kadang engga.. menyesuaikan dengan program yang awalnya untuk 2.8" diubah ke 2.4" jua gmn?

    maaf banyak pertanyaan, mohon bantuannya
    Terimakasih
    Kristi

    BalasHapus
    Balasan
    1. Unknown31 Juli 2017 pukul 00.01


      Christy Dei

      Pake sampel program touch calibrate buat mengetahui nilai berikut.

      TC_MINX = TC_LEFT
      TC_MINY = TC_TOP
      TC_MAXX = TC_RT
      TC_MAXY = TC_BOT

      Cara simple Pakai sample program tft_paint.
      Saat program pertama jalan, jgn klik exit dulu. Klik bagian2 berikut di touchscreen pake ujung tumpul yg kecil misal ujung pensil/pulpen

      Area paling pinggir kiri buat nilai TC_MINX
      Area paling pinggir atas buat nilai TC_MINY
      Area paling pinggir kanan buat nilai TC_MAXX
      Area paling pinggir bawah buat nilai TC_MAXY

      Nanti kalo dah dapat, silahkan rubah nilai nilainya di sket sesuai yg ente dapat tadi, trus program ulang.

      Semoga membantu

      Hapus
  3. Unknown30 Juli 2017 pukul 23.58

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Unknown12 Maret 2019 pukul 07.59

    mas, di tunggu tutorial no 15 dan selanjutnya.
    dan terimakasih untuk tutorial yang lain... sangat membantu buat sy yg baru belajar ini.

    BalasHapus
  5. Unknown11 November 2019 pukul 22.05

    ditunggu lanjutannya aku mau jadi sarjana tft soalnya

    BalasHapus

Copyright © 2014 Belajar Arduino | Designed With By Blogger Templates | Distributed By Gooyaabi Templates
Scroll To Top