Bab 3. Perancangan Sistem

Transkripsi

1 Bab 3 Perancangan Sistem 3.1 Aplikasi Serupa SODIC (Sound and Digital Classroom) SODIC adalah sebuah software tool yang membantu dosen/guru dalam proses mengajar di laboratorium bahasa dan hanya memfokuskan pada voice communication dan media streaming. SODIC dikembangkan dibawah kerjasama antara Laboratorium Computing, School of Computer Science dan IT Directorate Universitas Bina Nusantara. Fitur-fitur yang dimiliki oleh SODIC adalah 1. Voice Features 1.1 Personal Speech 1.2 Class Speech 1.3 Student Speech 1.4 Group Speech 2. Media Streaming Features 2.1 Share Desktop (Screen Sharing) 2.2 Share Media 3. Other Features 3.1 Blank Monitor 3.2 Lock PC 55

2 56 Fitur Share Desktop yang dimiliki oleh SODIC dalam kaitannya dengan perancangan aplikasi screen sharing pada penulisan ini memiliki alur proses sistem : Gambar 3.1 Alur proses sistem SODIC Algoritma dalam hal ini adalah pseudocode yang digunakan pada fitur screen sharing aplikasi SODIC adalah sebagai berikut : 1. Server 1. start process 2. getscreen 3. resize 4. compress 5. send 6. end

3 57 2. Client 1. start receiver 2. receive image 3. uncompress image 4. show image 5. end receive Topologi yang digunakan dalam aplikasi SODIC adalah sebagai berikut : Gambar 3.2 Topologi jaringan SODIC 3.2 Alur Proses Sistem Aplikasi screen sharing pada penulisan ini diberi nama aplikasi Sinkronscreen. Pada sub bab berikutnya ini akan dibahas perancangan dari aplikasi tersebut.

4 Proses Pada Server Gambar 3.3 Alur Proses Server Proses pada server dimulai dengan proses Screen Capture. Proses Screen Capture akan mengambil pencitraan layar pada server ke dalam bentuk gambar lalu di Enqueue untuk dimasukan ke antrian dan divalidasi. Jika pencitraan kosong maka akan menunggu gambar berikutnya dalam sebuah thread, jika pencitraan tidak kosong, gambar tersebut kemudian masuk ke proses Dequeue. Proses Dequeue

5 59 mengeluarkan antrian satu persatu dan divalidasi. Jika merupakan gambar pertama dari pencitraan layar server maka langsung dipotong dalam proses Slicing Image lalu diproses dalam Send untuk dikirim ke jaringan, jika bukan gambar pertama maka akan dipotong juga dalam proses Slicing Image lalu seluruh potongan akan dimasukan satu persatu ke proses Enqueue menjadi sebuah antrian. Setelah menjadi sebuah antrian, potongan gambar tersebut akan diprosess melalui Compare Image untuk dibandingkan dengan gambar lama yang terkirim sebelumnya. Jika terdapat perbedaan, maka gambar tersebut akan di Dequeue untuk diproses dalam Send kemudian dikirim melalui jaringan.

6 Proses Pada Client Gambar 3.4 Alur Proses Client Pada Client, proses dimulai dengan validasi penerimaan dari jaringan, apabila data yang diterima itu valid maka diteruskan ke proses Enqueue untuk masuk antrian. Kemudian divalidasi lagi, jika data yang diterima terdapat gambar maka akan diteruskan untuk di Dequeue kemudian

7 61 disatukan potongan gambar yang diterima ke dalam 1 gambar yang utuh dalam proses Combine Image. Setelah disatukan dalam 1 gambar utuh maka akan terdapat 2 kondisi, apabila ingin di record maka hasil dari proses Combine Image akan masuk ke proses Record dan akan menghasilkan output berupa data record namun proses menampilkan tampilan dalam layar akan tetap berlangsung, dan apabila tidak ingin di record, maka akan ditampilkan dalam layar didalam proses Display Screen. Pada saat proses Display Screen selesai, maka akan kembali cek ke validasi penerimaan data has datagram, apabila terdapat data yang diterima maka proses keseluruhan setelah validasi tersebut akan diulang kembali. 3.3 Unified Modeling Language Use Case Diagram Gambar 3.5 Use case diagram

