Author : Ila MulyandiNo comments

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)b

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 :
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.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 :

1.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)

Karena terlalu panjang kalo dicantumkan contohnya, maka gitu aja cukup y dulur, he...

Posted On : Sunday, January 22, 2017Time : 11:13 PM
SHARE TO :
| | Template Created By : Rajendroid | CopyRigt By : ARDUINO | |