MODUL 5 PERANCANGAN DAN IMPLEMENTASI DISPLAY LCD MENGGUNAKAN MODUL VGA PADA FPGA

Iskandar Setiadi (13511073) Asisten: Tommy Gunawan / 13208039 Tanggal Percobaan: 26/11/2012 EL2195-Praktikum Sistem Digital

Laboratorium Dasar Teknik Elektro - Sekolah Teknik Elektro dan Informatika ITB
Abstrak Pada percobaan sebelumnya, kita telah menganalisis rangkaian berbasis logika sekuensial. Salah satu bentuk implementasi logika sekuensial adalah menggunakan modul Video Graphic Array dengan display Liquid Crystal Display sebagai perantaranya. Pada percobaan ini, kita akan mengimplementasikan display LCD menggunakan modul VGA pada FPGA dengan merancang sebuah controller sederhana yang mengeluarkan sinyal-sinyal digital. Kata kunci: modul VGA driver, FPGA, display LCD. 1. PENDAHULUAN

2.1

MODUL VGA DRIVER

Modul VGA (Video Graphics Array) driver yang digunakan kali ini adalah sebuah modul yang merepresentasikan masukkan logika FPGA kedalam tampilan warna pada layar monitor LCD. Modul ini menerima masukkan port yang ingin dinyalakan, dan mengkonversikan masukkan menjadi warna pada layar (RGB). Berikut adalah penjelasan mengenai sinyal-sinyal yang digunakan: -Sinyal sinkron, terdiri dari horizontal sync dan vertical sync. Sinyal-sinyal ini aktif pada range pixel yang valid. Jika sinyal ini tidak aktif, maka akan terjadi pergantian baris (untuk horizontal sync), serta pergantian layar / kembali ke baris pertama (untuk vertical sync). -Sinyal warna RGB, terdiri dari komponen warna merah, hijau, dan biru.

Implementasi fungsi gerbang logika pada rangkaian dapat dilakukan dengan berbagai cara, salah satunya adalah rangkaian logika sekuensial, yang bergantung pada memori statenya, [4]. Desain dari rangkaian logika sekuensial dapat diimplementasikan pada berbagai macam perangkat keras, seperti board FPGA dan tampilan display LCD. Pada praktikum sebelumnya, kita telah mengimplementasikan sebuah rangkaian logika sekuensial melalui studi kasus lampu lalu lintas. Pada praktikum ini, kita akan merancang dan mengimplementasikan desain menggunakan modul VGA pada sebuah layar LCD. Selain itu, kita akan mempelajari penerapan blok diagram dalam perancangan menggunakan modul VGA, yaitu membuat sebuah bujur sangkar 50 x 50 pixel (percobaan 2) dan membuat bujur sangkar tersebut bergerak (percobaan 3).

Gambar 2-1 Proses Scanning pada Layar LCD

2.

STUDI PUSTAKA

Salah satu bentuk implementasi rangkaian sekuensial adalah menggunakan modul VGA dengan tampilan display LCD. Modul VGA yang digunakan memiliki 2 jenis sinyal, yaitu sinyal warna (Merah, Hijau, dan Biru), serta sinyal sinkron (horizontal dan vertical). Dalam menghasilkan sebuah tampilan, VGA melakukan sinkronisasi pada layar, yaitu dengan scanning setiap baris dengan satuan pixel tertentu.

Gambar 2-1 diatas merupakan proses scanning yang terjadi pada layar LCD. Scanning tersebut dimulai dari pojok kiri atas (0,0) kearah kanan / horizontal (0,639), dilanjutkan dengan pergantian baris ke (1,0) dst. Sinyal RGB yang sifatnya digital, dikonversikan oleh chip DAC menjadi sinyal RGB analog, yang kemudian direpresentasikan menjadi sebuah tampilan pada layar LCD.

Laporan Praktikum - Laboratorium Dasar Teknik Elektro STEI ITB

2.2

FIELD PROGRAMMABLE GATE ARRAY

LIBRARY USE USE USE

IEEE;

FPGA adalah sebuah integrated circuit yang dapat dikonfigurasi dan diprogram berkali-kali. FPGA terdiri atas logika yang dapat diprogram, yang disebut dengan blok logika (logic blocks),[6]. Pada percobaan ini, FPGA digunakan sebagai penghubung antara modul VGA yang digunakan dengan display layar LCD.

