Anda di halaman 1dari 45

LAPORAN PROJECT

PENGOLAHAN CITRA DIGITAL


“PENCOCOKAN CITRA”

ANGGOTA KELOMPOK

T. ZAKIA MAULANI (1557301108)


SITI RAMADHANI (1557301106)
RIZKY MAULANA (1557301105)
IKHSAN KAMIL (1557301117)
ISMU AJIR (1557301076)

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI DAN KOMPUTER

POLITEKNIK NEGERI LHOKSEUMAWE

2017
KATA PENGANTAR

Puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan karunia-Nya,
sehingga kami dapat menyelesaikan Project Pengolahan Citra Digital yang berjudul
“Pencocokan Citra”.
Laporan disusun sesuai materi yang telah ditentukan dalam penilaian di mata
kuliah ini dan dibuat sebagai tuntunan belajar bagi pembaca, khususnya bagi kelompok
kami sendiri agar dapat mengetahui berbagai hal mengenai bagaimana proses pembuatan
aplikasi GUI dengan matlab berbasis citra digital.
Dengan selesainya laporan ini tidak terlepas dari bantuan banyak pihak yang telah
memberikan masukan-masukan kepada kami. Untuk itu kami mengucapkan banyak
terimakasih kepada dosen pembimbing yang telah membimbing kami untuk
menyelesaikan laporan ini dengan baik.
Kami menyadari bahwa masih banyak kekurangan dari laporan ini, baik dari
materi maupun teknik penyajiannya, mengingat kurangnya pengetahuan dan pengalaman
kami. Oleh karena itu, kritik dan saran yang membangun sangat kami harapkan.

Buket Rata, 21 Mei 2018


Penulis

i
DAFTAR ISI

KATA PENGANTAR ....................................................................................................... i


DAFTAR ISI ................................................................................................................... ii
DAFTAR GAMBAR ....................................................................................................... iv
BAB I ..............................................................................................................................1
PENDAHULUAN ............................................................................................................1
1.1 Latar Belakang .....................................................................................................1
1.2 Tujuan ................................................................................................................ 2
1.3 Batasan Masalah ................................................................................................. 2
BAB II............................................................................................................................ 3
PEMBAHASAN .............................................................................................................. 3
2.1 Citra dan Pixel .................................................................................................... 3
2.2 Warna RGB pada Citra Bitmap 24 Bit ................................................................. 3
2.3 Konversi Citra RGB ke Citra HSV ........................................................................ 4
2.4 Euclidean Distance .............................................................................................. 5
2.5 Pengenalan Pola ................................................................................................. 6
2.6 Perancangan Aplikasi .......................................................................................... 7
2.7 Proses Pengambilan Citra dan Resize ................................................................... 8
2.8 Proses RGB To HSV ............................................................................................ 9
2.9 Euclidean Distance ............................................................................................ 10
2.10 Guide Matlab .................................................................................................12
Pengenalan Guide Matlab .................................................................. 12
Memulai Guide.................................................................................. 12
Komponen Guide .............................................................................. 17
Desain Aplikasi Guide ........................................................................ 17
Menu Guide ...................................................................................... 18
Aplikasi M-File ................................................................................... 19
2.11 Langkah-Langkah Perancangan GUI “Pencocokan Citra” ................................... 20
Mempersiapkan Database Citra ........................................................ 20
Mempersiapkan Data Uji Citra........................................................... 21
Menjalankan Tampilan GUI Awal ..................................................... 22
Memberikan Program Pada Komponen GUI ..................................... 23
2.12 Hasil Percobaan ................................................................................................ 28

ii
Pencocokan Citra Bunga ................................................................... 28
Pencocokan Citra Mobil ................................................................... 28
Pencocokan Citra Celana .................................................................. 29
Pencocokan Citra Gedung ................................................................ 29
Pencocokan Citra Ruang Tidur.......................................................... 30
Pencocokan Citra Baby ..................................................................... 30
Pencocokan Citra Hutan .................................................................... 31
Pencocokan Citra Sepatu ................................................................... 31
Pencocokan Citra Balon .................................................................... 32
Pencocokan Citra Kucing .................................................................. 32
Pencocokan Citra Wanita ................................................................. 33
Pencocokan Citra Boneka ................................................................. 33
Pencocokan Citra Langit ................................................................... 34
Pencocokan Citra Pria ....................................................................... 34
Pencocokan Citra Sepeda .................................................................. 35
Membandingkan Beberapa Citra Sejenis dalam Ruang HSV ............... 35
BAB III......................................................................................................................... 38
PENUTUP ................................................................................................................... 38
3.1 Kesimpulan ....................................................................................................... 38
3.2 Saran ................................................................................................................ 38
DAFTAR PUSTAKA...................................................................................................... 39

iii
DAFTAR GAMBAR

Gambar 2.1 HSV ............................................................................................................ 4


Gambar 2.2 Konversi citra RGB menjadi citra HSV ........................................................ 5
Gambar 2.3 Skema alir proses........................................................................................ 7
Gambar 2.4 Diagram alir proses deteksi ......................................................................... 8
Gambar 2.5 Flowchart HSV ........................................................................................... 9
Gambar 2.6 Citra ukuran 9 x 7 Pixel............................................................................. 11
Gambar 2.7 Citra dalam bentuk matriks ....................................................................... 11
Gambar 2.8 Guide Quick Start ......................................................................................13
Gambar 2.9 Blank GUI Default .....................................................................................14
Gambar 2.10 GUI dengan Uicontrols ............................................................................15
Gambar 2.11 GUI dengan Axes dan Menu ....................................................................15
Gambar 2.12 GUI Question Dialog ...............................................................................16
Gambar 2.13 Open Existing GUI ...................................................................................16
Gambar 2.14 Komponen Guide ....................................................................................17
Gambar 2.15 Desain GUI dengan Script ........................................................................17
Gambar 2.16 Desain GUI dengan Komponen GUIDE ....................................................18
Gambar 2.17 Contoh Aplikasi M-File ............................................................................19
Gambar 2.18 Database citra ......................................................................................... 20
Gambar 2.19 Data uji citra ...........................................................................................21
Gambar 2.20 Menjalankan GUI “Pencocokan Citra” .................................................. 22
Gambar 2.21 Pencocokan Citra Bunga ........................................................................ 28
Gambar 2.22 Pencocokan Citra Mobil ........................................................................ 28
Gambar 2.23 Pencocokan Citra Celana ...................................................................... 29
Gambar 2.24 Pencocokan Citra Gedung ..................................................................... 29
Gambar 2.25 Pencocokan Citra Ruang Tidur .............................................................. 30
Gambar 2.26 Pencocokan Citra Baby ......................................................................... 30
Gambar 2.27 Pencocokan Citra Hutan ........................................................................31
Gambar 2.28 Pencocokan Citra Sepatu ........................................................................31
Gambar 2.29 Pencocokan Citra Balon ........................................................................ 32
Gambar 2.30 Pencocokan Citra Kucing....................................................................... 32
Gambar 2.31 Pencocokan Citra Wanita ...................................................................... 33

