Skip to content Skip to sidebar Skip to footer
Home / Tutorial 2.4″ TFT LCD Shield Arduino (2. Menampilkan Font)

Tutorial 2.4″ TFT LCD Shield Arduino (2. Menampilkan Font)

By Bang Ilham 2 comments
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).

2 comments for "Tutorial 2.4″ TFT LCD Shield Arduino (2. Menampilkan Font)"