8 Activity Diagram Server Gambar 3.6 Activity diagram untuk server

9 Activity Diagram Client Gambar 3.7 Activity diagram untuk client

10 Class Diagram Server Class diagram server, memiliki Library OpenCV pada setiap class nya Class Diagram Client Gambar 3.8 Class diagram untuk server Gambar 3.9 Class diagram untuk client

11 Sequence Diagram Server Process Gambar 3.10 Sequence diagram server process

12 Sequence Diagram Client Process Gambar 3.11 Sequence diagram client process Sequence Diagram Stop Server Process Gambar 3.12 Sequence diagram stop server process

13 Sequence Diagram Stop Client Process Gambar 3.13 Sequence diagram stop client process Sequence Diagram Start Client Record Gambar 3.14 Sequence diagram start client record

14 Sequence Diagram Stop Client Record Gambar 3.15 Sequence diagram stop client record 3.4 Desain Antar Muka Aplikasi real time screen sharing ini diberi nama Sinkronscreen dan mempunyai aplikasi dan tampilan yang terpisah untuk server dan client Tampilan Server Tampilan server ini muncul setelah aplikasi untuk Sinkronscreen server dijalankan.

15 69 Gambar 3.16 Tampilan utama Tombol Share your screen dalam menu utama diatas mempunyai fungsi untuk menampilkan tampilan start server yaitu tampilan pengguna sebagai host atau server dari aktivitas screen sharing yang akan dijalankan oleh aplikasi Sinkronscreen. Pada menu utama tersebut terdapat latar belakang gambar dan terdapat ucapan selamat datang kepada pengguna. Apabila tombol Share your screen ditekan maka akan memunculkan tampilan start server seperti gambar dibawah ini.

16 70 Gambar 3.17 Tampilan start server Dalam tampilan start server ini terdapat logo untuk Sinkronscreen dan 2 tombol aksi, yaitu tombol Start dan Stop. Tombol Start merupakan tombol untuk memulai program screen sharing dengan client. Tombol Stop akan menghentikan program screen sharing Tampilan Client Tampilan client ini muncul setelah aplikasi untuk Sinkronscreen client dijalankan.

17 71 Gambar 3.18 Tampilan utama client Tombol Receive Screen dalam tampilan diatas mempunyai fungsi untuk menampilkan tampilan start client yaitu tampilan pengguna sebagai receiver atau client dari aktivitas screen sharing yang akan dijalankan oleh aplikasi Sinkronscreen. Pada menu utama tersebut terdapat latar belakang gambar dan terdapat ucapan selamat datang kepada pengguna Apabila tombol Receive screen ditekan maka akan memunculkan tampilan start client seperti dibawah ini.

18 72 Gambar 3.19 Tampilan client dengan logo Tombol menu yang ada pada tampilan start server pada gambar diatas akan memunculkan menu pilihan berupa record untuk menyimpan hasil aktivitas screen sharing ke dalam bentuk video, dan stop untuk menghentikan record. Menu pilihan ini muncul apabila mouse melakukan aksi hover ke area sekitar tombol menu dan akan kembali menutup apabila mouse meninggalkan area tersebut. Gambar 3.20 Tampilan client dengan menu pilihan

19 Algortima Sistem Penggunaan algoritma khusus terjadi pada proses pemotongan gambar, penggabungan gambar dan komparasi gambar. Berikut adalah algoritma yang dipakai : 1. Algoritma Pemotongan Pada proses Slicing Image yang disebutkan dalam alur sistem dan sequence diagram memiliki algoritma pemotongan untuk memotong gambar yang telah didapat dari pencitraan layar server. Pemotongan yang terjadi berdasarkan rumus sebagai berikut : Gambar 3.21 Image Width & Image Height - Image Width adalah lebar dari gambar - Image Height adalah panjang dari gambar Setelah didapat panjang serta lebar dari gambar, maka panjang serta lebar tersebut dibagi dengan baris (row) dan kolom (coloum) yang diinginkan untuk dipotong. Misal diinginkan potongan 3 x 3, berarti gambar akan dibagi 3 baris dan 3 kolom sehingga menghasilkan 9 potongan gambar.