IEEE.STD_LOGIC_1164.ALL; IEEE.STD_LOGIC_ARITH.ALL; IEEE.STD_LOGIC_UNSIGNED.ALL;

ENTITY color_rom_vhd PORT(

IS

3. 3.1

METODOLOGI ALAT PERCOBAAN

Board FPGA tipe UP2 atau DE1 Catu daya + kabel dan konektor tambahan serta kabel downloader Monitor LCD

i_M_US : IN STD_LOGIC; --Sebagai tombol arah atas (UP) i_K_US : IN STD_LOGIC; --Sebagai tombol arah kanan (RIGHT) i_H_US : IN STD_LOGIC; --Sebagai tombol arah bawah (DOWN) i_M_BT : IN STD_LOGIC; --Sebagai tombol arah kiri (LEFT) i_K_BT : IN STD_LOGIC; --Untuk mengatur kecepatan bujursangkar i_H_BT : IN STD_LOGIC; --CLOCK AUTOMATIC dari sistem i_pixel_column STD_LOGIC_VECTOR( 9 DOWNTO 0 ); i_pixel_row STD_LOGIC_VECTOR( 9 DOWNTO 0 ); o_red STD_LOGIC_VECTOR( 7 DOWNTO 0 ); o_green STD_LOGIC_VECTOR( 7 DOWNTO 0 ); o_blue STD_LOGIC_VECTOR( 7 DOWNTO 0 )); --Keluaran sebagai sinyal warna RGB END color_rom_vhd; : : : : : IN IN OUT OUT OUT

3.2

PROSEDUR PERCOBAAN

Percobaan ini dapat dibagi menjadi 3 bagian, yaitu menggambar bendera RI pada layar, menggambar bujur sangkar berukuran 50 x 50 pixel, serta membuat bujur sangkar berukuran 50 x 50 pixel tersebut bergerak sesuai masukkan pengguna. Pada percobaan pertama, kita akan membuat sebuah desain sederhana yang mencetak gambar bendera RI dilayar. Percobaan ini dilakukan dengan menggunakan modul VGA yang telah disediakan sebelumnya, dan melakukan modifikasi pada file color_rom_vhd.vhd. Selanjutnya, bentuk bendera tersebut akan diperkecil menjadi bujur sangkar berukuran 50 x 50 pixel yang akan diletakkan pada suatu koordinat ditengah layar. Pada bagian ketiga, bujur sangkar tersebut akan menerima 4 masukkan, yaitu tombol atas, kiri, kanan, dan bawah, yang diterima dari push_button masukkan pengguna. Selain itu, terdapat bagian bonus, yaitu menerima masukkan kelima untuk mengatur kecepatan dari pergerakan bujur sangkar tersebut. Terdapat beberapa modifikasi yang dilakukan pada modul VGA yang disediakan, yaitu file color_rom_vhd.vhd , display_vhd.vhd (untuk mengatur PORT MAP clock), dan clockdiv.vhd (untuk mengatur jeda waktu). Semua script ini berbasis pada masukkan dari vga.vhd, yang fungsinya telah dibahas pada tugas pendahuluan praktikum ini. Berikut ini adalah potongan kode dari file color_rom_vhd.vhd yang digunakan untuk percobaan bagian 3 (+bonus):

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; : : : :

Laporan Praktikum - Laboratorium Dasar Teknik Elektro STEI ITB

--Batas arah digerakkan

bujur

sangkar

yang

akan

SIGNAL COUNTERATAS SIGNAL COUNTERKIRI

: INTEGER := 10; : INTEGER := 10;

ELSIF '1' AND i_M_US Tombol state

clock40hz'EVENT AND clock40hz = i_K_US = '0' AND i_M_BT = '1' AND = '1' AND i_H_US = '1' THEN - kanan ditekan dan clock raising

SIGNAL COUNTERKANAN : INTEGER := 60; SIGNAL COUNTERBAWAH : INTEGER := 60; --Mengatur kecepatan dari bujur sangkar SIGNAL SPEED : INTEGER := 0;

COUNTERKIRI <= COUNTERKIRI + SPEED; COUNTERKANAN SPEED; <= COUNTERKANAN +

