MODUL 5 PERANCANGAN DAN IMPLEMENTASI DISPLAY LCD

MENGGUNAKAN MODUL VGA PADA FPGA

Yogi Salomo Mangontang Pratama (13511059)
Asisten: Anugerah Firdauzi / 13209109
Tanggal Percobaan: 20/11/2012
EL2195-Praktikum Sistem Digital
Laboratorium Dasar Teknik Elektro – Sekolah Teknik Elektro dan Informatika

Abstrak 2. Memahami cara kerja VGA pada umumya.

Setelah mempelajari mengenai pembuatan rangkaian 2. STUDI PUSTAKA

kombinasional dan sekuensial dan menerapkannya
pada FPGA, saatnya untuk mengimplementasikan
kepada sesuatu yang dapat lebih diamati dengan lebih
baik. Ada berbagai macam implementasi dari
rangkaian ini dalam bentuk interface I/O antara lain
GPIO, komunikasi serial menggunakan RS232,
Audio CODEC, LCD karakter 16x2, dll. Dan pada
percobaan ini kita akan menggunakan modul VGA
pada FPGA.
Video Graphics Array atau biasa disebut VGA
adalah suatu interface yang banyak digunakan pada
peralatan elektronik zaman sekarang. VGA bekerja
dengan menggunakan sinyal antara lain Horizontal
Sync, Vertical Sync, dan Sinyal RGB yang
merupakan sinyal warnanya.
2.1 VIDEO GRAPHICS ARRAY
VGA pertama kali diperkenalkan oleh IBM pada
tahun 1987 dan sekarang telah banyak
digunakan pada peralatan elektronik serta
disebut dengan standart analog display. Dalam
penerapannya, VGA menggunakan 3 sinyal :
a. Horizontal Sync (TTL level)
Sinyal ini akan aktif pada range piksel kolom 0
sampai 639. Sehingga kalau sinyal ini tidak aktif,
yang terjadi adalah pergantian baris.
b. Vertical Sync (TTL level)

Kata kunci : VGA, LCD, RGB.
1. PENDAHULUAN
Dalam pengimplementasian rangkaian digital,
ada berbagai macam interface I/O yang dapat
kita gunakan untuk menampilkan rangkaian
yang sudah kita buat ke dalam bentuk yang
lebih baik daripada sekadar LED ataupun seven
segment pada FPGA, dan pada percobaan ini
kita akan mencoba menampilkan rangkaian
dalam salah satu dari interface tersebut yaitu
VGA atau Video Graphics Array.
Sinyal ini akan aktif pada range piksel baris 0
sampai dengan 479. Sehingga kalau sinyal ini
tidak aktif, yang terjadi adalah pergantian layar,
atau kembali ke baris pertama.
c. Sinyal RGB (Analog 3 pin: 0,7-1V)
Sinyal ini merepresentasikan intensitas untuk
masing-masing komponen warna merah, hijau,
dan biru untuk setiap pixel yang saat itu aktif.
Sehingga yang terjadi ketiga sinyal ini berubah-
ubah sesuai pixel yang sedang aktif dalam
proses scanning.

VGA adalah interface yang masih banyak
digunakan pada peralatan elektronik, seperti
layar LCD dan proyektor. Pada FPGA yang kita
gunakan juga terdapat modul VGA dan itulah
yang akan digunakan pada percobaan kali ini.
Cara kerja dari VGA secara garis besar adalah
dengan melakukan proses scanning mulai dari
kiri atas ke kanan lalu ke kiri bawah dan
kembali ke kiri atas ketika sudah mencapai pixel
terakhir.

Adapun tujuan dari percobaan ini adalah :

1. Mendapatkan pengetahuan dan pengalaman

menggunakan interface pada board evaulasi
FPGA.

1
 Alat-alat yang digunakan dalam percobaan ini
antara lain :

1. Komputer yang telah ter-install program

Quartus II

2. FPGA development board, tipe DE1 beserta

perlengkapannya yang meliputi :

 Board FPGA tipe UP2, DE1, DE2, atau

GAMBAR 2.1.1 PROSES SCAN PADA VGA DE2-70
 Catu Daya+ Kabel dan konektor
Pada VGA juga dikenal Refresh rate yang harus
tambahan
dibuat lebih dari 60Hz karena bila tidak
demikian manusia akan dapat melihat adanya  Kabel downloader ‘ByteBlaster II’ dan
flicker. USB-Blaster.

2.2 VGA DISPLAY 3. Monitor LCD.

Proses menampilkan VGA pada layar LCD 3.1 PERCOBAAN 5A : MENGGAMBAR

kurang lebih dapat dijelaskan melalui bagan
berikut ini :
BENDERA SEDERHANA
Pada percobaan pertama kita akan membuat
sebuah bendera RI dengan ukuran untuk pixel
atas adalah nomor baris kurang dari 241.

