BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB III ANALISIS DAN PERANCANGAN SISTEM 3.1

Deskripsi Umum Sistem Proses pengendalian pointer dengan mata dapat dijelaskan sebagai berikut

pertama kamera akan mengkalibrasi gambar dari user yang sedang berinteraksi dengan komputer, kemudian gambar tersebut akan diproses untuk dilakukan pengenalan apakah pada gambar tersebut terdapat mata atau tidak. Apabila pada gambar tersebut terdapat mata maka kemudian akan dilakukan deteksi pergerakan wajah dan deteksi pergerakan bola mata. Deteksi pergerakan bola mata ini akan digunakan untuk proses pergerakan pointer. Kemudian dilakukan deteksi kedipan pada kedua mata untuk proses klik pada pointer. Apabila yang berkedip adalah mata sebelah kiri, maka sistem akan melakukan proses klik kiri. Dan apabila yang berkedip adalah mata sebelah kanan, maka sistem akan melakukan proses klik kanan. Proses pengendalian pointer dengan mata digambarkan sebagai berikut :

Citra Digital

User

Preprocessing image

Deteksi Objek (Object Detection)

Webcam Deteksi Kedipan (Blink Detection)

Tracking Mata

Proses klik pada pointer

Tracking Wajah

Proses penggerakan pointer

Gambar 3.1 Proses pengendalian pointer dengan mata

45

46

Tahap – tahap pengendalian pointer dengan mata : 1.

Tahap Kalibrasi Tahap awal posisi user harus tegak lurus dengan kamera. Kemudian kamera akan mengkalibrasi gambar dari user secara real time dan akan diubah menjadi gambar digital. Gambar tersebut akan digunakan untuk tahap selanjutnya.

2.

Tahap Pre-processing Image Pada

tahap

pre-processing

image

dilakukan proses

grayscaling,

tresholding dan scaling untuk dilakukan pengenalan pola. 3.

Tahap Deteksi Objek Pada tahap ini akan dilakukan pendeteksian objek wajah dan mata. Untuk mendeteksi objek wajah dan mata digunakan metode Haar Cascade Classifier.

4.

Tahap Tracking Wajah Tahap berikutnya adalah tracking wajah. Output dari deteksi dan tracking wajah akan digunakan untuk tahap tracking mata.

5.

Tahap Tracking Mata Tahap tracking mata dilakukan untuk menemukan lokasi dari mata. Untuk tracking mata digunakan metode template machine, yang akan digunakan untuk proses menggerakkan pointer. Hasil dari tracking mata akan digunakan pada tahap deteksi kedipan (blink detection).

47

6.

Tahap Deteksi Kedipan Pada tahap ini mata yang sedang di-tracking pada tahap sebelumnya akan dilakukan deteksi kedipan dengan menggunakan operasi morfologi yang akan digunakan untuk proses klik pada pointer.

3.2

Analisis Sistem Analisis sistem dapat didefinisikan sebagai penguraian dari suatu sistem

yang utuh kedalam bagian-bagian komponennnya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan-permasalahan, hambatanhambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. 3.2.1 Analisis Deteksi Objek Analisis deteksi Objek ini dibagi menjadi 4 tahap, yaitu : 1. Tahap pertama adalah tahap kalibrasi yaitu proses pengambilan citra secara real time yang kemudian akan di ubah menjadi citra digital. 2. Tahap kedua adalah tahap pengenalan pola mata yang terdiri dari proses penskalaan (scaling), grayscale dan tresholding. 3. Tahap ketiga adalah integral proyeksi untuk mencari daerah lokasi dari mata. 4. Tahap keempat metode Haar Cascade Classifier untuk mendeteksi mata.

48

3.2.1.1 Kalibrasi Pada analisis ini inputan yang digunakan adalah citra langsung yang dikalibrasi oleh webcam secara real time dan hasilnya berupa citra digital yang akan digunakan untuk tahap berikutnya. Berikut ini adalah proses kalibrasi citra realtime : 0,0

x

2 3

A(3,2,1)

y

Gambar 3.2 Menentukan koordinat-koordinat citra

Misalkan koordinat citra A(3,2,1), kemudian konversi koordinat-koordinat citra ke dalam dunia nyata dengan matriks 3 x 4 seperti berikut :

= (u, v, t)

49

Jika dilanjutkan maka akan diperoleh : u = 3.1 + 2.0 + 1.0 + 1 = 4 v = 3.0 + 2.1 + 1.3 + 1 = 6 t = 3.0 + 2.0 + 1.1 + 1 = 2 Maka koordinat citra adalah : (U,V) dimana U = 4/2 = 2 , V = 6/2 = 3, jadi koordinat citra pada computer yaitu (2,3). 3.2.1.2 Analisis Pengenalan Pola Mata Dalam analisis processing image ini dibagi menjadi 3 tahap, tahap pertama yaitu penskalaan(scaling), tahap kedua proses grayscaling, dan tahap ketiga proses tresholding. Start

fR(x,y) = ∑ [0...255] fG(x,y) = ∑ [0...255] fB(x,y) = ∑ [0...255]

Scaling

Grayscaling

Thresholding

fR(x,y) = ∑ [0...1]

End Gambar 3.3 Alur proses pengenalan pola mata

50

1.

Tahap Penskalaan (Scaling) Citra digital yang telah dikalibrasi secara real time oleh webcam akan

diperkecil dengan menggunakan metode interpolasi. Metode ini menggunakan nilai rata – rata suatu region untuk mewakili region tersebut. Citra asli Citra hasil 121

159

205

88

71

103

231

134

211

177

67

54

81

92

233

146

183

246

199

56

61

191

211

113

98

72

45

153

215

123

222

100

123

111

232

152

63

44

119

211

186

191

124

45

111

100

206

99

Interpolasi

133,81

93,375

86,75

186

132

113,25

147,5

161,5

152,75

138,25

79,75

158,75

Gambar 3.4 Metode interpolasi untuk memperkecil gambar

Nilai piksel pada koordinat pada citra hasil interpolasi diperoleh dengan menghitung nilai rata – rata dari 4 nilai piksel pada citra asli, yaitu : Tabel 3-1 Perhitungan nilai piksel hasil interpolasi

Nilai Piksel Citra Asli (121+159+211+177) / 4 (205+88+67+54) / 4 (71+103+81+92) / 4 (231+134+233+146) / 4 (183+246+98+72) / 4 (199+56+45+153) / 4 (61+191+215+123) / 4 (211+113+222+100) / 4 (123+111+186+191) / 4 (232+152+124+45) / 4 (63+44+111+100) / 4 (119+211+206+99) / 4

Nilai Piksel Citra Hasil Interpolasi 133,81 93,375 86,75 186 132 113,25 147,5 161,5 152,75 138,25 79,75 158,75

51