iv
Gambar 2.32 Pencocokan Citra Boneka...................................................................... 33
Gambar 2.33 Pencocokan Citra Langit ........................................................................ 34
Gambar 2.34 Pencocokan Citra Pria ........................................................................... 34
Gambar 2.35 Pencocokan Citra Sepeda ...................................................................... 35
Gambar 2.36 Membandingkan citra sejenis dalam ruang HSV..................................... 37

v
BAB I
PENDAHULUAN

1.1 Latar Belakang

Perkembangan Teknologi informasi khususnya bidang sains komputer telah masuk


pada era dimana komputer dapat di program untuk dapat seolah-olah berpikir, melihat,
mendengar sebagaimana manusia. Bidang ini dikenal dengan kecerdasan buatan. Pada
penelitian ini salah satu bidang kecerdasan buatan yang diangkat adalah Pencocokan
citra (image matching). Pencocokan citra merupakan salah satu bagian dari pengolahan
citra yang dilakukan untuk mencari citra lain yang sejenis atau memiliki kemiripan. Salah
satu parameter yang merepresentasikan tingkat kemiripan antara dua buah citra adalah
jarak euclidean. Pada penelitian ini objek yang diteliti adalah citra digital dengan warna
RGB dan berukuran 256 x 256 piksel. Pencocokan citra dilakukan dengan menyediakan
database citra sebagai acuan dengan mengupload beberapa image sebagai citra uji.
Dengan demikian seolah-olah komputer dapat mendeteksi image yang paling mirip antara
citra pada image acuan dengan sekumpulan image dalam database citra digital.
Bagian dari pengolahan citra adalah dengan menggunakan pengolahan berdasarkan
warna. Analisis warna dalam pengenalan citra digital ini ada beberapa model diantaranya,
model RGB, CMY, HSI, HSV dan normalized RGB. Salah satu bentuk aplikasi model HSV
adalah sebagai pengenalan wajah. Menggunakan model ini sebagai pengenalan wajah
memiliki keuntungan yaitu sederhana dalam pemrograman, prosesnya cepat sehingga
sangat cocok untuk aplikasi real time. Berkembangnya penerapan sensor visual dan
disiplin ilmu image processing (pengolahan citra) telah menginsipirasi pihak yang
berwenang dalam peningkatan pendidikan tinggi yang dalam hal ini adalah DIKTI, untuk
memasukkan unsur tersebut. Hal ini seperti yang terbukti dengan adanya ajang kompetisi
tentang robot humanoid pemain bola yang dapat mengenali bola dan gawang yang
memiliki warna berbeda. Berdasarkan hal tersebut maka makalah ini akan membahas
sistem pencocokan citra menggunakan jarak euclidean berdasarkan pada ciri warna. Ciri
warna dihitung pada ruang warna HSV yang terdiri dari komponen Hue, Saturation,
dan Value. Sistem pencocokan citra diimplementasikan dalam bentuk tampilan GUI
menggunakan bahasa pemrograman MATLAB.

1
1.2 Tujuan

Dalam bab ini, kita akan mendiskusikan beberapa hal mengenai Pencocokan Citra
yang dihasilkan dari Aplikasi GUI Pencocokan Citra. Pada akhir pembahasan, diharapkan
pembaca dapat :
- Memahami konsep jarak Euclidean yang diterapkan pada system
- Memahami pembuatan GUI untuk setiap komponen yang membangun sistem

1.3 Batasan Masalah

Pada perancangan GUI ini, batasan-batasan masalah yang diberikan adalah sebagai
berikut :
1. Citra masukan adalah citra RGB berukuran 256x256 piksel berformat “.jpg” yang
sejenis dengan citra di dalam database yang disimpan di dalam sebuah folder data uji
yang berada di dalam folder Matlab.
2. Pencocokan citra menggunakan pembandingan pola pixel penyusun image acuan
dengan image-image dalam database memakai metode euclidean distance.
3. Hasil output dari GUI ini adalah citra yang sejenis dengan citra uji, dimana citra sejenis
itu di simpan di dalam sebuah database.
4. GUI yang dirancang di sini menggunakan Program Matlab.

2
BAB II
PEMBAHASAN

2.1 Citra dan Pixel

Setiap posisi dalam citra dapat berisi pixel. Ini berarti bahwa tidak ada sesuatu yang
mampu menunjukkan bayangan samar dari objek. Pixel gambar yang kecerahannya
dibawah tingkat tertentu diwakili oleh ”0” sedangkan diatasnya diwakili oleh ”1”, dengan
demikian semua citra didalam memori komputer dapat diwakili oleh logika ”1” dan ”0”.
Kita dapat menghitung jumlah memori yang dibutuhkan untuk menyimpan citra tersebut.
Sebagai contoh citra yang mewakili resolusi 256x256 pixel ( jumlah total 65536 ), karena
setiap pixel diwakili oleh ”0” dan ”1”, maka komputer membutuhkan satu bit untuk
menyimpan setiap pixel, sehingga dibutuhkan total bit sekitar 64 kb, dengan demikian
jumlah memori akan bertambah besar jika resolusi citra bertambah.

