Modul 5: PERANCANGAN DAN IMPLEMENTASI

DISPLAY LCD MENGGUNAKAN MODUL VGA PADA

FPGA
Praktikan : Rikki Naldo Napitupulu (14S15038)
Asisten : Rusdiansyah Harahap
Tanggal Praktikum : 16 November 2016
Els2104 : Praktikum Sistem Digital
Laboratorium Dasar Teknik Elektro-Institut Teknologi Del

Abstrak
Abstrak
Pada percobaan kali ini , kita akan membuat serta
memahami bagaimana cara untuk menampilkan
layar warna warni atau sering disebut habis siaran
ketika malam dini hari , dengan menggunakan
perangkat xillinx sparta .
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
Implementasi fungsi gerbang logika padarangkaian
dapat dilakukan dengan berbagai cara,salah satunya
adalah rangkaian logika sekuensial,yang bergantung
pada memori statenya,Desain dari rangkaian logika
sekuensial dapat di implementasikan pada berbagai
macam perangkat keras, seperti board FPGA dan
tampilan display LCD 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. Selain itu, kita akan
mempelajari penerapan blok diagram dalam
pixel (percobaan 2) dan membuat bujur sangkar
tersebut bergerak (percobaan 3).
Adapun tujuan dari percobaan ini adalah :
1. Mendapatkan pengetahuan dan pengalaman
menggunakan interface pada board evaulasi
FPGA.
2. Memahami bagaimana cara kerja VGA pada
dasarnya
2. Dasar Teori
Video Graphics Array (VGA) masih
menjadi interface yang popular untuk
sebuah tampilan. VGA interface ini masih
banyak ditemukan di beberapa device
sekarang, misalnya layar LCD dan proyektor.
VGA interface ini terdapat juga di board
altera yang kita gunakan saat ini. Pada
percobaan kali ini tampilan VGA digunakan
perancangan menggunakan modul VGA, yaitu membuat
sebuah bujur sangkar 50 x 50
agar tampilan hasil desain yang kita rancang
menjadi lebih menarik, tidak terbatas hanya
pada LED atau 7-Segment. Tujuan percobaan kali
ini juga adalah memberikan ilustrasi penggunaan
interface I/O yang ada pada FPGA, misalnya
GPIO, komunikasi serial menggunakan RS232,
Audio CODEC, LCD karakter 16x2, dll.
Interface ke VGA menggunakan 2 jenis sinyal,
yaitu : sinyal warna (Merah, Hijau, dan Biru)
dan sinyal sinkron (horizontal dan vertical).
Berikut adalah penjelasan beberapa sinyal
yang digunakan :
2.1 Horizontal Sync (TTL level)
Gambar 2 dan Tabel 1 menunjukkan spesifikasi
Sinyal ini akan aktif pada range piksel
kolom 0 sampai dengan 639. timing dari sinkronisasi VGA. Sebuah sinyal
Sehingga kalau sinyal ini tidak aktif, aktif low menunjukkan akhir dari sebuah
yang terjadi adalah pergantian baris. sinkronisasi. Misalkan sinyal aktif low untuk
2.2 Vertical Sync (TTL level) horiz sync menandakan akhir dari scanning
Sinyal ini akan aktif pada range piksel satu baris dan awal untuk baris berikutnya.
baris 0 sampai dengan 479. Data RGB harus didrive 0 untuk beberapa
Sehingga kalau sinyal ini tidak aktif, yang waktu tertentu thfp dan tvfp.
terjadi adalah pergantian layar. Atau
kembali ke baris pertama.
.
2.2 Sinyal RGB (Analog 3 pin: 0,7 – 1 V)
Sinyal ini merepresentasikan intensitas
untuk masing2 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 (dari kiri ke kanan untuk setiap Gambar 2. Timing Sinyal untuk VGA 640x480 piksel
baris, selanjutnya dari baris paling atas
sampai baris paling bawah).
SYMBOL Min Typ Max Unit
Pada percobaan kali ini kita menggunakan thd 640 DCLK
resolusi 640x480 pixel dan menggunakan fclk 24 50 MHz
refresh rate lebih dari 60 Hz. Refresh rate th 760 DCLK
ini digunakan karena pada range kurang thpw 1 48 255 DCLK
dari 30-60 Hz manusia dapat melihat
thb 88 DCLK
adanya flicker. Selain itu refresh rate ini
juga umum digunakan pada monitor LCD. thfp 1 32 255 DCLK
LCD modern memiliki fitur multirate, th-thd 85 120 512 DCLK
sehingga kita tidak harus tepat membuat
refresh ratenya 60 Hz. Proses scanning tvd 480 th
berawal dari kiri atas ke kanan lalu ke kiri tv 513 525 767 th
bawah dan kembali ke kiri atas ketika sudah tvpw 3 3 255 th
mencapai pixel terakhir. tvb 32 th
tvfp 1 13 255 th
tv-tvd 4 45 255 th
Tabel 1. Nilai-nilai parameter pada Gambar 1
Gambar 3 menunjukkan blok diagram dari
FPGA hingga ke LCD monitor. Chip DAC
mengubah sinyal digital ke analog. Dalam
kasus ini, data RGB digital diubah ke data RGB
Gambar Razor Scan pada Layar LCD
analog, begitu juga untuk sinyal
sinkronisasinya. Sedangkan gambar 4
menunjukkan skematik dari display VGA PERCOBAAN 5A
yang ada pada board DE1. Untuk board
lainnya dapat dibaca di datasheet
masing-masing board. Board DE1
menyediakan 16-pin konektor untuk
output VGA dan Analog Devices ADV7123
10-bit high speed video DAC. DAC ini
mendapatkan sinyal sinkronisasi dari
FPGA.