Berikut ini adalah citra hasil interpolasi : Gambar Asli

Gambar Hasil Scaling

200 x 100 pixel

400 x 200 pixel Gambar 3.5 Penskalaan Citra Menggunakan Metode Interpolasi

2.

Tahap Grayscaling Citra digital yang telah melalui proses penskalaan kemudian diubah

menjadi citra dua warna dengan proses grayscaling. Proses pengubahan citra RGB menjadi citra grayscale adalah sebagai berikut : Misalkan suatu citra mata memiliki nilai : R = 152,75 G = 132 B = 133,81 Maka nilai grayscale dari citra tersebut dapat dihitung seperti di bawah ini :

Berikut ini adalah citra hasil grayscaling : Gambar Asli

Gambar Grayscale

Gambar 3.6 Proses pengubahan citra RGB menjadi citra Grayscale

52

3.

Tahap Tresholding Selanjutnya adalah tahap tresholding yang digunakan untuk mengubah

gambar hasil grayscale menjadi gambar biner. Nilai Treshold dihitung dengan membagi nilai hasil grayscaling pada tahap sebelumnya dengan nilai jumlah derajat keabuan (0 sampai 255 = 256) dibagi dengan 256 (nilai derajat keabuan yang diinginkan). Proses penghitungan nilai treshold untuk citra mata adalah sebagai berikut :

Dimana : x = nilai pembanding threshold w = nilai hasil grayscaling b = 256/a ( a = 256) Untuk mengubah citra RGB menjadi citra biner menggunakan aturan sebagai berikut : 1. Jika nilai piksel citra ≥ x maka nilai piksel menjadi 1 2. Jika nilai piksel citra ≤ x maka nilai piksel menjadi 0 Berikut ini adalah proses pengubahan citra RGB menjadi citra biner : Citra asli

Citra biner

121

159

205

88

71

103

231

134

0

1

1

0

0

0

1

0

211

177

67

54

81

92

233

146

1

1

0

0

0

0

1

1

183

246

199

56

61

191

211

113

1

1

1

0

0

1

1

0

98

72

45

153

215

123

222

100

0

0

0

0

1

1

1

0

0

0

1

1

0

0

0

1

123

111

232

152

63

44

119

211 1

1

0

0

0

0

1

0

186

191

124

45

111

100

206

99

Gambar 3.7 Proses pengubahan citra Grayscale menjadi citra Biner

53

Berikut ini adalah gambar hasil pengubahan citra grayscale menjadi citra biner : Gambar Grayscale

Gambar Biner

Gambar 3.8 Citra hasil thresholding

3.2.1.3 Deteksi Mata Metode yang digunakan untuk mendeteksi mata adalah metode Haar Cascade Classifier. Metode ini merupakan metode yang menggunakan statistical model (classifier). Adapun tahapan-tahapan pada proses deteksi mata adalah sebagai berikut : 1.

Training Data Pada Haar File xml dibuat dengan suatu training yang dikenal dengan Haar Training.

Proses training secara garis besar dapat dilihat dengan melalui bagan pada gambar di bawah. Folder aplikasi berada secara default di Program Files/OpenCV/bin/.

54

Start

Citra Sampel

Persiapan DataSet

Membuat Sample Positif dan Sample Negatif

Haar Training

Membuat File .xml

File .XML

End

Gambar 3.9 Alur Training Data Pada Haar

55

Penjelasan alur dapat dijelaskan sebagai berikut : a.

Persiapan Data Set Data Set terdiri dari 2 buah sample, yaitu : 1. Sample positif, yaitu gambar yang mengandung obyek yang akan dideteksi. Jika kita menginginkan mata untuk dideteksi maka sample positif berisi gambar – gambar mata. 2. Sample negatif yaitu gambar yang tidak mengandung obyek yang akan dideteksi. Seperti gambar latar belakang, wajah dan sebagainya. Masukkan sample

positif

pada

1

direktori,

misalnya

positiveSample/rawd.

ataSedangkan sample negatif, dimasukkan pada /negativeSample. Sample minimal 10 buah untuk mata dalam berbagai posisi. File gambar berupa file *.jpg. b.

Membuat Sample Negatif Sampel negatif berisi gambar obyek selain obyek yang ingin dikenali. Resolusi untuk sampel negatif memiliki resolusi yang sama dengan resolusi kamera. Sampel negative berupa file text yang dibuat menggunakan create_list.bat pada folder /negativeSample untuk mencatatkan nama file sampel negatif pada file negatif.txt.

56

Contoh pencatatan nama file sampel negative pada file negative.txt :

Gambar 3.10 Pencatatan nama file pada sampel negatif

c.

Membuat Sample Positif Sampel positif berisi gambar obyek mata yang dibuat menggunakan createsample utility, data gambar dimasukkan ke dalam file positif.txt. Berikut ini adalah berbagai pilihan createsample utility : Usage: ./createsamples [-info ] [-img ] [-vec ] [-bg ] [-num ] [-bgcolor ] [-inv] [-randinv] [-bgthresh ] [-maxidev <max_intensity_deviation = 40>] [-maxxangle <max_x_rotation_angle = 1.100000>] [-maxyangle <max_y_rotation_angle = 1.100000>] [-maxzangle <max_z_rotation_angle = 0.500000>] [-show [<scale = 4.000000>]] [-w <sample_width = 24>] [-h <sample_height = 24>]

57

Contoh pencatatan nama file sampel positif pada file positif.txt :

Gambar 3.11 Pencatatan nama file pada sampel positif

d.

Haar Training Sampel data yang telah dibuat dilatih menggunakan haartraining utility. Berikut ini adalah listing program pelatihan data dengan haartraining utility : Usage: haartraining -data -vec -bg [-npos ] [-nneg ] [-nstages ] [-nsplits ] [-mem <memory_in_MB = 200>] [-minhitrate <min_hit_rate = 0.995000>] [-maxfalsealarm <max_false_alarm_rate = 0.500000>] [-weighttrimming <weight_trimming = 0.950000>] [-mode ] [-w <sample_width = 24>] [-h <sample_height = 24>] [-bt ] [-err <misclass (default) | gini | entropy>] [-maxtreesplits <max_number_of_splits_in_tree_cascade = 0>] [-minpos <min_number_of_positive_samples_per_cluster = 500>]

58

e.

Membuat file *.xml Setelah melakukan pelatihan data kemudian membuat file *.xml. Berikut ini adalah file .xml hasil training pada citra mata : <size> 20 20 <stages> <_> <_> <_> <_> 8 12 3 8 -1. <_> 8 16 3 4 2. 0 0.0273259896785021 -0.9060062170028687 1 <_> <_> 5 11 8 9 -1. <_> 7 11 4 9 2. 0 -7.0568458177149296e-03 0.9338570833206177 -0.4585995972156525 <_>

2.