2.2 Warna RGB pada Citra Bitmap 24 Bit

Pada mode warna RGB setiap titik pada layar berisi angka yang bukan menunjukkan
intensitas warna dari titik tersebut, melainkan menunjukkan intensitas yang dipilih pada
suatu tabel. Jadi pada setiap titik, dapat dipilih salah satu warna pada tabel. Adapun
masing-masing warna dari tabel tersebut memiliki tiga buah kombinasi angka, yaitu R, G,
dan B yang menentukan proporsi warna merah (Red), hijau(Green), dan biru(Blue) dari
warna tersebut. R, G, dan B masing-masing memiliki range antara 0 hingga 255 sehingga
jumlah warna pada tabel yang dapat dipilih untuk mengisi warna pada sebuah titik ialah
256 × 256 × 256 = 16,7 juta warna. Sedangkan warna grayscale diperoleh dengan cara
mengisi seluruh isi tabel warna dengan warna-warna yang memiliki proporsi antara R, G,
dan B yang sama. Yaitu mulai dari R = 0, G = 0 dan B = 0 hingga R = 255, G = 255,
dan B = 255. Sehingga akan diperoleh 256 warna dari warna hitam kemudian perlahan-
lahan bertambah terang sampai warna putih terang.

3
2.3 Konversi Citra RGB ke Citra HSV
HSV mendefinisikan warna dalam terminologi Hue, Saturation dan Value. Keuntungan
HSV adalah terdapat warna-warna yang sama dengan yang ditangkap oleh indra manusia.
Sedangkan warna yang dibentuk model lain seperti RGB merupakan hasil campuran dari
warna-warna primer.

Gambar 2.1 HSV

Model HSV, pertama kali diperkenalkan oleh A.R Smith pada tahun 1978, yang
ditunjukkan pada gambar diatas. Silakan dicermati bagaimana teman-teman menafsirkan.
Melalui model gambar diatas, kita tahu bahwa HSV memiliki 3 karakteristik pokok,
yaitu Hue, Saturation dan Value. Apa yang dimaksud ketiganya?
- Hue : menyatakan warna sebenarnya, seperti merah, violet, dan kuning dan
digunakan menentukan kemerahan (redness), kehijauan (greeness), dsb.
- Saturation : kadang disebut chroma, adalah kemurnian atau kekuatan warna.
- Value : kecerahan dari warna. Nilainya berkisar antara 0-100 %. Apabila nilainya 0
maka warnanya akan menjadi hitam, semakin besar nilai maka semakin cerah
dan muncul variasi-variasi baru dari warna tersebut.

4
Untuk mencoba proses konversi citra berwarna menjadi citra HSV dapat dibuat program
sbb :

A=imread('khan.jpg');
B=(rgb2hsv(A))

figure (1)
imshow(A);
title('Citra Awal');

figure (2)
imshow(B)
title('Citra HSV');

Kemudian, Run program. Maka akan tampil gambar seperti berikut. Lihat Gambar 2.2.

Gambar 2.2 Konversi citra RGB menjadi citra HSV

2.4 Euclidean Distance


Jarak Euclidean dapat dianggap sebagai jarak yang paling pendek antara dua titik dan
pada dasarnya sama halnya dengan persamaan Pythagoras ketika digunakan didalam dua
dimensi. Secara matematis dapat dituliskan didalam persamaan berikut :

5
Dimana d(i, j) = jarak antara 2 titik
Xin = nilai pixel pada koordinat titik n pixel image acuan
Xjn = nilai pixel pada koordniat titik n pixel image target (dalam database)

Ketika menggunakan fungsi jarak Euclidean untuk membandingkan jarak, tidak


diperlukan untuk menghitung akar dua sebab jarak selalu merupakan angka-angka positif.
Perhitungan jarak warna dilakukan untuk setiap komponen warna merah, hijau dan biru.
Kemudian dari setiap komponen warna tersebut dipilih yang jaraknya terkecil untuk
menentukan tingkat kesesuaiannya.

2.5 Pengenalan Pola


Pengenalan Pola dapat dikatakan sebagai kemampuan manusia mengenali objek-
objek berdasarkan ciri- ciri dan pengetahuan yang pernah diamatinya dari objek-objek
tersebut. Tujuan dari pengenalan pola ini adalah mengklasifikasi dan mendeskripsikan
pola atau objek kompleks melalui pengetahuan sifat-sifat atau ciri-ciri objek tersebut.
Pola dapat dikatakan sebagai identitas yang terdefinisi dan dapat diberi suatu
identifikasi atau nama. Pendekatan pengenalan pola ada 3 yaitu secara sintaks, statistik
serta melalui jaringan saraf tiruan. Pendekatan secara sintaks adalah pendekatan dengan
menggunakan aturan-aturan tertentu. Misalnya baju si mamat mempunyai rule sebagai
berikut: selalu berwarna biru, bahannya kaos, bermerek adidas, lengannya lengan panjang
dan memilik kerah. Jika ada sebuah baju dengan ciri-ciri 90% sama dari ciri-ciri tersebut
dapat dikatakan baju tersebut bajunya Mamat dengan toleransi sekitar 10%. Pendekatan
metoda statistik adalah pendekatan dengan menggunakan data-data yang berasal dari
statisik misalnya dalam sebuah pasar saham terlihat kurva penjualan tertinggi adalah
saham A, kemudian disusul saham B dan saham C. Apabila seseorang datang kepasar
saham tersebut maka orang tersebut dapat dikatakan sekitar 95% orang tersebut membeli
saham A, karena berdasarkan kurva saham A memiliki harga tertinggi. Pendekatan dengan
pola jaringan saraf tiruan adalah pendekatan dengan menggabungkan pendekatan sintaks
dan statistik.
Pendekatan melalui pola-pola ini meniru cara kerja otak manusia. Pada pola ini sistem
membuat rule- rule tertentu disertai dengan menggunakan data statistik sebagai dasar
untuk pengambilan keputusan. Untuk pengenalan pola dengan pendekatan jaringan saraf
tiruan seolah–olah membikin sebuah sistem yang kinerjanya sama dengan otak kita. Agar
sistem tersebut bisa menjadi cerdas, kita harus memberikan pelatihan terhadap sistem

