MODUL V PERANCANGAN DAN IMPLEMETASI DISPLAY LCD MENGGUNAKAN MODUL VGA PADA FPGA Rosana Dewi Amelinda (13213060) Asisten:Catharina Novita Anggraeni (13211115) (132111 15) Tanggal Percobaan: 28/11/2014 EL2102-Praktikum Sistem Digital Laboratorium Dasar Teknik Elektro - Sekolah Teknik Elektro dan Informatika ITB
Abstrak
2.
Abstrak Pada Pada praktikum Modul V ini dilakuakn beberapa percobaan, yaitu pertama membuat tampilan LCD computer agar berwana merah pada bagian atas dan putih pada bagian bawah (seperti warna bendera Indonesia). Lalu untuk percobaan kedua dibuat agar monitor menampilkan sebuah kotak berwana yang selanjutnya pada percobaan 3, kotak tersebut dibuat agar dapat bergerak-gerak ke kiri, kanan, atas, dan bawah dengan menngunakan push button yang ada pada FPGA. Kata kunci: VGA, display LCD 1.
PENDAHULUAN
Video Graphics Array (VGA) adalah sebuah standar tampilan komponen analog yang dipasarkan pertama kali oleh IBM pada tahun 1987. Walaupun standar VGA sudah tidak lagi digunakan karena sudah diganti oleh standar yang lebih baru, VGA masih diimplementasikan pada pocket PC. VGA biasa dinamakan juga dengan video card, video adapter, dispalu card, graphics card, graphics board, display adapter atau graphics adapter. VGA sendiri mengacu pada konektor VGA 15-pin yang masih digunakan secara luas untuk mengantarkan sinyal video analog ke monitor. Video Graphics Array card berfungsi untuk menerjemahkan / mengubah siyal digital dari computer menjadi tampilan grafis pada layar monitor yang selanjutnya akan digunakan untuk menggambarkan / desain graphic ataupun untuk bermain game. Tempat melekatnya kartu grafis disebut slot expansi. Chipset/processor pada kartu VGA, banyak sekali macamnya karena tiap-tiap pabrik kartu VGA mamiliki chipset andalannya. [1] Dari praktikum modul V ini, diharapkan mahasiswa dapat : a.
Mendapatkan pengetahuan dan pengalaman menggunakan interface pada board evaluasi FPGA
b. Memahami cara kerja VGA pada umumnya
S TUDI PUSTAKA
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 terdapaat juga di board altera yang digunakan pada praktikum ini. Pada percobaan kali ini tampilan VGA digunakan agar tampilan hasil desain yang kita rancang menjadi lebih menarik, tidak terbatas hanya pada LED atau 7 segmen. 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 janis sinyal, yaitu : sinyal warna (Merah, Hijau, dan Biru) dan sinyal sinkron (horizontal dan vertical). Berikut adalah penjelasan beberapa sinyal yang digunakan : a.
Horizontal Sync (TTL Level)
Sinyal ini akan aktif pada range piksel kolom 0 sampai 639. Sehingga kalau sinyal ini tidak aktif, yang akan terjadi adalah pergantian baris. b. Vertical Sync (TTL Level) Sinyal ini akan aktif pada range piksel baris 0 sampaid dengan 479. Sehingga kalau sinyal ini tidak aktif, yang akan terjadi adalah pergantian layar. Atau kembali ke baris pertama. c.
Sinyal RGB (Analog 3 pin : 0.7 - 1 V)
Sinyal ini merepresentasikan intensitas untuk masing-masing komponen warna merah, hijau, dan biru untuk setiap 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 baris, selanjutnya dari baris paling atas sampai baris paling bawah). Pada percobaan kali ini kita menggunakan resolusi 640x480 pixel dan menggunakan refresh rata lebih dair 60 Hz. Refresh rate ini digunakan karena pada range kurang dari 30-60 Hz manusi adapat melihat adanya flicker. Selain itu refresh rate ini juga umum
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – STEI ITB
1
digunakan pada monitor LCD. LCD modern tv-tvd 4 45 255 th memiliki fitur multirate, sehingga kita tidak harus Gambar 3 manunjukan blok diagram dait FPGA tepat membuat refresh ratenya 60 Hz. Proses scaning hingga ke LCD monitor. Chip DAC mengubah sinyal berawal dari kiri atas ke kanan lalu ke kiri bawah dan digital ke analog. Dalam kasus ini data RGB digital kembali ke kiri atas ketika sudah mencapai pixel diubahke data RGB analog, begitu juga untuk sinyal terakhir. sinkronisasinya. Sedangkan gambar 4 menunjukan Gambar 1 Razor Scan pada layar LCD skematik dari diplay VGA yang ada [ada board DE1. Untuk board lainnya dapat dibaca di datasheet 0, 0,6 masing-masing board. Board DE1 menyediakan 16pin konektor untuk output VGA dan Analog Devices ADV7123 10-bit high speed video DAC. DAC ini mendapatkan sinyal sinkonisasi dari FPGA. Gambar 3 Diagram Blok VGA Display RGB (analog)
RGB (digital)
Input
horiz sync
horiz sync
FPGA
DAC horiz sync
clk
479
VGA (16-pin)
horiz sync
479,
Gambar 2 dan Tabel 1 menunjukan spesifikasi timing dari sinkronisasi VGA. Sebuah sinyal aktif low menunjukan akhir dari sebuah sinkronisasi. Misalnya sinyal aktif low untuk horiz sync menandakan akhir dari scanning satu baris da awal untuk baris berikutnya. Data RGB harus di drive 0 untuk beberapa watu tertentu thfp dan tvfp. Gambar 2 Timing sinyal untuk VGA 680x480 pixel
2.1
JUDUL SUB-BAB
Judul sub-bab praktikum modul modul V ini yaitu : 1. 3.
Implementasi desain pada board FPGA
METODOLOGI
Peralatan yang digunakan o
Board FPGA tipe DE1
o
Catu daya + kabel dan konektor tamabahan serta kabel downloader
o
Monitor LCD
Percobaan 1.
Table 1 Nilai-nilai parameter pada pada gambar 1
SYMBOL thd fclk th thpw thb thfp th-thd tvd tv tvpw tvb tvfp
Min
Typ
Max
640 24
DCLK 50
760 1
48
Unit MHz
Procedure percobaan 1
255
DCLK DCLK
1
32
255
DCLK
85
120
512
DCLK
480
th
513
525
767
th
3
3
255
th
32 13
Pada percobaan ini akan dibuat controller VGA sederhana yang akan mengeluarkan sinyal-sinyal digital untuk mengendalikan VGA. Sinyal digital ini sebagian akan diubah menjadi sinyal amalog a malog (untuk warna-warna RGB). Masing-masing warna akan mewakili 6 bit.
DCLK
88
1
Implementasi pada board FPGA
Digambar bendera RI dilayat (atas merah, bawah putih) pada kayar VGA. Untuk mendapatkan warna merah R =111111, G = B =000000, sedangkan putih R = G = B 111111. Cara yang dilakukan adalah dengan mengeluarkan warna merah untuk pixelpixel pada baris atas (nomor baris < 241), warna putih untuk baris bawah.
Procedure percobaan 2
th 255
th Laporan Praktikum - Laboratorium Dasar Teknik Elektro – STEI ITB
2
Digambar sebuah kotak/bujur sangkar (solid) berukuran 50 pixel x 50 pixel pada layar VGA. Caranya adalah dengan memberi warna tertentu pada pixelpixel tertentu. Misalkan, jika ujung kiri atas kotak tadi ingin diletakan pada baris 10 kolom 10, maka pixel yang harus diwarnai berbeda dengan lainnya adalah semua pixel yang ada baris 10 sampai 59 dan kolom 10 sampai 59.
Procedure percobaan 3 Dibuat agar kotak kotak yang telah dibuat agar dapat dapat bergerak berdasarakan input dari push-button yang ada pada board. Kotak ini harus dapat digerakan ke empat arah : kiri, kanan, atas, bawah dengan empat button yang berbeda-beda. Caranya : 1. Ujung kiri atas dair gambar harus dibuat agar dapat diubahubah (menjadi input)
2. Membuat dua buah FSM/counter : satu counter untuk menghasilkan posisi batas atas (baris), satu FSM untuk menghasilkan posisi batas kiri. Counter harus dibatasi maksimum dan minimumnya sesuai jumlah baris dan kolom yang ada di layar. Untuk setiap FSM harus dapat menghitung maju (up-counting: ... -> 100 -> 101 ->...) dan mundur (down counting : ... -> 87 -> 86 ->...). FSM ini harus di clock, namun tidak boleh terlalu cepat agar gerakan kotak juga tidak telalu cepat. Misalnya 20 Hz - 50 Hz.
3. Dibuat input untuk perintah up/down counting pada kedua FSM menggunakan push-button.
Gambar 6 merupakan diagram blok kasar yang mungkin untuk mengimpelmentasikan prosedur percobaan 3. Clock Devider disini berguna agar masukan oleh user tidka terlalu cepat dan efeknya hasil pergerakan objek gambar dapat ditangkap oleh mata. Dengan informasi dari posisi objek dan posisi alamat piksel dari VGA driver cukup untuk mangimpelementasikan prosdur percobaan 3 ini.
Sedangkan algoritma yang akan memunculkan warna merah dan putih yaitu : IF( IF (disp_ena = '1 '1') THEN AND column column < IF( IF (row < pixels_y AND pixels_x ) THEN red <= (OTHERS => '1 '1'); green <= (OTHERS => '0 '0'); blue <= (OTHERS => '0 '0'); ELSE red <= (OTHERS => '1 '1'); green <= (OTHERS => '1 '1'); blue <= (OTHERS => '1 '1'); END IF IF; ;
Untuk FSM pada Top level vhdl adalah sebagai berikut : port map map( ( com1 : vga_controller port i_clk => i_clk i_clk, reset_n => reset_n reset_n , h_sync => h_sync h_sync, v_sync => v_sync v_sync, disp_ena => s1, s1 column => s2, s2 row => s3, s3 n_blank => n_blank n_blank , n_sync => n_sync n_sync); port map map( ( com2 : Percobaan1 port disp_ena => s1, s1 row => s3, s3 column => s2, s2 red => red red, green => green green, blue => blue blue);
Kode diatas memberikan perintah agar mulai dari pixel 0 hingga 240 akan berwarna merah dan sisanya akan berwarna putih. Berikut adalah gambar tampilan yang dihasilkan : Gambar 4 Hasil implementasi percobaan 1
H ASIL DAN A NALISIS NALISIS Percobaan 1 Pada percobaan 1 dibuat tampilan LCD computer agar dapat menampilkan warna merah-putih. Untuk membuatnya kita bagi layar menjadi 2 bagian yaitu 0 sampai 240 berwarna merah serta dari 241 sampai 479 berwarna berwarna putih. Pewarnaan pada layar monitor direpresentasikan dengan kode vhdl sebagai berikut :
: OUT STD_LOGIC_VECTOR (7 DOWNTO 0) := (OTHERS => '0 '0'); --
red
output warna merah ke DAC : OUT STD_LOGIC_VECTO green R(7 DOWNTO 0) := (OTHERS => '0 '0'); -output warna hijau ke DAC blue : OUT STD_LOGIC_VECTO R(7 DOWNTO 0) := (OTHERS => '0 '0')); -output warna biru ke DAC
Proses scanning yang dilakukan yaitu dari baris dan kolom paling atas yaitu (0,0) hingga (0,639). Kemudian dilanjutkan dari baris berikutnya (1,0) hingga (1,639), seperti itu seterusnya hingga (240,639). Sehingga pada (0,0) hingga (240,639) akan
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – STEI ITB
3
menampilkan warna merah. Sedangkan untuk warna putih, proses scanning yang sama dilakukan mulai dari (241,0) hingga (479,639). Percobaan 2
column => s2, s2 red => red red, green => green green, blue => blue blue); a a; end
Pada percobaan 2 ini dibuat sebuah kotak/bujur sangkar (solid berukuran 50 pixel x 50 pixel pada layar VGA. Caranya dengan memberi warna pada pixel (10,10) sampai (59,59). Proses scanning untuk pemberian warna sama seperti pada percobaan 1, yaitu pertama-tama diberi warna mulai dari koordinat (10,10) kemudian berlanjut hingga (10,59). Selanjutnya diikuti pewarnaan setiap baris mulai dari baris 10 hingga baris ke 59. Selain dari koordinat tersebut akan diberi warna putih.
Sehingga gambar output yang dihasilkan adalah sebagai berikut : Gambar 5 Hasil implementasi percobaan 2
Kode vhdl yang akan menampilkan kotak berwarna merah tersebut adalah sebagai berikut : IF( IF (disp_ena = '1 '1') THEN IF( IF (row <= 59 AND AND row row >= 10 AND column <= 59 AND AND column column >= 10) THEN red <= (OTHERS => '1 '1'); green <= (OTHERS => '0 '0'); blue <= (OTHERS => '0 '0'); ELSE red <= (OTHERS => '1 '1'); green <= (OTHERS => '1 '1'); blue <= (OTHERS => '1 '1'); END IF IF; ;
Sedangkan untuk pemberian warna dilakukan oleh kode vhdl berikut :
: OUT STD_LOGIC_VECTOR (7 '0 '0'); -DOWNTO 0) := (OTHERS =>
red
output warna merah ke DAC : OUT STD_LOGIC_VECTO green R(7 DOWNTO 0) := (OTHERS => '0 '0'); -output warna hijau ke DAC blue : OUT STD_LOGIC_VECTO R(7 DOWNTO 0) := (OTHERS => '0 '0')); -output warna biru ke DAC
Sedangakan FSM pada Top Level vhdl yang digunakan yaitu : begin com1 : vga_controller port port map map( ( i_clk => i_clk i_clk, reset_n => reset_n reset_n , h_sync => h_sync h_sync , v_sync => v_sync v_sync , disp_ena => s1, s1 column => s2, s2 row => s3, s3 n_blank => n_blank n_blank , n_sync => n_sync n_sync ); port map map( ( com2 : Percobaan2 port disp_ena => s1, s1 row => s3, s3
Percobaan 3 Pada percobaan 3 ini dibuat kotak yang sama seperti yang telah dibuat pada percobaan 2. Sehingga kode pembuatan kotak tersebut menggunakan kode dari percobaan 2. Namun kode tersebut dimodifikasi dengan diberi tambahan yaitu untuk membuat agar kotak tersebut dapat digerak-gerakan ke kiri, kanan, atas dan bawah. Untuk menggerakan kotak yaitu dengan melakukan assignment pin planer pada push button. Pin assignment yaitu sebagai berikut : PIN_R22 (Key 0) => Gerak ke kiri PIN_R21 (Key 1) => Gerak ke atas PIN_T22 (Key 2) => Gerak ke kanan PIN _T21 (Key 3) => Gerak ke bawah process(i_clk) process( begin if (i_clk' event and i_clk and i_clk ='1') then clock_counter <= clock_counter + 1; end if end if; ; if (clock_counter >= 1000000 and fsm_clk = '0 '0') then fsm_clk <= '1 '1'; clock_counter <= 0; elsif( elsif (clock_counter >= 1000000 and fsm_clk and fsm_clk = '1 '1') then fsm_clk <= '0 '0'; clock_counter <= 0; end if end if; ;
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – STEI ITB
4
end process; process;
Clock counter yang digunakan pada percobaan ini adalah sebesar 1000000. Hal ini bertujuan agar kita dapat mengamati perpindahan kotak/bujur sangkar pada layar monitor.
Gambar 7 Posisi kotak setelah dipindahkan ke kanan dengan key 2
Sedangkan untuk mengatur kecepatan pergerakan kotak/bujur sangar, dibuat kode vhdl sebagai berikut : process(fsm_clk ) process( begin if( if (boost='1') then how_fast <= 10; elsif( elsif (boost='0') then how_fast <= 1; end if end if; ; if(fsm_clk' event and if( fsm_clk='1') then if( if (inc_row = '0 '0') then row_position <= row_position + how_fast ; elsif( elsif (dec_row = '0 '0') then row_position <= row_position - how_fast ; elsif( elsif (inc_col = '0 '0') then col_position <= col_position + how_fast ; elsif( elsif (dec_col = '0 '0') then col_position <= col_position - how_fast ; end if end if; ; end if end if; ; end process; process;
Dari kode diatas dapat diamati bahwa kecepatan akan berubah apabila boost bernilai 1 atau 0. Perbahan nilai boost ini direpresentasikan menggunaan Switch 0 pada FPGA (SW[0]). Berikut adalah tampilan kotak pada layar monitor yang dapat digerak-gerakan ke kiri, kanan, atas dan bawah.
Gambar 8 Posisi kotak setelah dipindahkan ke bawah dengan key 3
Gambar 9 Posisi kotak setelah dipindahkan ke kiri dengan key 0
Gambar 6 Posisi awal kotak
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – STEI ITB
5
Gambar 10 Posisi kotak setelah dipindahkan ke atas dengan key 1
RGB analog sebelum ditransimiskan ke layar monitor. Implementasi yang dilakukan pada percobaan ini yaitu dengan membuat sebuah objek kotak yang dapat diubah-ubah ukurannya (menjadi seukuran bendera atau bujur sangkar) serta dapat dipindah (digerak-gerakan) sesuai keinginan. Dalam impelmentasi yang dilakukan, digunakan berbagai input seperti Switch (mengaktifkan display) dan Push Button (menggerakan bujur sangkat ke empat arah yang berbeda) serta digunakan counter clock yang menyebabkan pergerakan objek gambar dapat teramati oleh pengguna.
D AFTAR PUSTAKA 5.
K ESIMPULAN ESIMPULAN
Salah satu cara yang dapat digunakan dalam mengimplemetasikan rangkaian logika sekuensial ke dalam FPGA adalah dengan menggunakan modul VGA yang mengeluarkan output berupa tampilan pada layar LCD computer. VGA atau Video Graphic Array merupakan sebuah interface standar yang dapat digunakan untuk menghasilkan tampilan pada layar LCD monitor. Prinsip yang digunakan yaitu dengan merancang modul VGA ke dalam Bahasa VHDL yang selanjutnya akan diimplementasikan pada board FPGA yaitu dengan mentranslasikan sinyal RGB digital menjadi sinyal
Mervin T Hutabarat, Arif Sasongko, Praktikum Sistem Digital , Laboratorium Dasar Teknik Elektro ITB, Bandung, 2014. [1]. http://id.wikipedia.org/wiki/VGA, http://id.wikipedia.org/wiki/VGA, 29 November 2014, 8:18. * Kode vhdl full sudah dikirimkan ke email asisten yaitu
[email protected] atau dapat dibuka di link : https://docs.google.com/document/d/1NHxlwJI6Q9gMP3Yq6g0FS5Dm9MvOdHLvblMOhw83X4/ed it?usp=sharing ,
Laporan Praktikum - Laboratorium Dasar Teknik Elektro – STEI ITB
6