IF COUNTERKIRI = 640 THEN COUNTERKANAN <= 0; COUNTERKIRI <= -49; END IF; ELSIF '1' AND i_K_US Tombol state clock40hz'EVENT AND clock40hz = i_H_US = '0' AND i_M_US = '1' AND = '1' AND i_M_BT = '1' THEN - bawah ditekan dan clock raising

--Clock sebagai buffer CLOCKDIV SIGNAL clock40hz : STD_LOGIC;

--Komponen Clockdiv digunakan agar pergerakan bujur sangkar dapat terlihat oleh pengguna COMPONENT CLOCKDIV IS port( CLK: IN std_logic; DIVOUT: buffer std_logic); end component;

COUNTERATAS <= COUNTERATAS + SPEED; COUNTERBAWAH SPEED; <= COUNTERBAWAH +

IF COUNTERBAWAH = 479 THEN COUNTERATAS <= -49;

BEGIN

COUNTERBAWAH <= 1; END IF;

PROCESS(i_pixel_row,i_pixel_column, i_M_US , i_K_US , i_H_US , i_M_BT , i_K_BT , i_H_BT, M_TF1, M_TF2, K_TF1, K_TF2, H_TF1, H_TF2) BEGIN IF clock40hz'EVENT AND clock40hz = '1' THEN --Mengatur kecepatan bujursangkar sesuai dengan state SW[4] IF i_K_BT = '1' THEN SPEED <= SW[4] = '1' maka mode lambat ELSE SPEED <= SW[4] = '0' maka mode cepat END IF; END IF; IF clock40hz'EVENT AND clock40hz = '1' AND i_M_US = '0' AND i_H_US = '1' AND i_K_US = '1' AND i_M_BT = '1' THEN - Tombol atas ditekan dan clock raising state COUNTERATAS <= COUNTERATAS - SPEED; COUNTERBAWAH SPEED; <= COUNTERBAWAH 3; --saat 1; --saat

ELSIF '1' AND i_H_US Tombol state

clock40hz'EVENT AND clock40hz = i_M_BT = '0' AND i_K_US = '1' AND = '1' AND i_M_US = '1' THEN - kiri ditekan dan clock raising

COUNTERKIRI <= COUNTERKIRI - SPEED; COUNTERKANAN SPEED; <= COUNTERKANAN -

IF COUNTERKANAN = 1 THEN COUNTERKIRI <= 639; COUNTERKANAN <= 688; END IF; END IF;

--Untuk mengatur posisi kotak 50 x 50 pixel (warna merah)

berukuran

IF ((i_pixel_row > COUNTERATAS) AND (i_pixel_row < COUNTERBAWAH) AND (i_pixel_column > COUNTERKIRI) AND (i_pixel_column < COUNTERKANAN)) 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;

IF COUNTERATAS = -50 THEN COUNTERATAS <= 480; COUNTERBAWAH <= 529; END IF;

END PROCESS; --Melakukan PORT MAP terhadap clockdiv

Laporan Praktikum - Laboratorium Dasar Teknik Elektro STEI ITB

load_clockdiv : clockdiv PORT MAP ( CLK=>i_H_BT, DIVOUT=>clock40hz );

4.

HASIL DAN ANALISIS

END behavioral;

Percobaan ini secara keseluruhan bertujuan untuk mengimplementasikan desain pada board FPGA. Percobaan ini dibagi menjadi 3 sub-segmen, yaitu membuat gambar bendera RI dilayar, bujur sangkar berwarna berukuran 50 pixel x 50 pixel, serta menggerakan bujur sangkar yang telah dibuat ke empat arah berbeda. Percobaan di laboratorium berakhir pada pukul 10.50 dengan menyelesaikan ketiga sub-segmen percobaan serta bagian bonus.

4.1
4.1.1

IMPLEMENTASI DESAIN PADA BOARD FPGA

Percobaan 1

Pada percobaan ini, kita akan mengimplementasikan desain gambar bendera RI dilayar (atas merah, bawah putih).
Gambar 3-1 Ilustrasi Blok Diagram Percobaan 3