6
tersebut selama rentang waktu yang kita tentukan. Karena dengan melatih sistem tersebut
maka akan menambah rule-rule serta data statistik yang di gunakan oleh sistem untuk
mengambil keputusan.
Contoh manfaat pengenalan pola :
▪ Pengenalan sidik jari
▪ Pengenalan wajah
▪ Pengenalan tulisan tangan
▪ Pengenalan karakter
▪ Pengenalan objek molekuler
▪ Mengidentifikasi objek (benda)

2.6 Perancangan Aplikasi


Salah satu parameter yang merepresentasikan tingkat kemiripan antara dua buah citra
adalah jarak euclidean. Semakin kecil jarak euclidean antara dua buah citra maka akan
semakin mirip kedua citra tersebut. Jarak euclidean dapat dihitung berdasarkan ciri khusus
yang dimiliki oleh suatu citra. Ciri tersebut di antaranya adalah ciri warna, ciri tekstur, ciri
bentuk, ciri geometri, dan ciri ukuran. Berikut ini merupakan contoh sistem pencocokan
citra menggunakan jarak euclidean berdasarkan pada ciri warna. Ciri warna dihitung
pada ruang warna HSV yang terdiri dari komponen Hue, Saturation, dan Value.
Proses deteksi kecocokan citra ini dibagi menjadi dua tahap utama, yang pertama
adalah pra pengolahan (pre-processing). Secara keseluruhan skema proses tersebut terlihat
pada Gambar 2.3.

Gambar 2.3 Skema alir proses

7
Berdasarkan blok diagram pada Gambar 2.3 diatas, diagram alir aplikasi pencocokan
citra dapat dilihat pada Gambar 2.4.

Gambar 2.4 Diagram alir proses deteksi

2.7 Proses Pengambilan Citra dan Resize


Proses pengambilan citra uji diambil dari tampilan GUI dengan menekan button
“Buka Citra Uji” di mana citra-citra tersebut berada di dalam sebuah folder Matlab
dengan nama folder “data uji”. Semua citra di dalam folder data uji tersebut berjumlah
15 data dan sudah berukuran 256 x 256 pixel. Penulis menggunakan situs
http://picresize.com/ untuk melakukan resize terhadap semua citra.

8
2.8 Proses RGB To HSV
Pada proses ini, citra yang sudah diresize sebelum dilakukan deteksi kemiripan
dilakukan proses konversi citra dari citra RGB menjadi citra HSV. Flowchart dari proses
HSV dapat dilihat pada Gambar 2.5 berikut ini:

Gambar 2.5 Flowchart HSV

9
2.9 Euclidean Distance
▪ Ukuran Jarak
Ukuran jarak [GON92] untuk piksel p, q, dan z dengan koordinat (x,y) dan (u,v),
dimana D adalah fungsi jarak jika:
a. D(p,q) ≥ 0 (D(p,q) = 0 jika p = q)
b. D(p,q) = D(q,p) dan
c. D(p,z) ≤ D(p,q) + D(q,z)

Euclidean Distance antara p dan q didefinisikan sebagai :


D(p,q) = [ (x - y)2 – (y - t)2 ]1/2

Untuk ukuran jarak, piksel yang memiliki jarak kurang dari atau sama dengan harga
r dari (x,y) adalah sebuah titik yang terdapat pada lingkaran dimana untuk radius
r berpusat di (x,y). D4 adalah jarak atau disebut juga city-block distance antara p
dan q didefinisikan sebagai :
D(p,q) = | x – s | + | y – t |

Piksel tersebut mempunyai D4, yang merupakan jarak yang dimulai dari (x,y)
kurang dari atau sama dengan nilai r yang merupakan radius dari sebuah lingkaran
yang berpusat pada (x,y).

▪ Menghitung Nilai Korelasi dengan Algoritma Euclidean Distance


Sebuah gambar dikatakan sama dengan gambar yang lain apabila setiap posisi
dan nilai elemen pikselnya terletak pada posisi baris dan kolom yang sama. Seperti
telah dijelaskan sebelumnya bahwa sebuah gambar dapat direpresentasikan
sebagai sebuah matriks, sehingga dapat dikatakan sebuah gambar dianggap sama
apabila setiap sel dari matriks tersebut memiliki nilai elemen yang sama pada posisi
baris dan kolom yang sama.

10
Gambar dibawah ini menjelaskan tentang posisi piksel pada sebuah gambar
dengan ukuran 9 X 7

Gambar 2.6 Citra ukuran 9 x 7 Pixel

Sekilas kedua gambar tersebut terlihat sama, namun ada nilai piksel yang tidak
sama. Jika gambar tersebut direpresentasikan ke dalam bentuk matriks dengan nilai
piksel = 1, maka :

Gambar 2.7 Citra dalam bentuk matriks

Dari matriks tersebut, terlihat bahwa pada baris ke-4 kolom ke-2, baris ke-6
kolom ke-2 ada nilai piksel yang tidak sama. Jika dihitung dengan Euclidean
Distance maka ada nilai jarak antara dua elemen matriks tersebut yang dapat
dihitung dengan menggunakan persamaan :