Mendeteksi adanya wajah atau tidak pada gambar Fungsi utama untuk mendeteksi wajah cukup sederhana, yaitu dengan

menginisialisasi beberapa variabel, memasukkan gambar, mengubah gambar

59

menjadi grayscale, membuat fungsi deteksi wajah dan menampilkan rectangle di sekitar area citra wajah. Gambar masukan diubah menjadi gambar grayscale seperti gambar dibawah ini :

Citra Masukan

Citra Grayscale

Gambar 3.12 Proses Grayscale pada citra wajah

Berikut ini adalah algoritma untuk mendeteksi wajah : procedure deteksi wajah {I.S : Citra realtime } {F.S : Rectangle pada citra wajah } kamus img, face : Iplimage ScaleFactor : double MinNeighbors : integer Minsize : integer algoritma for face -> total == 0 begin face <- CvHaarClassifierCascade.FromFile("face.xml"); if (faces->total == 0) then img.Rectangle(face.Rect, CvColor.Red, 2, LineType.AntiAlias); endif end endfor endprocedure

60

3.

Menentukan Region Of Interest Region Of Interest adalah daerah persegi panjang pada gambar untuk

memproses gambar lebih lanjut.

Image

Sub Image

Gambar 3.13 Menentukan Region Of Interest

Berikut ini adalah algoritma untuk menentukan ROI pada citra wajah : procedure Region Of Interest {I.S : Rectangle pada citra yang terdeteksi } {F.S : Citra di dalam rectangle } kamus faceroi, img, faces : IplImage x : integer y : integer algoritma if (img.Rectangle == face.Rect )then faceroi <- Cv.SetImageROI(face.Rect); faceroi.CvtColor(lefteye,ColorConversion.Rg bToGray); face.Threshold(lefteye, x, y, ThresholdType.Binary); endif endprocedure

61

4.

Sistem kerja metode Haar Cascade Classifier Alur cara kerja metode Haar Cascade Classifier untuk mendeteksi mata

adalah sebagai berikut : Start

Citra Sub Image

Integral Proyeksi

Menetukan Haar Feature

Membuat Cascade Classifier

Menghitung Nilai Haar Feature Dengan Integral Image

Deskripsi Citra

End

Gambar 3.14 Alur Cara Kerja Metode Haar Cascade Clasifier

62

a.

Integral Proyeksi Setelah wajah terdeteksi, kemudian dilakukan proses integral proyeksi

untuk menentukan daerah lokasi dari mata. Di sini diperkirakan lokasi mata 1/3 dari puncak wajah (beberapa pikel dari atas). Pencarian obyek dimulai pada sub window dengan ukuran skala 24x24 pada seluruh daerah gambar grayscale. Pencarian obyek diulangi kembali dengan ukuran sub window yang telah diskala ulang. Gambar Grayscale

Perkiraan Daerah Lokasi Mata

Gambar 3.15 Perkiraan Daerah Lokasi Mata

b.

Haar Fitur Setelah menentukan daerah lokasi dari mata kemudian dilakukan

pencarian obyek mata. yaitu dengan cara mencari fitur-fitur yang memiliki tingkat pembeda yang tinggi. Hal ini dilakukan dengan mengevaluasi setiap fitur terhadap data latih dengan menggunakan nilai dari fitur tersebut. Fitur yang memiliki batas terbesar antara mata dan bukan mata dianggap sebagai fitur terbaik.

Gambar 3.16 Classifier Menentukan Haar fitur c. Membuat Cascade

63

Berikut ini adalah cara kerja algoritma haar cascade classifier :

Image

T

filter 1 F

T

T filter 2 F

… ... F

T filter n

T

Eyes

F

Non Eyes

Gambar 3.17 Cascade Classifier

Pada klasifikasi tingkat pertama (filter 1), tiap subcitra akan diklasifikasi menggunakan satu fitur. Klasifikasi ini kira-kira akan menyisakan 50% subcitra untuk diklasifikasi di tahap kedua (filter 2). Seiring dengan bertambahnya tingkatan klasifikasi, maka diperlukan syarat yang lebih spesifik sehingga fitur yang digunakan menjadi lebih banyak. Jumlah subcitra yang lolos klasifikasi pun akan berkurang hingga mendekati citra yang ada pada sample (data .xml) atau hingga klasifikasi menyisakan 2% subcitra. Filter 1

Filter 2

Gambar 3.18 Pencarian haar feature

Filter n

64

d.

Integral Image Kotak Haar feature dapat dihitung menggunakan “integral image”. Nilai

dari feature dihitung menggunakan integral image pada gambar dibawah ini : 1 1 1 2 1 1 1 3

3 4 7 3 3 3 2 5

3 4 5 4 2 5 3 3

2 5 2 6 1 8 1 1

1 2 3 5 6 7 8 11

4 9 17 22 26 30 33 41

7 16 29 38 44 53 59 70

9 23 38 53 60 77 84 96

Gambar 3.19 Penghitungan Nilai Haar Feature

Dari perhitungan integral image diatas, maka diperolah nilai integral fitur hitam = { 5,22,38,53 }dan nilai integral fitur putih = { 3,17,29,38 }. Maka nilai haar fitur tersebut adalah : f(x) = (5 + 22 + 38 + 53) – (3 + 17 + 29 + 38) = 31

3.2.2 Analisis Tracking Mata Tracking mata dilakukan untuk proses pergerakan pointer mouse. Tracking mata dilakukan menggunakan metode eye tracking. Sistem akan mencari koordinat pointer , kemudian nilai koordinat tersebut akan dijumlahkan dengan titik tengah koordinat mata. Titik tengah mata diambil dari citra yang ada di dalam region of interest di area mata. Berikut ini adalah citra mata yang dijadikan sebagai acuan untuk menentukan lokasi titik tengah mata :

65

Gambar 3.20 citra mata yang digunakan sebagai acuan

Berikut ini adalah gambar koordinat titik tengah mata : 0,0

x

Xe(n-1),Ye(n-1)

∆Xn, ∆Yn

y

Xen,Yen

Gambar 3.21 Menentukan koordinat titik tengah mata

Kemudian untuk posisi pointer dihitung menggunakan persamaan 2-17. Perhitungan posisi pointer dapat dijabarkan seperti di bawah ini : Misalkan koordinat titik tengah mata (300,500) , maka posisi pointer adalah (300 + 0,500 + 0) = 300 , 500.

66

3.2.3 Analisis Deteksi Kedipan Pada tahap ini sistem akan mendeteksi kedipan mata pengguna untuk digunakan sebagai proses klik pada pointer. Deteksi kedipan dilakukan dengan cara memberikan nilai grayscale dari gambar mata dari tahap sebelumnya, kemudian dilakukan proses tresholding untuk mendapatkan citra biner, sehingga dapat membedakan perubahan piksel yang terjadi pada gambar. Tahap berikutnya yang penting adalah operasi morfologi. Operasi morfologi digunakan untuk menghilangkan noise yang ada. Operasi morfologi yang digunakan adalah operasi erosi dan dilasi. 1.

