Analisis Sistem Aplikasi Video Cenferenc
BAB 3
PERANCANGAN S IS TEM
3.1 Diagram Perancangan Sistem
3.1.1
Use Case Diagram
Gambar 3.1 Use Case Diagram System
43
44
3.1.2
Use Case Narrative
3.1.2.1 Use Case Narrative View Main Menu
Tabel 3.1 Use Case Narrative View Main Menu
Pelaku :
Guest, Student, Lecturer
Deskripsi :
User dapat melihat main menu yang terdapat
pada aplikasi
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User memasukkan
Sistem akan
URL website pada
menampilkan halaman
web browser
Index
Langkah 3 :
Langkah 4 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan yang dipilih
untuk user (lihat
oleh user
pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
mengenai
Camera Overview
menampilkan halaman
camera ELM O
Camera Overview yang
PTC 401C-IP
berisi informasi
mengenai camera
ELM O PTC 401C-IP
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
mengenai
About Video
menampilkan halaman
Video
Conference
About Video
Conference
Conference yang berisi
45
informasi mengenai
Video Conference
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
bagaimana cara How To Use This Site
menampilkan halaman
menggunakan
How To Use This Site
site
yang berisi informasi
mengenai cara
menggunakan site
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
mengenai
FAQ
menampilkan halaman
pertanyaan-
FAQ yang berisi
pertanyaan
pertanyaan-pertanyaan
seputar aplikasi
mengenai aplikasi
3.1.2.2 Use Case Narrative Chatting
Tabel 3.2 Use Case Narrative Chatting
Pelaku :
Guest, Student, Lecturer
Deskripsi :
User dapat melakukan chatting (interaksi berupa
pengiriman teks) dengan user yang lain
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User memasukkan
Sistem akan
teks pada field yang
menampilkan teks pada
tersedia
chat box
46
3.1.2.3 Use Case Narrative Login
Tabel 3.3 Use Case Narrative Login
Pelaku :
Student, Lecturer
Deskripsi :
User harus melakukan login terlebih dahulu
sebelum masuk ke dalam aplikasi
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User memasukkan
Sistem akan
URL website pada
menampilkan halaman
web browser
Index
Langkah 3 :
Langkah 4 :
User memasukkan
Sistem akan
username dan
menampilkan halaman
password kemudian
home apabila username
melakukan submit
dan password valid
Alternatif :
Langkah 2
Apabila username dan password yang
dimasukkan tidak valid maka sistem akan
membuka kembali halaman index dengan
notifikasi error
3.1.2.4 Use Case Narrative View Rules
Tabel 3.4 Use Case Narrative View Rules
Pelaku :
Student, Lecturer
Deskripsi :
User dapat melihat aturan mengenai penggunaan
aplikasi video conference
Prakondisi :
User harus login terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
47
User mengklik menu
Sistem akan
Rules
menampilkan halaman
Rules
3.1.2.5 Use Case Narrative Open Video Conference Application
Tabel 3.5 Use Case Narrative Open Video Conference Application
Pelaku :
Student, Lecturer
Deskripsi :
User dapat menggunakan aplikasi video
conference untuk melakukan proses
pembelajaran maupun diskusi
Prakondisi :
User harus login terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik menu
Sistem akan
Home
menampilkan halaman
Home
Langkah 3 :
Langkah 4 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan yang dipilih oleh
untuk user (lihat
user
pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
M elakukan
Langkah 1 :
Langkah 2 :
video
User mengklik menu
Sistem akan
conference
d601
menampilkan login box
dengan
Langkah 3 :
Langkah 4 :
lecturer
User memasukkan
Sistem akan
username dan
menampilkan window
password
camera ELM O
48
Langkah 5 :
Langkah 6 :
User memilih bahasa
Sistem akan
yang diinginkan
menampilkan halaman
utama camera ELM O
Langkah 7 :
Langkah 8 :
User dapat memilih
Sistem akan
ukuran image yang
menampilkan Camera
ingin ditampilkan
ELM O Live Display
dengan mengklik Live
View sesuai dengan
ukuran yang
diinginkan
M elakukan
Langkah 1 :
Langkah 2 :
video
User mengklik menu
Sistem akan
conference
602
menampilkan login box
dengan student
Langkah 3 :
Langkah 4 :
User memasukkan
Sistem akan
username dan
menampilkan window
password
camera ELM O
Langkah 5 :
Langkah 6 :
User memilih bahasa
Sistem akan
yang diinginkan
menampilkan halaman
utama camera ELM O
Langkah 7 :
Langkah 8 :
User dapat memilih
Sistem akan
ukuran image yang
menampilkan Camera
ingin ditampilkan
ELM O Live Display
dengan mengklik Live
View sesuai dengan
ukuran yang
diinginkan
49
3.1.2.6 Use Case Narrative Leave Video Conference Application
Tabel 3.6 Use Case Narrative Leave Video Conference Application
Pelaku :
Student, Lecturer
Deskripsi :
User ingin keluar dari aplikasi video conference
Prakondisi :
User harus login ke dalam aplikasi video
conference terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik icon
Sistem akan menutup
tanda silang (close)
aplikasi video
yang berada di sisi
conference
kanan atas window
Camera ELMO Live
Display
3.1.2.7 Use Case Narrative Control Camera
Tabel 3.7 Use Case Narrative Control Camera
Pelaku :
Lecturer
Deskripsi :
User dapat mengontrol posisi camera dan
melakukan pengaturan terhadap objek
Prakondisi :
User harus login ke dalam aplikasi video
conference terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik Live
Sistem akan
View sesuai dengan
menampilkan Camera
ukuran yang
ELM O Live Display
diinginkan
50
Langkah 3 :
Langkah 4 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan yang dipilih oleh
untuk user (lihat
user
pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
M engarahkan
Langkah 1 :
Langkah 2 :
posisi camera
User menggerakkan
Sistem akan
scroll bar atau
menampilkan objek
mengklik camera
sesuai dengan
position
pergerakan yang
dilakukan
M engembalikan
Langkah 1 :
Langkah 2 :
camera ke
User mengklik
Sistem akan
posisi semula
tombol Reset
menampilkan objek
posisi semula
Zoom objek
Langkah 1 :
Langkah 2 :
User mengklik
Sistem akan
tombol Wide untuk
menampilkan objek
memperkecil objek
sesuai dengan
atau tombol Tele
pengaturan yang telah
untuk memperbesar
dilakukan
objek pada scroll bar
zoom
M enyimpan
Langkah 1 :
Langkah 2 :
posisi objek
User memilih preset
Sistem akan menyimpan
number yang terdapat
posisi dari objek yang
pada preset combo
telah ditentukan
box lalu mengklik
tombol Save Preset
51
M elihat objek
Langkah 1 :
Langkah 2 :
yang telah
User memilih preset
Sistem akan
disimpan
number kemudian
menampilkan objek
mengklik tombol
Goto Preset
M engatur
Langkah 1 :
Langkah 2 :
cahaya pada
User mengklik
Sistem akan
objek
tombol open untuk
menampilkan objek
meningkatkan cahaya
sesuai dengan
atau mengklik tombol
pengaturan yang telah
close untuk
dilakukan
mengurangi cahaya
pada objek dan
apabila tingkat
cahaya ingin diatur
pada level normal,
user mengklik tombol
Normal
M engatur focus
Langkah 1 :
Langkah 2 :
pada objek
User mengklik
Sistem akan
tombol near apabila
menampilkan objek
ingin mendekatkan
sesuai dengan
focus atau far apabila
pengaturan yang telah
ingin menjauhkan
dilakukan
focus. Apabila focus
dari objek ingin diatur
secara otomatis, user
mengklik tombol
Auto
52
3.1.2.8 Use Case Narrative Logout
Tabel 3.8 Use Case Narrative Logout
Pelaku :
Student, Lecturer
Deskripsi :
User melakukan logout untuk keluar dari aplikasi
Prakondisi :
User harus login terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik tombol Sistem akan
Log out
menampilkan halaman
index
3.1.2.9 Use Case Narrative Setting MPEG4
Tabel 3.9 Use Case Narrative Setting M PEG4
Pelaku :
Admin
Deskripsi :
User melakukan pengaturan terhadap image
MPEG4
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
MPEG4 Setup
menampilkan halaman
MPEG4 Setup
53
Langkah 5 :
Langkah 6 :
User menginput bit
Sistem akan menyimpan
rate dan memilih
data yang telah
frame rate, resolution,
dimasukkan
dan mode yang akan
Langkah 7 :
digunakan kemudian
Sistem akan
mengklik tombol OK
menampilkan halaman
ELM O IP Camera
Setup
3.1.2.10
Use Case Narrative Setting Network
Tabel 3.10 Use Case Narrative Setting Network
Pelaku :
Admin
Deskripsi :
User membuat pengaturan yang berkaitan
dengan jaringan yang akan digunakan
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
Network Setup
menampilkan halaman
Network Setup
Langkah 5 :
Langkah 6 :
User dapat memilih
Sistem akan menyimpan
tipe pengiriman data
data yang telah
54
dan menginput IP,
dimasukkan
Gateway, Netmask,
Langkah 7 :
Broadcast, serta port
Sistem akan
kemudian mengklik
menampilkan halaman
tombol OK
ELM O IP Camera
Setup
3.1.2.11
Use Case Narrative Setting User
Tabel 3.11 Use Case Narrative Setting User
Pelaku :
Admin
Deskripsi :
User membuat pengaturan yang berkaitan
dengan administrasi user
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
User Setup
menampilkan halaman
User Setup
Langkah 5 :
Langkah 6 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan user
(lihat pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
55
M enambah
Langkah 1 :
Langkah 2 :
user
User menginput ID,
Sistem akan
password, dan
menampilkan data yang
memilih authority
telah dimasukkan pada
kemudian mengklik
list
tombol Add
Langkah 3 :
Langkah 4 :
User mengklik tombol Sistem akan menyimpan
OK
data yang telah
dimasukkan
Langkah 5 :
Sistem akan
menampilkan halaman
ELM O IP Camera
Setup
M engubah
Langkah 1 :
Langkah 2 :
user
User mengklik user
Sistem akan
yang ingin diubah
menampilkan data user
pada list
Langkah 3 :
Langkah 4 :
User menginput data
Sistem akan
kemudian mengklik
menampilkan data yang
tombol Modify
telah diubah pada list
Langkah 5 :
Langkah 6 :
User mengklik tombol Sistem akan menyimpan
OK
data yang telah
dimasukkan
Langkah 7 :
Sistem akan
menampilkan halaman
ELM O IP Camera
56
Setup
M enghapus
Langkah 1 :
Langkah 2 :
user
User mengklik user
Sistem akan
yang ingin dihapus
menampilkan data user
pada list
Langkah 3 :
Langkah 4 :
User mengklik tombol Sistem akan menghapus
Remove
user yang telah dipilih
dari list
Langkah 5 :
Langkah 6 :
User mengklik tombol Sistem akan menyimpan
OK
data yang telah
dimasukkan
Langkah 5 :
Sistem akan
menampilkan halaman
ELM O IP Camera
Setup
3.1.2.12
Use Case Narrative Setting Camera
Tabel 3.12 Use Case Narrative Setting Camera
Pelaku :
Admin
Deskripsi :
User membuat pengaturan yang berkaitan
dengan camera
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
57
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
Camera Setup
menampilkan halaman
Camera Setup
Langkah 5 :
Langkah 6 :
User mengklik link
Sistem akan
Misc. (miscellaneous)
menampikan halaman
Settings
Misc. Settings
Langkah 7 :
Langkah 8 :
User dapat memilih
Sistem akan menyimpan
pengaturan-
data yang telah
pengaturan yang
dimasukkan
diinginkan pada
Langkah 9 :
camera kemudian
Sistem akan
mengklik tombol OK
menampilkan halaman
Camera Setup
3.1.3
Activity Diagram
3.1.3.1 Activity Diagram View Main Menu
Pada halaman index terdapat 4 jenis main menu yang dapat
diakses oleh user yaitu Camera Overview, About Video Conference,
How To Use This Site, dan FAQ.
58
Gambar 3.2 Activity Diagram View Main Menu
3.1.3.2 Activity Diagram Chatting
User dapat melakukan pengiriman teks melalui chat box yang
terdapat pada halaman index. M elalui chat box ini, user yang satu
dengan yang lain dapat saling berinteraksi. Penggunaan fitur ini
tidaklah sukar. User hanya perlu menginput teks pada field yang
tersedia kemudian teks tersebut secara otomatis akan ditampilkan
pada box yang tersedia.
59
Gambar 3.3 Activity Diagram Chatting
3.1.3.3 Activity Diagram Login
User harus melakukan login terlebih dahulu untuk dapat
menggunakan fitur utama yang terdapat pada aplikasi yaitu video
conference. Login dibagi menjadi dua jenis, yaitu login sebagai
student dengan username berupa nomor ruang kelas dan password
berupa IP yang tertera pada camera dan login sebagai lecturer
dengan username berupa kode d beserta nomor ruang kelas dan
password berupa IP yang tertera pada camera.
Apabila username dan password yang dimasukkan oleh user tidak
valid maka sistem akan menampilkan kembali halaman index dengan
notifikasi error. Error untuk login dibedakan menjadi 2 jenis, yaitu
error karena username dan password yang dimasukkan salah atau
tidak terdaftar dan error karena username dan password yang
dimasukkan sudah melakukan login terlebih dahulu.
60
Gambar 3.4 Activity Diagram Login
3.1.3.4 Activity Diagram View Rules
User dapat melihat rule-rule mengenai penggunaan aplikasi video
conference pada menu ini. Rule untuk lecturer berbeda dengan rule
untuk student. Apabila user yang login adalah lecturer maka rule
yang akan ditampilkan adalah rule untuk lecturer yang berisi
informasi mengenai username dan password untuk masuk ke dalam
aplikasi video conference.
Apabila user yang login adalah student maka rule yang
ditampilkan adalah rule untuk student yang juga berisi informasi
61
mengenai username dan password untuk masuk ke dalam aplikasi
video conference.
Gambar 3.5 Activity Diagram View Rules
3.1.3.5 Activity Diagram Open Video Conference Application
Fitur video conference merupakan fitur utama yang terdapat pada
aplikasi. Fitur ini hanya dapat diakses oleh user yang telah
melakukan login. Fitur ini dapat digunakan dengan mengklik menu
dengan kode d disertai nomor ruang kelas (contoh : d601) yang
menunjukkan bahwa menu tersebut adalah menu untuk melakukan
video conference dengan lecturer dan menu dengan nama nomor
ruang kelas (contoh : 602) yang menunjukkan bahwa menu tersebut
adalah menu untuk melakukan video conference dengan student.
Setelah user mengklik menu tersebut, sistem akan meminta user
untuk login dengan memasukkan username dan password. User tidak
dapat membuat username dan password sendiri. Hanya admin yang
mempunyai privilege untuk membuat username dan password untuk
62
user login ke dalam aplikasi video conference. Hal ini akan
dijelaskan lebih detail pada point berikutnya yaitu setting user.
Oleh karena itu, informasi mengenai username dan password ini
dijelaskan pada menu Rules dan user dapat memperoleh username
dan password untuk login pada menu tersebut.
Setelah login, sistem akan meminta user untuk memilih bahasa
yang ingin digunakan pada aplikasi. Terdapat dua jenis pilihan
bahasa, yaitu English dan Japanese. Setelah user memilih bahasa,
sistem akan menampilkan halaman utama dari camera ELM O.
Untuk menampilkan live display dari camera ELM O, user dapat
mengklik link Live View (image size). User dapat memilih ukuran
tampilan dari live display. Terdapat tiga jenis ukuran, yaitu half-D1
dengan ukuran layar 704 x 480 pixels, SIF dengan ukuran 352 x 240
pixels, dan QQVGA dengan ukuran 160 x 120 pixels.
63
Gambar 3.6 Activity Diagram Open Video Conference Application
64
3.1.3.6 Activity Diagram Leave Video Conference Application
User dapat mengklik tombol close (tanda silang) yang terdapat
pada sisi kanan atas window jika user telah selesai menggunakan
aplikasi video conference and ingin keluar dari aplikasi.
Gambar 3.7 Activity Diagram Leave Video Conference Application
3.1.3.7 Activity Diagram Control Camera
Setelah user masuk ke dalam aplikasi video conference, user
dapat mengontrol camera. User yang memiliki privilege ini hanya
lecturer karena authority untuk lecturer telah diatur oleh admin pada
setting user sebagai operator. Hal ini dimaksudkan agar lecturer
dapat mengontrol dan memantau student yang berada di dalam kelas.
Pengaturan posisi camera dapat dilakukan dengan dua cara, yaitu
dengan menggerakkan scroll bar atau titik kuning yang terdapat pada
camera position. Untuk mengembalikan camera ke posisi semula,
user dapat mengklik tombol Reset.
65
Selain dapat mengontrol arah dan posisi dari camera, user juga
dapat memperbesar dan memperkecil objek dengan mengklik tombol
Wide dan Tele. Tombol Wide digunakan untuk memperkecil objek
sedangkan tombol Tele digunakan untuk memperbesar objek.
User dapat menyimpan image dengan memilih preset number
pada preset combo box (range :
Home, Preset 1-16) kemudian
mengklik tombol Save Preset. Jika user ingin melihat image yang
telah disimpan, user dapat memilih preset number lalu mengklik
tombol Goto Preset kemudian image yang telah disimpan akan
ditampilkan pada live display.
User dapat mengatur tingkat keterangan (brightness) objek pada
iris. Terdapat tiga jenis pengaturan cahaya, yaitu klik tombol Open
untuk meningkatkan cahaya pada objek, klik tombol Normal untuk
mengatur cahaya objek pada level normal, dan klik tombol Close
untuk mengurangi cahaya pada objek.
User dapat mengatur focus dari objek dengan mengklik tombol
Near untuk memfokuskan objek lebih dekat, mengklik tombol Auto
untuk memfokuskan objek secara automatis, dan mengklik tombol
Far untuk menjauhkan focus objek.
66
Gambar 3.8 Activity Diagram Control Camera
67
3.1.3.8 Activity Diagram Logout
User dapat keluar dari aplikasi dengan mengklik tombol Log out.
Gambar 3.9 Activity Diagram Logout
3.1.3.9 Activity Diagram Setting MPEG4
Sebelum aplikasi dapat dijalankan, admin harus melakukan
pengaturan
terlebih
dahulu
pada
camera.
Setting
M PEG4
dimaksudkan untuk mengatur bit rate, frame rate, resolution dan
mode dari image. Admin dapat menginput bit rate dan memilih frame
rate, resolution, dan mode dari image. Range bit rate : 64 – 2000
kbps, range frame rate : 30, 15, 10, 5, dan 1 frame/second, resolution
: D1 : 704 x 480 dan SIF : 352 x 240, mode : frame (mengurangi
delay untuk image) dan GOP (memungkinkan camera untuk
menangani performa lingkungan jaringan yang sempit menjadi luas
meskipun delay untuk image lama).
68
Klik Link Setup
Tampilkan halaman ELMO IP Camera Setup
Klik Link MPEG4 Setup
Tampilkan halaman MPEG4 Setup
Input Data & Klik OK
Simpan data yang telah dimasukkan
Tampilkan halaman ELMO IP Camera Setup
Gambar 3.10 Activity Diagram Setting M PEG4
3.1.3.10
Activity Diagram Setting Network
Setting network dimaksudkan untuk mengatur tipe pengiriman
data yang akan digunakan oleh user apakah unicast atau multicast,
mengkonfigurasi jaringan yang terdiri dari IP address camera,
69
gateway, netmask, broadcast, serta mengatur port yang akan
digunakan oleh camera.
Klik Link Setup
Tampilkan halaman ELMO IP Camera Setup
Klik Link Network Setup
Tampilkan halaman Network Setup
Input Data & Klik OK
Simpan data yang telah dimasukkan
Tampilkan halaman ELMO IP Camera Setup
Gambar 3.11 Activity Diagram Setting Network
70
3.1.3.11
Activity Diagram Setting User
Setting user dimaksudkan untuk melakukan pengaturan yang
berhubungan dengan administrasi user. Admin harus mendaftarkan
user terlebih dahulu dengan mengisikan ID, password, dan
menentukan authority agar user dapat mengakses aplikasi. Hanya
admin yang mempunyai privilege untuk menambah, mengubah, dan
menghapus user.
Gambar 3.12 Activity Diagram Setting User
71
3.1.3.12
Activity Diagram Setting Camera
Setting camera dimaksudkan untuk melakukan pengaturan yang
berhubungan dengan tampilan object sebelum camera digunakan
oleh user. Penjelasan mengenai setting user akan dijelaskan pada
point berikutnya.
Gambar 3.13 Activity Diagram Setting Camera
72
3.1.4
Statechart Diagram
3.1.4.1 Statechart Diagram View Menu Camera Overview
Gambar 3.14 Statechart Diagram View Menu Camera Overview
3.1.4.2 Statechart Diagram View Menu About Video Conference
Gambar 3.15 Statechart Diagram View Menu About Video
Conference
3.1.4.3 Statechart Diagram View Menu How To Use This Site
Gambar 3.16 Statechart Diagram View How To Use This Site
73
3.1.4.4 Statechart Diagram View Menu FAQ
Gambar 3.17 Statechart Diagram View Menu FAQ
3.1.4.5 Statechart Diagram Chatting
Gambar 3.18 Statechart Diagram Chatting
3.1.4.6 Statechart Diagram Login
Gambar 3.19 Statechart Diagram Login
3.1.4.7 Statechart Diagram View Rules
Gambar 3.20 Statechart Diagram View Rules
74
3.1.4.8 Statechart Diagram Open Video Conference Application (Lecturer)
Gambar 3.21 Statechart Diagram Open Video Conference
Application (Lecturer)
3.1.4.9 Statechart Diagram Open Video Conference Application (Student)
Gambar 3.22 Statechart Diagram Open Video Conference
Application (Student)
75
3.1.4.10
Statechart Diagram Leave Video Conference Application
Gambar 3.23 Statechart Diagram Leave Video Conference
Application
3.1.4.11
Statechart Diagram Control Camera (Position)
Gambar 3.24 Statechart Diagram Control Camera (Position)
3.1.4.12
Statechart Diagram Control Camera (Reset)
Gambar 3.25 Statechart Diagram Control Camera (Reset)
76
3.1.4.13
Statechart Diagram Control Camera (Zoom In Object)
Gambar 3.26 Statechart Diagram Control Camera (Zoom In Object)
3.1.4.14
Statechart Diagram Control Camera (Zoom Out Object)
Gambar 3.27 Statechart Diagram Control Camera (Zoom Out
Object)
3.1.4.15
Statechart Diagram Control Camera (Save Preset)
Gambar 3.28 Statechart Diagram Control Camera (Save Preset)
77
3.1.4.16
Statechart Diagram Control Camera (View Preset)
Gambar 3.29 Statechart Diagram Control Camera (View Preset)
3.1.4.17
Statechart Diagram Control Camera (Iris Increase)
Gambar 3.30 Statechart Diagram Control Camera (Iris Increase)
3.1.4.18
Statechart Diagram Control Camera (Iris Normal)
Gambar 3.31 Statechart Diagram Control Camera (Iris Normal)
78
3.1.4.19
Statechart Diagram Control Camera (Iris Decrease)
Gambar 3.32 Statechart Diagram Control Camera (Iris Decrease)
3.1.4.20
Statechart Diagram Control Camera (Focu s Near)
Gambar 3.33 Statechart Diagram Control Camera (Focus Near)
3.1.4.21
Statechart Diagram Control Camera (Focu s Auto)
Gambar 3.34 Statechart Diagram Control Camera (Focus Auto)
79
3.1.4.22
Statechart Diagram Control Camera (Focu s Far)
Gambar 3.35 Statechart Diagram Control Camera (Focus Far)
3.1.4.23
Statechart Diagram Logout
Gambar 3.36 Statechart Diagram Logout
3.1.4.24
Statechart Diagram Setting MPEG4
Gambar 3.37 Statechart Diagram Setting M PEG4
80
3.1.4.25
Statechart Diagram Setting Network
Gambar 3.38 Statechart Diagram Setting Network
3.1.4.26
Statechart Diagram Setting User (Add User)
Gambar 3.39 Statechart Diagram Setting User (Add User)
81
3.1.4.27
Statechart Diagram Setting User (Modify User)
Gambar 3.40 Statechart Diagram Setting User (Modify User)
3.1.4.28
Statechart Diagram Setting User (Delete User)
Gambar 3.41 Statechart Diagram Setting User (Delete User)
82
3.1.4.29
Statechart Diagram Setting Camera
Gambar 3.42 Statechart Diagram Setting Camera
3.1.5
Sequence Diagram
3.1.5.1 Sequence Diagram View Main Menu
Gambar 3.43 Sequence Diagram View Main Menu
83
3.1.5.2 Sequence Diagram Chatting
Gambar 3.44 Sequence Diagram Chatting
3.1.5.3 Sequence Diagram Login
Gambar 3.45 Sequence Diagram Login
84
3.1.5.4 Sequence Diagram View Rules
Gambar 3.46 Sequence Diagram View Rules
3.1.5.5 Sequence Diagram Open Video Conference Application
Gambar 3.47 Sequence Diagram Open Video Conference Application
85
3.1.5.6 Sequence Diagram Leave Video Conference Application
Gambar 3.48 Sequence Diagram Leave Video Conference Application
86
3.1.5.7 Sequence Diagram Control Camera
L ectur er
EL MO Mai n Pag e
clic k_L ive_ Vie w()
Ca mera E LMO Liv e Di spla y
ELMO Ca mera
o pe n()
mo ve_ scrol l_ bar( )
ro ta te()
retur n_re sul t( )
click _Ca mer a_Po sitio n()
ro ta te()
retur n_re sul t( )
cl ick_ Res et()
ro ta te()
retur n_re sul t( )
cl ick_ Wi de ()
zoo m_o ut()
retur n_re sul t( )
cl ick_ Tele ()
z oom _in ()
retur n_re sul t( )
sele ct_Pre set_N umb er()
cli ck_Sa ve_ Prese t()
save ()
retur n_re sul t( )
sele ct_Pre set_N umb er()
cl ick_ Go to _Pr eset()
g et_d ata()
clic k_Ope n()
i ncre ase _b rig htne ss()
cl ick_ No rmal ()
no rmal _bri gh tn ess( )
retur n_re sul t( )
return _re sul t()
return _re sul t()
cl ick_ Cl ose ()
d ecre ase _b rig htne ss()
retur n_re sul t( )
click _Ne ar()
sho rte n_ th e_ focus ()
retur n_re sul t( )
cli ck_Au to()
a utoma tical ly_ ad jus t()
click _Far()
fa r_the _focu s()
retu rn_r esu lt()
retur n_re sul t( )
Gambar 3.49 Sequence Diagram Control Camera
87
3.1.5.8 Sequence Diagram Logout
Student, Lecturer
Home Page
click_Log_out()
Index Page
open()
Gambar 3.50 Sequence Diagram Logout
3.1.5.9 Sequence Diagram Setting MPEG4
A dm in
ELM O IP C am era Setu p
P ag e
EL MO Mai n Pa ge
cl ick _Se tup ()
MPEG4 Setu p Pa ge
op en ()
c lic k_M PEG4 _Se tup ()
op en ()
in pu t_d ata ()
cl ick _OK()
save ()
re turn resu lt()
Gambar 3.51 Sequence Diagram Setting M PEG4
E LMO C am era
88
3.1.5.10
Sequence Diagram Setting Network
Gambar 3.52 Sequence Diagram Setting Network
89
3.1.5.11
Sequence Diagram Setting User
Gambar 3.53 Sequence Diagram Setting User
90
3.1.5.12
Sequence Diagram Setting Camera
Gambar 3.54 Sequence Diagram Setting Camera
91
3.2 Rancangan Layar
3.2.1
Halaman Index
Gambar 3.55 Perancangan Layar Halaman Index
Keterangan gambar :
1. Terdapat lima jenis menu dalam Main Menu yaitu Home, Camera Overview,
About Video Conference, How To Use This Site, FAQ. Penjelasan mengenai
menu-menu tersebut akan dijelaskan lebih lanjut.
92
2. Login form yang terdiri dari username dan password untuk masuk ke dalam
sistem.
3. Tombol Log in untuk submit username dan password.
4. Chat box untuk melakukan chatting antara user yang satu dengan user yang
lain.
3.2.2
Halaman Home
Gambar 3.56 Perancangan Layar Halaman Home
Keterangan gambar :
1. M enunjukkan nama user yang sedang login.
2. Tombol Log out yang berguna untuk keluar dari sistem.
93
3. User Menu merupakan menu tambahan setelah user login. User menu terdiri
dari Rules dan menu untuk menggunakan video conference. Penjelasan
mengenai menu tambahan tersebut akan dijelaskan lebih lanjut.
3.2.3
Halaman Camera Overview
Gambar 3.57 Perancangan Layar Halaman Camera Overview
Keterangan gambar :
Halaman Camera Overview berisi content dengan judul ELM O PTC 401C-IP
Camera yang berisi penjelasan, spesifikasi, serta fitur yang terdapat pada camera
tersebut.
94
3.2.4
Halaman About Video Conference
Gambar 3.58 Perancangan Layar Halaman About Video Conference
Keterangan gambar :
Halaman About Video Conference ini berisi content dengan judul Video
Conference yang berisi penjelasan mengenai sejarah dan perkembangan video
conference.
95
3.2.5
Halaman How To Use This Site
Gambar 3.59 Perancangan Layar Halaman How To Use This Site
Keterangan gambar :
Halaman How To Use This Site ini berisi content dengan judul How To Use This
Site yang berisi penjelasan mengenai cara dan langkah-langkah menggunakan
site.
96
3.2.6
Halaman FAQ
Gambar 3.60 Perancangan Layar Halaman FAQ
Keterangan gambar :
Halaman FAQ ini berisi content dengan judul FAQ yang berisi pertanyaanpertanyaan yang diajukan mengenai aplikasi.
97
3.2.7
Halaman Rules
Gambar 3.61 Perancangan Layar Halaman Rules
Keterangan gambar :
1. M enunjukkan nama user yang sedang login.
2. Tombol Log out yang berguna untuk keluar dari sistem.
3. User Menu merupakan menu tambahan setelah user login. User menu terdiri
dari Rules dan menu untuk menggunakan video conference.
Halaman Rules ini berisi content dengan judul Rules yang berisi rule-rule serta
informasi mengenai username dan password untuk user login ke dalam aplikasi
video conference.
98
3.2.8
Halaman Control Camera
Gambar 3.62 Perancangan Layar Halaman Control Camera
Keterangan gambar :
1. Scroll bar dan camera position yang digunakan untuk memindahkan posisi
image pada koordinat yang diinginkan.
2. Tombol Reset untuk mengembalikan posisi camera ke posisi semula yang
telah disimpan oleh camera.
3.
Dengan mengklik tombol Save Preset, posisi sekarang (current) akan
tersimpan pada preset number yang dipilih.
4. Tombol Release Control untuk mendaftarkan state focus dan brightness pada
preset number.
99
5. Checkbox Speaker dipilih apabila ingin mendengarkan output suara yang
diinput melalui microphone.
6. Checkbox External GPIO untuk mengaktifkan atau mengnonaktifkan GPIO
terminal.
7. Scrool bar zoom untuk memperbesar (tele) atau memperkecil (wide) tampilan
objek.
8. Tombol Open dan Close pada Iris untuk meningkatkan atau mengurangi
brightness sedangkan tombol Normal mengarahkan brightness ke level
normal.
9. Tombol Near dan Far pada Focus untuk mengatur focus secara manual
sedangkan tombol Auto untuk mengatur focus secara automatis.
10. Pilih preset yang ingin ditampilkan pada preset combo box. Range preset
adalah Home, Preset 1-16. Dengan mengklik tombol Goto Preset, preset
yang terdaftar akan ditampilkan.
3.2.9
Halaman Setting MPEG4
Gambar 3.63 Perancangan Layar Halaman Setting M PEG4
100
Keterangan gambar :
1. Tentukan batas atas pada jumlah data untuk membatasi jumlah data yang
dihasilkan selama komunikasi atau distribusi image berlangsung. Range
pengaturan bit rate mulai dari 64 sampai 2000 kbps.
2. Tentukan jumlah frame yang akan ditampilkan per detik. Range pengaturan
frame rate terdiri dari 30, 15, 10, 5, dan 1 frame / detik. Sound tidak akan
diterima atau dikirimkan ketika frame rate diatur menjadi 1 frame / detik.
3. Tentukan ukuran dari image yang akan ditampilkan. Pengaturan resolusi
terdiri dari dua jenis, yaitu D1 (704 x 480 pixels) dan SIF (352 x 240 pixels).
4. Atur delay untuk gambar sesuai dengan lingkungan jaringan. Pengaturan
mode terdiri dari dua jenis, yaitu frame (mengurangi delay untuk image) dan
GOP (memungkinkan kamera untuk menangani performa lingkungan
jaringan yang sempit menjadi luas meskipun delay untuk image lama).
5. Tombol OK untuk menyimpan data yang telah dimasukkan.
6. Tombol Cancel untuk membatalkan.
101
3.2.10 Rancangan Layar Halaman Setting Network
Network Setup
1
Send Type
UDP Unicast
2
IP
192
168
1
10
3
Gateway
192
168
1
1
D NS1
0
0
0
0
DN S2
0
0
0
0
5
Netmask
255
255
255
0
6
Broadcast
192
168
1
255
7
MAC Address
00
4
0c
2f
00
00
9a
Ports
8
Start Port Range
3000
9
End Port Range
4000
10
HT TP Port
80
11
Option Port
3491
12
Multicast Po rt
3490
13
Audio Port
3492
RS-485
14
RS-485 ID
1
OK
Cancel
Gambar 3.64 Perancangan Layar Halaman Setting Network
Keterangan gambar :
1. Pilih mode untuk mengirimkan M PEG4 image. Ada tiga jenis mode
pengiriman image, yaitu :
•
UDP Unicast
Data UDP image didistribusikan berdasarkan permintaan dari hos t
untuk koneksi. Hanya sampai tiga alamat saja yang bisa terkoneksi
dari viewer ke camera.
102
•
Multicast
Data
UDP
image
didistribusikan,
terlepas
dari
apakah
camera terhubung atau tidak dari host, mengakibatkan penurunan
beban pada kamera dan jalur transmisi. M eskipun berbagai address
dapat diatur, data image mungkin tidak didistribusikan dengan baik,
tergantung pada lingkungan jaringan.
•
TCP Unicast
Data TCP image didistribusikan berdasarkan permintaan dari host
untuk koneksi. Hanya sampai tiga alamat saja yang bisa terkoneksi
dari viewer ke camera.
2. Atur IP address dari camera.
3. Tentukan
IP
address
dari router
ketika router
digunakan
untuk
menghubungkan camera ke jaringan luar.
4. Atur address dari DNS server kemana camera dihubungkan. Pada DNS2,
atur address dari DNS server kemana camera akan dihubungkan jika camera
tidak dapat terhubung ke DNS1.
5. Atur subnet mask address dari camera.
6. Atur broadcast address dari camera.
7. M enampilkan M AC address dari camera.
8. Tentukan port pertama camera terbuka ke jaringan.
9. Tentukan port terakhir camera terbuka ke jaringan.
10. Tentukan port yang digunakan untuk web server pada camera (80, 1024
sampai 65535).
103
11. Tentukan port yang digunakan untuk mendistribusikan image dari camera
(1024 sampai 65535).
12. Tentukan port yang digunakan ketika camera menggunakan mode multicast
(1024 sampai 65535).
13. Tentukan port yang digunakan untuk mengirimkan dan menerima suara dari
atau ke camera (1024 sampai 65535).
14. Atur ID address dari RS-485 dari camera (1 sampai 223).
15. Tombol OK untuk menyimpan data yang telah dimasukkan.
16. Tombol Cancel untuk membatalkan.
3.2.11 Rancangan Layar Halaman Setting User
Gambar 3.65 Perancangan Layar Halaman Setting User
104
Keterangan gambar :
1. Tampilan list yang terdiri dari ID, Authority setelah data dimasukkan.
2. M asukkan ID user.
3. M asukkan password user.
4. Pilih authority dari user. Ada tiga jenis authority yang dapat dipilih, yaitu :
•
Administrator
Login ID untuk administrasi sudah ditetapkan, yaitu ‘root’. Dengan
ID ini, admin dapat menampilkan image, mengoperasikan camera,
dan mengatur setting camera.
•
Operator
Dapat menampilkan image dan mengoperasikan camera.
•
User
Hanya dapat menampilkan image saja.
Note :
Hanya root yang dapat didaftarkan sebagai administrator. Sedangkan untuk
operator dan user dapat didaftarkan sampai 99 nama.
5. Tombol Add untuk menambah user baru.
6. Tombol Modify untuk mengubah ID, password, atau authority dari user.
Untuk root, yang bisa diubah hanyalah password saja.
7. Tombol Remove untuk menghapus user. Semua user dapat dihapus kecuali
root.
8. Tombol OK untuk menyimpan data yang telah dimasukkan.
9. Tombol Cancel untuk membatalkan.
105
3.2.12 Rancangan Layar Setting Camera
Misc. Settin gs
1
AUT O R ET URN:
2
PRESET STILL:
3
FLIP ANGLE:
4
ALARM IN 1: PR ESET1
5
ALARM LOCK:
6
ALARM IN 2: PRESET2
7
OK
back
OF F
OFF
OFF
OFF
30s
1m
2m
5m
10m
20m
30m
ON
100
110
120
130
140
ON
Cancel
Home
8
Options Main
Gambar 3.66 Perancangan Layar Halaman Setting Camera
Keterangan gambar :
1. Pilih waktu otomatis untuk kembali ke posisi semula.
2. Bila fungsi ini diatur ke ON, image selama pergerakan antara posisi preset
menjadi statis (image sebelum pergerakan). Pada mode ini, gerakan
diaktifkan antara posisi preset (termasuk posisi awal), tetapi operasi PANTILT-ZOOM dinon-aktifkan. Fungsi ini berguna untuk menyimpan image
selain image posisi awal dan image posisi preset. Hanya ketika tombol
PRESET ditekan, image tidak dapat statis.
3. Pilih sudut putar image.
4. Untuk
mengatur
posisi
preset
(PRESET
1-16)
untuk
gerakan
dalam hal input pada terminal ALARM IN.
5. Bila fungsi ini diatur ke ON, selama input berada dalam terminal
ALARM IN, operasi yang lain dinonaktifkan.
106
6. Untuk
mengatur
posisi
preset
(PRESET
1-16)
untuk
gerakan
dalam hal input pada terminal ALARM IN.
7. Tombol OK untuk menyimpan data yang telah dimasukkan.
8. Tombol Cancel untuk membatalkan.
3.3 Rancang Bangun
Berikut adalah gambar rancang bangun secara keseluruhan untuk menghubungkan
camera ke speaker dan microphone serta koneksi ke jaringan menggunakan switch.
Gambar 3.67 Rancang Bangun Sistem
PERANCANGAN S IS TEM
3.1 Diagram Perancangan Sistem
3.1.1
Use Case Diagram
Gambar 3.1 Use Case Diagram System
43
44
3.1.2
Use Case Narrative
3.1.2.1 Use Case Narrative View Main Menu
Tabel 3.1 Use Case Narrative View Main Menu
Pelaku :
Guest, Student, Lecturer
Deskripsi :
User dapat melihat main menu yang terdapat
pada aplikasi
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User memasukkan
Sistem akan
URL website pada
menampilkan halaman
web browser
Index
Langkah 3 :
Langkah 4 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan yang dipilih
untuk user (lihat
oleh user
pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
mengenai
Camera Overview
menampilkan halaman
camera ELM O
Camera Overview yang
PTC 401C-IP
berisi informasi
mengenai camera
ELM O PTC 401C-IP
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
mengenai
About Video
menampilkan halaman
Video
Conference
About Video
Conference
Conference yang berisi
45
informasi mengenai
Video Conference
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
bagaimana cara How To Use This Site
menampilkan halaman
menggunakan
How To Use This Site
site
yang berisi informasi
mengenai cara
menggunakan site
M enampilkan
Langkah 1 :
Langkah 2 :
informasi
User mengklik menu
Sistem akan
mengenai
FAQ
menampilkan halaman
pertanyaan-
FAQ yang berisi
pertanyaan
pertanyaan-pertanyaan
seputar aplikasi
mengenai aplikasi
3.1.2.2 Use Case Narrative Chatting
Tabel 3.2 Use Case Narrative Chatting
Pelaku :
Guest, Student, Lecturer
Deskripsi :
User dapat melakukan chatting (interaksi berupa
pengiriman teks) dengan user yang lain
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User memasukkan
Sistem akan
teks pada field yang
menampilkan teks pada
tersedia
chat box
46
3.1.2.3 Use Case Narrative Login
Tabel 3.3 Use Case Narrative Login
Pelaku :
Student, Lecturer
Deskripsi :
User harus melakukan login terlebih dahulu
sebelum masuk ke dalam aplikasi
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User memasukkan
Sistem akan
URL website pada
menampilkan halaman
web browser
Index
Langkah 3 :
Langkah 4 :
User memasukkan
Sistem akan
username dan
menampilkan halaman
password kemudian
home apabila username
melakukan submit
dan password valid
Alternatif :
Langkah 2
Apabila username dan password yang
dimasukkan tidak valid maka sistem akan
membuka kembali halaman index dengan
notifikasi error
3.1.2.4 Use Case Narrative View Rules
Tabel 3.4 Use Case Narrative View Rules
Pelaku :
Student, Lecturer
Deskripsi :
User dapat melihat aturan mengenai penggunaan
aplikasi video conference
Prakondisi :
User harus login terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
47
User mengklik menu
Sistem akan
Rules
menampilkan halaman
Rules
3.1.2.5 Use Case Narrative Open Video Conference Application
Tabel 3.5 Use Case Narrative Open Video Conference Application
Pelaku :
Student, Lecturer
Deskripsi :
User dapat menggunakan aplikasi video
conference untuk melakukan proses
pembelajaran maupun diskusi
Prakondisi :
User harus login terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik menu
Sistem akan
Home
menampilkan halaman
Home
Langkah 3 :
Langkah 4 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan yang dipilih oleh
untuk user (lihat
user
pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
M elakukan
Langkah 1 :
Langkah 2 :
video
User mengklik menu
Sistem akan
conference
d601
menampilkan login box
dengan
Langkah 3 :
Langkah 4 :
lecturer
User memasukkan
Sistem akan
username dan
menampilkan window
password
camera ELM O
48
Langkah 5 :
Langkah 6 :
User memilih bahasa
Sistem akan
yang diinginkan
menampilkan halaman
utama camera ELM O
Langkah 7 :
Langkah 8 :
User dapat memilih
Sistem akan
ukuran image yang
menampilkan Camera
ingin ditampilkan
ELM O Live Display
dengan mengklik Live
View sesuai dengan
ukuran yang
diinginkan
M elakukan
Langkah 1 :
Langkah 2 :
video
User mengklik menu
Sistem akan
conference
602
menampilkan login box
dengan student
Langkah 3 :
Langkah 4 :
User memasukkan
Sistem akan
username dan
menampilkan window
password
camera ELM O
Langkah 5 :
Langkah 6 :
User memilih bahasa
Sistem akan
yang diinginkan
menampilkan halaman
utama camera ELM O
Langkah 7 :
Langkah 8 :
User dapat memilih
Sistem akan
ukuran image yang
menampilkan Camera
ingin ditampilkan
ELM O Live Display
dengan mengklik Live
View sesuai dengan
ukuran yang
diinginkan
49
3.1.2.6 Use Case Narrative Leave Video Conference Application
Tabel 3.6 Use Case Narrative Leave Video Conference Application
Pelaku :
Student, Lecturer
Deskripsi :
User ingin keluar dari aplikasi video conference
Prakondisi :
User harus login ke dalam aplikasi video
conference terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik icon
Sistem akan menutup
tanda silang (close)
aplikasi video
yang berada di sisi
conference
kanan atas window
Camera ELMO Live
Display
3.1.2.7 Use Case Narrative Control Camera
Tabel 3.7 Use Case Narrative Control Camera
Pelaku :
Lecturer
Deskripsi :
User dapat mengontrol posisi camera dan
melakukan pengaturan terhadap objek
Prakondisi :
User harus login ke dalam aplikasi video
conference terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik Live
Sistem akan
View sesuai dengan
menampilkan Camera
ukuran yang
ELM O Live Display
diinginkan
50
Langkah 3 :
Langkah 4 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan yang dipilih oleh
untuk user (lihat
user
pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
M engarahkan
Langkah 1 :
Langkah 2 :
posisi camera
User menggerakkan
Sistem akan
scroll bar atau
menampilkan objek
mengklik camera
sesuai dengan
position
pergerakan yang
dilakukan
M engembalikan
Langkah 1 :
Langkah 2 :
camera ke
User mengklik
Sistem akan
posisi semula
tombol Reset
menampilkan objek
posisi semula
Zoom objek
Langkah 1 :
Langkah 2 :
User mengklik
Sistem akan
tombol Wide untuk
menampilkan objek
memperkecil objek
sesuai dengan
atau tombol Tele
pengaturan yang telah
untuk memperbesar
dilakukan
objek pada scroll bar
zoom
M enyimpan
Langkah 1 :
Langkah 2 :
posisi objek
User memilih preset
Sistem akan menyimpan
number yang terdapat
posisi dari objek yang
pada preset combo
telah ditentukan
box lalu mengklik
tombol Save Preset
51
M elihat objek
Langkah 1 :
Langkah 2 :
yang telah
User memilih preset
Sistem akan
disimpan
number kemudian
menampilkan objek
mengklik tombol
Goto Preset
M engatur
Langkah 1 :
Langkah 2 :
cahaya pada
User mengklik
Sistem akan
objek
tombol open untuk
menampilkan objek
meningkatkan cahaya
sesuai dengan
atau mengklik tombol
pengaturan yang telah
close untuk
dilakukan
mengurangi cahaya
pada objek dan
apabila tingkat
cahaya ingin diatur
pada level normal,
user mengklik tombol
Normal
M engatur focus
Langkah 1 :
Langkah 2 :
pada objek
User mengklik
Sistem akan
tombol near apabila
menampilkan objek
ingin mendekatkan
sesuai dengan
focus atau far apabila
pengaturan yang telah
ingin menjauhkan
dilakukan
focus. Apabila focus
dari objek ingin diatur
secara otomatis, user
mengklik tombol
Auto
52
3.1.2.8 Use Case Narrative Logout
Tabel 3.8 Use Case Narrative Logout
Pelaku :
Student, Lecturer
Deskripsi :
User melakukan logout untuk keluar dari aplikasi
Prakondisi :
User harus login terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik tombol Sistem akan
Log out
menampilkan halaman
index
3.1.2.9 Use Case Narrative Setting MPEG4
Tabel 3.9 Use Case Narrative Setting M PEG4
Pelaku :
Admin
Deskripsi :
User melakukan pengaturan terhadap image
MPEG4
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
MPEG4 Setup
menampilkan halaman
MPEG4 Setup
53
Langkah 5 :
Langkah 6 :
User menginput bit
Sistem akan menyimpan
rate dan memilih
data yang telah
frame rate, resolution,
dimasukkan
dan mode yang akan
Langkah 7 :
digunakan kemudian
Sistem akan
mengklik tombol OK
menampilkan halaman
ELM O IP Camera
Setup
3.1.2.10
Use Case Narrative Setting Network
Tabel 3.10 Use Case Narrative Setting Network
Pelaku :
Admin
Deskripsi :
User membuat pengaturan yang berkaitan
dengan jaringan yang akan digunakan
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
Network Setup
menampilkan halaman
Network Setup
Langkah 5 :
Langkah 6 :
User dapat memilih
Sistem akan menyimpan
tipe pengiriman data
data yang telah
54
dan menginput IP,
dimasukkan
Gateway, Netmask,
Langkah 7 :
Broadcast, serta port
Sistem akan
kemudian mengklik
menampilkan halaman
tombol OK
ELM O IP Camera
Setup
3.1.2.11
Use Case Narrative Setting User
Tabel 3.11 Use Case Narrative Setting User
Pelaku :
Admin
Deskripsi :
User membuat pengaturan yang berkaitan
dengan administrasi user
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
User Setup
menampilkan halaman
User Setup
Langkah 5 :
Langkah 6 :
User dapat memilih
Sistem akan merespon
pilihan yang tersedia
pilihan user
(lihat pilihan)
Pilihan :
Kegiatan Pelaku
Respon Sistem
55
M enambah
Langkah 1 :
Langkah 2 :
user
User menginput ID,
Sistem akan
password, dan
menampilkan data yang
memilih authority
telah dimasukkan pada
kemudian mengklik
list
tombol Add
Langkah 3 :
Langkah 4 :
User mengklik tombol Sistem akan menyimpan
OK
data yang telah
dimasukkan
Langkah 5 :
Sistem akan
menampilkan halaman
ELM O IP Camera
Setup
M engubah
Langkah 1 :
Langkah 2 :
user
User mengklik user
Sistem akan
yang ingin diubah
menampilkan data user
pada list
Langkah 3 :
Langkah 4 :
User menginput data
Sistem akan
kemudian mengklik
menampilkan data yang
tombol Modify
telah diubah pada list
Langkah 5 :
Langkah 6 :
User mengklik tombol Sistem akan menyimpan
OK
data yang telah
dimasukkan
Langkah 7 :
Sistem akan
menampilkan halaman
ELM O IP Camera
56
Setup
M enghapus
Langkah 1 :
Langkah 2 :
user
User mengklik user
Sistem akan
yang ingin dihapus
menampilkan data user
pada list
Langkah 3 :
Langkah 4 :
User mengklik tombol Sistem akan menghapus
Remove
user yang telah dipilih
dari list
Langkah 5 :
Langkah 6 :
User mengklik tombol Sistem akan menyimpan
OK
data yang telah
dimasukkan
Langkah 5 :
Sistem akan
menampilkan halaman
ELM O IP Camera
Setup
3.1.2.12
Use Case Narrative Setting Camera
Tabel 3.12 Use Case Narrative Setting Camera
Pelaku :
Admin
Deskripsi :
User membuat pengaturan yang berkaitan
dengan camera
Prakondisi :
User harus login ke dalam window camera
ELM O terlebih dahulu
Bidang khas
Kegiatan Pelaku
Respon Sistem
57
suatu event :
Langkah 1 :
Langkah 2 :
User mengklik link
Sistem akan
Setup
menampilkan halaman
ELM O IP Camera
Setup
Langkah 3 :
Langkah 4 :
User mengklik link
Sistem akan
Camera Setup
menampilkan halaman
Camera Setup
Langkah 5 :
Langkah 6 :
User mengklik link
Sistem akan
Misc. (miscellaneous)
menampikan halaman
Settings
Misc. Settings
Langkah 7 :
Langkah 8 :
User dapat memilih
Sistem akan menyimpan
pengaturan-
data yang telah
pengaturan yang
dimasukkan
diinginkan pada
Langkah 9 :
camera kemudian
Sistem akan
mengklik tombol OK
menampilkan halaman
Camera Setup
3.1.3
Activity Diagram
3.1.3.1 Activity Diagram View Main Menu
Pada halaman index terdapat 4 jenis main menu yang dapat
diakses oleh user yaitu Camera Overview, About Video Conference,
How To Use This Site, dan FAQ.
58
Gambar 3.2 Activity Diagram View Main Menu
3.1.3.2 Activity Diagram Chatting
User dapat melakukan pengiriman teks melalui chat box yang
terdapat pada halaman index. M elalui chat box ini, user yang satu
dengan yang lain dapat saling berinteraksi. Penggunaan fitur ini
tidaklah sukar. User hanya perlu menginput teks pada field yang
tersedia kemudian teks tersebut secara otomatis akan ditampilkan
pada box yang tersedia.
59
Gambar 3.3 Activity Diagram Chatting
3.1.3.3 Activity Diagram Login
User harus melakukan login terlebih dahulu untuk dapat
menggunakan fitur utama yang terdapat pada aplikasi yaitu video
conference. Login dibagi menjadi dua jenis, yaitu login sebagai
student dengan username berupa nomor ruang kelas dan password
berupa IP yang tertera pada camera dan login sebagai lecturer
dengan username berupa kode d beserta nomor ruang kelas dan
password berupa IP yang tertera pada camera.
Apabila username dan password yang dimasukkan oleh user tidak
valid maka sistem akan menampilkan kembali halaman index dengan
notifikasi error. Error untuk login dibedakan menjadi 2 jenis, yaitu
error karena username dan password yang dimasukkan salah atau
tidak terdaftar dan error karena username dan password yang
dimasukkan sudah melakukan login terlebih dahulu.
60
Gambar 3.4 Activity Diagram Login
3.1.3.4 Activity Diagram View Rules
User dapat melihat rule-rule mengenai penggunaan aplikasi video
conference pada menu ini. Rule untuk lecturer berbeda dengan rule
untuk student. Apabila user yang login adalah lecturer maka rule
yang akan ditampilkan adalah rule untuk lecturer yang berisi
informasi mengenai username dan password untuk masuk ke dalam
aplikasi video conference.
Apabila user yang login adalah student maka rule yang
ditampilkan adalah rule untuk student yang juga berisi informasi
61
mengenai username dan password untuk masuk ke dalam aplikasi
video conference.
Gambar 3.5 Activity Diagram View Rules
3.1.3.5 Activity Diagram Open Video Conference Application
Fitur video conference merupakan fitur utama yang terdapat pada
aplikasi. Fitur ini hanya dapat diakses oleh user yang telah
melakukan login. Fitur ini dapat digunakan dengan mengklik menu
dengan kode d disertai nomor ruang kelas (contoh : d601) yang
menunjukkan bahwa menu tersebut adalah menu untuk melakukan
video conference dengan lecturer dan menu dengan nama nomor
ruang kelas (contoh : 602) yang menunjukkan bahwa menu tersebut
adalah menu untuk melakukan video conference dengan student.
Setelah user mengklik menu tersebut, sistem akan meminta user
untuk login dengan memasukkan username dan password. User tidak
dapat membuat username dan password sendiri. Hanya admin yang
mempunyai privilege untuk membuat username dan password untuk
62
user login ke dalam aplikasi video conference. Hal ini akan
dijelaskan lebih detail pada point berikutnya yaitu setting user.
Oleh karena itu, informasi mengenai username dan password ini
dijelaskan pada menu Rules dan user dapat memperoleh username
dan password untuk login pada menu tersebut.
Setelah login, sistem akan meminta user untuk memilih bahasa
yang ingin digunakan pada aplikasi. Terdapat dua jenis pilihan
bahasa, yaitu English dan Japanese. Setelah user memilih bahasa,
sistem akan menampilkan halaman utama dari camera ELM O.
Untuk menampilkan live display dari camera ELM O, user dapat
mengklik link Live View (image size). User dapat memilih ukuran
tampilan dari live display. Terdapat tiga jenis ukuran, yaitu half-D1
dengan ukuran layar 704 x 480 pixels, SIF dengan ukuran 352 x 240
pixels, dan QQVGA dengan ukuran 160 x 120 pixels.
63
Gambar 3.6 Activity Diagram Open Video Conference Application
64
3.1.3.6 Activity Diagram Leave Video Conference Application
User dapat mengklik tombol close (tanda silang) yang terdapat
pada sisi kanan atas window jika user telah selesai menggunakan
aplikasi video conference and ingin keluar dari aplikasi.
Gambar 3.7 Activity Diagram Leave Video Conference Application
3.1.3.7 Activity Diagram Control Camera
Setelah user masuk ke dalam aplikasi video conference, user
dapat mengontrol camera. User yang memiliki privilege ini hanya
lecturer karena authority untuk lecturer telah diatur oleh admin pada
setting user sebagai operator. Hal ini dimaksudkan agar lecturer
dapat mengontrol dan memantau student yang berada di dalam kelas.
Pengaturan posisi camera dapat dilakukan dengan dua cara, yaitu
dengan menggerakkan scroll bar atau titik kuning yang terdapat pada
camera position. Untuk mengembalikan camera ke posisi semula,
user dapat mengklik tombol Reset.
65
Selain dapat mengontrol arah dan posisi dari camera, user juga
dapat memperbesar dan memperkecil objek dengan mengklik tombol
Wide dan Tele. Tombol Wide digunakan untuk memperkecil objek
sedangkan tombol Tele digunakan untuk memperbesar objek.
User dapat menyimpan image dengan memilih preset number
pada preset combo box (range :
Home, Preset 1-16) kemudian
mengklik tombol Save Preset. Jika user ingin melihat image yang
telah disimpan, user dapat memilih preset number lalu mengklik
tombol Goto Preset kemudian image yang telah disimpan akan
ditampilkan pada live display.
User dapat mengatur tingkat keterangan (brightness) objek pada
iris. Terdapat tiga jenis pengaturan cahaya, yaitu klik tombol Open
untuk meningkatkan cahaya pada objek, klik tombol Normal untuk
mengatur cahaya objek pada level normal, dan klik tombol Close
untuk mengurangi cahaya pada objek.
User dapat mengatur focus dari objek dengan mengklik tombol
Near untuk memfokuskan objek lebih dekat, mengklik tombol Auto
untuk memfokuskan objek secara automatis, dan mengklik tombol
Far untuk menjauhkan focus objek.
66
Gambar 3.8 Activity Diagram Control Camera
67
3.1.3.8 Activity Diagram Logout
User dapat keluar dari aplikasi dengan mengklik tombol Log out.
Gambar 3.9 Activity Diagram Logout
3.1.3.9 Activity Diagram Setting MPEG4
Sebelum aplikasi dapat dijalankan, admin harus melakukan
pengaturan
terlebih
dahulu
pada
camera.
Setting
M PEG4
dimaksudkan untuk mengatur bit rate, frame rate, resolution dan
mode dari image. Admin dapat menginput bit rate dan memilih frame
rate, resolution, dan mode dari image. Range bit rate : 64 – 2000
kbps, range frame rate : 30, 15, 10, 5, dan 1 frame/second, resolution
: D1 : 704 x 480 dan SIF : 352 x 240, mode : frame (mengurangi
delay untuk image) dan GOP (memungkinkan camera untuk
menangani performa lingkungan jaringan yang sempit menjadi luas
meskipun delay untuk image lama).
68
Klik Link Setup
Tampilkan halaman ELMO IP Camera Setup
Klik Link MPEG4 Setup
Tampilkan halaman MPEG4 Setup
Input Data & Klik OK
Simpan data yang telah dimasukkan
Tampilkan halaman ELMO IP Camera Setup
Gambar 3.10 Activity Diagram Setting M PEG4
3.1.3.10
Activity Diagram Setting Network
Setting network dimaksudkan untuk mengatur tipe pengiriman
data yang akan digunakan oleh user apakah unicast atau multicast,
mengkonfigurasi jaringan yang terdiri dari IP address camera,
69
gateway, netmask, broadcast, serta mengatur port yang akan
digunakan oleh camera.
Klik Link Setup
Tampilkan halaman ELMO IP Camera Setup
Klik Link Network Setup
Tampilkan halaman Network Setup
Input Data & Klik OK
Simpan data yang telah dimasukkan
Tampilkan halaman ELMO IP Camera Setup
Gambar 3.11 Activity Diagram Setting Network
70
3.1.3.11
Activity Diagram Setting User
Setting user dimaksudkan untuk melakukan pengaturan yang
berhubungan dengan administrasi user. Admin harus mendaftarkan
user terlebih dahulu dengan mengisikan ID, password, dan
menentukan authority agar user dapat mengakses aplikasi. Hanya
admin yang mempunyai privilege untuk menambah, mengubah, dan
menghapus user.
Gambar 3.12 Activity Diagram Setting User
71
3.1.3.12
Activity Diagram Setting Camera
Setting camera dimaksudkan untuk melakukan pengaturan yang
berhubungan dengan tampilan object sebelum camera digunakan
oleh user. Penjelasan mengenai setting user akan dijelaskan pada
point berikutnya.
Gambar 3.13 Activity Diagram Setting Camera
72
3.1.4
Statechart Diagram
3.1.4.1 Statechart Diagram View Menu Camera Overview
Gambar 3.14 Statechart Diagram View Menu Camera Overview
3.1.4.2 Statechart Diagram View Menu About Video Conference
Gambar 3.15 Statechart Diagram View Menu About Video
Conference
3.1.4.3 Statechart Diagram View Menu How To Use This Site
Gambar 3.16 Statechart Diagram View How To Use This Site
73
3.1.4.4 Statechart Diagram View Menu FAQ
Gambar 3.17 Statechart Diagram View Menu FAQ
3.1.4.5 Statechart Diagram Chatting
Gambar 3.18 Statechart Diagram Chatting
3.1.4.6 Statechart Diagram Login
Gambar 3.19 Statechart Diagram Login
3.1.4.7 Statechart Diagram View Rules
Gambar 3.20 Statechart Diagram View Rules
74
3.1.4.8 Statechart Diagram Open Video Conference Application (Lecturer)
Gambar 3.21 Statechart Diagram Open Video Conference
Application (Lecturer)
3.1.4.9 Statechart Diagram Open Video Conference Application (Student)
Gambar 3.22 Statechart Diagram Open Video Conference
Application (Student)
75
3.1.4.10
Statechart Diagram Leave Video Conference Application
Gambar 3.23 Statechart Diagram Leave Video Conference
Application
3.1.4.11
Statechart Diagram Control Camera (Position)
Gambar 3.24 Statechart Diagram Control Camera (Position)
3.1.4.12
Statechart Diagram Control Camera (Reset)
Gambar 3.25 Statechart Diagram Control Camera (Reset)
76
3.1.4.13
Statechart Diagram Control Camera (Zoom In Object)
Gambar 3.26 Statechart Diagram Control Camera (Zoom In Object)
3.1.4.14
Statechart Diagram Control Camera (Zoom Out Object)
Gambar 3.27 Statechart Diagram Control Camera (Zoom Out
Object)
3.1.4.15
Statechart Diagram Control Camera (Save Preset)
Gambar 3.28 Statechart Diagram Control Camera (Save Preset)
77
3.1.4.16
Statechart Diagram Control Camera (View Preset)
Gambar 3.29 Statechart Diagram Control Camera (View Preset)
3.1.4.17
Statechart Diagram Control Camera (Iris Increase)
Gambar 3.30 Statechart Diagram Control Camera (Iris Increase)
3.1.4.18
Statechart Diagram Control Camera (Iris Normal)
Gambar 3.31 Statechart Diagram Control Camera (Iris Normal)
78
3.1.4.19
Statechart Diagram Control Camera (Iris Decrease)
Gambar 3.32 Statechart Diagram Control Camera (Iris Decrease)
3.1.4.20
Statechart Diagram Control Camera (Focu s Near)
Gambar 3.33 Statechart Diagram Control Camera (Focus Near)
3.1.4.21
Statechart Diagram Control Camera (Focu s Auto)
Gambar 3.34 Statechart Diagram Control Camera (Focus Auto)
79
3.1.4.22
Statechart Diagram Control Camera (Focu s Far)
Gambar 3.35 Statechart Diagram Control Camera (Focus Far)
3.1.4.23
Statechart Diagram Logout
Gambar 3.36 Statechart Diagram Logout
3.1.4.24
Statechart Diagram Setting MPEG4
Gambar 3.37 Statechart Diagram Setting M PEG4
80
3.1.4.25
Statechart Diagram Setting Network
Gambar 3.38 Statechart Diagram Setting Network
3.1.4.26
Statechart Diagram Setting User (Add User)
Gambar 3.39 Statechart Diagram Setting User (Add User)
81
3.1.4.27
Statechart Diagram Setting User (Modify User)
Gambar 3.40 Statechart Diagram Setting User (Modify User)
3.1.4.28
Statechart Diagram Setting User (Delete User)
Gambar 3.41 Statechart Diagram Setting User (Delete User)
82
3.1.4.29
Statechart Diagram Setting Camera
Gambar 3.42 Statechart Diagram Setting Camera
3.1.5
Sequence Diagram
3.1.5.1 Sequence Diagram View Main Menu
Gambar 3.43 Sequence Diagram View Main Menu
83
3.1.5.2 Sequence Diagram Chatting
Gambar 3.44 Sequence Diagram Chatting
3.1.5.3 Sequence Diagram Login
Gambar 3.45 Sequence Diagram Login
84
3.1.5.4 Sequence Diagram View Rules
Gambar 3.46 Sequence Diagram View Rules
3.1.5.5 Sequence Diagram Open Video Conference Application
Gambar 3.47 Sequence Diagram Open Video Conference Application
85
3.1.5.6 Sequence Diagram Leave Video Conference Application
Gambar 3.48 Sequence Diagram Leave Video Conference Application
86
3.1.5.7 Sequence Diagram Control Camera
L ectur er
EL MO Mai n Pag e
clic k_L ive_ Vie w()
Ca mera E LMO Liv e Di spla y
ELMO Ca mera
o pe n()
mo ve_ scrol l_ bar( )
ro ta te()
retur n_re sul t( )
click _Ca mer a_Po sitio n()
ro ta te()
retur n_re sul t( )
cl ick_ Res et()
ro ta te()
retur n_re sul t( )
cl ick_ Wi de ()
zoo m_o ut()
retur n_re sul t( )
cl ick_ Tele ()
z oom _in ()
retur n_re sul t( )
sele ct_Pre set_N umb er()
cli ck_Sa ve_ Prese t()
save ()
retur n_re sul t( )
sele ct_Pre set_N umb er()
cl ick_ Go to _Pr eset()
g et_d ata()
clic k_Ope n()
i ncre ase _b rig htne ss()
cl ick_ No rmal ()
no rmal _bri gh tn ess( )
retur n_re sul t( )
return _re sul t()
return _re sul t()
cl ick_ Cl ose ()
d ecre ase _b rig htne ss()
retur n_re sul t( )
click _Ne ar()
sho rte n_ th e_ focus ()
retur n_re sul t( )
cli ck_Au to()
a utoma tical ly_ ad jus t()
click _Far()
fa r_the _focu s()
retu rn_r esu lt()
retur n_re sul t( )
Gambar 3.49 Sequence Diagram Control Camera
87
3.1.5.8 Sequence Diagram Logout
Student, Lecturer
Home Page
click_Log_out()
Index Page
open()
Gambar 3.50 Sequence Diagram Logout
3.1.5.9 Sequence Diagram Setting MPEG4
A dm in
ELM O IP C am era Setu p
P ag e
EL MO Mai n Pa ge
cl ick _Se tup ()
MPEG4 Setu p Pa ge
op en ()
c lic k_M PEG4 _Se tup ()
op en ()
in pu t_d ata ()
cl ick _OK()
save ()
re turn resu lt()
Gambar 3.51 Sequence Diagram Setting M PEG4
E LMO C am era
88
3.1.5.10
Sequence Diagram Setting Network
Gambar 3.52 Sequence Diagram Setting Network
89
3.1.5.11
Sequence Diagram Setting User
Gambar 3.53 Sequence Diagram Setting User
90
3.1.5.12
Sequence Diagram Setting Camera
Gambar 3.54 Sequence Diagram Setting Camera
91
3.2 Rancangan Layar
3.2.1
Halaman Index
Gambar 3.55 Perancangan Layar Halaman Index
Keterangan gambar :
1. Terdapat lima jenis menu dalam Main Menu yaitu Home, Camera Overview,
About Video Conference, How To Use This Site, FAQ. Penjelasan mengenai
menu-menu tersebut akan dijelaskan lebih lanjut.
92
2. Login form yang terdiri dari username dan password untuk masuk ke dalam
sistem.
3. Tombol Log in untuk submit username dan password.
4. Chat box untuk melakukan chatting antara user yang satu dengan user yang
lain.
3.2.2
Halaman Home
Gambar 3.56 Perancangan Layar Halaman Home
Keterangan gambar :
1. M enunjukkan nama user yang sedang login.
2. Tombol Log out yang berguna untuk keluar dari sistem.
93
3. User Menu merupakan menu tambahan setelah user login. User menu terdiri
dari Rules dan menu untuk menggunakan video conference. Penjelasan
mengenai menu tambahan tersebut akan dijelaskan lebih lanjut.
3.2.3
Halaman Camera Overview
Gambar 3.57 Perancangan Layar Halaman Camera Overview
Keterangan gambar :
Halaman Camera Overview berisi content dengan judul ELM O PTC 401C-IP
Camera yang berisi penjelasan, spesifikasi, serta fitur yang terdapat pada camera
tersebut.
94
3.2.4
Halaman About Video Conference
Gambar 3.58 Perancangan Layar Halaman About Video Conference
Keterangan gambar :
Halaman About Video Conference ini berisi content dengan judul Video
Conference yang berisi penjelasan mengenai sejarah dan perkembangan video
conference.
95
3.2.5
Halaman How To Use This Site
Gambar 3.59 Perancangan Layar Halaman How To Use This Site
Keterangan gambar :
Halaman How To Use This Site ini berisi content dengan judul How To Use This
Site yang berisi penjelasan mengenai cara dan langkah-langkah menggunakan
site.
96
3.2.6
Halaman FAQ
Gambar 3.60 Perancangan Layar Halaman FAQ
Keterangan gambar :
Halaman FAQ ini berisi content dengan judul FAQ yang berisi pertanyaanpertanyaan yang diajukan mengenai aplikasi.
97
3.2.7
Halaman Rules
Gambar 3.61 Perancangan Layar Halaman Rules
Keterangan gambar :
1. M enunjukkan nama user yang sedang login.
2. Tombol Log out yang berguna untuk keluar dari sistem.
3. User Menu merupakan menu tambahan setelah user login. User menu terdiri
dari Rules dan menu untuk menggunakan video conference.
Halaman Rules ini berisi content dengan judul Rules yang berisi rule-rule serta
informasi mengenai username dan password untuk user login ke dalam aplikasi
video conference.
98
3.2.8
Halaman Control Camera
Gambar 3.62 Perancangan Layar Halaman Control Camera
Keterangan gambar :
1. Scroll bar dan camera position yang digunakan untuk memindahkan posisi
image pada koordinat yang diinginkan.
2. Tombol Reset untuk mengembalikan posisi camera ke posisi semula yang
telah disimpan oleh camera.
3.
Dengan mengklik tombol Save Preset, posisi sekarang (current) akan
tersimpan pada preset number yang dipilih.
4. Tombol Release Control untuk mendaftarkan state focus dan brightness pada
preset number.
99
5. Checkbox Speaker dipilih apabila ingin mendengarkan output suara yang
diinput melalui microphone.
6. Checkbox External GPIO untuk mengaktifkan atau mengnonaktifkan GPIO
terminal.
7. Scrool bar zoom untuk memperbesar (tele) atau memperkecil (wide) tampilan
objek.
8. Tombol Open dan Close pada Iris untuk meningkatkan atau mengurangi
brightness sedangkan tombol Normal mengarahkan brightness ke level
normal.
9. Tombol Near dan Far pada Focus untuk mengatur focus secara manual
sedangkan tombol Auto untuk mengatur focus secara automatis.
10. Pilih preset yang ingin ditampilkan pada preset combo box. Range preset
adalah Home, Preset 1-16. Dengan mengklik tombol Goto Preset, preset
yang terdaftar akan ditampilkan.
3.2.9
Halaman Setting MPEG4
Gambar 3.63 Perancangan Layar Halaman Setting M PEG4
100
Keterangan gambar :
1. Tentukan batas atas pada jumlah data untuk membatasi jumlah data yang
dihasilkan selama komunikasi atau distribusi image berlangsung. Range
pengaturan bit rate mulai dari 64 sampai 2000 kbps.
2. Tentukan jumlah frame yang akan ditampilkan per detik. Range pengaturan
frame rate terdiri dari 30, 15, 10, 5, dan 1 frame / detik. Sound tidak akan
diterima atau dikirimkan ketika frame rate diatur menjadi 1 frame / detik.
3. Tentukan ukuran dari image yang akan ditampilkan. Pengaturan resolusi
terdiri dari dua jenis, yaitu D1 (704 x 480 pixels) dan SIF (352 x 240 pixels).
4. Atur delay untuk gambar sesuai dengan lingkungan jaringan. Pengaturan
mode terdiri dari dua jenis, yaitu frame (mengurangi delay untuk image) dan
GOP (memungkinkan kamera untuk menangani performa lingkungan
jaringan yang sempit menjadi luas meskipun delay untuk image lama).
5. Tombol OK untuk menyimpan data yang telah dimasukkan.
6. Tombol Cancel untuk membatalkan.
101
3.2.10 Rancangan Layar Halaman Setting Network
Network Setup
1
Send Type
UDP Unicast
2
IP
192
168
1
10
3
Gateway
192
168
1
1
D NS1
0
0
0
0
DN S2
0
0
0
0
5
Netmask
255
255
255
0
6
Broadcast
192
168
1
255
7
MAC Address
00
4
0c
2f
00
00
9a
Ports
8
Start Port Range
3000
9
End Port Range
4000
10
HT TP Port
80
11
Option Port
3491
12
Multicast Po rt
3490
13
Audio Port
3492
RS-485
14
RS-485 ID
1
OK
Cancel
Gambar 3.64 Perancangan Layar Halaman Setting Network
Keterangan gambar :
1. Pilih mode untuk mengirimkan M PEG4 image. Ada tiga jenis mode
pengiriman image, yaitu :
•
UDP Unicast
Data UDP image didistribusikan berdasarkan permintaan dari hos t
untuk koneksi. Hanya sampai tiga alamat saja yang bisa terkoneksi
dari viewer ke camera.
102
•
Multicast
Data
UDP
image
didistribusikan,
terlepas
dari
apakah
camera terhubung atau tidak dari host, mengakibatkan penurunan
beban pada kamera dan jalur transmisi. M eskipun berbagai address
dapat diatur, data image mungkin tidak didistribusikan dengan baik,
tergantung pada lingkungan jaringan.
•
TCP Unicast
Data TCP image didistribusikan berdasarkan permintaan dari host
untuk koneksi. Hanya sampai tiga alamat saja yang bisa terkoneksi
dari viewer ke camera.
2. Atur IP address dari camera.
3. Tentukan
IP
address
dari router
ketika router
digunakan
untuk
menghubungkan camera ke jaringan luar.
4. Atur address dari DNS server kemana camera dihubungkan. Pada DNS2,
atur address dari DNS server kemana camera akan dihubungkan jika camera
tidak dapat terhubung ke DNS1.
5. Atur subnet mask address dari camera.
6. Atur broadcast address dari camera.
7. M enampilkan M AC address dari camera.
8. Tentukan port pertama camera terbuka ke jaringan.
9. Tentukan port terakhir camera terbuka ke jaringan.
10. Tentukan port yang digunakan untuk web server pada camera (80, 1024
sampai 65535).
103
11. Tentukan port yang digunakan untuk mendistribusikan image dari camera
(1024 sampai 65535).
12. Tentukan port yang digunakan ketika camera menggunakan mode multicast
(1024 sampai 65535).
13. Tentukan port yang digunakan untuk mengirimkan dan menerima suara dari
atau ke camera (1024 sampai 65535).
14. Atur ID address dari RS-485 dari camera (1 sampai 223).
15. Tombol OK untuk menyimpan data yang telah dimasukkan.
16. Tombol Cancel untuk membatalkan.
3.2.11 Rancangan Layar Halaman Setting User
Gambar 3.65 Perancangan Layar Halaman Setting User
104
Keterangan gambar :
1. Tampilan list yang terdiri dari ID, Authority setelah data dimasukkan.
2. M asukkan ID user.
3. M asukkan password user.
4. Pilih authority dari user. Ada tiga jenis authority yang dapat dipilih, yaitu :
•
Administrator
Login ID untuk administrasi sudah ditetapkan, yaitu ‘root’. Dengan
ID ini, admin dapat menampilkan image, mengoperasikan camera,
dan mengatur setting camera.
•
Operator
Dapat menampilkan image dan mengoperasikan camera.
•
User
Hanya dapat menampilkan image saja.
Note :
Hanya root yang dapat didaftarkan sebagai administrator. Sedangkan untuk
operator dan user dapat didaftarkan sampai 99 nama.
5. Tombol Add untuk menambah user baru.
6. Tombol Modify untuk mengubah ID, password, atau authority dari user.
Untuk root, yang bisa diubah hanyalah password saja.
7. Tombol Remove untuk menghapus user. Semua user dapat dihapus kecuali
root.
8. Tombol OK untuk menyimpan data yang telah dimasukkan.
9. Tombol Cancel untuk membatalkan.
105
3.2.12 Rancangan Layar Setting Camera
Misc. Settin gs
1
AUT O R ET URN:
2
PRESET STILL:
3
FLIP ANGLE:
4
ALARM IN 1: PR ESET1
5
ALARM LOCK:
6
ALARM IN 2: PRESET2
7
OK
back
OF F
OFF
OFF
OFF
30s
1m
2m
5m
10m
20m
30m
ON
100
110
120
130
140
ON
Cancel
Home
8
Options Main
Gambar 3.66 Perancangan Layar Halaman Setting Camera
Keterangan gambar :
1. Pilih waktu otomatis untuk kembali ke posisi semula.
2. Bila fungsi ini diatur ke ON, image selama pergerakan antara posisi preset
menjadi statis (image sebelum pergerakan). Pada mode ini, gerakan
diaktifkan antara posisi preset (termasuk posisi awal), tetapi operasi PANTILT-ZOOM dinon-aktifkan. Fungsi ini berguna untuk menyimpan image
selain image posisi awal dan image posisi preset. Hanya ketika tombol
PRESET ditekan, image tidak dapat statis.
3. Pilih sudut putar image.
4. Untuk
mengatur
posisi
preset
(PRESET
1-16)
untuk
gerakan
dalam hal input pada terminal ALARM IN.
5. Bila fungsi ini diatur ke ON, selama input berada dalam terminal
ALARM IN, operasi yang lain dinonaktifkan.
106
6. Untuk
mengatur
posisi
preset
(PRESET
1-16)
untuk
gerakan
dalam hal input pada terminal ALARM IN.
7. Tombol OK untuk menyimpan data yang telah dimasukkan.
8. Tombol Cancel untuk membatalkan.
3.3 Rancang Bangun
Berikut adalah gambar rancang bangun secara keseluruhan untuk menghubungkan
camera ke speaker dan microphone serta koneksi ke jaringan menggunakan switch.
Gambar 3.67 Rancang Bangun Sistem