11
2.10 Guide Matlab
▪ Pengenalan Guide Matlab
GUIDE atau GUI Builder merupakan sebuah Graphical User Interface (GUI) yang
dibangun dengan objek grafis seperti tombol (pushbutton), edit, slider, text, combo,
sumbu (axes), maupun menu dan lain-lain untuk kita gunakan. Sebagai contoh, ketika
menggerakkan slider, maka kita dapat melihat perubahan sebuah nilai. Kemudian ketika
kita menekan tombol OK, maka aplikasi akan dijalankan. Aplikasi yang menggunakan
GUI umumnya lebih mudah dipelajari dan digunakan karena orang yang
menjalankannya tidak perlu mengetahui perintah yang ada dan bagaimana perintah
bekerja.
Jika membicarakan pemrograman berorientasi visual, yang paling dikenal adalah
sederetan bahasa pemrograman seperti Visual Basic, Delphi, Visual C, Visual Fox Pro,
dan yang lainnya yang memang didesain untuk itu. MATLAB merintis ke arah
pemrograman yang menggunakan GUI dimulai dari MATLAB versi 5, yang terus
disempurnakan hingga sekarang. Tidak seperti bahasa pemrograman lainnya, GUIDE
MATLAB memiliki banyak keunggulan tersendiri, antara lain:
1. GUIDE MATLAB cocok untuk aplikasi-aplikasi berorientasi sains.
2. MATLAB memiliki banyak fungsi built-in yang siap digunakan.
3. Ukuran file, baik Fig-file maupun M-file yang dihasilkan relatif kecil.
4. Kemampuan grafisnya cukup handal dan tidak kalah dengan bahasa
pemrograman lainnya.

▪ Memulai Guide
Untuk memulai penggunaan GUI MATLAB, dapat dilakukan dengan dua cara yaitu
:
1. Melalui command MATLAB kita ketikkan >> guide, atau
2. Klik tombol Start pada window utama dan pilih MATLAB, lalu pilih GUIDE
(GUI Builder). Selanjutnya, kita dibawa ke sebuah kotak dialog pilihan GUIDE
Quick Start.

12
Gambar 2.8 Guide Quick Start

Ada dua pilihan, yaitu Create New GUI dan Open Existing GUI.

1. Create New GUI


Kita dapat memilih Create New GUI jika memang belum pernah membuat
aplikasi GUI MATLAB atau memang ingin membuat sebuah figure baru. Menu
Create New GUI akan memberikan kita beberapa pilihan GUIDE
template. Keuntungan menggunakan GUIDE template adalah kita dapat
membuat aplikasi GUI kita menjadi lebih cepat dan mudah karena sudah
tersedia beberapa bentuk (prototype) GUI. Pada GUIDE template, kita dapat
memilih :
a. Blank GUI (Default)
Blank GUI merupakan sebuah GUI dengan figure kosong. Kita dapat
mengatur sendiri komponen yang kita butuhkan sesuai dengan aplikasi
yang kita buat. Blank GUI merupakan kondisi default dari GUIDE dan
dipilih jika kita memang akan membuat sebuah aplikasi dengan komponen
yang layoutnya tidak terdapat pada template lain. Setelah menjalankan
Blank GUI (Default), maka kita akan dibawa ke window baru.

13
Gambar 2.9 Blank GUI Default

b. GUI with Uicontrols


Dengan GUI with Uicontrols, kita dapat membuat sebuah aplikasi
MATLAB dengan beberapa kontrol, misalnya frame, radiobutton,
pushbutton, edit text, dan lainnya. Jika kita ingin membangun sebuah
aplikasi dengan layout yang mirip, maka kita dapat memilih template
ini, selanjutnya beberapa properti yang ada dapat diatur kembali sesuai
aplikasi kita.

14
Gambar 2.10 GUI dengan Uicontrols

c. GUI with Axes and Menu


Dengan GUI with Axes and Menu, kita lebih mudah membuat plot
berbagai bentuk data yang divisualisasikan dalam sebuah axes.

Gambar 2.11 GUI dengan Axes dan Menu

15
d. Modal Question Dialog
Template Modal Question Dialog merupakan sebuah template dengan
kotak dialog sebagai konfirmasi untuk menutup sebuah aplikasi. Kita
dapat menggunakan template ini untuk mengakhiri sebuah aplikasi
dan untuk menghindari penutupan aplikasi secara tidak sengaja, yang
dapat membawa dampak kerugian hilangnya sebuah informasi.

Gambar 2.12 GUI Question Dialog

2. Open Existing GUI


Jika kita sudah memiliki file figure MATLAB atau akan memodifikasi file figure,
maka kita dapat menggunakan pilihan Open Existing GUI. Kita hanya
tinggal melakukan browse untuk mencari lokasi file figure.

Gambar 2.13 Open Existing GUI

16
▪ Komponen Guide
Untuk membuat sebuah Graphical User Interface MATLAB dengan fasilitas GUIDE,
kita harus memulai dengan membuat desain sebuah figure. Untuk membuat
sebuah desain figure, kita dapat memanfaatkan Uicontrol (control user interface) yang
telah tersedia pada editor figure. Banyak sekali control user interface (komponen) yang
ada pada GUIDE MATLAB, yaitu:

Gambar 2.14 Komponen Guide

▪ Desain Aplikasi Guide


Untuk Untuk memulai membuat sebuah desain aplikasi GUI, dapat dilakukan
dengan dua cara, yaitu:
1. Menggunakan perintah yang dituliskan secara langsung dengan script M-file
pada Window utama MATLAB. Dengan cara ini, push button dapat dibuat dengan
menggunakan script :
>>push1=uicontrol('style','pushbutton','position',[250 250 100 50],'string','proses');

Gambar 2.15 Desain GUI dengan Script

2. Menggunakan jendela layout dengan menyusun komponen GUIDE. Dengan cara


kedua, pembuatan push button dapat dilakukan dengan memilih obyek

17
push button kemudian mendrag ke figure dan menyesuaikan posis i dan
ukurannya. Seperti terlihat pada gambar berikut:

Gambar 2.16 Desain GUI dengan Komponen GUIDE

Dapat dilihat bahwa cara pertama akan lebih sulit dalam menentukan sekaligus
mengubah lokasi dan ukuran. Cara ini kurang praktis karena banyak parameter yang
dapat dihasilkan ke tiap obyek, seperti warna, font, tampilan obyek, dan sebagainya.
Pada cara kedua akan lebih mudah karena semua peraturan sudah ada di property
inspector.