Erosi Erosi merupakan proses penghapusan titik-titik batas objek menjadi bagian dari latar, berdasarkan structuring element yang digunakan. Pada operasi ini, ukuran obyek diperkecil dengan mengikis sekeliling objek. Contoh operasi Erosi pada citra mata :

Citra asli 1 1 1 1 1

1 0 1 0 1

0 1 0 0 0

0 1 0 0 0

0 1 0 0 0

Hasil erosi 0 1 0 0 0

1 0 1 0 1

1 1 1 1 1

Dierosi dengan 1 1

1 1

1 1 1 1 1

1 1 1 1 1

Gambar 3.22 Proses erosi pada citra mata

1 0 1 0 1

0 1 0 0 0

0 1 0 0 0

1 0 1 0 1

1 1 1 1 1

1 1 1 1 1

67

2.

Dilasi Dilasi merupakan proses penggabungan titik-titik latar menjadi bagian dari objek, berdasarkan structuring element yang digunakan. Proses ini adalah kebalikan dari erosi, yaitu merubah latar disekeliling objek menjadi bagian dari objek tersebut. Citra asli

1 1 1 1 1

1 1 1 1 1

1 0 1 0 1

0 1 0 0 0

0 1 0 0 0

Hasil dilasi 1 0 1 0 1

1 1 1 1 1

1 1 1 1 1

Didilasi dengan 1 1

1 1

1 1 1 1 1

1 0 1 0 1

0 1 0 0 0

0 1 0 0 0

0 1 0 0 0

0 1 0 0 0

1 0 1 0 1

1 1 1 1 1

Gambar 3.23 Proses dilasi pada citra mata

3.3

Deskripsi Kebutuhan Sistem Sebelum membangun sebuah sistem perlu dilakukan analisis kebutuhan

sistem untuk menjamin bahwa sistem yang dibuat sesuai dengan kebutuhan pengguna dan layak untuk dikembangkan. Tahapan analisis kebutuhan sistem dapat dirinci menjadi beberapa tahap guna mempermudah proses analisis secara keseluruhan. Tahapan-tahapan ini sangat penting untuk menjamin keberhasilan pengembangan sistem secara keseluruhan. 3.3.1 Deskripsi Kebutuhan Data Eksternal Kebutuhan data eksternal akan diuraikan secara rinci untuk keperluan perancangan perangkat lunak. Data eksternal yang digunakan pada perangkat lunak pengendali pointer yang akan dibangun yaitu :

68

1.

Face.xml File face.xml berisi data hasil dari training citra wajah yang digunakan

untuk mendeteksi wajah. Adapun isi dari file face.xml adalah sebagai berikut : <size>20 20 <stages> <_> <_> <_> <_>2 7 14 4 -1. <_>2 9 14 2 2. 0 3.7895569112151861e-003 -0.9294580221176148 0.6411985158920288 <_> <_> <_>1 2 18 4 -1. <_>7 2 6 4 3. 0 0.0120981102809310 -0.7181009054183960 0.4714100956916809 <_> <_> <_>5 5 9 5 -1. <_>8 5 3 5 3. 0 1.2138449819758534e-003 -0.7283161282539368 0.3033069074153900 <stage_threshold>-1.3442519903182983 <arent>-1 -1 <_>

69

2.

Lefteye.xml File lefteye.xml berisi data hasil dari training citra mata kiri yang

digunakan untuk mendeteksi mata kiri. Adapun isi dari file lefteye.xml adalah sebagai berikut : <size> 20 20 <stages> <_> <_> <_> <_> 8 12 3 8 -1. <_> 8 16 3 4 2. 0 0.0273259896785021 -0.9060062170028687 1 <_> <_> 5 11 8 9 -1. <_> 7 11 4 9 2. 0 -7.0568458177149296e-03 0.9338570833206177 -0.4585995972156525 <_> <_> <_> 8 7 11 12 -1. <_> 8 11 11 4 3. 0 -0.1253869980573654 0.7246372103691101 1 <_> <_> 1 0 7 8 -1. <_>

70

3.

Righteye.xml File righteye.xml berisi data hasil dari training citra mata kanan yang

digunakan untuk

mendeteksi mata kanan. Adapun isi dari file righteye.xml

adalah sebagai berikut : <size> 20 20 <stages> <_> <_> <_> <_> 8 7 3 12 -1. <_> 8 11 3 4 3. 0 -0.0482105500996113 1 -0.8614044785499573 <_> <_> 8 7 8 3 -1. <_> 10 9 4 3 2. 1 -0.0415761992335320 0.9176905751228333 -0.2128400951623917 <_> <_> <_> 9 13 2 6 -1. <_> 9 16 2 3 2. 0 9.3528684228658676e-03 -0.6978576779365540 1 <_> <_> 8 2 12 8 -1. <_>

71

3.3.2 Deskripsi Kebutuhan Fungsional Kebutuhan fungsional dianalisis dengan memodelkan sistem. Pemodelan yang digunakan untuk memodelkan perangkat lunak pengendali pointer ini adalah pemodelan terstruktur. Perangkat lunak ini dimodelkan menggunakan DFD (Data Flow Diagram).Tools yang digunakan adalah Diagram Konteks, Data Flow Diagram dan Spesifikasi Proses yang dibuat menggunakan Microsoft Visio 2007 sebagai perangkat lunak yang digunakan. 3.3.2.1 Diagram Konteks Pengendali Pointer Diagram konteks adalah diagram yang menggambarkan masukan, proses dan keluaran secara umum yang terjadi pada sistem. Berikut ini adalah diagram konteks perangkat lunak pengendali pointer : Data buka aplikasi, Citra realtime, Perintah mulai Nilai brightness & contrast, Perintah petunjuk penggunaan, Perintah tentang

Kamera

Nilai brightness & contrast kamera, Status kamera

Pengendali Pointer

Pengguna

Info buka aplikasi, Info pergerakan pointer, Info klik pada pointter, Nilai brightness & contrast baru, Info petunjuk penggunaan, Info tentang

Nilai integral Citra wajah

Face.xml

Nilai integral Citra mata kiri

Lefteye.xml

Nilai integral Citra mata kiri

Gambar 3.24 Diagram Konteks Pengendali Pointer

Righteye.xml

72

3.3.2.2 Data Flow Diagram ( DFD ) Data flow diagram merupakan model dari sistem untuk menggambarkan pembagian sistem ke modul yang lebih kecil. DFD sering digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana data tersebut mengalir atau lingkungan fisik dimana data tersebut akan disimpan. Salah satu keuntungan DFD adalah memudahkan pemakai atau user yang kurang menguasai bidang komputer untuk mengerti sistem yang akan dikerjakan.

