Tutorial 2.4″ TFT LCD Shield Arduino (2. Menampilkan Font)
Daftar Tutorial 2.4″ TFT LCD Shield Arduino:
Tutorial 2.4″ TFT Arduino – Melanjutkan postingan sebelumnya, pada postingan ini kita akan melakukan Pengujian terhadap LCD TFT. Kita akan mencoba menampilkan tulisan pada layar LCD. Ada beberapa langkah yang mesti kita pelajari yaitu, sistem koordinat pada LCD, library yang digunakan dan Jenis Font yang digunakan.
1.Sistem koordinat LCD
Teman-teman perhatikan gambar diatas. LCD tersusun dari piksel-piksel. setiap piksel memiliki alamat lokasi. ketika satu piksel ingin kita aktifkan, berarti kita harus aktifkan piksel tersebut dengan menyertakan koordinat lokasi piksel. Penulisan koordinat dimulai dari huruf “x” kemudian “y”. Contoh Piksel (x, y) yaitu piksel (9,8). Pada gambar diatas saya beri contoh menghidupkan 3 piksel saja, yaitu pada koordinat (9,8), (36, 3) dan (46, 22).
2. Install Library
Pada langkah ini kita gunakan library untuk membuat program nanti jadi mudah. Ada dua library yang kita gunakan. Pertama library yang berisikan fungsi-sungsi LCD dan Oled yang telah disediakan oleh Adafruit Indusrty. Nama library tersebut adalah Adrafruit GFX. Kedua adalah library yang berisikan konfigurasi hardware LCD dan OLED seperti ID, Resolusi layar, dll. Nama Library tersebut adalah MCUFRIEND. Untuk library Adafruit GFX silahkan teman-teman install melalui library manager Arduino IDE. Atau silahkan kunjungi website ini. Silahkan teman-teman download library MCUFRIEND dibawah ini:
Kemudian pasangkan modul LCD 2.4″ TFT ke Arduino dan upload program berikut:
//-------------------// //hamboelektronik.com// //-------------------// #include <Adafruit_GFX.h> // Library yang berisikan fungsi-fungsi LCD dan OLED #include <MCUFRIEND_kbv.h> // Library yang berisikan konfigurasi hardware dari LCD MCUFRIEND_kbv tft; #include <FreeDefaultFonts.h> //Menggunakan Font Standar //definisikan warna #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define WHITE 0xFFFF #define GREY 0x8410 #define BLUE 0x001F #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 void setup(void) { uint16_t ID = tft.readID(); //membaca ID Hardware if (ID == 0xD3) ID = 0x9481; tft.begin(ID); //set pengaturan sesuai dengan ID yang didapat tft.setRotation(0); //0 untuk potrait dan 1 untuk landscape tft.fillScreen(BLACK); showmsgXY(80, 40, 1, NULL, "Selamat Datang"); //tampilkan pesan "Selamat Datang" showmsgXY(30, 80, 2, NULL, "Hambo Elektronik");//tampilkan pesan "Hambo Elektronik" } void loop(void) { } void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg) //fungsi tampilan { tft.setFont(f); // Karena font adalah default, maka di tulis NULL tft.setCursor(x, y); // tetapkan kursor atau koordinat awal tulisan tft.setTextColor(GREEN); //tetapkan tulisan warna hijau tft.setTextSize(sz); //tetapkan ukuran font, disini contohnya adalah 1 dan 2px tft.print(msg); //tampilkan tulisan ke layar LCD }
Teman-teman akan melihat hasil dari LCD TFT 2.4″ yang terhubung ke arduino adalah sebagai berikut:
3. Jenis Font
Library Adafruit telah menyediakan 48 font yang terbagi atas 3 kategori font yaitu, Serif, Sans dan Mono. Adapun fontnya adalah sebagai berikut:
FreeMono12pt7b.h FreeSansBoldOblique12pt7b.h FreeMono18pt7b.h FreeSansBoldOblique18pt7b.h FreeMono24pt7b.h FreeSansBoldOblique24pt7b.h FreeMono9pt7b.h FreeSansBoldOblique9pt7b.h FreeMonoBold12pt7b.h FreeSansOblique12pt7b.h FreeMonoBold18pt7b.h FreeSansOblique18pt7b.h FreeMonoBold24pt7b.h FreeSansOblique24pt7b.h FreeMonoBold9pt7b.h FreeSansOblique9pt7b.h FreeMonoBoldOblique12pt7b.h FreeSerif12pt7b.h FreeMonoBoldOblique18pt7b.h FreeSerif18pt7b.h FreeMonoBoldOblique24pt7b.h FreeSerif24pt7b.h FreeMonoBoldOblique9pt7b.h FreeSerif9pt7b.h FreeMonoOblique12pt7b.h FreeSerifBold12pt7b.h FreeMonoOblique18pt7b.h FreeSerifBold18pt7b.h FreeMonoOblique24pt7b.h FreeSerifBold24pt7b.h FreeMonoOblique9pt7b.h FreeSerifBold9pt7b.h FreeSans12pt7b.h FreeSerifBoldItalic12pt7b.h FreeSans18pt7b.h FreeSerifBoldItalic18pt7b.h FreeSans24pt7b.h FreeSerifBoldItalic24pt7b.h FreeSans9pt7b.h FreeSerifBoldItalic9pt7b.h FreeSansBold12pt7b.h FreeSerifItalic12pt7b.h FreeSansBold18pt7b.h FreeSerifItalic18pt7b.h FreeSansBold24pt7b.h FreeSerifItalic24pt7b.h FreeSansBold9pt7b.h FreeSerifItalic9pt7b.h
Namun bagaimana cara menggunakannya? Kita harus memasukkan dulu nama fontnya kedalam program kita menggunakan #include <jenis font.h>. Perhatikan program berikut:
//-------------------// //hamboelektronik.com// //-------------------// #include <Adafruit_GFX.h> // Library yang berisikan fungsi-fungsi LCD dan OLED #include <MCUFRIEND_kbv.h> // Library yang berisikan konfigurasi hardware dari LCD MCUFRIEND_kbv tft; #include <FreeDefaultFonts.h> #include <Fonts/FreeMono12pt7b.h> #include <Fonts/FreeSans12pt7b.h> #include <Fonts/FreeSerif12pt7b.h> //definisikan warna #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define WHITE 0xFFFF #define GREY 0x8410 #define BLUE 0x001F #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 void setup(void) { uint16_t ID = tft.readID(); //membaca ID Hardware if (ID == 0xD3) ID = 0x9481; tft.begin(ID); //set pengaturan sesuai dengan ID yang didapat tft.setRotation(0); //0 untuk potrait dan 1 untuk landscape tft.fillScreen(BLACK); showmsgXY(10, 10, 2, NULL, "Hambo Elektronik"); showmsgXY(10, 50, 1, &FreeMono12pt7b, "Hambo Elektronik"); showmsgXY(10, 80, 1, &FreeSans12pt7b, "Hambo Elektronik"); showmsgXY(10, 110, 1, &FreeSerif12pt7b, "Hambo Elektronik"); } void loop(void) { } void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg) //fungsi tampilan { tft.setFont(f); tft.setCursor(x, y); tft.setTextColor(GREEN); tft.setTextSize(sz); tft.print(msg); }
Maka tampilannya adalah seperti ini:
Selanjutnya akan dibahas bagaimana cara menampilkan gambar di LCD. Baca Tutorial 2.4″ TFT LCD Shield Arduino (3. Menampilkan Bitmap).
kog tidak jalan ya error compilling to board
ReplyDeleteBoleh kasih tahu apa errornya?
Delete