▪ Menu Guide
Dalam GUI, MATLAB menyediakan sebuah aplikasi menu. Dengan
menggunakan menu, program yang dibuat akan lebih terorganisir sehingga
memudahkan pemakai dalam menjalankan sebuah aplikasi. Ada dua jenis menu yang
disediakan oleh GUIDE MATLAB, yaitu :
1. Menu Bar
Menu bar merupakan menu GUI MATLAB yang diletakkan pada figure dan
terletak di atas seperti halnya menu pulldown. Untuk membuat sebuah menu,
terlebih dahulu mempersiapkan nama dan masing-masing menu item. Setiap menu
item dapat memiliki submenu.
2. Context Menu
Context menu adalah menu yang akan ditampilkan apabila pemakai mengklik
kanan mouse pada obyek grafis. Melalui Menu Editor, kita dapat mendefinisikan
context menu dan menggabungkannya dengan obyek-obyek yang terdapat pada

18
figure. Semua item di dalam context menu adalah bagian menu yang tidak akan
ditampilkan pada figure menu bar.

▪ Aplikasi M-File
Dalam Dalam membuat program GUI, matlab membuat program aplikasi berupa
sebuah M-file yang menyediakan kerangka untuk mengontrol GUI. Kerangka dapat
membantu membuat program menjadi lebih efisien dan sempurna. Semua kode
termasuk kode callback dimasukkan ke dalam kode aplikasi M-file. Setiap callback akan
diimplementasikan sebagai sebuah subfungsi dalam M-file. Pendekatan ini
memungkinkan M-file memiliki titik masukan tunggal (single entry point) yang dapat
memanggil callback yang sesuai, atau sebuah subfungsi penolong yang ingin kita
gunakan dalam GUI.
Fungsi M-file mirip dengan script M-file dimana keduanya merupakan file
teks dengan ekstensi .m. Sebagaimana script M-file, fungsi M-file tidak dimasukkan ke
dalam jendela Command, tetapi merupakan suatu file tersendiri yang dibuat dengan
editor teks. Fungsi M-file menyediakan cara sederhana untuk menambah kemampuan
MATLAB, bahkan banyak fungsi standar MATLAB yang merupakan fungsi M-file.

Gambar 2.17 Contoh Aplikasi M-File

Aplikasi M-file mengerjakan sesuatu yang berbeda tergantung pada argumen


yang dilewatkan ketika dipanggil. Subfungsi yang ditambahkan ke dalam GUIDE
memerlukan argumen tertentu, tetapi memiliki daftar panjang argumen variabel.

19
Karena argumen terakhir adalah varargin, maka kita dapat menambahkan
argumen apapun yang diinginkan ke dalam subfungsi. Perlu diperhatikan, jika
menggunakan aplikasi M-file yang dibuat oleh GUIDE, maka Fig-file dan M-
file harus disimpan dengan nama yang sama.

2.11 Langkah-Langkah Perancangan GUI “Pencocokan Citra”

▪ Mempersiapkan Database Citra


Data base menggunakan 15 buah citra yang disimpan di dalam sebuah folder data
base dan berada di dalam folder Matlab. Citra-citra tersebut dapat dilihat pada
Gambar 2.18.

Gambar 2.18 Database citra

20
▪ Mempersiapkan Data Uji Citra
Sama seperti pada data base citra, pada data uji citra juga menggunakan citra yang
sejenis. Citra-citra tersebut dapat dilihat pada Gambar 2.19.

Gambar 2.19 Data uji citra

21
▪ Menjalankan Tampilan GUI Awal
Berikut ini adalah tampilan GUI “Pencocokan Citra”. Lihat Gambar 2.20.

Gambar 2.20 Menjalankan GUI “Pencocokan Citra”

Pada tampilan GUI awal ditunjukkan database yang berjumlah 15 buah citra. Ke-15 database
citra tersebut masing-masing akan dihitung jaraknya dengan sebuah citra uji. Dari ke-15 jarak
yang diperoleh, penentuan pasangan citra yang cocok atau sejenis dengan citra uji adalah citra
pada database yang memiliki jarak euclidean terdekat.

22
▪ Memberikan Program Pada Komponen GUI
Berikut ini adalah program yang diberikan untuk setiap komponen pada GUI
Pencocokan Citra.
➢ Menampilkan seluruh database citra pada masing-masing komponen axes.
% Update handles structure
movegui(hObject,'center');

axes(handles.axes1);
handles.Img1 = imread('data base\bunga 1.jpg');
imshow(handles.Img1);
title('Bunga')

axes(handles.axes2);
handles.Img2 = imread('data base\gedung 1.jpg');
imshow(handles.Img2);
title('Gedung')

axes(handles.axes3);
handles.Img3 = imread('data base\hutan 1.jpg');
imshow(handles.Img3);
title('Hutan')

axes(handles.axes4);
handles.Img4 = imread('data base\kucing 1.jpg');
imshow(handles.Img4);
title('Kucing')

axes(handles.axes5);
handles.Img5 = imread('data base\langit 1.jpg');
imshow(handles.Img5);
title('Langit')

axes(handles.axes6);
handles.Img6 = imread('data base\mobil 1.jpg');
imshow(handles.Img6);
title('Mobil')

axes(handles.axes7);
handles.Img7 = imread('data base\ruang tidur 1.jpg');
imshow(handles.Img7);
title('Ruang Tidur')

axes(handles.axes8);
handles.Img8 = imread('data base\sepatu 1.jpg');
imshow(handles.Img8);
title('Sepatu')

23
axes(handles.axes9);
handles.Img9 = imread('data base\wanita 1.jpg');
imshow(handles.Img9);
title('Wanita')

axes(handles.axes10);
handles.Img10 = imread('data base\pria 1.jpg');
imshow(handles.Img10);
title('Pria')

