SISTEM PENGGERAK KURSOR MELALUI PENGOLAHAN CITRA JARI TANGAN MENGGUNAKAN EMGUCV
Seminar Nasional Informatika 2014
SISTEM PENGGERAK KURSOR MELALUI PENGOLAHAN CITRA
JARI TANGAN MENGGUNAKAN EMGUCV
Muchammad Naseer 1, I Gede Suardika 2, I Gede Putu Teguh Pramudya Ananta 3
1,2,3
STMIK STIKOM Bali
Jln Raya Puputan Renon No 86, Denpasar - Bali
1
naseer@stikom-bali.ac.id, 2 suardika@stikom-bali.ac.id, pramudya21@gmail.com 3
1,2,3
Abstrak
Perancangan ini dilatar belakangi oleh kondisi perkembangan ilmu teknologi yang maju pesat khususnya
dibidang pencitraan digital, disini penelitian menggunakan obyek jari tangan manuisa untuk dikembangkan
agar dapat menggerakan kursor tetikus. penelitian ini menggunakan metode konversi citra digital yang
disebut Threshold, dan menggunakan algoritma Convexity Defect and Hull yang kemudian diterjemahkan ke
dalam bahasa C# menggunakan Software Microsoft Visual Studio C# 2010 dan juga menggunakan library
dari EmguCV yang di khususkan untuk pengolahan citra digital . Hasil perancangan dari sistem ini berupa
aplikasi untuk menggerakan kursor tetikus, namun tidak hanya itu aplikasi ini juga dapat melakukan proses
klik sama seperti fitur yang ada pada tetikus pada umumnya..
Kata kunci : Pengolahan Citra Digital, Convexity Defect & Hull, EmguCV, Threshold
1.
Pendahuluan
Citra digital merupakan konversi citra ke
sinyal digital, dengan dibantu sensor elektronik
membentuk array yang berisikan nilai nilai real
maupun
kompleks
yang
kemudian
di
presentasikan kembali dengan deretan bit tertentu.
Penglihatan adalah indra yang paling peka
sehingga tidak mengejutkan bila citra memainkan
peran paling penting dalam persepsi manusia.
Bagaimanapun, tidak seperti manuasia yang
terbatas dalam band penglihatan spectrum
elektromagnetik
(EM),
mesin
pencitraan
mencangkup hamper semua spectrum EM,
dengan jangkauan mulai dari sinar gamma sampai
gelombang radio. EmguCv adalah salah satu
library pengolahan citra digital multy platform
yang bersifat open source sehingga dapat
dikembangkan oleh siapapun secara bebas namun
terdapat juga versi EmguCv yang berbayar
dengan kemampuan yang lebih tentunya,
berhubungan dengan kecepatan komputasi.
Dengan adanya teknologi olah citra yang ada ini
khususnya library EmguCv, memungkinkannya
membaca pergerakan suatu objek untuk menjadi
suatu titik acuan yang apa bila diproses lebih
lanjut akan dapat menggerakan kursor tetikus dan
teknologi ini dapat menutupi kekurangan dari
kelemahan tetikus yang masih ada sampai saat ini.
Berdasarkan uraian diatas permasalahan diatas
penulis mengangkat topik Penggerak Kursor
Tetikus Dengan Jari Menggunakan Emgu CV.
2.
Metode Penelitian
Pengolahan Citra Digital
Pengolahan citra digital dimulai sekitar
awal tahun 1920-an dari dunia pemberitaan media
cetak, dimana sebuah citra dikirim melalui kabel
bawah laut dari London menuju ke New York.
Proses transmisi ini menghemat waktu
pengiriman dari seminggu menjadi kurang dari
tiga jam. Sebelum dikirim citra terlebih dahulu
dikodekan
dan
setelah
diterima
citra
direkonstruksi ulang.[1].
Citra didasarkan pada radiasi spectrum EM
yang paling familier, khususnya citra X-ray dan
band visual dari spectrum. Gelombang
elektromagnetik dapat dikonsepkan
sebagai
sepasang gelombang sinusoidal dari macammacam panjang gelombang. Jika energi spectral
band dikelompokan per photon maka akan
didapatkan spektrum seperti yang ditunjukan
pada gambar 2.1 jangkauan dari gamma ray
(energy tertinggi) sampai gelombang radio
(energy terendah).[2]
Gambar 1. Spektrum Elektromagnetik
.
406
Seminar Nasional Informatika 2014
YCrCb Color Filtering
Warna kulit telah terbukti menjadi isyarat
yang berguna dan kuat untuk deteksi wajah,
lokalisasi, dan pelacakan[3]. Content filtering,
content-aware video compression, dan colorbalancing applications juga mendapatkan
keuntungan dari deteksi otomatis kulit dalam
gambar.Tujuan dari skin-color detection adalah
membuat sebuah keputusan untuk membedakan
antara kulit dan bukan kulit.Hal ini biasanya
dicapai dengan menggunakan metrik, yang
mengukur jarak dari warna pixel yang diberikan
kepada nilai yang ditetapkan mewakili warna
kulit. Keuntungan yang jelas dari metode tersebut
adalah kesederhanaan aturan skin-detection
memungkinkan pelaksanaan klasifikasi yang
sangat cepat.[3]
YCbCr adalah keluarga dari ruang warna
yang digunakan sebagai bagian dari warnagambar dalam video dan sistem fotografi digital.Y
adalah komponen luma, kadang-kadang disebut
cahaya, yang mewakili kecerahan gambar.Cb dan
Cr adalah blue-difference danred-difference
komponen chroma, chroma adalah sinyal yang
digunakan
dalam
sistem
video
untuk
menyampaikan
informasi
warna
dari
gambar.Berbeda dengan RGB, ruang warna
YCbCr adalah luma-independen, menghasilkan
kinerja yang lebih baik. YCbCr bukan merupakan
ruang warna mutlak, melainkan adalah cara
pengkodean informasi RGB. Warna sebenarnya
ditampilkan tergantung pada primary RGB yang
sebenarnya digunakan untuk menampilkan sinyal.
Morfologi Citra
Kata morphology umumnya menyatakan
cabang ilmu biologi yang mempelajari bentuk dan
struktur hewan dan tumbuh-tumbuhan. Istilah
yang sama juga digunakan disini, dalam konteks
mathematical morphology sebagai tool untuk
mengekstrakan komponen citra yang berguna
dalam representasi dan deskripsi bentuk daerah,
seperti boundaries, skeletons, dan convex hull.
Teknik morfologi juga diguakan untuk pre atau
postprocessing, seperti morfologi filtering,
thinning, dan pruning. Operasi dasar dalam
pemrosesan morfologi adalah dilasi dan erosi,
yang kemudian dikembangkan menjadi opening
dan closing.[3]
Dilasi
Proses dalam dilasi adalah “penumbuhan”
atau “penebalan” dalam citra biner. Pengertian
penebalan ini dikontrol dalam bentuk strel yang
digunakan. Pengertian penebalan ini dikontrol
oleh bentuk strel yang digunakan.
Erosi
Erosi dapat dianggap sebagai operasi
morphological filtering dimana detail citra yang
lebih kecil dari strel akan difilter (dihilangkan)
dari citra. Untuk lebih memahami erosi, maka
dapat dibayangkan bahwa strel digerakan
sepanjang sebelah luar tepi citra (diluar pixel yang
paling pinggir/tepi) dan origin strel ditempatkan
di piksel background yang ditemui tersebut.
Untuk setiap irisan piksel strel dengan daerah di
dalam citra maka pikselirisan tersebut merupakan
hasil erosi dan piksel tersebut ikut bergabung
menjadi background dalam citra biner.[4]
Opening dan Closing
Dua morfologi lain yang penting adalah
opening dan closing. Opening secara umum
menghaluskan
garis-garis
bentuk
obyek,
menghilangkan bagian-bagian yang sempit, dan
menghilangkan penonjolan-penonjolan yang tipis.
Closing secara umum menolak pecahan-pecahan
sempit dan teluk yang panjang dan tipis,
menghilangkan lubang kecil dan mengisi gap
pada garis-garis bentuk (contour).[4] Dengan
pernyataan tersebut dapat didefinisikan bahwa :
Opening : Dilakukan Erosi kemudia dilakukan
Dilasi.
Gambar 2. Ilustrasi Opening
Closing : Dilakukan Dilasi kemudian dilakukan
Erosi..
Gambar 3. Ilustrasi Closing
Convexity Convexity and Defect
Cara lain yang berguna untuk memahami
bentuk dari suatu obyek atau kontur adalah untuk
menghitung convex hullterhadap objek dan
kemudian menghitung ketidak sempurnaan
konveksitas nya. Bentuk dari banyak objek yang
kompleks akan dikarakteristikan dengan baik
berdasarkan ketidak sempurnaan dari objek
tersebut. Convex hull digambarkan sebagai garis
gelap di sekitar tangan. .[5]
Terdapat tiga metode OpenCV penting yang
berhubungan dengan Hull Complex dan
Convexity Defects. Yang pertama adalah
menghitung hull dari contour yang kita telah
identifikasi, dan yang kedua memungkinkan kita
untuk
memeriksa
apakah suatu
kontur
diidentifikasi benar benarkonveks (membuat
lengkungan keluar, menonjol atau cembung).
407
Seminar Nasional Informatika 2014
Yang ketiga menghitung convexity defectspada
contour untuk yang convex hull-nya dikenali.
Convex hull adalah keterangan dari bentuk,
dan ConvexDefect adalah keterangan dari
edge.Hal ini digunakan dalam computer vision
untuk menyederhanakan bentuk kompleks,
terutama untuk memberikan indikasi cepat dari
luasnya obyek. [6]
JARI TANGAN
MANUSIA
WEB CAM
YCrCb THRESHOLD
EROSI
DILASI
ALGORITMA
CONTOUR
CONVEXITY DAN
DEFECT HULL
FUNGSI TETIKUS
TAMPILKAN
Gambar 4. contour convexity dan convexity
defect
Gambar 5. alur umum sistem
Use Case Pengguna
Use Case untuk user antar lain : Show Home
Screen menampilkan menu awal bagi pengguna
atau user.[9] Start Detection memulai program.
Tracking Processing adalah sub bagian dari Start
Detection yang berisi semua parameter dalam
konversi dan tracking obyek. dan Show About
untuk menampilkan informasi perancang aplikasi
ini.
Start Detection
extend
e
in c
lud
l ud
e
inc
Show Home
Screen
Tracking
Processing
lud
i nc
User
e
Alur Umum Sistem
Sistem ini akan memiliki dua form yang
mana form pertama berfungsi sebagai Home
Screen sebagai tampilan untuk memilih menu di
awal program yang berisikan dua menu start
detection untuk menjalankan program utama dan
about untuk menampilkan informasi instansi
tempat penulis mengeyam pendidikan, versi
aplikasi, nomor induk, nama penulis, dan info
email penulis, dan juga tahun ajaran.[7] Form
utama adalah form penentu atau tempat semua
sistem berjalan mulai dari recording gambar
dimana gambar diambil menggunakan webcam
secara real time kemudian detection. Dalam
detection gambar yang tadinya diambil oleh
kamera webcam di konversi menjadi format
YCrCb yang merupakan salah satu format warna
selain RGB, kemudian selanjutnya dilakukan
erosi dan dilasi yaitu penipisan gambar dan
penebalan gambar agar mendapat contour tangan
yang diingin kan sehingga mempermudah
nantinya menerapkan algoritma contour convexity
dan convexity defect. Dibawah ini adalah urutan
proses yang terjadi dalam aplikasi Sistem
Penggerak Kursor Tetikus Dengan Jari
Menggunakan EmguCV :
Show About
Gambar 6. use case diagram
Activity Diagram Home Screen
Diagram Activity HomeScreen menampilkan
aliran aktifitas yang dilakukan oleh pengguna
terhadap Home Screen berikut diagram activity
home screen :
408
Seminar Nasional Informatika 2014
User
Sistem
User
Sistem
WebCam
Start
Start
Start Detection
Cek WebCam
Record
Gambar
Clik Icon
Program
Pesan Error
Show Home
Screen
Tidak
Ada
Ya
Start Program
Preview
End
Image Process
End
Gambar 9. Diagram Activity Start Detection
Gambar 7. Diagram Activity HomeScreen
Activity Diagram Show About
Diagram Activity Show About menampilkan
aliran aktifitas yang dilakukan oleh pengguna
terhadap Show About.[8] Berikut diagram activity
Show About:
User
Activity Diagram Tracking Process
Diagram
Activity
Tracking
Process
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Tracking Process. Berikut
diagram activity Tracking Process :
User
Sistem
WebCam
Start
Sistem
Start Detection
Cek WebCam
Start
Show Home
Screen
Record
Gambar
Show About
Pesan Error
Tidak
Ada
Preview
Image Process
End
YCrCb
Convert
Ya
Show About
Information
End
Erode & Dilate
Struct
Gambar 8. Diagram Activity Show About
Activity Diagram Start Detection
Diagram
Activity
Start
Detection
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Start Detection. Berikut
diagram Activity Start Detection:
Convexcity
Algorithm
Mouse
Function
Gambar 10. Diagram Activity Tracking Process
Sequence Diagram Home Screen
Diagram
Sequence
HomeScreen
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Home Screen[10] berdasarkan
urutan waktu atau timeline berikut Diagram
Sequence HomeScreen :
409
Seminar Nasional Informatika 2014
Sequence Diagram Tracking Process
Diagram Sequence Tracking Process
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Tracking Process berdasarkan
urutan waktu atau timeline berikut Diagram
Sequence Tracking Process :
HomeScreen
User
1.Open()
HomeScreen
StartDetection
User
1.1 HomeScreen_Load()
1.Open()
1.1 btStartProg_Click()
1.2.Record()
1.3.ImageProcessing()
2.Close()
1.4 Start Detection_Load()
2.1 HomeScreen_FormClosing()
1.5 HomeScreen_Load()
2.Close()
Gambar 11. Diagram Sequence Home Screen
Sequence Diagram Show About
Diagram
Sequence
Show
About
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Show About:
2.1 HomeScreen_FormClosing()
Gambar 14. Diagram Sequence Tracking
Process
About
HomeScreen
User
1.Open()
Class Diagram
Diagram class program menggambarkan
struktur dan deskripsi class pada program.
1.1 btAbout_Click()
1.2 About_Load()
1.3 HomeScreen_Load()
2.Close()
2.1 HomeScreen_FormClosing()
Gambar 12. Diagram Sequence Show About
Sequence Diagram Start Detection
Diagram
Sequence
Start
Detection
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Start Detection berdasarkan
urutan waktu atau timeline berikut Diagram
Sequence Start Detection:
HomeScreen
StartDetection
User
1.Open()
1.1 btStartProg_Click()
1.2.Record()
1.3 Start Detection_Load()
1.4 HomeScreen_Load()
2.Close()
2.1 HomeScreen_FormClosing()
Gambar 13. Diagram Sequence Start Detection
410
Gambar 15. Class Diagram
3.
Hasil dan Pembahasan
Halaman utama (Home Screen)
Tampilan menu utama
merupakan
tampilan home screen dari sistem. Setiap
pengguna menjalankan system, maka tampilan
seperti ini yang akan terlihat. Terdapat nama
sistem, yang menjelaskan halaman ini merupakan
halaman system untuk menggerakkan kursor
tetikus dengan citra jari tangan. Terdapat juga
tombol about yang akan menampilkan tentang
system ini. Kemudian terdapat satu tombol lain
dengan tulisan Start Detection, dimana tombol
tersebut merupakan tombol inti dari halaman ini.
Ketika menekan tombol tersebut, akan
dimunculkan sebuah jendela baru yang
Seminar Nasional Informatika 2014
menampilkan visualisasi citra nyata dan citra
yang telah diolah. Halaman utama ini akan
dimunculkan kembali ketika pengguna selesai
melakukan deteksi dan pergerakan kursor tetikus.
terluar dari kontur tangan. Jika 2 jari yang
terdeteksi berarti akan menggerakkan kursor, jika
3 jari yang terdeteksi maka kursor akan
melakukan klik, jika 4 jari yang terdeteksi maka
kursor akan melakukan klik sebanyak 2 kali,
berguna untuk membuka file atau folder, terakhir,
jika 5 jari yang terdeteksi maka kursor akan
melakukan klik kanan.
Gambar 18. Interface Detection dan Tracking
Gambar 16. Interface Home Screen
Halaman Start Detection
Pada halaman ini terdapat dua
visualisasi, kotak visual sisi kiri menampilkan
citra nyata yang didapatkan melalui kamera, kotak
visual pada sisi kanan akan menampilkan hasil
pengolahan citra nyata tersebut. Tedapat juga
sebuah tombol dengan teks finger, dimana tombol
tersebut akan memulai proses deteksi dan
tracking. Ketika tombol tersebut mulai di tekan,
maka
setiap
pergerakan
tangan
akan
mempengaruhi pergerakan kursor pada layar.
Pengujian
Dari percobaan yang dilakukan terhadap
pergerakan kursor melalui citra tangan,
didapatkan hasil sebagai berikut :
Tabel 1. Pengujian menggerakkan kursor
melalui deteksi 2 jari
Pengujian
Berhasil
Uji ke-1
Ya
Uji ke-2
Ya
Uji ke-3
Ya
Uji ke-4
Ya
Uji ke-5
Ya
Tingkat Keberhasilan
100%
Tabel 2. Pengujian kursor klik melalui deteksi
3 jari
Pengujian
Berhasil
Uji ke-1
Ya
Uji ke-2
Tidak
Uji ke-3
Ya
Gambar 17. Interface Start Detection
Uji ke-4
Ya
Halaman Detection dan Tracking
Pada halaman ini, kotak visual pada sisi
kiri telah memunculkan hasil deteksi. Hasil
deteksi didapatkan melalui pengolahan citra pada
kotak visual sisi kanan. Pada sisi kanan terlihat
citra biner yang dimana kontur tangan menjadi
berwarna putih secara keseluruhan, dan
background yang merupakan media berwarna
putih akan berubah menjadi hitam. Pada kotak
visual sisi kiri, akan diberikan tepi berwarna hijau
yang mengikuti kontur tangan, sedangkan garis
berwarna merah tergambar pada sudut-sudut
Uji ke-5
Ya
Tingkat Keberhasilan
80%
Tabel 3. Pengujian kursor klik 2 kali melalui
deteksi 4 jari
Pengujian
Berhasil
Uji ke-1
Tidak
Uji ke-2
Tidak
Uji ke-3
Tidak
Uji ke-4
Ya
411
Seminar Nasional Informatika 2014
Uji ke-5
Ya
Tingkat Keberhasilan
40%
Tabel 4. Pengujian kursor klik kanan melalui
deteksi 5 jari
Pengujian
Berhasil
Uji ke-1
Tidak
Uji ke-2
Ya
Uji ke-3
Ya
Uji ke-4
Ya
Uji ke-5
Ya
Tingkat Keberhasilan
80%
Saran
Saran yang dapat diberikan untuk penelitian ini
adalah :
1. Design tampilan perlu dibuat lebih menarik
lagi.
2. Dilakukan percobaan dengan menggunakan
global thresholding pada proses deteksi,
diharapkan dapat berjalan baik di berbagai
kondisi cahaya.
3. Dibutuhkan peningkatan akurasi pada proses
deteksi dan tracking, sehingga akan lebih
memudahkan
pengguna
dalam
menggunakan sistem ini.
4. Dapat dilakukan simulasi lain misal dengan
merubah deteksi untuk menggerakan kursor
melalui tangan yang menggumpal.
Daftar Pustaka
Pengujian Kinerja Deteksi
[1]
120%
[2]
100%
80%
[3]
60%
40%
20%
[4]
0%
2 Jari
3 Jari
4 Jari
5 Jari
Gambar 19. Grafik hasil pengujian
4.
Kesimpulan dan Saran
Kesimpulan
Kesimpulan yang dapat diambil dari penelitian ini
adalah :
1. Sistem ini mampu mengkonversikan citra
video kedalam citra biner dan mampu
menggerakan
kursor
tetikus
dengan
menggnakan obyek jari tangan manusia.
2. Sistem ini tidak hanya dapat menggerakan
kursor namun dapat juga melakukan klik
kanan dan kiri sebagaimana mestinya fungsi
tetikus pada umumnya.
3. Masih terdapat kendala dengan intensitas
cahaya di dalam sebuah ruangan.
4. Terjadi kemampuan yang kurang baik ketika
melakukan deteksi 4 jari, yang berfungsi
untuk klik 2 kali.
5. Tidak terjadi masalah ketika akan
menggerakkan kursor melalui deteksi 2 jari.
412
[5]
[6]
[7]
[8]
[9]
[10]
Putra, Darma. 2010. Pengolahan Citra
Digital. Yogyakarta. Andi.
Prasetyo, Eko. 2011. Pengolahan Citra
Digital dan Aplikasinya
Menggunakan
Matlab. Yogyakarta. Andi.
Tarek M. Mahmoud. A new fast skin color
detection technique. World Academy of
Science, Engineering and Technology,
43:501–505,2008
Vladimir Vezhnevets, Vassili Sazonov, and
Alla Andreeva. A survey on pixel-based
skin color detection techniques. In
Proceedings of international conference on
computer graphics and vision, pages 85–
92, Moscow, Russia, 2003.Moscow State
University.
Bradski,
Gary
dan
Adrian
Kaehler.2008.Learning
OpenCV.United
States of America: O’Reilly.
Ashwini M. Patil, Sneha U. Dudhane,
Monika B. Gandhi, Nilesh J. 2005. Cursor
Control System Using Hand Gesture
Recognition. India.
Schmuller, Joseph. 1999. Sams Teach
Yourself UML in 24 Hours. Sams
Publishing. United States of America.
Jeffry L Whitten, J. et all, 2004, Edisi 6
Metoda Design dan Analisa Sistem, edisi
bahasa Indonesia,McGrawHill companies
C. Lethbridge, Timothy dan Laganiere,
Robert. 2002. Object-Oriented Software
Engineering. McGraw-Hill, New York.
Booch, Grady, Rumbaugh, James, dan
Jacobson, Ivar. 1999. The Unified
Modeling Language User Guide. AddisonWesley. Canada.
SISTEM PENGGERAK KURSOR MELALUI PENGOLAHAN CITRA
JARI TANGAN MENGGUNAKAN EMGUCV
Muchammad Naseer 1, I Gede Suardika 2, I Gede Putu Teguh Pramudya Ananta 3
1,2,3
STMIK STIKOM Bali
Jln Raya Puputan Renon No 86, Denpasar - Bali
1
naseer@stikom-bali.ac.id, 2 suardika@stikom-bali.ac.id, pramudya21@gmail.com 3
1,2,3
Abstrak
Perancangan ini dilatar belakangi oleh kondisi perkembangan ilmu teknologi yang maju pesat khususnya
dibidang pencitraan digital, disini penelitian menggunakan obyek jari tangan manuisa untuk dikembangkan
agar dapat menggerakan kursor tetikus. penelitian ini menggunakan metode konversi citra digital yang
disebut Threshold, dan menggunakan algoritma Convexity Defect and Hull yang kemudian diterjemahkan ke
dalam bahasa C# menggunakan Software Microsoft Visual Studio C# 2010 dan juga menggunakan library
dari EmguCV yang di khususkan untuk pengolahan citra digital . Hasil perancangan dari sistem ini berupa
aplikasi untuk menggerakan kursor tetikus, namun tidak hanya itu aplikasi ini juga dapat melakukan proses
klik sama seperti fitur yang ada pada tetikus pada umumnya..
Kata kunci : Pengolahan Citra Digital, Convexity Defect & Hull, EmguCV, Threshold
1.
Pendahuluan
Citra digital merupakan konversi citra ke
sinyal digital, dengan dibantu sensor elektronik
membentuk array yang berisikan nilai nilai real
maupun
kompleks
yang
kemudian
di
presentasikan kembali dengan deretan bit tertentu.
Penglihatan adalah indra yang paling peka
sehingga tidak mengejutkan bila citra memainkan
peran paling penting dalam persepsi manusia.
Bagaimanapun, tidak seperti manuasia yang
terbatas dalam band penglihatan spectrum
elektromagnetik
(EM),
mesin
pencitraan
mencangkup hamper semua spectrum EM,
dengan jangkauan mulai dari sinar gamma sampai
gelombang radio. EmguCv adalah salah satu
library pengolahan citra digital multy platform
yang bersifat open source sehingga dapat
dikembangkan oleh siapapun secara bebas namun
terdapat juga versi EmguCv yang berbayar
dengan kemampuan yang lebih tentunya,
berhubungan dengan kecepatan komputasi.
Dengan adanya teknologi olah citra yang ada ini
khususnya library EmguCv, memungkinkannya
membaca pergerakan suatu objek untuk menjadi
suatu titik acuan yang apa bila diproses lebih
lanjut akan dapat menggerakan kursor tetikus dan
teknologi ini dapat menutupi kekurangan dari
kelemahan tetikus yang masih ada sampai saat ini.
Berdasarkan uraian diatas permasalahan diatas
penulis mengangkat topik Penggerak Kursor
Tetikus Dengan Jari Menggunakan Emgu CV.
2.
Metode Penelitian
Pengolahan Citra Digital
Pengolahan citra digital dimulai sekitar
awal tahun 1920-an dari dunia pemberitaan media
cetak, dimana sebuah citra dikirim melalui kabel
bawah laut dari London menuju ke New York.
Proses transmisi ini menghemat waktu
pengiriman dari seminggu menjadi kurang dari
tiga jam. Sebelum dikirim citra terlebih dahulu
dikodekan
dan
setelah
diterima
citra
direkonstruksi ulang.[1].
Citra didasarkan pada radiasi spectrum EM
yang paling familier, khususnya citra X-ray dan
band visual dari spectrum. Gelombang
elektromagnetik dapat dikonsepkan
sebagai
sepasang gelombang sinusoidal dari macammacam panjang gelombang. Jika energi spectral
band dikelompokan per photon maka akan
didapatkan spektrum seperti yang ditunjukan
pada gambar 2.1 jangkauan dari gamma ray
(energy tertinggi) sampai gelombang radio
(energy terendah).[2]
Gambar 1. Spektrum Elektromagnetik
.
406
Seminar Nasional Informatika 2014
YCrCb Color Filtering
Warna kulit telah terbukti menjadi isyarat
yang berguna dan kuat untuk deteksi wajah,
lokalisasi, dan pelacakan[3]. Content filtering,
content-aware video compression, dan colorbalancing applications juga mendapatkan
keuntungan dari deteksi otomatis kulit dalam
gambar.Tujuan dari skin-color detection adalah
membuat sebuah keputusan untuk membedakan
antara kulit dan bukan kulit.Hal ini biasanya
dicapai dengan menggunakan metrik, yang
mengukur jarak dari warna pixel yang diberikan
kepada nilai yang ditetapkan mewakili warna
kulit. Keuntungan yang jelas dari metode tersebut
adalah kesederhanaan aturan skin-detection
memungkinkan pelaksanaan klasifikasi yang
sangat cepat.[3]
YCbCr adalah keluarga dari ruang warna
yang digunakan sebagai bagian dari warnagambar dalam video dan sistem fotografi digital.Y
adalah komponen luma, kadang-kadang disebut
cahaya, yang mewakili kecerahan gambar.Cb dan
Cr adalah blue-difference danred-difference
komponen chroma, chroma adalah sinyal yang
digunakan
dalam
sistem
video
untuk
menyampaikan
informasi
warna
dari
gambar.Berbeda dengan RGB, ruang warna
YCbCr adalah luma-independen, menghasilkan
kinerja yang lebih baik. YCbCr bukan merupakan
ruang warna mutlak, melainkan adalah cara
pengkodean informasi RGB. Warna sebenarnya
ditampilkan tergantung pada primary RGB yang
sebenarnya digunakan untuk menampilkan sinyal.
Morfologi Citra
Kata morphology umumnya menyatakan
cabang ilmu biologi yang mempelajari bentuk dan
struktur hewan dan tumbuh-tumbuhan. Istilah
yang sama juga digunakan disini, dalam konteks
mathematical morphology sebagai tool untuk
mengekstrakan komponen citra yang berguna
dalam representasi dan deskripsi bentuk daerah,
seperti boundaries, skeletons, dan convex hull.
Teknik morfologi juga diguakan untuk pre atau
postprocessing, seperti morfologi filtering,
thinning, dan pruning. Operasi dasar dalam
pemrosesan morfologi adalah dilasi dan erosi,
yang kemudian dikembangkan menjadi opening
dan closing.[3]
Dilasi
Proses dalam dilasi adalah “penumbuhan”
atau “penebalan” dalam citra biner. Pengertian
penebalan ini dikontrol dalam bentuk strel yang
digunakan. Pengertian penebalan ini dikontrol
oleh bentuk strel yang digunakan.
Erosi
Erosi dapat dianggap sebagai operasi
morphological filtering dimana detail citra yang
lebih kecil dari strel akan difilter (dihilangkan)
dari citra. Untuk lebih memahami erosi, maka
dapat dibayangkan bahwa strel digerakan
sepanjang sebelah luar tepi citra (diluar pixel yang
paling pinggir/tepi) dan origin strel ditempatkan
di piksel background yang ditemui tersebut.
Untuk setiap irisan piksel strel dengan daerah di
dalam citra maka pikselirisan tersebut merupakan
hasil erosi dan piksel tersebut ikut bergabung
menjadi background dalam citra biner.[4]
Opening dan Closing
Dua morfologi lain yang penting adalah
opening dan closing. Opening secara umum
menghaluskan
garis-garis
bentuk
obyek,
menghilangkan bagian-bagian yang sempit, dan
menghilangkan penonjolan-penonjolan yang tipis.
Closing secara umum menolak pecahan-pecahan
sempit dan teluk yang panjang dan tipis,
menghilangkan lubang kecil dan mengisi gap
pada garis-garis bentuk (contour).[4] Dengan
pernyataan tersebut dapat didefinisikan bahwa :
Opening : Dilakukan Erosi kemudia dilakukan
Dilasi.
Gambar 2. Ilustrasi Opening
Closing : Dilakukan Dilasi kemudian dilakukan
Erosi..
Gambar 3. Ilustrasi Closing
Convexity Convexity and Defect
Cara lain yang berguna untuk memahami
bentuk dari suatu obyek atau kontur adalah untuk
menghitung convex hullterhadap objek dan
kemudian menghitung ketidak sempurnaan
konveksitas nya. Bentuk dari banyak objek yang
kompleks akan dikarakteristikan dengan baik
berdasarkan ketidak sempurnaan dari objek
tersebut. Convex hull digambarkan sebagai garis
gelap di sekitar tangan. .[5]
Terdapat tiga metode OpenCV penting yang
berhubungan dengan Hull Complex dan
Convexity Defects. Yang pertama adalah
menghitung hull dari contour yang kita telah
identifikasi, dan yang kedua memungkinkan kita
untuk
memeriksa
apakah suatu
kontur
diidentifikasi benar benarkonveks (membuat
lengkungan keluar, menonjol atau cembung).
407
Seminar Nasional Informatika 2014
Yang ketiga menghitung convexity defectspada
contour untuk yang convex hull-nya dikenali.
Convex hull adalah keterangan dari bentuk,
dan ConvexDefect adalah keterangan dari
edge.Hal ini digunakan dalam computer vision
untuk menyederhanakan bentuk kompleks,
terutama untuk memberikan indikasi cepat dari
luasnya obyek. [6]
JARI TANGAN
MANUSIA
WEB CAM
YCrCb THRESHOLD
EROSI
DILASI
ALGORITMA
CONTOUR
CONVEXITY DAN
DEFECT HULL
FUNGSI TETIKUS
TAMPILKAN
Gambar 4. contour convexity dan convexity
defect
Gambar 5. alur umum sistem
Use Case Pengguna
Use Case untuk user antar lain : Show Home
Screen menampilkan menu awal bagi pengguna
atau user.[9] Start Detection memulai program.
Tracking Processing adalah sub bagian dari Start
Detection yang berisi semua parameter dalam
konversi dan tracking obyek. dan Show About
untuk menampilkan informasi perancang aplikasi
ini.
Start Detection
extend
e
in c
lud
l ud
e
inc
Show Home
Screen
Tracking
Processing
lud
i nc
User
e
Alur Umum Sistem
Sistem ini akan memiliki dua form yang
mana form pertama berfungsi sebagai Home
Screen sebagai tampilan untuk memilih menu di
awal program yang berisikan dua menu start
detection untuk menjalankan program utama dan
about untuk menampilkan informasi instansi
tempat penulis mengeyam pendidikan, versi
aplikasi, nomor induk, nama penulis, dan info
email penulis, dan juga tahun ajaran.[7] Form
utama adalah form penentu atau tempat semua
sistem berjalan mulai dari recording gambar
dimana gambar diambil menggunakan webcam
secara real time kemudian detection. Dalam
detection gambar yang tadinya diambil oleh
kamera webcam di konversi menjadi format
YCrCb yang merupakan salah satu format warna
selain RGB, kemudian selanjutnya dilakukan
erosi dan dilasi yaitu penipisan gambar dan
penebalan gambar agar mendapat contour tangan
yang diingin kan sehingga mempermudah
nantinya menerapkan algoritma contour convexity
dan convexity defect. Dibawah ini adalah urutan
proses yang terjadi dalam aplikasi Sistem
Penggerak Kursor Tetikus Dengan Jari
Menggunakan EmguCV :
Show About
Gambar 6. use case diagram
Activity Diagram Home Screen
Diagram Activity HomeScreen menampilkan
aliran aktifitas yang dilakukan oleh pengguna
terhadap Home Screen berikut diagram activity
home screen :
408
Seminar Nasional Informatika 2014
User
Sistem
User
Sistem
WebCam
Start
Start
Start Detection
Cek WebCam
Record
Gambar
Clik Icon
Program
Pesan Error
Show Home
Screen
Tidak
Ada
Ya
Start Program
Preview
End
Image Process
End
Gambar 9. Diagram Activity Start Detection
Gambar 7. Diagram Activity HomeScreen
Activity Diagram Show About
Diagram Activity Show About menampilkan
aliran aktifitas yang dilakukan oleh pengguna
terhadap Show About.[8] Berikut diagram activity
Show About:
User
Activity Diagram Tracking Process
Diagram
Activity
Tracking
Process
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Tracking Process. Berikut
diagram activity Tracking Process :
User
Sistem
WebCam
Start
Sistem
Start Detection
Cek WebCam
Start
Show Home
Screen
Record
Gambar
Show About
Pesan Error
Tidak
Ada
Preview
Image Process
End
YCrCb
Convert
Ya
Show About
Information
End
Erode & Dilate
Struct
Gambar 8. Diagram Activity Show About
Activity Diagram Start Detection
Diagram
Activity
Start
Detection
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Start Detection. Berikut
diagram Activity Start Detection:
Convexcity
Algorithm
Mouse
Function
Gambar 10. Diagram Activity Tracking Process
Sequence Diagram Home Screen
Diagram
Sequence
HomeScreen
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Home Screen[10] berdasarkan
urutan waktu atau timeline berikut Diagram
Sequence HomeScreen :
409
Seminar Nasional Informatika 2014
Sequence Diagram Tracking Process
Diagram Sequence Tracking Process
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Tracking Process berdasarkan
urutan waktu atau timeline berikut Diagram
Sequence Tracking Process :
HomeScreen
User
1.Open()
HomeScreen
StartDetection
User
1.1 HomeScreen_Load()
1.Open()
1.1 btStartProg_Click()
1.2.Record()
1.3.ImageProcessing()
2.Close()
1.4 Start Detection_Load()
2.1 HomeScreen_FormClosing()
1.5 HomeScreen_Load()
2.Close()
Gambar 11. Diagram Sequence Home Screen
Sequence Diagram Show About
Diagram
Sequence
Show
About
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Show About:
2.1 HomeScreen_FormClosing()
Gambar 14. Diagram Sequence Tracking
Process
About
HomeScreen
User
1.Open()
Class Diagram
Diagram class program menggambarkan
struktur dan deskripsi class pada program.
1.1 btAbout_Click()
1.2 About_Load()
1.3 HomeScreen_Load()
2.Close()
2.1 HomeScreen_FormClosing()
Gambar 12. Diagram Sequence Show About
Sequence Diagram Start Detection
Diagram
Sequence
Start
Detection
menampilkan aliran aktifitas yang dilakukan oleh
pengguna terhadap Start Detection berdasarkan
urutan waktu atau timeline berikut Diagram
Sequence Start Detection:
HomeScreen
StartDetection
User
1.Open()
1.1 btStartProg_Click()
1.2.Record()
1.3 Start Detection_Load()
1.4 HomeScreen_Load()
2.Close()
2.1 HomeScreen_FormClosing()
Gambar 13. Diagram Sequence Start Detection
410
Gambar 15. Class Diagram
3.
Hasil dan Pembahasan
Halaman utama (Home Screen)
Tampilan menu utama
merupakan
tampilan home screen dari sistem. Setiap
pengguna menjalankan system, maka tampilan
seperti ini yang akan terlihat. Terdapat nama
sistem, yang menjelaskan halaman ini merupakan
halaman system untuk menggerakkan kursor
tetikus dengan citra jari tangan. Terdapat juga
tombol about yang akan menampilkan tentang
system ini. Kemudian terdapat satu tombol lain
dengan tulisan Start Detection, dimana tombol
tersebut merupakan tombol inti dari halaman ini.
Ketika menekan tombol tersebut, akan
dimunculkan sebuah jendela baru yang
Seminar Nasional Informatika 2014
menampilkan visualisasi citra nyata dan citra
yang telah diolah. Halaman utama ini akan
dimunculkan kembali ketika pengguna selesai
melakukan deteksi dan pergerakan kursor tetikus.
terluar dari kontur tangan. Jika 2 jari yang
terdeteksi berarti akan menggerakkan kursor, jika
3 jari yang terdeteksi maka kursor akan
melakukan klik, jika 4 jari yang terdeteksi maka
kursor akan melakukan klik sebanyak 2 kali,
berguna untuk membuka file atau folder, terakhir,
jika 5 jari yang terdeteksi maka kursor akan
melakukan klik kanan.
Gambar 18. Interface Detection dan Tracking
Gambar 16. Interface Home Screen
Halaman Start Detection
Pada halaman ini terdapat dua
visualisasi, kotak visual sisi kiri menampilkan
citra nyata yang didapatkan melalui kamera, kotak
visual pada sisi kanan akan menampilkan hasil
pengolahan citra nyata tersebut. Tedapat juga
sebuah tombol dengan teks finger, dimana tombol
tersebut akan memulai proses deteksi dan
tracking. Ketika tombol tersebut mulai di tekan,
maka
setiap
pergerakan
tangan
akan
mempengaruhi pergerakan kursor pada layar.
Pengujian
Dari percobaan yang dilakukan terhadap
pergerakan kursor melalui citra tangan,
didapatkan hasil sebagai berikut :
Tabel 1. Pengujian menggerakkan kursor
melalui deteksi 2 jari
Pengujian
Berhasil
Uji ke-1
Ya
Uji ke-2
Ya
Uji ke-3
Ya
Uji ke-4
Ya
Uji ke-5
Ya
Tingkat Keberhasilan
100%
Tabel 2. Pengujian kursor klik melalui deteksi
3 jari
Pengujian
Berhasil
Uji ke-1
Ya
Uji ke-2
Tidak
Uji ke-3
Ya
Gambar 17. Interface Start Detection
Uji ke-4
Ya
Halaman Detection dan Tracking
Pada halaman ini, kotak visual pada sisi
kiri telah memunculkan hasil deteksi. Hasil
deteksi didapatkan melalui pengolahan citra pada
kotak visual sisi kanan. Pada sisi kanan terlihat
citra biner yang dimana kontur tangan menjadi
berwarna putih secara keseluruhan, dan
background yang merupakan media berwarna
putih akan berubah menjadi hitam. Pada kotak
visual sisi kiri, akan diberikan tepi berwarna hijau
yang mengikuti kontur tangan, sedangkan garis
berwarna merah tergambar pada sudut-sudut
Uji ke-5
Ya
Tingkat Keberhasilan
80%
Tabel 3. Pengujian kursor klik 2 kali melalui
deteksi 4 jari
Pengujian
Berhasil
Uji ke-1
Tidak
Uji ke-2
Tidak
Uji ke-3
Tidak
Uji ke-4
Ya
411
Seminar Nasional Informatika 2014
Uji ke-5
Ya
Tingkat Keberhasilan
40%
Tabel 4. Pengujian kursor klik kanan melalui
deteksi 5 jari
Pengujian
Berhasil
Uji ke-1
Tidak
Uji ke-2
Ya
Uji ke-3
Ya
Uji ke-4
Ya
Uji ke-5
Ya
Tingkat Keberhasilan
80%
Saran
Saran yang dapat diberikan untuk penelitian ini
adalah :
1. Design tampilan perlu dibuat lebih menarik
lagi.
2. Dilakukan percobaan dengan menggunakan
global thresholding pada proses deteksi,
diharapkan dapat berjalan baik di berbagai
kondisi cahaya.
3. Dibutuhkan peningkatan akurasi pada proses
deteksi dan tracking, sehingga akan lebih
memudahkan
pengguna
dalam
menggunakan sistem ini.
4. Dapat dilakukan simulasi lain misal dengan
merubah deteksi untuk menggerakan kursor
melalui tangan yang menggumpal.
Daftar Pustaka
Pengujian Kinerja Deteksi
[1]
120%
[2]
100%
80%
[3]
60%
40%
20%
[4]
0%
2 Jari
3 Jari
4 Jari
5 Jari
Gambar 19. Grafik hasil pengujian
4.
Kesimpulan dan Saran
Kesimpulan
Kesimpulan yang dapat diambil dari penelitian ini
adalah :
1. Sistem ini mampu mengkonversikan citra
video kedalam citra biner dan mampu
menggerakan
kursor
tetikus
dengan
menggnakan obyek jari tangan manusia.
2. Sistem ini tidak hanya dapat menggerakan
kursor namun dapat juga melakukan klik
kanan dan kiri sebagaimana mestinya fungsi
tetikus pada umumnya.
3. Masih terdapat kendala dengan intensitas
cahaya di dalam sebuah ruangan.
4. Terjadi kemampuan yang kurang baik ketika
melakukan deteksi 4 jari, yang berfungsi
untuk klik 2 kali.
5. Tidak terjadi masalah ketika akan
menggerakkan kursor melalui deteksi 2 jari.
412
[5]
[6]
[7]
[8]
[9]
[10]
Putra, Darma. 2010. Pengolahan Citra
Digital. Yogyakarta. Andi.
Prasetyo, Eko. 2011. Pengolahan Citra
Digital dan Aplikasinya
Menggunakan
Matlab. Yogyakarta. Andi.
Tarek M. Mahmoud. A new fast skin color
detection technique. World Academy of
Science, Engineering and Technology,
43:501–505,2008
Vladimir Vezhnevets, Vassili Sazonov, and
Alla Andreeva. A survey on pixel-based
skin color detection techniques. In
Proceedings of international conference on
computer graphics and vision, pages 85–
92, Moscow, Russia, 2003.Moscow State
University.
Bradski,
Gary
dan
Adrian
Kaehler.2008.Learning
OpenCV.United
States of America: O’Reilly.
Ashwini M. Patil, Sneha U. Dudhane,
Monika B. Gandhi, Nilesh J. 2005. Cursor
Control System Using Hand Gesture
Recognition. India.
Schmuller, Joseph. 1999. Sams Teach
Yourself UML in 24 Hours. Sams
Publishing. United States of America.
Jeffry L Whitten, J. et all, 2004, Edisi 6
Metoda Design dan Analisa Sistem, edisi
bahasa Indonesia,McGrawHill companies
C. Lethbridge, Timothy dan Laganiere,
Robert. 2002. Object-Oriented Software
Engineering. McGraw-Hill, New York.
Booch, Grady, Rumbaugh, James, dan
Jacobson, Ivar. 1999. The Unified
Modeling Language User Guide. AddisonWesley. Canada.