1.

DFD Level 1 Pengendali Pointer

DFD Level 1 dibuat jika pada diagram konteks masih terdapat proses yang harus dijelaskan lebih rinci. Pada DFD Level 1 terdapat 5 proses yaitu buka aplikasi, deteksi objek, pengaturan, petunuk penggunaan dan tentang. DFD level 1 pengendali pointer digambarkan sebagai berikut :

73

Data buka aplikasi 1 Buka Aplikasi

Info buka aplikasi

Status kamera

Kamera

Lefteye.xml Status kamera aktif Nilai integral citra mata kiri Perintah mulai, Citra Realtime, Pergerakan mata, Kedipan mata kanan, Kedipan mata kiri

2 Deteksi Objek

Nilai integral citra wajah

Face.xml

Nilai integral citra mata kanan Righteye.xml

Info pergerakan pointer, Info klik pada pointer

Nilai brightness & contrast

3

Pengguna

Nilai brightness & contrast kamera Pengaturan

Nilai brightness & contrast baru Perintah Petunjuk penggunan Info petunjuk penggunaan

4 Petunjuk Penggunaan

Perintah tentang 5 Info tentang

Tentang

Gambar 3.25 DFD Level 1 Pengendali Pointer

2.

DFD Level 2 Proses Deteksi Objek Pada DFD Level 2 proses deteksi objek terdapat 7 proses yaitu kalibrsi

kamera, processing image, deteksi wajah, deteksi mata, region of interest, deteksi pergerakan mata dan deteksi kedipan mata. DFD Level 2 proses deteksi objek digambarkan sebagai berikut :

74

2.4 Face.xml

2.2

Nilai integral Citra wajah

Rectangle pada Citra wajah

ROI Wajah

2.3

Citra Biner

Processing Image

Citra wajah pada sub window

Deteksi Wajah

lefteye.xml

2.6 Citra Digital

2.1 Kalibrasi Kamera

ROI Mata

2.5

Rectangle pada Citra mata kanan dan kiri

Deteksi Mata

Nilai integral Citra mata kanan Nilai integral Citra mata kanan righteye.xml

Sub window citra mata kanan dan kiri

Sub window pada Citra mata kanan dan kiri

2.7

2.8

Deteksi Pergerakan Mata

Deteksi Kedipan Mata

Info klik pada pointer Info pergerakan pointer

Pergerakan mata

Kedipan mata kanan, Kedipan mata kiri

Pengguna Citra Realtime, Perintah mulai

Gambar 3.26 DFD Level 2 Proses Deteksi Objek

3.

DFD Level 3 Proses Processing Image Pada DFD Level 2 proses processing image terdapat 3 proses yaitu

scaling, grayscaling dan thresholding. DFD Level 2 proses processing image digambarkan sebagai berikut :

75

Citra Digital

2.2.1

Citra hasil scaling

Scaling

Citra grayscale

2.2.2 Grayscaling

2.2.3

Citra Biner

Thresholding

Gambar 3.27 DFD Level 2 Proses Processing Image

4.

DFD Level 3 Proses Deteksi Kedipan Mata Pada DFD Level 3 proses deteksi kedipan mata terdapat 3 proses yaitu

erosi, dilasi, dan deskripsi citra. DFD Level 3 proses deteksi kedipan mata digambarkan sebagai berikut :

Sub window pada Citra mata kanan dan kiri

2.8.1

Citra mata hasil erosi

Erosi

2.8.2 Dilasi

Citra mata hasil dilasi

Kedipan mata kanan, Kedipan mata kiri

2.8.3 Pengguna

Info klik pada pointer

Deskripsi Kedipan

Gambar 3.28 DFD Level 3 Proses Deteksi Kedipan

76

3.3.2.3 Spesifikasi Proses

Tabel 3-2 Spesifikasi Proses

No

Proses Nomor Proses Nama Proses Deskripsi Input Output Proses

1

Logika Proses

Nomor Proses Nama Proses Deskripsi Input Output Proses

2

Logika Proses

Keterangan 1 Buka Aplikasi Memeriksa koneksi kamera dengan sistem Kamera Tampilan awal sistem Periksa ketersediaan kamera 1. Proses menerima request buka aplikasi dari pengguna 2. Proses menerima status kamera 3. Jika kamera aktif, proses akan menampilkan tampilan utama perangkat lunak. 4. Jika kamera tidak aktif, request menjalankan aplikasi ditolak, tampilan utama sistem tidak ditampilkan. 2 Deteksi Objek Mendeteksi objek yang dikalibrasi oleh kamera Citra realtime Pergerakan pointer, klik kiri dan klik kanan pada pointer User melakukan pergerakan mata dan kedipan mata. 1. Proses menerima perintah mulai dan citra realtime dari pengguna. 2. Proses akan mendeteksi citra realtime tersebut dan mencocokkan nilai fitur pada citra tersebut dengan nilai fitur yang ada di data store 3. Jika terdeteksi wajah, proses akan membuat kotak persegi di sekitar area citra wajah, kemudian mendeteksi mata pada kotak persegi tersebut 4. Jika terdeteksi mata, proses akan membuat kotak persegi di area mata kanan dan mata kiri, kemudian mendeteksi pergerakan dan kedipan mata. 5. Jika pengguna melakukan pergerakan mata, maka proses akan melakukan pergerakan pada pointer sesuai dengan arah pandangan mata pengguna.

77

No

Proses

Nomor Proses Nama Proses Deskripsi Input Output Proses 3

Logika Proses

Nomor Proses Nama Proses Deskripsi

4

Input Output Proses

Logika Proses Nomor Proses Nama Proses Deskripsi 5

Input Output Proses

Keterangan 6. Jika pengguna melakukan kedipan mata kiri maka proses akan melakukan klik kiri pada pointer 7. Jika pengguna melakukan klik kanan, maka proses akan melakukan klik kanan pada pointer 3 Pengaturan Mengatur nilai brightness & contrast pada kamera Nilai brightness & contrast Nilai brightness & contrast baru Nilai brightness & contrast diubah sesuai dengan keinginan pengguna 1. Proses menerima nilai brightness & contrast pada kamera 2. Pengguna meng-input nilai brightness & contrast 3. Jika pengguna mengklik tombol simpan, nilai brightness & contrast yang di-input oleh pengguna akan tersimpan dalam sistem. 4. Jika pengguna mengklik tombol batal, nilai brightness & contrast kembali menjadi nilai default. 4 Petunjuk penggunaan Menampilkan informasi petunjuk penggunaan aplikasi Perintah petunjuk penggunaan Informasi petunjuk penggunaan aplikasi Sistem menampilkan informasi petunjuk penggunaan aplikasi. 1. Proses menerima perintah petunjuk penggunaan dari pengguna 2. Proses akan menampilkan informasi petunjuk penggunaan aplikasi 5 Tentang Menampilkan informasi tentang pembuat aplikasi Perintah tentang Informasi tentang pembuat aplikasi Sistem menampilkan informasi tentang pembuat aplikasi

