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 1. Mendapatkan pengetahuan dan

Setelah mempelajari mengenai
pembuatan rangkaian 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.
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.
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.
Adapun tujuan dari percobaan ini adalah :
pengalaman menggunakan interface pada
board evaulasi FPGA.
2.Memahami cara kerja VGA pada
umumya.
2. STUDI PUSTAKA
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)
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.
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.
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,

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

2.2 VGA DISPLAY 3.Monitor LCD.

Proses menampilkan VGA pada layar LCD 3.1PERCOBAAN 5A :

kurang lebih dapat dijelaskan melalui MENGGAMBAR
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 :
GAMBAR 2.2.1 DIAGRAM BLOK VGA DISPLAY
a. color_rom_vhd.vhd
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.
Berikut adalah file VHDL yang diubah dari
percobaan sebelumnya :
a. color_rom_vhd.vhd
3.3 PERCOBAAN 5C : MEMBUAT
KOTAK
BERGERAK DENGAN BANTUAN
FSM
Pada percobaan ketiga ini kita akan
membuat kotak yang telah dibuat pada
percobaan kedua dapat bergerak dengan
arah sesuai input yang 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

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.
sama 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 kerja dari Dapat dilihat bahwa ada tambahan
percobaan pertama. konstanta batas atas, kiri, kanan, dan
bawah. Oleh karena diinginkan persegi
Untuk percobaan yang kedua, hasil yang berukuran 50pixel, konstanta harus dibuat
kami dapatkan adalah sebagai berikut : 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

GAMBAR 4.3 POTONGAN GAMBAR PERGERAKAN

KOTAK KE ARAH ATAS DAN KIRI
Kemungkinan besar gambar yang
ditampilkan kurang dapat memberikan
gambaran mengenai gerakan dari kotak
tersebut. Akan tetapi akan dijelaskan
bagaimana cara kerja dari kotak bergerak
tersebut.
File DIVCLOCK digunakan untuk membuat
nilai clk atau waktu dari rangkaian
tersebut menjadi teramati oleh mata
manusia. Nantinya file DIVCLOCK ini akan
dijadikan port dalam FSM yang akan
digunakan, baik untuk kiri kanan ataupun
atas bawah.
VGA merupakan implementasi yang cukup
baik dan mudah diterapkan apabila kita
ingin menampilkan rangkaian yang telah
kita buat dengan VHDL. Yang kita perlukan
adalah modul vga itu sendiri dan sebuah
layar LCD.
Dengan menggabungkan kinerja dari FSM
dan VGA kita dapat membuat rangkaian
kita interaktif dan dapat ditampilkan pada
layar. Sehingga dengan kombinasi
keduanya kita dapat membuat suatu
aplikasi ataupun program yang dapat
memberikan output tampilan yang
berdasarkan input dari user.
6. DAFTAR PUSTAKA

Pada masing-masing FSM dibuat terdiri Brown, Steven dan Varesnic, Zvonko.
dari 2 state yaitu A,B,C,D. Untuk atas dan 2005. Fundamental Of Digital
bawah, pada saat input g_atas bernilai 0, Logic with VHDL Design.
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. Bandung, Bandung, 2012
Nilai 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
9