Cara yang dilakukan adalah dengan mengatur

file display.vhd dan color_rom_vhd.vhd nya.

Berikut adalah beberapa file VHDL yang

digunakan :

a. color_rom_vhd.vhd

GAMBAR 2.2.1 DIAGRAM BLOK VGA DISPLAY

Dapat dilihat melalui bagan bahwa pada

awalnya kita memasukkan data dari computer
kita yang terdiri dari kode inputan beserta
sinyal clk. Kemudian FPGA akan merubahnya
menjadi sinyal RGB yang digital beserta sinyal
sinkronisasi. Kemudian sinyal teresebut akan
diterima oleh chip DAC, yang bertugas
merubah sinyal digital menjadi analog. Dalam
hal ini adalah sinyal RGBnya dari digital
menjadi analog, demikian pula sebaliknya.
Sinyal yang telah dirubah tersebut dimasukkan
kepada VGA yang akan menampilkannya pada
layar LCD.

Demikianlah garis besar dari cara kerja VGA

yang akan kita terapkan secara langsung pada
percobaan ini.

3. METODOLOGI

2
b. display_vhd.vhd

c. top_level.vhd

3
3.2 PERCOBAAN 5B : MENGGAMBAR
BENDERA DENGAN UKURAN YANG
DAPAT DIATUR

Pada percobaan kedua ini kita kembali akan

menggambar bendera, akan tetapi tidak
seukuran satu layar penuh seperti pada
percobaan pertama. Pada percobaan ini kita
ingin agar ukuran bendera dapat diubah, dan
kita menginginkan ukurannya adalah 50x50
pixel.

Cara yang dilakukan adalah dengan mengatur

kembali batas pada color_rom_vhd.vhd nya
yang tadinya hanya memiliki satu batas,
sekarang ada 4 batas, yaitu batas atas, kiri,
kanan, dan bawah dari bendera yang ingin kita
buat.

Untuk beberapa file seperti display, top_level,

pll digunakan file yang sama dengan percobaan
pertama. 3.3 PERCOBAAN 5C : MEMBUAT KOTAK
BERGERAK DENGAN BANTUAN FSM

Pada percobaan ketiga ini kita akan membuat

Berikut adalah file VHDL yang diubah dari
kotak yang telah dibuat pada percobaan kedua
percobaan sebelumnya :
dapat bergerak dengan arah sesuai input yang
a. color_rom_vhd.vhd diberikan dari board FPGA.

Cara yang dilakukan adalah dengan membuat

suatu file FSM yang berfungsi untuk mengatur
pergerakannya untuk setiap state(yang dalam
hal ini berubah sesuai input arah dari FPGA).

4
Untuk file yang menampilkan kotaknya, b. FSM_kiri_kanan.vhd
digunakan file yang sama dengan percobaan
kedua.

Berikut adalah file FSM yang digunakan :

a. FSM_atas_bawah.vhd

5
c. top_level_vhd.vhd d. CLOCKDIV.vhd

4. HASIL DAN ANALISIS

Hasil yang kami dapatkan untuk percobaan

pertama adalah sebagai berikut :

GAMBAR 4.1 BENDERA INDONESIA PADA LCD

Gambar yang kami dapatkan sesuai dengan

spesifikasi yang diberikan oleh modul.

6
Adapun cara kerja dari penggambaran bendera
ini adalah pertama dengan mengatur
color_rom_vhd.vhd nya. Pada file ini kita
membuat spesifikasi yang akan ditampilkan
pada layar. Di soal disebutkan bahwa ukuran
bendera harus ditengah-tengah yaitu <241. Oleh
karena itu kita membuat syarat tersebut dalam
file ini, sebagai berikut :

GAMBAR 4.2 BENDERA 50x50pixel.

Cara kerja yang dilakukan kurang lebih sama

Dimana kami membuat konstanta yang bernilai
241. Dan selama barisnya berada di atas
konstanta tersebut, nilai merah akan bernilai 1.
Dan di bawahnya kami meng-assign warna
sesuai dengan kondisi apabila merah ( merah =
‘1’) atau putih.
dengan percobaan pertama, yang berubah
hanya satu, yaitu batas yang digunakan untuk
nilai merah menjadi ‘1’. Karena kita ingin
membuat sebuah persegi yang ukurannya
tertentu, maka konstanta yang digunakan tidak
cukup hanya satu. Kita harus menambahkan
konstanta seperti yang dicantumkan pada
potongan file berikut :

Setelah selesai, file color_rom_vhd.vhd ini