78

No

Proses Logika Proses Nomor Proses Nama Proses Deskripsi

6

Input Output Proses Logika Proses Nomor Proses Nama Proses Deskripsi

7

Input Output Proses

Logika Proses

Nomor Proses Nama Proses Deskripsi Input Output Proses 8

Logika Proses

9

Nomor Proses Nama Proses Deskripsi Input Output

Keterangan 1. Proses menerima perintah tentang dari pengguna 2. Proses akan menampilkan informasi tentang 2.1 Kalibrasi Kamera Mengkalibrasi objek yang berada di depan kamera Citra Realtime Citra Digital Mengubah citra realtime menjadi citra digital 1. Proses menerima citra realtime 2. Proses akan mentransformasikan objek tersebut ke dalam dunia maya 2.2 Processing Image Memproses citra yang telah dikalibrasi oleh kamera Citra digital Citra biner Melakukan scaling, grayscaling dan thresholding 1. Citra telah diubah menjadi citra digital 2. Mengubah penskalaan ( scaling ) untuk memperkecil ukuran citra 3. Mengubah citra menjadi citra grayscale 4. Mengubah citra grayscale menjadi citra biner 2.3 Deteksi Wajah Mendeteksi wajah pada objek yang dikalibrasi Citra biner Citra wajah pada sub window Menampilkan kotak persegi panjang di sekitar citra wajah yang terdeteksi 1. Citra digital telah diubah menjadi citra biner 2. Proses menghitung nilai fitur pada citra biner. 3. Proses mencocokkan nilai fitur pada citra dengan fitur citra wajah pada file face.xml 4. Jika terdapat citra wajah, maka sistem menampilkan kotak persegi panjang disekitar area wajah 2.4 ROI wajah Menentukan sub window pada citra wajah Citra wajah pada kotak persegi panjang Sub window

79

No

Proses Proses

Logika Proses

Nomor Proses Nama Proses Deskripsi Input Output Proses

10

Logika Proses

Nomor Proses Nama Proses Deskripsi Input Output 11

Proses

Logika Proses

Keterangan Menentukan sub window dari kotak persegi panjang yang tampil pada citra wajah 1. Kotak persegi panjang pada citra wajah telah ditampilkan 2. Proses menentukan citra sub window, yaitu citra wajah yang ada di dalam kotak persegi panjang. 2.5 Deteksi Mata Mendeteksi mata pada objek yang dikalibrasi Citra wajah pada sub window Citra mata yang terdeteksi pada sub window Menampilkan kotak persegi panjang di sekitar citra mata yang terdeteksi, untuk menentukan sub window pada citra mata 1. Proses menerima citra wajah pada sub window 2. Proses mengubah citra wajah yang terdeteksi menjadi citra integral 3. Proses memperkirakan posisi mata pada citra 4. Membuat fitur ke-1 sampai fitur ke-n menggunakan cascade classifier 5. Nilai tiap fitur dihitung menggunakan integral image. 6. Proses akan mencocokkan nilai fitur pada mata kanan maupun mata kiri pada file lefteye.xml dan righteye.xml 7. Jika terdapat citra mata yang sesuai dengan nilai fitur pada sample, maka sistem menampilkan kotak persegi panjang disekitar area mata 2.6 ROI Mata Menentukan sub window pada citra mata Citra mata pada kotak persegi panjang Sub window pada citra mata Menentukan sub window dari kotak persegi panjang yang tampil pada citra mata 1. Kotak persegi panjang pada citra mata telah ditampilkan 2. Proses akan menentukan citra sub window, yaitu citra mata yang ada di dalam kotak persegi panjang.

80

No

12

Proses Nomor Proses Nama Proses Deskripsi Input Output Proses

Logika Proses

Nomor Proses Nama Proses Deskripsi Input Output Proses 12

13

Logika Proses

Nomor Proses Nama Proses Deskripsi Input Output Proses Logika Proses

14

Nomor Proses Nama Proses Deskripsi Input Output Proses Logika Proses

Keterangan 2.7 Deteksi Pergerakan Mata Melakukan pergerakan pointer Citra mata pada sub window, pergerakan mata Pergerakan pointer Mendeteksi pergerakan mata 1. Proses menerima citra mata pada sub window 2. Pengguna melakukan pergerakan mata 3. proses mendeteksi pergerakan mata, kemudian melakukan pergerakan pointer sesuai dengan arah pandangan mata pengguna. 2.8 Deteksi Kedipan Mata Melakukan klik kiri dan klik kanan pada pointer Citra mata pada sub window Klik pada pointer Mendeteksi kedipan mata untuk proses klik kiri dan klik kanan pada pointer 1. Proses menerima citra mata pada sub window 2. Pengguna melakukan kedipan mata 3. Proses mendeteksi kedipan mata, kemudian melakukan klik pada pointer. 4. Jika pengguna mengedipkan mata kiri, sistem melakukan klik kiri pada pointer. 5. Jika pengguna mengedipkan mata kanan, sistem melakukan klik kanan pada pointer. 2.2.1 Scaling Memperkecil ukuran citra yang masuk Citra berukuran 1024 x 768 Citra berukuran 600 x 400 Memperkecil pixel-pixel pada citra masukan 1. Proses menerima citra berukuran 1024 x 768 2. Proses memperkecil ukuran citra menjadi 600 x 400 2.2.2 Grayscale Mengubah citra RGB menjadi citra grayscale Citra RGB Citra Grayscale Menghitung nilai grayscale dari citra RGB 1. Proses menerima citra RGB 2. Mengubah citra RGB menjadi citra grayscale

81

No

15

Proses Nomor Proses Nama Proses Deskripsi Input Output Proses

Nomor Proses Nama Proses Deskripsi Input Output

Keterangan 2.2.3 Thresholding Mengubah citra grayscale menjadi citra biner Citra grayscale Citra biner Menghitung nilai biner dari citra grayscale 1. Citra RGB telah diubah menjadi citra grayscale 2. Proses mengubah citra grayscale menjadi citra biner 2.8.1 Erosi Melakukan proses erosi pada citra mata Citra mata pada sub window, kedipan mata kiri atau kanan Citra hasil erosi Melakukan proses erosi untuk mengetahui adanya perubahan nilai piksel pada citra mata 1. Proses menerima perintah kedipan mata kanan atau kiri 2. Proses menerima citra mata pada sub window 3. Citra mata pada sub window diubah menjadi citra biner 4. Melakukan proses erosi pada citra mata 2.8.2 Dilasi Melakukan proses dilasi pada citra mata hasil erosi Citra mata hasil erosi Citra mata hasil dilasi Melakukan proses dilasi untuk mengembalikan nilai piksel pada citra mata hasil erosi 1. Proses menerima citra hasil erosi, kemudian melakukan proses dilasi pada citra hasil erosi 2. Proses akan mengembalikan nilai piksel pada citra mata hasil erosi 2.8.3 Deskripsi Citra Mendeskripsikan citra mata hasil proses dilasi Citra mata hasil dilasi Klik pada pointer