20 Rumus pembagian untuk mengetahui lebar gambar per potongan : 74 Rumus pembagian untuk mengetahui panjang gambar per potongan : Apabila baris adalah n, kolom adalah m, Xi adalah potongan horisontal ke-i dan Yj adalah potongan vertikal ke-j, maka : Xi = (i * width per slice) Yj = (j * height per slice) Rumus diatas tersebut digunakan untuk menentukan titik dimana potongan dimulai. Terdapat 4 kemungkinan kondisi yang terjadi dalam pemotongan : Gambar 3.22 Letak kondisi pada gambar 1. Kondisi A Kondisi slicing terjadi pada ujung bawah kanan gambar, dimana panjang dan lebar potongan tersebut tak akan sama dengan potongan yang lainya, dikarenakan pembagian yang tak dapat di bagi habis

21 75 oleh kolom ataupun baris. Contohnya : bila didapat panjang gambar 401 dan lebar gambar 601, dan akan di slice 3 x 3, maka bagian potongan terakhir akan memiliki panjang dan lebar yang berbeda dengan potongan lain, karena 401 modulus 3 = 2, 601 modulus 3 = 1, sehingga potongan terakhir akan berukuran 135 x 201. Syarat : i < n - 1 dan j < m 1 Slicing : (Xi, Yj, image width Xi, image heigth - Yj) 2. Kondisi B Kondisi B ini adalah kondisi dimana slicing terjadi di bagian kanan gambar, dimana lebar gambar tersebut tak akan sama dengan potongan lainya, dikarenakan pembagian yang tak dapat di bagi habis oleh kolom. Syarat : i<n-1 Slicing : (Xi, Yj, image width Xi, height) 3. Kondisi C Kondisi C ini adalah kondisi dimana slicing terjadi di bagian bawah gambar, dimana panjang gambar tersebut tak akan sama dengan potongan lainya, dikarenakan pembagian yang tak dapat di bagi habis oleh baris. Syarat : j<m-1 Slicing = (Xi, Yj, width, image heigth - Yj) 4. Kondisi D Kondisi D ini adalah kondisi dimana slicing terjadi di bagian dalam gambar, bukan terjadi di ujung index yang dipotong, sehingga

22 76 panjang dan lebar, sama dengan yang lainya kecuali, di bagian sisi bawah dan kanan nya. Slicing = (Xi, Yj, width, heigth) Berikut adalah pseudocode pemogramannya : 1. Mulai. 2. Get ukuran tinggi gambar asli. 3. Get ukuran lebar gambar asli. 4. Get segementasi setting baris dan kolom. 5. Ukuran potongan tinggi ukuran tinggi gambar asli / baris. 6. Ukuran potongan lebar ukuran lebar gambar asli /kolom. 7. Ukuran potongan tinggi terakhir (ukuran tinggi gambar asli - ukuran potongan tinggi * (baris - 1)). 8. Ukuran potongan lebar terakhir (ukuran lebar gambar asli - ukuran potongan lebar gambar * (kolom-1)). 9. Loop i=0 to baris do. 10. Loop j=0 to kolom do. 11. IF i sama dengan baris - 1 AND j sama dengan kolom -1 potong gambar dengan fungsi (ukuran potongan tinggi terakhir, ukuran potongan lebar terakhir). 12. ELSE IF i sama dengan baris 1 potong gambar dengan fungsi (ukuran potongan tinggi terakhir, ukuran potongan lebar ). 13. ELSE IF j sama dengan kolom -1 potong gambar dengan fungsi (ukuran potongan tinggi, ukuran potongan lebar terakhir).