ditambahkan menjadi PORT pada file
display_vhd.vhd. File ini adalah file yang
berperan untuk mengatur display dari masukan
yang telah kita buat ke dalam vga. Semua
output yang kita buat dari file
color_rom_vhd.vhd dijadikan input pada file
ini. Dan kemudian display_vhd.vhd ini juga
ditambahkan sebagai PORT pada
top_level_vhd.vhd. File ini berperan sebagai
driver, semua file yang dibutuhkan
ditambahkan disini, dan semua masukan dari
berbagai file itu akan di assign kepada input
yang dibutuhkan oleh VGA untuk
menampilkannya pada layar. Demikianlah cara
Dapat dilihat bahwa ada tambahan konstanta
kerja dari percobaan pertama.
batas atas, kiri, kanan, dan bawah. Oleh karena
Untuk percobaan yang kedua, hasil yang kami diinginkan persegi berukuran 50pixel, konstanta
dapatkan adalah sebagai berikut : harus dibuat berjarak 51pixel. Dan kami
memilih 200-251 untuk vertikal, dan 400-451
untuk horizontal. Dan pada syarat agar nilai
merah menjadi ‘1’ juga dilakukan sedikit
modifikasi, yaitu nilai merah hanya menjadi ‘1’

7
apabila nilai dari i_pixel_row dan
i_pixel_column berada di antara batas-batas
yang telah diberikan, dan sisanya dibiarkan
bernilai ‘0’. Untuk pewarnaan sendiri tidak
mengalami perubahan dari percobaan pertama.

Sementara untuk tahapan dari file ke file, untuk

percobaan kedua ini sama persis dengan
percobaan pertama sehingga tidak ada
perbedaan.

Untuk percobaan ketiga, hasil yang didapatkan

adalah sebagai berikut :

8
 dan V yang berubah sesuai waktu, oleh karena
itulah maka kita melihat kotak seperti bergerak,
karena perubahannya terjadi sangat cepat dan
tidak dapat kita amati.

Demikianlah hasil dan analisis yang didapat

dari percobaan mengimplementasikan VGA ke
layar LCD.

5. KESIMPULAN

VGA merupakan implementasi yang cukup baik

GAMBAR 4.3 POTONGAN GAMBAR PERGERAKAN dan mudah diterapkan apabila kita ingin
KOTAK KE ARAH ATAS DAN KIRI
menampilkan rangkaian yang telah kita buat
Kemungkinan besar gambar yang ditampilkan dengan VHDL. Yang kita perlukan adalah
kurang dapat memberikan gambaran mengenai modul vga itu sendiri dan sebuah layar LCD.
gerakan dari kotak tersebut. Akan tetapi akan
Dengan menggabungkan kinerja dari FSM dan
dijelaskan bagaimana cara kerja dari kotak
VGA kita dapat membuat rangkaian kita
bergerak tersebut.
interaktif dan dapat ditampilkan pada layar.
File DIVCLOCK digunakan untuk membuat Sehingga dengan kombinasi keduanya kita
dapat membuat suatu aplikasi ataupun program
nilai clk atau waktu dari rangkaian tersebut
menjadi teramati oleh mata manusia. Nantinya yang dapat memberikan output tampilan yang
berdasarkan input dari user.
file DIVCLOCK ini akan dijadikan port dalam
FSM yang akan digunakan, baik untuk kiri 6. DAFTAR PUSTAKA
kanan ataupun atas bawah.
Brown, Steven dan Varesnic, Zvonko. 2005.
Pada masing-masing FSM dibuat terdiri dari 2 Fundamental Of Digital Logic with
state yaitu A,B,C,D. Untuk atas dan bawah, VHDL Design.
pada saat input g_atas bernilai ‘0’, maka nilai
COUNT akan berkurang satu per satu. Hutabarat, Mervin, dkk, Modul Praktikum
Sementara bila g_bawah bernilai ‘0’, nilai Sistem Digital, Institut Teknologi
COUNT akan bertambah satu per satu. Nilai Bandung, Bandung, 2012
dari COUNT ini akan di assign kepada nilai V
atau nilai dari vertikal yang nantinya akan
digunakan pada color_rom_vhd dan juga pada
top_level_vhd. Begitu pula cara kerja pada FSM
kiri dan kanan, dimana pada saat g_kiri bernilai
‘0’ maka COUNT akan bertambah satu per satu
dan demikian sebaliknya bila g_kanan bernilai
‘0’. Nantinya nilai dari COUNT ini akan di
assign kepada sinyal H yang akan menjadi input
pada color_rom_vhd.vhd.

FSM ini akan dimasukkan ke dalam driver atau

main dari rangkaian ini yaitu top_level_vhd.vhd
sebagai PORT. Nilai dari H dan V yang telah
dihasilkan dari FSM akan dimasukkan sebagai
input pada display_vhd.vhd yang bertugas
untuk menampilkan rangkaian tersebut pada
LCD. Output tampilan akan ter-refresh
sementara FSM terus bekerja, dengan nilai H