Secara singkat, kodingan diatas menandakan bahwa desain menerima 5 buah masukkan (4 push_button dan 1 SW[4] sebagai tombol pengatur kecepatan), dan mengeluarkan display ke layar VGA (o_red, o_green, o_blue) serta i_pixel_row & i_pixel_column sebagai pengatur posisi warnawarna tersebut. Selain itu, digunakan variabel untuk menampung posisi sementara dari bujur sangkar, yaitu COUNTERATAS, COUNTERKIRI, COUNTERKANAN, dan COUNTERBAWAH. Kita juga menggunakan komponen clockdiv, yang bertujuan untuk mengatur pergerakan bujur sangkar dengan kecepatan tertentu (visible). Pada pemrosesannya, state SW[4] dicek, apakah berlogika 1 ataupun 0, yang digunakan untuk mengatur kecepatan dari bujur sangkar. Setelah itu, bujur sangkar akan bergerak setiap clock berada pada state raising, dan disesuaikan dengan masukkan arah dari pengguna (active low). Penjelasan lebih lanjut akan dibahas pada bagian analisis dan dapat diamati dari komentarkomentar yang terdapat di potongan script diatas. Gambar 3-1 diatas menunjukkan ilustrasi diagram blok dari percobaan ini. Dapat dilihat bahwa clock divider akan mengatur counter dari masing-masing row serta column dari display VGA yang digunakan. Pengaturan ini didukung dengan modul VGA (driver) yang kita gunakan diatas, sehingga kita dapat melihat tampilan berbasis RGB pada layar monitor.

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"; 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 <= XFF 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 41 berikut ini: o_green <=

Laporan Praktikum - Laboratorium Dasar Teknik Elektro STEI ITB

Hasil tampilan bujur sangkar percobaan 2 dapat dilihat pada gambar 4-2 berikut ini:

Gambar 4-1 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. 4.1.2 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;

Gambar 4-2 Bujur Sangkar pada display LCD

4.1.3

Percobaan 3 + Bonus

Pada percobaan ini, kita akan membuat gambar bujur sangkar yang telah dibuat pada percobaan 2 bergerak sesuai input push-button dari board FPGA. constant div: integer:=1000000; Clock divider (Clockdiv) yang digunakan pada percobaan ini diberikan constant div 1000000, hal ini bertujuan agar pengguna dapat mengamati pergerakan bujur sangkar pada layar (karena board FPGA memiliki frekuensi 50 MHz, atau 50 juta proses per detiknya). Jika kita tidak menggunakan clockdiv, maka kita tidak dapat mengamati pergerakan bujur sangkar yang langsung bergerak menjauh dengan sekejap dari layar. Untuk membuat bujur sangkar tersebut bergerak, kita mengubah pin planner masukkan menjadi push-button. Berikut ini adalah masukkan / input yang digunakan: PIN_R22 i_M_US sebagai tombol UP PIN_R21 i_K_US sebagai tombol RIGHT PIN_T22 i_H_US sebagai tombol DOWN PIN_T21 i_M_BT sebagai tombol LEFT Selain itu, kita akan menggunakan satu masukkan tambahan untuk pengatur kecepatan yang dapat diubah, yaitu i_K_BT (SW[4]) yang dihubungkan dengan PIN_L1. Pada file display_vhd.vhd, i_H_BT yang akan digunakan untuk variabel clock ini di PORT MAP dengan i_clk dari modul VGA yang digunakan. IF clock40hz'EVENT AND clock40hz = '1' THEN IF i_K_BT = '1' THEN

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"; X"FF"; o_blue <= X"FF"; END IF; o_green <=

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).

Laporan Praktikum - Laboratorium Dasar Teknik Elektro STEI ITB