23 ELSE IF potong gambar dengan fungsi (ukuran potongan tinggi, ukuran potongan lebar). 15. Selesai. 2. Algoritma Combine Image Xi Yj adalah sebuah koordinat, rumus yang digunakan adalah function yang digunakan untuk menempelkan gambar. Pasang gambar = (Xi, Yj, lebar potongan gambar, panjang potongan gambar). Xi dan Yj didapatkan dari dimana index gambar tersebut. Contoh : panjang dan lebar keseluruhan gambar di bagi fragmentasinya 3x3, 601 /3 = 200, dan 401 /3 = 133, lalu hasilnya di kalikan dengan index yang ada di dalam gambar, hasil tersebut akan digunakan untuk titik memunculkan gambar.

24 78 Index (0,0) Xi = 0*200 Yj = 0 *133 Hasil (0,0) Index (1,0) Xi = 1*200 Yj = 0 *133 Hasil (200,0) Index (2,0) Xi = 2*200 Yj = 0 *133 Hasil (400,0) Index (0,1) Xi = 0*200 Yj = 1 *133 Hasil (0,133) Index (1,1) Xi = 1*200 Yj = 1 *133 Hasil (200,133) Index (2,1) Xi = 2*200 Yj = 1 *133 Hasil (400,133) Index (0,2) Index (1,2) Index (2,2) Xi = 0*200 Xi = 1*200 Xi = 2*200 Gambar 3.23 Letak kondisi combine pada gambar Yj = 0 *133 Yj = 2 *133 Yj = 2 *133 Berikut adalah pseudocode pemogramannya : Hasil (0,266) Hasil (200,133) Hasil (400,266) Gambar 3.23 Letak combine pada gambar 1. Mulai 2. Get batas baris 3. Get batas kolom 4. Get index baris 5. Get index kolom 6. Get tinggi gambar asli 7. Get lebar gambar asli 8. ukuran potongan tinggi ukuran tinggi gambar asli/ baris 9. ukuran potongan lebar ukuran lebar gambar asli/ kolom 10. Titik awal tinggi combine indeks baris * ukuran potongan tinggi

25 Titik awal lebar combine indeks kolom * ukuran potongan lebar 12. combine fungsi(titik awal tinggi combie, titik awal lebar combine, ukuran tinggi gambar, ukuran lebar gambar) 3. Algoritma Perbandingan (Compare) Teknik pembandingan dua gambar ini adalah dengan cara mengambil data pixel element setiap pixel lalu di bandingkan kedua nilai pixel elemen gambar tersebut. lebar dan panjang di ambil untuk looping mendaptkan data pixel element dalam gambar, data gambar berbentuk RGB tetapi dalam opencv mereka membaca indeks dalam pixel dengan BGR, tetapi hal tsb tak berpengaruh dalam membandingkan element RGB tersebut. Dan ditambahkan toleransi untuk memberikan toleransi perbedaan pixel antara dua gambar tersebut, jika melebihi besar toleransi maka dua gambar tersebut di anggap berbeda. Cth : jika toleransi 100% berarti salah 1 perbedaan saja maka gambar tersebut di katakan berbeda, jika toleransi 80% maka toleransi perbedaan pixel-nya sebesar 20 perbedaan, dan seterusnya. Berikut adalah pseudocode pemogramannya : 1. Mulai 2. Get Image 1 3. Get Image 2 4. Get toleransi 5. Get baris Image 1 6. Get kolom Image 1

26 80 7. Maksimal toleransi = baris Image 1 * kolom Image 1 * (100- toleransi)/ Loop i = 0 to baris do 9. Loop j = 0 to kolom do 10. If get element blue Image 1 sama dengan get element blue Image 2 maka counter toleransi bertambah 11. Else if get element green Image 1 sama dengan get element green Image 2 maka counter toleransi bertambah 12. Else if get element red Image 1 sama dengan get element red Image 2 maka counter toleransi bertambah 13. If element toleransi lebih kecil dari toleransi counter toleransi maka return gambar sama 14. End loop 15. End loop 16. Return gambar berbeda 17. selesai