Gambar 3. Diagram Blok VGA Display

Buat kode VHDL yang membuat bendera RI

Kompilasi kode dan download ke FPGA

Lihat hasilnya pada monitor LCD

Gambar Skematik VGA Display Gambar Flowchart Percobaan 5A

3. Metodologi
a PERCOBAAN 5B
Alat yang digunakan pada percobaan ini adalah
:
 Komputer yang sudah diinstall quartus

 Monitor LCD

 FPGA Altera DE1
Langkah-langkahnya adalah sebagai berikut :

.
Gambar sebuah bujur sangkar berukuran
50x50 piksel dengan kode VHDL
Kompilasi dan download hasilnya pada FPGA
Amati hasilnya pada monitor LCD
Gambar Flowchart Percobaan 4b
4. Analisis dan Pembahasan
a. Percobaan 1
Pada percobaan ini, kita akan
mengimplementasikan desain gambar bendera
RI dilayar (atas merah, bawah putih).
Warna merah didapatkan dengan mengatur
warna merah R = 111111, G = B = 000000,
sedangkan warna putih R = G = B = 111111.
Sebuah layar display LCD memiliki ukuran
THD x TVD = 640 x 480 pixel, sehingga untuk
membuat warna bendera, kita akan membagi
layar menjadi dua bagian, yaitu 0..240 berwarna
merah dan 241..479 berwarna putih.
Secara sederhana, kode yang digunakan
(modifikasi file color_rom_vhd.vhd) adalah:
IF (i_pixel_row < 241) THEN o_red
<= X"FF"; o_green <= X"00"; o_blue
<= X"00";
ELSE o_red <= X"FF"; o_green <=
X"FF"; o_blue <= X"FF";
END IF;
Kode diatas memberikan perintah bahwa untuk
baris yang pixel-nya kurang dari 241 akan
berwarna merah , sedangkan sisanya berwarna
putih. o_red <= X”FF” pada script diatas setara
dengan R = ’111111’, hal ini dapat dilihat dari
display_vhd.vhd bahwa red <= red_color (7
DOWNTO 2), sehingga VGA_R <= ’111111’.
Hasil tampilan bendera RI dapat dilihat pada
gambar 4-1 berikut ini:
Gambar Tampilan display LCD Bendera RI
Secara singkat, VGA melakukan proses scanning dari
baris dan kolom teratas (0,0) ke (0,639), dilanjutkan ke
baris selanjutnya sampai (240,639) berwarna merah,
sedangkan sisanya ( (241,0) sampai (479,639) )
berwarna putih.
c. Percobaan 2
Pada percobaan ini, kita akan mengimplementasikan
sebuah desain kotak bujur sangkar (solid) berukuran
50 pixel x 50 pixel pada layar VGA. Selain itu, bujur
sangkar ini akan diletakkan dengan titik-titik sudut
(10,10), (10,59), (59,10), dan (59,59). Untuk itu,
perhatikan kode berikut ini:
CONSTANT TOPLEFT : INTEGER := 10;
CONSTANT BTMRIGHT : INTEGER := 59;
Konstanta diatas adalah nilai-nilai pixel yang
membatasi kotak bujur sangkar yang akan dibuat.
Untuk membedakan bujur sangkar tersebut dengan
layar, maka kita akan memberikan warna merah
(seperti pada percobaan 1) pada bujur sangkar
tersebut. Perhatikan modifikasi file
color_rom_vhd.vhd berikut ini:
IF ((i_pixel_column >= TOPLEFT)
AND (i_pixel_column <= BTMRIGHT))
AND ((i_pixel_row >= TOPLEFT)
AND (i_pixel_row <= BTMRIGHT))
THEN o_red <= X"FF"; o_green
<= X"00"; o_blue <= X"00";
ELSE o_red <= X"FF"; o_green
<= X"FF"; o_blue <= X"FF";
END IF;
Kode diatas memberikan batasan warna merah untuk
range kolom antara 10 – 59 dan range baris antara 10 –
59 (seperti pada percobaan 1, hanya dengan batasan
pixel yang berbeda).
Hasil tampilan bujur sangkar percobaan 2 dapat
dilihat pada gambar 4-2 berikut ini:
 6. Daftar Pustaka