SPEED <= 1; --saat SW[4] = '1' maka mode lambat ELSE SPEED <= 3; --saat SW[4] = '0' maka mode cepat END IF; END IF; Perhatikan potongan kode diatas. Script tersebut mengatur saat SW[4] diberikan sinyal logika 0, maka kecepatan bujur sangkar akan 3 kali lebih cepat dibandingkan saat SW[4] diberikan sinyal logika 1. Untuk pergerakan dari keempat arah bujur sangkar, pada bagian ini kita akan menganalisis salah satu mode, yaitu saat tombol UP / atas diberikan sinyal 0 (Active Low). IF clock40hz'EVENT AND clock40hz = '1' AND i_M_US = '0' AND i_H_US = '1' AND i_K_US = '1' AND i_M_BT = '1' THEN --UP BUTTON COUNTERATAS <= COUNTERATAS - SPEED; COUNTERBAWAH <= COUNTERBAWAH - SPEED; IF COUNTERATAS = -50 THEN COUNTERATAS <= 480; COUNTERBAWAH <= 529; END IF; Saat clock sedang raising (naik menjadi logika 1), maka kita akan memproses pergerakan bujur sangkar. Kode diatas merupakan saat i_M_US ditekan, sehingga bujur sangkar akan bergerak keatas dengan koordinat yang dikurangi dengan kecepatan (pada bagian pengatur kecepatan). Misalkan SW[4] diberikan logika 1 sehingga bermode lambat, maka bujur sangkar akan bergerak sekitar 50Mhz / 1000000 = 50 pixel kearah atas. Untuk kasus-kasus lainnya seperti tombol DOWN / LEFT / RIGHT, kesamaan diatas berlaku dan memiliki karakteristik yang sama. Sebagai pengatur agar bujur sangkar tidak keluar layar, maka digunakan script IF COUNTERATAS = -50. Kode ini digunakan agar jika titik terbawah bujur sangkar telah keluar layar, maka bujur sangkar akan keluar kembali dari bawah, yaitu COUNTERATAS menjadi bernilai 480 dan COUNTERBAWAH bernilai 529 (50 pixel). Secara singkat, percobaan menggunakan 4 push button ini dapat digambarkan pada FSM (Finite State Machine) gambar 4.3 berikut ini:
Gambar 4-3 Sketsa State Percobaan 5

Pada gambar diatas, S1 menunjukkan state saat bujur sangkar diam, dan S2, S3, S4, S5 berlogika 1 (ingat bahwa push button memiliki sifat active low). S2 menunjukkan state saat logika 0 diberikan untuk tombol UP, S3 menunjukkan state saat logika 0 diberikan untuk tombol RIGHT, S4 menunjukkan state saat logika 0 diberikan untuk tombol DOWN, dan S5 adalah state saat logika 0 diberikan untuk tombol LEFT. Perhatikan bahwa setiap state diatas dikontrol oleh 4-bit masukkan, sebut saja X3X2X1X0. S1 <= 0000 S2 <= 1000 S3 <= 0100 S4 <= 0010 S5 <= 0001 Dijamin hanya satu buah push button yang ditekan setiap saat t. Selain itu, untuk bagian bonus, kita cukup menambahkan satu kondisi kontrol tambahan (untuk SW[4]), yang mengaktifkan mode cepat saat logika 0 dan mode lambat saat berlogika 1.

5.

KESIMPULAN

Salah satu perantara yang dapat digunakan untuk mengimplementasikan rangkaian sekuensial adalah display LCD, yang diimplementasikan menggunakan modul VGA pada FPGA. Video Graphics Array (VGA) adalah sebuah 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
6

Laporan Praktikum - Laboratorium Dasar Teknik Elektro STEI ITB

ditranslasikan menjadi sinyal RGB analog sebelum ditransmisikan ke layar monitor. Implementasi desain yang diterapkan pada blok tampilan kali ini adalah sebuah object bujur sangkar / bendera yang resizable, artinya dapat diubah-ubah ukurannya serta movable, artinya dapat digerakkan sesuai keinginan pengguna. Dalam mengimplementasikan desain tersebut, digunakan beberapa macam input / masukkan seperti push-button untuk menggerakan kesatuan pixel bujursangkar ke empat arah berbeda. Selain itu, digunakan pula Clock divider agar pergerakan objek gambar dapat dilihat oleh pengguna.

DAFTAR PUSTAKA [1] [2] [3] Brian Holdsworth and Clive Woods, Digital Logic Design Fourth Edition, N.wnes, 2002 R.H. Katz, Contemporary Logic Design Second Edition, Pearson Prentince-Hall, NJ, 2005 Stephen Brown and Zvonko Vranesic, Fundamentals of Digital Logic with VHDL Design Third Edition, McGraw-Hill, San Francisco, 2009 http://en.wikipedia.org/wiki/Sequential_logi c , 27 November 2012, pukul 20:40:15 http://labdasar.ee.itb.ac.id/lab/EL2195/pen dukung%20praktikum/de1_usermanual_v101 7.pdf, 28 November 2012, pukul 00:01:10 http://en.wikipedia.org/wiki/Fieldprogrammable_gate_array, 28 November 2012, pukul 2:58:12

[4] [5]

[6]

Laporan Praktikum - Laboratorium Dasar Teknik Elektro STEI ITB