Proses

Mendeskripsikan citra hasil proses dilasi

Logika Proses Nomor Proses Nama Proses Deskripsi Input

16

Output Proses

Logika Proses

Nomor Proses Nama Proses Deskripsi

17

Input Output Proses

Logika Proses

18

82

No

Proses

Logika Proses

Keterangan 1. Proses menerima citra hasil dilasi kemudian memeriksa apakah terjadi perubahan piksel yang besar pada citra mata 2. Jika terjadi perubahan piksel pada citra mata kiri, proses akan melakukan proses klik kiri pada pointer. 3. Jika terjadi perubahan piksel pada citra mata kanan, proses akan melakukan proses klik kanan pada pointer.

3.3.3 Deskripsi kebutuhan non-fungsional Analisis kebutuhan non-fungsional akan diuraikan secara rinci untuk keperluan perancangan parangkat lunak. Kebutuhan antarmuka eksternal tersebut meliputi antarmuka pemakai, antarmuka perangkat keras, dan antarmuka perangkat lunak. 3.3.3.1 Antarmuka Pemakai Pengguna Perangkat lunak pengendali pointer yang akan dibangun ini adalah pengguna yang mengalami cacat fisik pada bagian motorik. 3.3.3.2 Antarmuka Perangkat Keras Pembangunan perangkat lunak pengendali pointer ini memerlukan beberapa perangkat keras seperti : a.

Komputer dengan spesifikasi sebagai berikut : 1.

Prosessor AMD Athlon 3200+ 2.01 GHz.

2.

RAM 1 GB.

83

b.

Webcam yang digunakan untuk proses deteksi wajah dan mata untuk pengenalan pola, tracking wajah dan mata untuk menggerakkan pointer, dan deteksi kedipan (blink detection) untuk proses klik pada pointer.

3.3.3.1 Antarmuka Perangkat Lunak Sebelum menggunakan perangkat lunak pengendali pointer ini user harus terlebih dahulu menginstalasi aplikasi pendukung untuk mengaktifkan webcam. Adapun

perangkat lunak pendukung pembangunan perangkat lunak

pengendali pointer ini antara lain : 1.

Sistem Operasi Windows XP Profesional.

2.

Microsoft Visual Visual Studio 2010, digunakan untuk pengkodean sistem.

3.

Microsift Visio 2007, digunakan untuk memodelkan sistem

4.

OpenCV 2.2, digunakan sebagai library tambahan untuk pengkodean sistem. Adapun file extensi yang digunakan sebagai library dalam pembangunan

perangkat lunak pengendali pointer ini antara lain : 1.

OpenCvSharp.dll, digunakan untuk koneksi ke library OpenCV.

2.

cv210.dll, digunakan untuk pengolahan gambar secara real-time dan menyediakan

fungsi-fungsi

untuk

pengolahan

data

dan

aplikasi

multimedia. Library ini juga mencakup tipe data dan struktur data dalam aturan penamaan setiap operasi.

84

3.

cvaux210.dll, digunakan untuk menjalankan program pada sistem operasi windows.

4.

cxcore210.dll, digunakan untuk koneksi ke kamera atau perangkat lunak lain.

5.

highgui210.dll, digunakan untuk menampilkan fungsi-fungsi pada aplikasi berbasis form.

3.3.4 Deskripsi Kebutuhan Perancangan Sistem

Tabel 3-3 Deskripsi Kebutuhan Perancangan Sistem

Kriteria Performansi

Tuntutan Harus dapat mendeteksi objek dengan jarak maksimal 40 cm dari kamera Perangkat lunak yang dibuat dapat dioperasikan pada komputer berspesifikasi minimal Intel Pentium 3 atau yang setara dengan jumlah RAM minimal 256 MB

Batasan memory

Maksimal jumlah memori yang digunakan oleh perangkat lunak tidak boleh melebihi 50 MB

Antar muka

Tulisan pesan dan menu perintah yang ditampilkan harus cukup jelas terbaca oleh pengguna dalam keadaan terang maupun gelap dengan menggunakan warna tulisan dan latar belakang yang tingkat kontrasnya tinggi dengan jenis huruf Arial berukuran minimal 12 poin. Modus grafis yang digunakan adalah VGA dengan resolusi minimal 640*480 dengan kedalaman warna 8 bit atau 256 warna Terdapat berbagai operasi dalam satu tampilan

85

3.3.5 Atribut Kualitas Perangkat Lunak Tabel 3-4 Atribut Kualitas Perangkat Lunak

Kriteria Kualitas Keandalan

Tuntutan Kualitas Perangkat lunak dapat dijalankan pada komputer dengan spesifikasi rendah Perangkat lunak dapat digunakan untuk mengendalikan pointer pada semua aplikasi.

Ketersediaan

Bahasa pemrograman yang digunakan adalah bahasa yang kecil dan memungkinkan untuk dikembangkan. Menggunakan antarmuka perangkat keras yang sudah standar dan tersedia banyak dipasaran yaitu webcam.

Kepemindahan Perangkat lunak dibuat dengan bahasa pemrograman yang dapat bekerja di berbagai arsitektur komputer.

3.3.6 Batasan Perancangan Sistem Batasan-batasan pada tahap perancangan Perangkat Lunak Pengendali Pointer ini adalah : 1.

Aplikasi ini hanya dapat mengendalikan pointer menggunakan mata, tidak dapat mengendalikan pointer dengan anggota tubuh yang lain.

2.

Perancangan yang dikembangkan meliputi perancangan prosedural, kelas dan interface.

86

3.4

Perancangan sistem

3.4.1 Perancangan Lingkungan Implementasi Spesifikasi lingkungan pengembangan perangkat lunak pengendali pointer dengan mata akan diuraikan pada tabel 3-5 dibawah ini. Spesifikasi ini meliputi Sistem Operasi, Development Tools dan Bahasa pemrograman yang dipakai. Tabel 3-5 Perancangan Lingkungan Implementasi

Pengendali pointer dengan mata

Spesifikasi

Sistem Operasi

Windows XP

Development Tools

Microsoft Visual Studio 2010

Bahasa Pemrograman

C#

Library

OpenCV 2.2

