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 HorisontalSyntax : 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 sajaSyntax : 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,ySyntax : 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 colorSyntax : 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 berwarnaSyntax : 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 DiagonalSyntax : 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 kosongSyntax : 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 warnaSyntax : 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 kosongSyntax : 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 warnaSyntax : 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