http://en.wikipedia.org/wiki/sequential logic , 27
november 2012, pukul 20:40:15

Brian holdsworth , Digital Logic Design Fourth

Gambar 4-2 Bujur Sangkar pada display LCD Edition , N.wnes,2002

Modul praktikum system Digital IT DEL 2016”

5. Kesimpulan PERANCANGAN DAN IMPLEMENTASI
DISPLAY LCD MENGGUNAKAN MODUL
Video Graphics Array (VGA) adalah sebuah VGA PADA FPGA
interface standar yang digunakan untuk
menghasilkan suatu tampilan. Interface pada
percobaan ini menggunakan 2 jenis sinyal, yaitu
sinyal warna (RGB) serta sinyal untuk
mensikronisasi tampilan. Pada prinsipnya,
modul VGA yang dirancang dalam bahasa
VHDL, diimplementasikan pada board FPGA
sehingga sinyal RGB digital ditranslasikan
menjadi sinyal RGB analog sebelum
ditransmisikan ke layar monitor.

Pada implementasinya, bisa saja terjadi

ketidaksesuaian antara input dan output,
sehingga menyebabkan terjadinya error seperti
pada percobaan 5C. Sehingga harus disesuaikan
port input dan outputnya pada kode VHDL top-
level entity.

Implementasi desain yang diterapkan pada

bloktampilan kali ini adalah sebuah object
bujursangkar / bendera yang resizable, artinya
dapatdiubah-ubah ukurannya serta movable,
artinyadapat digerakkan sesuai keinginan
pengguna.Dalam mengimplementasikan desain
tersebut,digunakan beberapa macam input/
masukkan seperti push-button untuk menggerakan
kesatuanpixel bujursangkar ke empat arah berbeda.
Selainitu, digunakan pula Clock divider agar
pergerakanobjek gambar dapat dilihat oleh
pengguna
LAMPIRAN 4. Setelah double klik boundary kemudian
klik kanan dan piih initialize chan.
Percobaan 1

4.1. PERCOBAAN 4A: IMPLEMENTASI DESAIN

FSM PADA FPGA
1. Buka folder

5. Tunggu prosesnya.

2. Klik manage configuration project

6. Klik yes.

3. Akan muncul tampilan seperti berikut.

7. Klik folder VGA nya.
9. Klik ok.

8. Setelah pilih no klik bypass

10. Klik program dan amati keluarannya pada
display LCD.
 3. Klik kanan dan pilih initialize chan
b. Menampilkan bendera merah putih.
1. Ubah source code.

4. Klik yes.

2. Setelah dari manage configuration project

kemudian klik boundary.
5. Pilih folder nya. 7. Klik bypass.

6. Klik no. 8. Klik yes.

MENAMPILKAN KOTAK KECIL PADA LAYAR 4. Klik yes.
MONITOR.

1. Ubah source code.

2. Setelah dari manage configuration project

kemudian klik boundary.

5. Pilih folder nya.

3. Klik kanan dan pilih initialize chan

6. Klik no. 8. Klik yes.

7. Klik bypass. 9. Klik program

 ARCHITECTURE behavioral OF color_rom_vhd

IS
CONSTANT R_TF_2 : INTEGER := 479; --
THD, batas horizontal layar
CONSTANT C_TF2_R : INTEGER := 639; --
TVD, batas vertikal layar

--Tidak digunakan pada praktikum ini

SIGNAL M_TF1, M_TF2 :
STD_LOGIC;
SIGNAL K_TF1, K_TF2 :
STD_LOGIC;
SIGNAL H_TF1, H_TF2 :
STD_LOGIC;
SIGNAL grid :
STD_LOGIC;
--Batas arah bujur sangkar yang akan
digerakkan
SIGNAL COUNTERATAS : INTEGER := 10;
SIGNAL COUNTERKIRI : INTEGER := 10;
SIGNAL COUNTERKANAN : INTEGER := 60;
Kode program:
SIGNAL COUNTERBAWAH : INTEGER := 60;
LIBRARY IEEE; --Mengatur kecepatan dari bujur sangkar
USE IEEE.STD_LOGIC_1164.ALL;
SIGNAL SPEED : INTEGER := 0;
USE IEEE.STD_LOGIC_ARITH.ALL; --Clock sebagai buffer CLOCKDIV

USE IEEE.STD_LOGIC_UNSIGNED.ALL; SIGNAL clock40hz : STD_LOGIC;

--Komponen Clockdiv digunakan agar