3.4.2 Perancangan Struktur Program Pengendali Pointer Struktur program merepresentasikan organisasi komponen program atau modul secara hirarki. Notasi yang digunakan merepresentasikan hirarki tersebut menggunakan diagram pohon. Fungsi pada struktur direpresentasikan dengan simbol persegi, input dan output digambarkan dengan anak panah. Adapun struktur program untuk perangkat lunak pengendali pointer dengan mata dapat dilhat pada gambar di bawah ini :

87

Pengendali Pointer

Citra Realtime

Mulai

Berhenti

Pengaturan

Petunjuk Penggunaan

Tentang

Keluar

Kalibrasi Kamera

Citra Digital

Deteksi Objek

Deteksi Wajah

Deteksi Mata

Deteksi Pergerakan Mata

Deteksi Kedipan Mata

Pergerakan Pointer

Pointer Klik

Gambar 3.29 Struktur Program Pengendali Pointer

3.4.3 Perancangan Antarmuka Perancangan antarmuka merupakan sebuah penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi. Adapun perancangan antarmuka perangkat lunak pengendali pointer adalah sebagai berikut :

88

3.4.3.1 Perancangan Antarmuka Form MenuUtama 1.

Desain Form MenuUtama Form menu utama merupakan form yang digunakan sebagai tampilan pada

saat pengguna membuka aplikasi. Berikut ini adalah desain tampilan form aplikasi : -Klik Mulai untuk melakukan pergerakan pointer dan melakukan klik pada pointer

F01

Mulai

Berhenti

Petunjuk Penggunaa n

Pengaturan

Tentang

Keluar

-Klik Berhenti untuk berhenti melakukan pergerakan pointer dan melakukan klik pada pointer -Klik Pengaturan untuk menuju ke F02

Picture Box -Klik Petunjuk Penggunaan untuk menuju ke F03

610 x 365

-Klik Tentang untuk menuju ke F04 -Klik Keluar untuk menuju ke M01 Copyright @ 2011 Aditya Eka Pramana

Keterangan : Nama Form Ukuran layer Jenis Font Background

: : : :

F01 Default Window Size BatmanForeverAlternate Yellow

Gambar 3.30 Perancangan Antarmuka MenuUtama

2.

Deskripsi Objek Form Menu Utama Berikut ini adalah deskripsi objek form MenuUtama: Tabel 3-6 Deskripsi objek form MenuUtama

Objek Mulai Berhenti

Jenis Button Button

Keterangan Memulai mendeteksi Berhenti mendeteksi

89

Objek Pengaturan Petunjuk penggunaan Tentang Keluar Picture Box

Jenis Button Button Button Button PicturBox

Keterangan Konfigurasi sistem (F02) Petunjuk Penggunaan (F03) Link ke form Tentang (F04) Keluar Aplikasi (F05) Tampilan objek yang dideteksi

3.4.3.1 Perancangan Antarmuka Form Pengaturan 1.

Desain Form Pengaturan Form pengaturan merupakan form yang digunakan untuk mengkonfigurasi

pengaturan suara dan pengaturan kamera. Berikut ini adalah desain tampilan form pengaturan : -- Klik Simpan untuk menyimpan pengaturan kembali ke F01

F02 Pengaturan Kamera

-- Klik Batal untuk kembali ke F01

Brightness

11 0

100

0

100

Contrast

10

Simpan

Keterangan : Nama Form Ukuran layer Jenis Font Background

: : : :

Batal

F02 Default Window Size BatmanForeverAlternate Yellow

Gambar 3.31 Perancangan Antarmuka Pengaturan

90

2.

Deskripsi objek Form Pengaturan Berikut ini adalah deskripsi objek form pengaturan : Tabel 3-7 Deskripsi objek form pengaturan

Objek Brightness Contrast Simpan

Jenis Control Box Control Box Button

Batal

Button

Keterangan Mengatur Brightness Mengatur Contrast Menyimpan pengaturan dan kembali ke (F01) Kembali ke (F01)

3.4.3.1 Perancangan Antarmuka Form Petunjuk 1.

Desain Form Petunjuk Form petunjuk penggunaan merupakan form yang digunakan untuk

menampilkan petunjuk penggunaan aplikasi. Berikut ini adalah desain tampilan form petunjuk penggunaan : -Klik Tutup untuk

F03

kembali ke F01

Petunjuk Penggunaan

Tutup Keterangan : Nama Form Ukuran layer Jenis Font Background

: : : :

F03 Default Window Size Arial White

Gambar 3.32 Perancangan Antarmuka Petunjuk Penggunaan

91

2.

Deskripsi objek Form Petunjuk Berikut ini adalah deskripsi objek form petunjuk penggunaan : Tabel 3-8 Deskripsi objek form petunjuk

Objek Petunjuk Penggunaan

Jenis Pdf

Tutup

Button

Keterangan Deskripsi petunjuk penggunaan sistem Kembali ke (F01)

3.4.3.1 Perancangan Antarmuka Form Tentang 1.

Desain Form Tentang Form tentang merupakan form yang digunakan untuk menampilkan

tentang pembuat aplikasi. Berikut ini adalah desain tampilan form tentang : -Klik Tutup untuk

F04

kembali ke F01

Tentang Pembuat

Tutup Keterangan : Nama Form Ukuran layer Jenis Font Background

: : : :

F04 Default Window Size Arial Yellow

Gambar 3.33 Perancangan Antarmuka Tentang

92

2.

Deskripsi objek Form Tentang Berikut ini adalah deskripsi objek form tentang : Tabel 3-9 Deskripsi objek form tentang

Objek Tentang Pembuat

Jenis Memo

Tutup

Button

Keterangan Deskripsi mengenai pembuat aplikasi Kembali ke (F01)

3.4.3.1 Perancangan Antarmuka Pesan Keluar Aplikasi 1.

Desain Pesan Keluar Aplikasi Pesan keluar aplikasi digunakan untuk konfirmasi keluar dari aplikasi.

Berikut ini adalah desain tampilan pesan keluar aplikasi : -Klik Ya untuk

M01

keluar dari aplikasi

Apakah anda yakin ingin keluar !

-Klik Tidak untuk kembali ke F01

Ya

Keterangan : Nama Form Ukuran layer Jenis Font Background

: : : :

Tidak

F05 Windows Alert Arial White

Gambar 3.34 Perancangan Antarmuka Pesan Keluar Aplikasi

93

2.

Deskripsi objek Pesan Keluar Aplikasi Berikut ini adalah deskripsi objek pesan keluar aplikasi : Tabel 3-10 Deskripsi objek Pesan Keluar Aplikasi

Objek

Jenis

Ya Tidak

3.5

Keterangan Keluar dari aplikasi Kembali ke (F01)

Button Button

Jaringan Semantik Berikut ini adalah gambar jaringan semantik yang menggambarkan

hubungan antar modul perangkat lunak pengendali pointer. M01

F02

F01

F04

F03

F05

Gambar 3.35 Jaringan Semantik