55
Perancangan Sistem
3.1 Aplikasi Serupa
3.1.1 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
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
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.
3.2.1 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
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.
3.2.2 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
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 3.3.1 Use Case Diagram
Gambar 3.5 Use case diagram
3.3.2 Activity Diagram Server
Gambar 3.6 Activity diagram untuk server
3.3.3 Activity Diagram Client
Gambar 3.7 Activity diagram untuk client
3.3.4 Class Diagram Server
Class diagram server, memiliki Library OpenCV pada setiap class nya.
Gambar 3.8 Class diagram untuk server 3.3.5 Class Diagram Client
Gambar 3.9 Class diagram untuk client
3.3.6 Sequence Diagram Server Process
Gambar 3.10 Sequence diagram server process
Gambar 3.11 Sequence diagram client process 3.3.8 Sequence Diagram Stop Server Process
Gambar 3.12 Sequence diagram stop server process
3.3.9 Sequence Diagram Stop Client Process
Gambar 3.13 Sequence diagram stop client process 3.3.10 Sequence Diagram Start Client Record
Gambar 3.14 Sequence diagram start 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.
3.4.1 Tampilan Server
Tampilan server ini muncul setelah aplikasi untuk “Sinkronscreen”
server dijalankan.
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.
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.
3.4.2 Tampilan Client
Tampilan client ini muncul setelah aplikasi untuk “Sinkronscreen”
client dijalankan.
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.
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
3.5 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.
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
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
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).
14. 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.
Gambar 3.23 Letak kondisi combine pada gambar Berikut adalah pseudocode pemogramannya :
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 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) Xi = 0*200 Yj = 0 *133 Hasil (0,266)
Index (1,2) Xi = 1*200 Yj = 2 *133 Hasil (200,133)
Index (2,2) Xi = 2*200 Yj = 2 *133 Hasil (400,266)
11. 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
toleransi)/100
8. 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