ENTITY color_rom_vhd IS
PORT( pergerakan bujur sangkar dapat terlihat
oleh pengguna
i_M_US : IN STD_LOGIC;
--Sebagai tombol arah atas (UP)
COMPONENT CLOCKDIV IS
i_K_US : IN STD_LOGIC;
--Sebagai tombol arah kanan (RIGHT) port( CLK: IN std_logic;
i_H_US : IN STD_LOGIC;
--Sebagai tombol arah bawah (DOWN) DIVOUT: buffer std_logic);

i_M_BT : IN STD_LOGIC; end component;

--Sebagai tombol arah kiri (LEFT)
i_K_BT : IN STD_LOGIC;
--Untuk mengatur kecepatan bujursangkar BEGIN
i_H_BT : IN STD_LOGIC;
--CLOCK AUTOMATIC dari sistem
PROCESS(i_pixel_row,i_pixel_column,
i_pixel_column : IN i_M_US , i_K_US , i_H_US , i_M_BT ,
STD_LOGIC_VECTOR( 9 DOWNTO 0 ); i_K_BT , i_H_BT, M_TF1, M_TF2, K_TF1,
i_pixel_row : IN
K_TF2, H_TF1, H_TF2)
STD_LOGIC_VECTOR( 9 DOWNTO 0 );
o_red : OUT BEGIN
STD_LOGIC_VECTOR( 7 DOWNTO 0 );
IF clock40hz'EVENT AND clock40hz = '1'
o_green : OUT
STD_LOGIC_VECTOR( 7 DOWNTO 0 );
THEN
o_blue : OUT
--Mengatur kecepatan bujursangkar sesuai
STD_LOGIC_VECTOR( 7 DOWNTO 0 )); -- dengan state SW[4]
Keluaran sebagai sinyal warna RGB
END color_rom_vhd; IF i_K_BT = '1' THEN
 END IF;
SPEED <= 1; --saat
SW[4] = '1' maka mode lambat ELSIF clock40hz'EVENT AND clock40hz =
'1' AND i_M_BT = '0' AND i_K_US = '1' AND
ELSE i_H_US = '1' AND i_M_US = '1' THEN -–
Tombol kiri ditekan dan clock raising
SPEED <= 3; --saat state
SW[4] = '0' maka mode cepat
COUNTERKIRI <= COUNTERKIRI - SPEED;
END IF;
COUNTERKANAN <= COUNTERKANAN -
END IF;
SPEED;
IF clock40hz'EVENT AND clock40hz = '1'
AND i_M_US = '0' AND i_H_US = '1' AND IF COUNTERKANAN = 1 THEN
i_K_US = '1' AND i_M_BT = '1' THEN -–
Tombol atas ditekan dan clock raising COUNTERKIRI <= 639;
state
COUNTERKANAN <= 688;
COUNTERATAS <= COUNTERATAS - SPEED;
END IF;
COUNTERBAWAH <= COUNTERBAWAH -
END IF;
SPEED;

IF COUNTERATAS = -50 THEN

--Untuk mengatur posisi kotak berukuran
COUNTERATAS <= 480;
50 x 50 pixel (warna merah)
COUNTERBAWAH <= 529;
IF ((i_pixel_row > COUNTERATAS) AND
END IF; (i_pixel_row < COUNTERBAWAH) AND
ELSIF clock40hz'EVENT AND clock40hz = '1' (i_pixel_column > COUNTERKIRI) AND
AND i_K_US = '0' AND i_M_BT = '1' AND (i_pixel_column < COUNTERKANAN)) THEN
i_M_US = '1' AND i_H_US = '1' THEN -– o_red <= X"FF"; o_green <= X"00"; o_blue
Tombol kanan ditekan dan clock raising <= X"00";
state
ELSE o_red <= X"FF"; o_green <= X"FF";
COUNTERKIRI <= COUNTERKIRI + SPEED; o_blue <= X"FF";

COUNTERKANAN <= COUNTERKANAN + END IF;

SPEED; END PROCESS;

IF COUNTERKIRI = 640 THEN --Melakukan PORT MAP terhadap clockdiv

load_clockdiv : clockdiv
COUNTERKANAN <= 0;
PORT MAP (

COUNTERKIRI <= -49;

CLK=>i_H_BT,
END IF;
DIVOUT=>clock40hz
ELSIF clock40hz'EVENT AND clock40hz =
'1' AND i_H_US = '0' AND i_M_US = '1' AND
);
i_K_US = '1' AND i_M_BT = '1' THEN -–
Tombol bawah ditekan dan clock raising
state
END behavioral;
COUNTERATAS <= COUNTERATAS + SPEED;

COUNTERBAWAH <= COUNTERBAWAH +

SPEED;

IF COUNTERBAWAH = 479 THEN

COUNTERATAS <= -49;

COUNTERBAWAH <= 1;