axes(handles.axes11);
handles.Img11 = imread('data base\celana 1.jpg');
imshow(handles.Img11);
title('Celana')

axes(handles.axes12);
handles.Img12 = imread('data base\Baby 1.jpg');
imshow(handles.Img12);
title('Baby')

axes(handles.axes13);
handles.Img13 = imread('data base\Balon 1.jpg');
imshow(handles.Img13);
title('Balon')

axes(handles.axes14);
handles.Img14 = imread('data base\Boneka 1.jpg');
imshow(handles.Img14);
title('Boneka')

axes(handles.axes15);
handles.Img15 = imread('data base\Sepeda 1.jpg');
imshow(handles.Img15);
title('Sepeda')
guidata(hObject, handles);

➢ Button “Buka Citra Uji”


function pushbutton4_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton1 (see GCBO)
% eventdata reserved - to be defined in a future version of
MATLAB
% handles structure with handles and user data (see GUIDATA)
[filename, pathname] = uigetfile('*.jpg');

if ~isequal(filename,0)
Img = imread(fullfile(pathname,filename));
axes(handles.axes16)
imshow(Img);
title('Citra Uji')

24
else
return
end

handles.Img = Img;
guidata(hObject, handles);

➢ Button “Hasil Pencocokan”


function pushbutton5_Callback(hObject, eventdata, handles)
Img = rgb2hsv(handles.Img);
Img1 = rgb2hsv(handles.Img1);
Img2 = rgb2hsv(handles.Img2);
Img3 = rgb2hsv(handles.Img3);
Img4 = rgb2hsv(handles.Img4);
Img5 = rgb2hsv(handles.Img5);
Img6 = rgb2hsv(handles.Img6);
Img7 = rgb2hsv(handles.Img7);
Img8 = rgb2hsv(handles.Img8);
Img9 = rgb2hsv(handles.Img9);
Img10 = rgb2hsv(handles.Img10);
Img11 = rgb2hsv(handles.Img11);
Img12 = rgb2hsv(handles.Img12);
Img13 = rgb2hsv(handles.Img13);
Img14 = rgb2hsv(handles.Img14);
Img15 = rgb2hsv(handles.Img15);

dist1 = mean(sqrt(sum(sum((Img-Img1).^2))));
dist2 = mean(sqrt(sum(sum((Img-Img2).^2))));
dist3 = mean(sqrt(sum(sum((Img-Img3).^2))));
dist4 = mean(sqrt(sum(sum((Img-Img4).^2))));
dist5 = mean(sqrt(sum(sum((Img-Img5).^2))));
dist6 = mean(sqrt(sum(sum((Img-Img6).^2))));
dist7 = mean(sqrt(sum(sum((Img-Img7).^2))));
dist8 = mean(sqrt(sum(sum((Img-Img8).^2))));
dist9 = mean(sqrt(sum(sum((Img-Img9).^2))));
dist10 = mean(sqrt(sum(sum((Img-Img10).^2))));
dist11 = mean(sqrt(sum(sum((Img-Img11).^2))));
dist12 = mean(sqrt(sum(sum((Img-Img12).^2))));
dist13 = mean(sqrt(sum(sum((Img-Img13).^2))));
dist14 = mean(sqrt(sum(sum((Img-Img14).^2))));
dist15 = mean(sqrt(sum(sum((Img-Img15).^2))));

jarak =
[dist1;dist2;dist3;dist4;dist5;dist6;dist7;dist8;dist9;dist10;di
st11;dist12;dist13;dist14;dist15];
[~,n] = min(jarak);

switch n
case 1
axes(handles.axes17);

25
handles.Img2 = imread('data base\bunga 1.jpg');
imshow(handles.Img2);
title('Bunga')
case 2
axes(handles.axes17);
handles.Img3 = imread('data base\gedung 1.jpg');
imshow(handles.Img3);
title('Gedung')
case 3
axes(handles.axes17);
handles.Img4 = imread('data base\hutan 1.jpg');
imshow(handles.Img4);
title('Hutan')
case 4
axes(handles.axes17);
handles.Img1 = imread('data base\kucing 1.jpg');
imshow(handles.Img1);
title('Kucing')
case 5
axes(handles.axes17);
handles.Img5 = imread('data base\langit 1.jpg');
imshow(handles.Img5);
title('Langit')
case 6
axes(handles.axes17);
handles.Img6 = imread('data base\mobil 1.jpg');
imshow(handles.Img6);
title('Mobil')
case 7
axes(handles.axes17);
handles.Img7 = imread('data base\ruang tidur 1.jpg');
imshow(handles.Img7);
title('Ruang Tidur')
case 8
axes(handles.axes17);
handles.Img8 = imread('data base\sepatu 1.jpg');
imshow(handles.Img8);
title('Sepatu')
case 9
axes(handles.axes17);
handles.Img9 = imread('data base\wanita 1.jpg');
imshow(handles.Img9);
title('Wanita')
case 10
axes(handles.axes17);
handles.Img10 = imread('data base\pria 1.jpg');
imshow(handles.Img10);
title('Pria')
case 11
axes(handles.axes17);
handles.Img11 = imread('data base\celana 1.jpg');

26
imshow(handles.Img11);
title('Celana')
case 12
axes(handles.axes17);
handles.Img12 = imread('data base\Baby 1.jpg');
imshow(handles.Img12);
title('Baby')
case 13
axes(handles.axes17);
handles.Img13 = imread('data base\Balon 1.jpg');
imshow(handles.Img13);
title('Balon')
case 14
axes(handles.axes17);
handles.Img14 = imread('data base\Boneka 1.jpg');
imshow(handles.Img14);
title('Boneka')
case 15
axes(handles.axes17);
handles.Img15 = imread('data base\Sepeda 1.jpg');
imshow(handles.Img15);
title('Sepeda')
end

➢ Button “Clear”
function pushbutton6_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton3 (see GCBO)
% eventdata reserved - to be defined in a future version of
MATLAB
% handles structure with handles and user data (see GUIDATA)
axes(handles.axes16)
plot(0);
axes(handles.axes17)
plot(0);
cla reset

27
2.12 Hasil Percobaan
▪ Pencocokan Citra Bunga

Gambar 2.21 Pencocokan Citra Bunga

▪ Pencocokan Citra Mobil

Gambar 2.22 Pencocokan Citra Mobil

28
▪ Pencocokan Citra Celana

Gambar 2.23 Pencocokan Citra Celana

▪ Pencocokan Citra Gedung

Gambar 2.24 Pencocokan Citra Gedung

29
▪ Pencocokan Citra Ruang Tidur

Gambar 2.25 Pencocokan Citra Ruang Tidur

▪ Pencocokan Citra Baby

Gambar 2.26 Pencocokan Citra Baby

30
▪ Pencocokan Citra Hutan

Gambar 2.27 Pencocokan Citra Hutan

▪ Pencocokan Citra Sepatu

Gambar 2.28 Pencocokan Citra Sepatu

31
▪ Pencocokan Citra Balon

Gambar 2.29 Pencocokan Citra Balon

▪ Pencocokan Citra Kucing

Gambar 2.30 Pencocokan Citra Kucing

32
▪ Pencocokan Citra Wanita

Gambar 2.31 Pencocokan Citra Wanita

▪ Pencocokan Citra Boneka

Gambar 2.32 Pencocokan Citra Boneka

33
▪ Pencocokan Citra Langit

Gambar 2.33 Pencocokan Citra Langit

▪ Pencocokan Citra Pria

Gambar 2.34 Pencocokan Citra Pria

34
▪ Pencocokan Citra Sepeda

Gambar 2.35 Pencocokan Citra Sepeda

▪ Membandingkan Beberapa Citra Sejenis dalam Ruang HSV


Berikut ini adalah program untuk mengkonversi beberapa Citra RGB ke Citra HSV.

% Konversi Citra Boneka


A=imread('Boneka 1.jpg');
B=(rgb2hsv(A))
C=imread('Boneka 2.jpg');
D=(rgb2hsv(C))

% Konversi Citra Hutan


E=imread('hutan 1.jpg');
F=(rgb2hsv(E))
G=imread('hutan 2.jpg');
H=(rgb2hsv(G))

% Konversi Citra Pria


I=imread('pria 1.jpg');
J=(rgb2hsv(I))
K=imread('pria 2.jpg');
L=(rgb2hsv(K))

% Konversi Citra Balon


M=imread('Balon 1.jpg');
N=(rgb2hsv(M))
O=imread('Balon 2.jpg');
P=(rgb2hsv(O))

35
figure (1)

% Hasil konversi citra boneka


subplot(4,4,1);
imshow(A);
title('Boneka 1');

subplot(4,4,2);
imshow(B);
title('Boneka 1 HSV');

subplot(4,4,3);
imshow(C);
title('Boneka 2');

subplot(4,4,4);
imshow(D);
title('Boneka 2 HSV');

% Hasil konversi citra hutan


subplot(4,4,5);
imshow(E);
title('Hutan 1');

subplot(4,4,6);
imshow(F);
title('Hutan 1 HSV');

subplot(4,4,7);
imshow(G);
title('Hutan 2');

subplot(4,4,8);
imshow(H);
title('Hutan 2 HSV');

% Hasil konversi citra pria


subplot(4,4,9);
imshow(I);
title('pria 1');

subplot(4,4,10);
imshow(J);
title('pria 1 HSV');

subplot(4,4,11);
imshow(K);
title('pria 2');

subplot(4,4,12);
imshow(L);
title('pria 2 HSV');

% Hasil konversi citra balon


subplot(4,4,13);

36
imshow(M);
title('balon 1');

subplot(4,4,14);
imshow(N);
title('balon 1 HSV');

subplot(4,4,15);
imshow(O);
title('balon 2');

subplot(4,4,16);
imshow(P);
title('balon 2 HSV');

Berikut ini adalah hasil dari program di atas. Bandingkan ruang HSV untuk citra sejenis. Lihat
Gambar 2.36.

Gambar 2.36 Membandingkan citra sejenis dalam ruang HSV

37
BAB III
PENUTUP

3.1 Kesimpulan

Dari hasil pengujian terhadap ke-15 buah citra di atas, tampak bahwa setiap citra
yang diujikan cocok dengan salah satu satu citra sejenis yang ada pada database. Hal
ini menunjukkan bahwa penghitungan jarak euclidean berdasarkan ciri warna pada
ruang warna HSV cukup baik diimplementasikan dalam sistem pencocokan citra.
Dapat dibandingkan antara kedua citra sejenis untuk citra HSV memiliki ciri warna
yang tidak jauh beda, sehingga ketika diuji memiliki kecocokan antara citra satu dengan
citra lainnya.
Citra masukan dan citra acuan harus berukuran sama yaitu 256 x 256 piksel, dan
citra masukan harus sejenis dengan citra yang ada di dalam database. Kelemahan pada
aplikasi ini adalah, tidak sembarang citra masukan dapat diuji kecocokannya, sebab
sebelum memasukkan citra uji, citra harus di Resize terlebih dahulu agar citra uji sama
ukurannya dengan citra yang ada di database.

3.2 Saran

Perlu penelitian lanjutan untuk pencocokan citra sehingga kelemahan-kelemahan


dapat diatasi, diantaranya masalah ukuran citra yang harus sama.

38
DAFTAR PUSTAKA

1. Pencocokan Citra
https://pemrogramanmatlab.com/2017/07/26/pencocokan-citra/

2. Ruang Warna HSV


http://www.charisfauzan.net/2015/01/ruang-warna-hue-saturation-value-
hsv.html

3. Euclidean Distance
http://juti.if.its.ac.id/index.php/juti/article/viewFile/94/90

4. Implementasi Metode RGB to HSV


http://j-ptiik.ub.ac.id/index.php/j-ptiik/article/download/1594/577/

39