PROSEDUR PROGRAM
A.
Prosedur Installasi Aplikasi Berikut ini adalah langkah-langkah instalasi aplikasi “Bee Board”: 1. Jalankan file installer “Bee Board”
Gambar A.1 Installer “Bee Board”
2. Window instalasi akan muncul, lalu pilih Next.
Gambar A.2 Tampilan awal instalasi “Bee Board” 3. Baca agreement aplikasi “Bee Board” terlebih dahulu. Jika setuju dengan agreement tersebut, centang “I accept the terms of the License Agreement”, kemudian pilih Next.
146
147
Gambar A.3 Agreement pada instalasi “Bee Board”
4. Tentukan lokasi dimana aplikasi “Bee Board” akan di-install.
Gambar A.4 Lokasi aplikasi “Bee Board” akan di-install 5. Tentukan nama folder start menu dimana shortcut aplikasi “Bee Board” akan ditempatkan. Jika tidak ingin membuat shortcut pada start menu, centang “Do not create shortcuts”. Kemudian pilih Install.
148
Gambar A.5 Shortcut “Bee Board” pada start menu
6. Tunggu hingga instalasi selesai.
Gambar A.6 Proses instalasi “Bee Board” 7. Instalasi sudah selesai, lalu pilih Finish untuk mengakhiri instalasi.
149
Gambar A.7 Instalasi “Bee Board” sudah selesai
B.
Prosedur Penggunaan Aplikasi Back-end 1. Pengenalan Graphical User Interface (GUI) Jalankan aplikasi back-end “Bee Board” terlebih dahulu yang digambarkan dengan icon berikut ini.
Gambar B.8 Icon “Bee Board Configuration Center”
Aplikasi back-end “Bee Board” dinamakan dengan “Bee Board Configuration Center”. Aplikasi ini digunakan oleh administrator untuk mengubah berbagai konfigurasi guna mendukung aplikasi front-end yang akan digunakan oleh user. Pada dasarnya, GUI “Bee Board Configuration
150 Center” terbagi menjadi dua halaman, yaitu Application Settings dan WiiMote Settings. Untuk mengganti halaman, user dapat memilihnya di bagian sebelah kiri dari window “Bee Board Configuration Center”. Pada aplikasi “Bee Board Configuration Center” terdapat tiga buah tombol utama yaitu: a. Restore Defaults Tombol Restore Defaults digunakan untuk mengembalikan semua konfigurasi ke nilai default. Konfigurasi yang akan dikembalikan ke nilai default hanya konfigurasi yang terdapat pada halaman application settings yaitu, audio input, video dimension, default save location, dan undo levels. Sedangkan, konfigurasi pada halaman WiiMote settings tidak akan berubah.
b. Save Tombol Save digunakan untuk melakukan penyimpanan konfigurasi yang sudah dilakukan oleh administrator ke dalam sebuah file dengan format XML. Konfigurasi yang disimpan antara lain, audio input, video dimension, default save location, undo levels, dan titik-titik kalibrasi WiiMote. Setelah aplikasi melalukan penyimpanan konfigurasi ke dalam file XML, aplikasi akan tertutup.
151
c. Close Tombol Close digunakan untuk membatalkan seluruh perubahan konfigurasi dan menutup aplikasi. Close tidak akan menyimpan atau meng-update konfigurasi yang sudah tersimpan sebelumnya dalam file XML.
2. Application Settings Menu
application
settings
berisikan
konfigurasi
mendukung fitur-fitur utama pada aplikasi front-end.
Gambar B.9 Tampilan menu Application Settings
utama
untuk
152 Konfigurasi yang dapat dilakukan di dalam menu application settings adalah sebagai berikut: a. Audio Input Konfigurasi untuk memilih audio input device yang akan menjadi sumber suara dalam fitur audio video recording pada aplikasi front-end. Secara default, aplikasi akan memilih default audio input device yang sudah ditentukan oleh sistem operasi. Pilihan default audio input device ditandai dengan pilihan “default”. Selain default audio input device, aplikasi akan mendaftarkan seluruh audio input device yang dapat dikenali oleh sistem operasi.
Gambar B.10 Pilihan konfigurasi audio input
b. Video Dimension Konfigurasi yang digunakan untuk memilih dimensi video yang akan dihasilkan pada penggunaan audio video recording di dalam aplikasi front-end. Aplikasi hanya menyediakan tiga pilihan dimensi video, yaitu 240p, 360p, dan 480p. Secara default, aplikasi akan memilih dimensi 480p.
153
Gambar B.11 Pilihan pada konfigurasi video dimension
c. Default Save Location Konfigurasi untuk menentukan path dimana tempat penyimpanan seluruh file yang dihasilkan oleh aplikasi front-end. Secara default, aplikasi akan menyimpan di directory user yang sedang aktif pada sistem operasi.
Gambar B.12 Konfigurasi default save location
d. Undo Levels Konfigurasi untuk menentukan batasan banyaknya undo yang dapat dilakukan oleh user pada aplikasi front-end. Secara default, aplikasi akan menentukan batas undo sebanyak 10 langkah. Nilai konfigurasi undo levels dibatasi dalam rentang 5-50 langkah.
Gambar B.13 Konfigurasi undo levels
154
3. WiiMote Settings Menu WiiMote settings berisikan konfigurasi beserta informasi WiiMote yang akan digunakan pada aplikasi front-end.
Gambar B.14 Tampilan menu WiiMote Settings
Pada menu WiiMote Settings terdapat informasi berupa status dan hasil kalibrasi WiiMote. Berikut ini adalah penjelasan status informasi yang ditampilkan beserta dengan kalibrasi WiiMote. a. WiiMote Status Di dalam WiiMote Status terdapat informasi-informasi umum dari WiiMote yaitu, status koneksi WiiMote, daya baterai yang tersisa pada
155 WiiMote dalam satuan persentase dengan rentang 0-100%, dan pemetaan deteksi posisi LED pen yang relatif terhadap sensor kamera WiiMote.
Gambar B.15 Tampilan WiiMote Status ketika WiiMote belum terhubung
Setiap posisi LED pen yang terdeteksi pada sensor kamera WiiMote akan tergambar secara otomatis dengan tanda titik kuning di dalam kotak hitam dengan label “IR Sensor :”. Titik kuning yang terdeteksi dan berada di ujung-ujung kotak menandakan batas LED pen yang dapat dilihat oleh kamera WiiMote. Di luar batas tersebut, WiiMote tidak dapat membaca posisi LED pen. Oleh karena itu, pastikan kamera WiiMote dapat membaca titik-titik pada setiap ujung layar proyektor sebelum melakukan kalibrasi WiiMote.
156 Gambar B.16 Tampilan WiiMote Status ketika WiiMote sudah terhubung b. WiiMote Calibration Di dalam WiiMote Calibration terdapat informasi hasil kalibrasi yang sudah dilakukan oleh administrator. Selain itu, administrator juga bisa melakukan kalibrasi WiiMote. Jika kalibrasi belum pernah dilakukan, kotak kalibrasi hanya berwarna hitam saja.
Gambar B.17 Tampilan WiiMote Calibration pertama kali
Kalibrasi WiiMote dilakukan dengan tujuan untuk memetakan dari posisi ujung-ujung layar proyektor yang akan dijadikan sebagai tempat mencoret dan menggambar oleh LED pen ke posisi pada layar komputer. Ini dilakukan agar sensor kamera WiiMote mengetahui dimana letak dan seberapa besar layar yang akan dilihat oleh kamera WiiMote. Sehingga, ketika LED pen terdeteksi oleh kamera WiiMote, posisi LED pen yang masih relatif terhadap kamera WiiMote akan dikonversikan menjadi relatif terhadap layar komputer.
157 Saat administrator akan melakukan kalibrasi, akan muncul sebuah window yang menutupi seluruh layar monitor dengan sebuah lingkaran merah di pojok kiri atas.
Gambar B.18 Tampilan window kalibrasi
Untuk melakukan kalibrasi, administrator harus menggunakan LED pen dan menunjukkannya ke titik yang ditandai dengan lingkaran merah pada layar proyektor (bukan pada layar komputer). Aplikasi akan meminta empat titik yang menunjukkan ujung-ujung dari layar proyektor secara berurutan dimulai dari kiri atas, kanan atas, kiri bawah, dan kanan bawah. Setelah selesai melakukan kalibrasi, window akan tertutup dan hasil kalibrasi akan terlihat.
158
Gambar B.19 Tampilan WiiMote Calibration sesudah melakukan kalibrasi
Gambar polygon bergaris kuning di dalam kotak berwarna hitam menandakan besar dan letak layar proyektor yang dilihat oleh kamera WiiMote. Persentase utilization di bagian atas kotak menandakan seberapa besar persentase area layar proyektor yang memenuhi area kamera WiiMote. Sehingga, semakin besar area layar proyektor yang memenuhi kotak hitam, maka akan semakin besar persentase utilization-nya. Pastikan utilization tidak terlalu kecil (dibawah 20%), karena menurut percobaan penulis, utilization dibawah 20% membuat posisi LED pen dengan yang tergambar di komputer menjadi kurang akurat. Jika administrator merasa kurang puas dengan kalibrasi yang sudah dilakukan,
administrator
dapat
melakukan
kalibrasi
ulang
menggantikan data kalibrasi yang sudah dilakukan sebelumnya.
untuk
159 C.
Prosedur Penggunaan Aplikasi Front-end 1. Pengenalan Graphical User Interface (GUI) Jalankan aplikasi front-end “Bee Board” terlebih dahulu yang digambarkan dengan icon berikut ini.
Gambar C.20 Icon “Bee Board”
Saat aplikasi baru dijalankan,
aplikasi akan meminta user untuk
memasukkan nama folder sebagai tempat penyimpanan hasil snapshot, audio video recording, dan merge snapshots as PDF. Aplikasi hanya akan meminta input tersebut sekali saja selama aplikasi belum di tutup.
Gambar C.21 Dialog input nama folder penyimpanan
Secara default, aplikasi akan menentukan nama folder dengan format “My Folder [n]”, dimana [n] adalah nomor urut folder yang akan terus bertambah. [n] dihitung berdasarkan urutan nomor terakhir “My Folder” ditambah dengan satu.
160 Aplikasi tidak langsung membuat folder penyimpanan tersebut. Aplikasi akan membuat folder penyimpanan tersebut setelah user sudah melakukan snapshot, audio video recording, atau merge snapshot as PDF. Setelah melakukan input nama folder penyimpanan, GUI “Bee Board” akan muncul. Pada dasarnya, GUI “Bee Board” terbagi menjadi dua bagian besar yaitu, canvas dan toolbox. a. Toolbox Pada toolbox “Bee Board” berisikan seluruh tool yang menjadi fitur utama dari aplikasi “Bee Board”.
Terdapat 12 tools yang sudah
disediakan aplikasi.
Pen
Highlighter
Tool color
Snapshot Undo
Merge Snapshots as PDF
Open Folder Eraser
Shape
Canvas
Redo
Recording
Gambar C.22 Tampilan utama toolbox “Bee Board”
161 Seluruh tool digambarkan dengan sebuah icon agar lebih mudah diingat. Jika user kebingungan dengan nama tool yang ada, user dapat menggerakkan mouse ke atas gambar tool yang ingin diketahui. Aplikasi akan menampilkan tooltip tool yang menampilkan nama dari tool tersebut.
Gambar C.23 Tooltip tool pada toolbox “Bee Board”
Saat aplikasi baru berjalan, posisi toolbox akan berada di sebelah kanan bawah dari layar. Toolbox akan berada tepat diatas taskbar dari desktop sistem operasi. Jika taskbar tidak ditemukan pada desktop sistem operasi yang bersangkutan, maka aplikasi akan menyesuaikan dengan menempatkan toolbox di bagian paling bawah layar. Penyesuaian ini hanya dilakukan saat pertama kali aplikasi dijalankan. Jika user memindahkan taskbar setelah aplikasi dijalankan, maka posisi toolbox tidak akan berubah.
162
Gambar C.24 Penyesuaian aplikasi saat taskbar tidak berada di bawah
Besar toolbox akan menyesuaikan proporsi resolusi layar yang digunakan. Semakin besar resolusi layar, akan membuat toolbox menjadi lebih besar dan semakin kecil resolusi layar, akan membuat toolbox menjadi lebih kecil. Hal ini dilakukan, agar besar toolbox tetap proporsional terhadap besar resolusi layar. Sehingga, untuk resolusi layar yang besar, toolbox tidak akan terlalu kecil. Toolbox yang terlalu kecil pada resolusi yang besar akan membuat user kesulitan untuk memilih tool pada toobox. Sedangkan, untuk resolusi layar yang kecil, toolbox tidak akan terlalu besar. Toolbox yang terlalu besar pada resolusi yang kecil akan membuat user terganggu karena layar tertutup dan terhalang oleh toolbox. Penyesuaian ini hanya dilakukan saat aplikasi
163 pertama kali dijalankan. Jika user mengganti resolusi layar setelah aplikasi dijalankan, aplikasi tidak akan menyesuaikan besar toolbox.
Gambar C.25 Perbandingan besar toolbox “Bee Board” pada resolusi 800 x 600 (kiri), 1400 x 1050 (tengah), dan 2048 x 1536 (kanan)
Dengan
menekan
judul
“Bee
Board”
pada
toolbox
akan
menyembunyikan toolbox “Bee Board” keluar dari desktop sistem operasi. Fitur ini dibuat untuk memberikan kemudahan kepada user, jika toolbox dirasa menutupi bagian yang ingin dilihat oleh user. Untuk menampilkan toolbox ke desktop sistem operasi, user cukup menekan kembali judul “Bee Board”.
164
Gambar C.26 Judul “Bee Board” pada toolbox
Gambar C.27 Toolbox disembunyikan keluar dari desktop Jika toolbox “Bee Board” yang disembunyikan juga masih menutupi bagian yang ingin dilihat oleh user, maka user juga dapat memindahkan posisi “Bee Board” ke kiri atau ke kanan dengan cara meng-click bagian yang kosong pada toolbox “Bee Board” (bagian warna putih yang tidak tertutup gambar) dan menggesernya ke tempat yang diinginkan. User dapat menggeser toolbox ditandai dengan bergantinya cursor mouse menjadi panah kiri dan kanan. Fitur ini juga dibuat untuk memudahkan
165 user saat akan mengakses toolbox di papan tulis dengan menggunakan LED pen. Saat user berada di sebelah kiri papan tulis dan toolbox berada di sebelah kanan, user dapat menggesernya ke sebelah kiri agar user tidak terlalu jauh menggapai toolbox ke sebelah kanan.
Gambar C.28 Cursor mouse saat user menggeser toolbox “Bee Board”
Gambar C.29 Bagian kosong dari toolbox “Bee Board”
Gambar C.30 Toolbox “Bee Board” yang digeser ke sebelah kiri
166 Selain menggerakan toolbox “Bee Board”, user juga dapat memanggil toolbox “Bee Board”. Untuk memanggil toolbox “Bee Board”, user dapat menekan daerah berwarna hitam transparan di bagian bawah dari layar yang bertuliskan “Press here to call Bee Board Toolbox”. Jika user menekan salah satu titik di dalam daerah tersebut, toolbox “Bee Board” akan mendatangi titik tersebut secara otomatis. Fitur untuk memanggil toolbox “Bee Board” dibuat untuk memudahkan dan mempercepat user dalam mengakses toolbox “Bee Board”. Sehingga, ketika user berada di sebelah kiri layar dan toolbox berada di sebelah kanan layar, user tidak perlu ke sebelah kanan layar terlebih dahulu untuk mengakses toolbox “Bee Board”.
Gambar C.31 Tampilan daerah untuk memanggil toolbox “Bee Board”
b. Canvas Pada awalnya, warna canvas pada aplikasi “Bee Board” tidak terlihat karena warna awalnya adalah hitam transparan. Canvas seakanakan berada di paling atas dari seluruh aplikasi dan menutupi seluruh layar monitor. Besar Canvas akan mengikuti besar resolusi layar. Penyesuaian canvas terhadap besar resolusi layar hanya dilakukan pada saat pertama kali aplikasi dijalankan. Jika besar resolusi layar diganti setelah aplikasi dijalankan, maka besar canvas tidak ikut berubah.
167
Gambar C.32 Canvas menutupi seluruh layar
Canvas pada aplikasi “Bee Board” bisa terdiri dari lebih dari satu halaman. Informasi halaman canvas ditandai dengan tulisan dengan kotak berwarna biru di sebelah kiri atas. Informasi halaman canvas dibuat dengan format “#[nomor_halaman_yang aktif]/[total_halaman]”. Sebagai contoh: Format: #5/7 Maka, dapat diketahui bahwa sekarang user berada di halaman canvas ke-5 dan jumlah halaman canvas yang ada adalah tujuh buah.
168 Total page
Nomor page Next page Next page
Previous page Previous page
Toolbox Bee Board
Gambar C.33 Tampilan GUI “Bee Board” secara umum
Untuk menambah jumlah halaman canvas, user cukup menekan tombol next dengan gambar panah kanan yang berada di sebelah kiri tengah dan kanan tengah layar. Tombol previous yang ditandai dengan panah kiri digunakan untuk kembali ke halaman canvas sebelumnya. Selain itu, kedua panah kiri dan kanan juga digunakan sebagai navigasi halaman canvas. Setiap navigasi yang dilakukan akan ikut mengubah informasi halaman canvas di sebelah kiri atas canvas. Kedua panah dibuat berada di sebelah kiri dan sebelah kanan layar agar user dapat dengan mudah berpindahpindah halaman canvas tanpa perlu kesulitan untuk menjangkau tombol jika tombol hanya berada di satu sisi saja.
169
Gambar C.34 Gambar panah navigasi halaman canvas
2. Pen Menu pen digunakan untuk menggambar, menulis, dan mencoret dengan bebas (free draw) pada halaman canvas “Bee Board” yang sedang aktif. Seluruh coretan yang dilakukan pada permukaan papan tulis dengan menggunakan LED pen akan tergambar secara langsung pada canvas “Bee Board”.
Gambar C.35 Tampilan icon dan menu pen tool
Terdapat enam tingkatan ketebalan pen yang disediakan aplikasi. Penentuan besar ketebalan pen dihitung berdasarkan ketebalan spidol baru yang digunakan di dalam ruang kelas laboratorium Software Binus University. Penghitungan dilakukan dengan membuat garis pada kertas dengan menggunakan spidol tersebut, kemudian menempatkannya ke layar
170 tembak proyektor. Pada komputer digambarkan garis sebesar garis spidol pada kertas tersebut untuk mengetahui ketebalan garis spidol tersebut dalam satuan pixel. Setelah percobaan dilakukan, didapatkan ketebalan sebesar 2 pixel pada layar monitor dengan resolusi 1024 x 768.
Ketebalan pen
tersebut dijadikan sebagai ketebalan pertama. Berikut hasil penghitungan ketebalan lain yang dihitung berdasarkan ketebalan pertama pada resolusi monitor 1024 x 768.
Tabel 4.1 Ketebalan pen pada resolusi 1024 x 768 Ketebalan 1 2 3 4 5 6
Ketebalan 2 px 4 px 6 px 8 px 10 px 12 px
Keterangan 2 x ketebalan 1 3 x ketebalan 1 4 x ketebalan 1 5 x ketebalan 1 6 x ketebalan 1
Untuk ketebalan pen di resolusi lain dihitung dengan mengalikan 2 pixel dengan rasio terbesar antara rasio height resolusi dengan 768 dan rasio width resolusi dengan 1024. Misal: Resolusi: 1600 x 900 Rasio width: 1600 / 1024 = 1.5625 Rasio height: 900 / 768 = 1.171875 Ukuran pen: 2 x 1.5625 = 3.125 px
171
Tabel 4.2 Ketebalan pen pada resolusi 1600 x 900 Ketebalan 1 2 3 4 5 6
Ketebalan 3.125 = 3 px 6.25 = 6 px 9.375 = 9 px 12.5 = 13 px 15.625 =16 px 18.75 = 19 px
Keterangan 2 x ketebalan 1 3 x ketebalan 1 4 x ketebalan 1 5 x ketebalan 1 6 x ketebalan 1
Penghitungan ketebalan diatas juga diberlakukan untuk tool-tool lainnya, seperti highlighter tool dan shape tool.
Gambar C.36 Contoh penggunaan pen tool
3. Eraser
172 Menu eraser digunakan untuk menghapus semua tulisan maupun coretan yang pernah dibuat pada canvas “Bee Board”, baik itu menggunakan pen, shape, atau highlighter.
Gambar C.37 Tampilan icon dan menu eraser tool
Di dalam menu eraser, terdapat tiga sub-menu yang terdiri dari: a. Clear All Pilihan sub-menu ini akan membersihkan canvas “Bee Board” dari berbagai coretan dan tulisan dengan cepat. Canvas yang dibersihkan hanya canvas yang sedang aktif saja, sedangkan canvas yang sedang tidak aktif, tidak akan terjadi apa-apa.
b. Jenis eraser Terdapat dua jenis eraser yang dapat dipilih oleh user, yaitu jenis eraser dengan bentuk lingkaran (circle) dan persegi empat (square).
c. Ukuran eraser
173 Terdapat tiga ukuran eraser yang tersedia, yaitu small, medium, dan large. Sama seperti pen tool, ukuran eraser juga akan mengikuti besar resolusi monitor komputer. Semakin besar resolusi, ketiga pilihan ukuran eraser akan ikut membesar, begitu juga sebaliknya. Penentuan besar ukuran eraser dihitung berdasarkan lebar penghapus papan tulis yang digunakan di dalam ruang kelas laboratorium Software Binus University. Penghitungan dilakukan dengan menempatkan penghapus ke layar tembak proyektor, kemudian digambarkan kotak sebesar penghapus tersebut di komputer untuk mengetahui lebar penghapus tersebut dalam satuan pixel. Setelah percobaan dilakukan, didapatkan penghapus dengan lebar sebesar 52 pixel pada layar monitor dengan resolusi 1024 x 768. Lebar penghapus dalam satuan pixel digunakan untuk menentukan ketiga ukuran eraser pada aplikasi. Berikut hasil penghitungan ketiga ukuran eraser untuk resolusi monitor 1024 x 768.
Gambar C.38 Penghapus papan tulis
Tabel 4.3 Ukuran eraser pada resolusi 1024 x 768
174 Ukuran
Ukuran
Small
17.33 = 17 px
Medium
34. 66 = 35 px
Large
52 px
Keterangan x lebar x lebar x lebar
Untuk ukuran eraser di resolusi lain dihitung dengan mengalikan 52 pixel dengan rasio terbesar antara rasio height resolusi dengan 768 dan rasio width resolusi dengan 1024. Misal: Resolusi: 1920 x 1080 Rasio width: 1920 / 1024 = 1.875 Rasio height: 1080 / 768 = 1.40625 Lebar penghapus: 52 x 1.875 = 97.5 px
Tabel 4.4 Ukuran eraser pada resolusi 1920 x 1080 Ukuran
Ukuran
Small
32.5 = 33 px
Medium
65 px
Large
97.5 = 98 px
Keterangan x lebar x lebar x lebar
175
Gambar C.39 Contoh penggunaan eraser tool
4. Highlighter Highlighter digunakan untuk menyoroti sebuah bagian pada canvas “Bee Board” yang sedang aktif. Cara kerja highlighter sama dengan penggunaan stabilo pada umumnya, dimana bagian yang disoroti tidak akan tertutup oleh highlighter. Bagian yang disoroti akan tetap terlihat karena tingkat opacity yang digunakan oleh highlighter lebih kecil dibandingkan dengan tingkat opacity yang digunakan oleh tool lainnya.
176
Gambar C.40 Tampilan menu highlighter tool
Gambar C.41 Contoh penggunaan highlighter tool
5. Shape Menu shape digunakan untuk menggambar bangun datar pada canvas “Bee Board. Gambar icon pada shape tool menandakan jenis shape yang sedang aktif.
177
Gambar C.42 Tampilan icon-icon dan menu shape tool
Bangun datar yang tersedia adalah garis, persegi/persegi panjang, dan lingkaran. Shape tool juga mempunyai pilihan tingkat ketebalan dimana tingkat ketebalan tersebut disamakan dengan tingkat ketebalan pada pen tool.
Gambar C.43 Contoh penggunaan shape tool
178 6. Tool Color Tool color digunakan untuk mengganti warna tool-tool pada “Bee Board”. Tool-tool tersebut meliputi: pen tool, highlighter tool, dan shape tool. Tool color sudah menyediakan empat warna yang paling dibutuhkan oleh user, yaitu warna hitam, merah, hijau, dan biru. Warna yang terpilih pertama kali saat aplikasi baru berjalan adalah warna hitam. Selain empat warna yang sudah disediakan, user juga dapat memilih sendiri warna yang diinginkannya secara bebas dengan menggunakan tabel warna yang dapat diakses melalui menu “More…”.
Gambar C.44 Tampilan tabel warna
Setiap warna yang dipilih oleh user melalui tabel warna akan tersimpan ke dalam salah satu dari empat slot warna yang sudah disediakan oleh aplikasi. Jika keempat slot warna sudah penuh, aplikasi akan menyimpan warna kembali ke slot warna yang pertama.
179
Gambar C.45 Tampilan icon dan menu tool color
Gambar C.46 Tampilan menu tool color dengan satu slot warna yang sudah terisi
7. Canvas Menu canvas digunakan untuk melakukan pengaturan terhadap seluruh canvas pada aplikasi “Bee Board”. Pengaturan yang dapat dilakukan user adalah:
180
Gambar C.47 Tampilan menu canvas
a. Hide and show canvas Canvas dapat disembunyikan dan ditampilkan kembali dengan menekan gambar canvas pada menu canvas. Gambar icon canvas menandakan status canvas saat ini.
Gambar C.48 Icon canvas saat sedang ditampilkan
Gambar C.49 Icon canvas saat sedang disembunyikan
b. Warna canvas Warna canvas dapat diganti sesuai dengan kebutuhan user. Sama seperti tool color, aplikasi sudah menyediakan empat warna yang
181 dibutuhkan oleh user beserta dengan empat slot warna yang akan terisi saat user memilih warna selain empat warna yang sudah disediakan. Untuk memudahkan user saat memilih warna canvas yang cocok, aplikasi menyediakan fitur live preview pada tabel warna, dimana warna canvas akan secara langsung terlihat saat user sedang memilih warna canvas yang diinginkannya.
c. Opacity canvas Tingkat opacity canvas dapat diatur sesuai dengan kebutuhan user. Satuan opacity canvas mengunakan persentase dengan rentang nilai 0%100%. Dimana, nilai 0% menandakan canvas transparan, sedangkan nilai 100% menandakan warna canvas yang paling jelas. Pengaturan tingkat opacity canvas dapat dilakukan dengan menggeser slider opacity ke kiri dan ke kanan atau meng-click panah kiri dan panah kanan. Panah kiri akan menurunkan tingkat opacity canvas sebesar 1%, sedangkan panah kanan akan menaikkan tingkat opacity canvas sebesar 1%. Sama seperti pemilihan warna canvas, opacity canvas juga menyediakan fitur live preview dimana setiap perubahan opacity akan langsung terlihat, sehingga user dapat memilih tingkat opacity lebih cepat dan lebih mudah.
182
Gambar C.50 Contoh penggantian warna canvas menjadi warna putih dan opacity canvas sebesar 50%
8. Undo dan Redo Undo digunakan untuk membatalkan tulisan/gambar terakhir jika terjadi kesalahan dalam penulisan dan penggambaran pada canvas. Sedangkan, redo digunakan untuk mengembalikan penulisan dan penggambaran terakhir yang sebelumnya sudah di undo.
183
Gambar C.51 Tampilan icon undo dan redo
Cara bekerja undo dan redo pada “Bee Board” sama seperti aplikasiaplikasi lainnya. Banyaknya penulisan/penggambaran yang dapat di undo dan di redo dibatasi berdasarkan jumlah yang terdapat pada file konfigurasi aplikasi. Jika, aplikasi tidak dapat menemukan batas langkah undo dan redo, maka aplikasi akan menetapkan batas langkah undo dan redo sebanyak 10 langkah.
9. Snapshot Snapshot digunakan menyimpan catatan atau gambar pada canvas ke dalam sebuah file dengan format PNG. Menu snapshot dibagi menjadi dua pilihan:
184
Gambar C.52 Tampilan icon dan menu snapshot tool
a. Screen and canvas Gambar yang disimpan merupakan gabungan antara canvas yang sedang aktif dengan screen layar yang sedang aktif saat pengambilan gambar dilakukan.
Gambar C.53 Contoh hasil snapshot screen and canvas
185 b. Canvas only Gambar yang disimpan hanya berupa canvas yang sedang aktif saat pengambilan gambar dilakukan.
Gambar C.54 Contoh hasil snapshot canvas only
Penamaan
file
hasil
snapshot
dengan
format
“page_[NomorHalamanCanvas].png”. Sehingga, untuk hasil snapshot pada halaman canvas yang sama dengan menggunakan metode poin (a) dan poin (b) hanya akan menghasilkan satu file saja. Hasil snapshot akan diletakkan pada folder yang berada di path yang sudah ditentukan oleh aplikasi back-end ditambahkan dengan tanggal hari ini dan nama folder yang dimasukkan oleh user pada waktu pertama kali aplikasi dijalankan. Tanggal hari ini dibuat dengan format “yyyyMMdd” dimana “yyyy” adalah tahun, “MM” adalah bulan, dan “dd” adalah hari.
186 Sebagai contoh: path yang sudah ditentukan oleh aplikasi back-end adalah “D:\”. Tanggal hari ini adalah 06 Januari 2013. Diubah ke format “yyyyMMdd”, maka menjadi “20130106”. Nama folder yang dimasukkan user pada waktu pertama kali aplikasi dijalankan adalah “My Folder 1”. Maka, tempat penyimpanannya adalah “D:\20130106\My Folder 1\”.
10. Audio Video Recording Menu audio video recording digunakan untuk melakukan perekaman layar beserta dengan suara yang masuk ke dalam komputer, baik melalui microphone atau melalui audio input device lainnya yang dikenali oleh sistem operasi. Audio input device yang digunakan untuk merekam dapat dipilih melalui aplikasi back-end. Jika audio input device belum di konfigurasi, maka aplikasi akan memilih audio input device default yang dipilih oleh sistem operasi. Jika tidak ditemukan satupun device audio input, maka aplikasi hanya akan merekam layar saja tanpa adanya suara.
Gambar C.55 Tampilan menu audio video recording yang belum dimulai
187
Gambar C.56 Tampilan menu audio video recording yang sudah dimulai
Setelah audio video recording sudah dijalankan, maka icon menu audio video recording akan berubah. Saat perekaman sedang berjalan, aplikasi juga akan melakukan playback suara yang masuk ke dalam komputer ke default output device. Hal ini dilakukan untuk memudahkan pengguna, sehingga pengguna hanya perlu menggunakan sebuah input device saja seperti microphone sebagai pengeras suara dan juga sebagai perekam suara. Jika menu audio video recording dipilih kembali, maka perekaman layar dan suara yang sedang berjalan akan dihentikan. Video dan audio yang sudah direkam akan terbentuk menjadi sebuah file dengan format MP4. Penamaan file hasil audio video recording dibuat dengan format “yyyyMMdd_hhmmss.png” dimana “yyyy” adalah tahun, “MM” adalah bulan, “dd” adalah hari, “hh” adalah jam, “mm” adalah menit, dan “ss” adalah detik. Format tanggal dan jam yang digunakan adalah tanggal dan jam dimulainya perekaman.
188 Besar dimensi hasil perekaman dapat di konfigurasi melalui aplikasi back-end. Aplikasi menyediakan tiga pilihan dimensi yaitu, 240p, 360p, dan 480p. Aplikasi mempertahankan aspect ratio saat melakukan scaling pada perekaman layar agar tidak memperburuk kualitas video. Sehingga, untuk aspect ratio resolusi monitor biasa dengan resolusi monitor wide screen, akan menghasilkan dimensi video yang berbeda walaupun menggunakan pilihan kualitas dimensi yang sama (misalnya: 480p). Berikut ini adalah perbandingan besar dimensi tinggi dan lebar beserta perbandingan ukuran file yang akan dihasilkan audio video recording dengan durasi 100 menit untuk beberapa resolusi monitor dengan aspect ratio yang berbeda.
Tabel 4.5 Perbandingan dimensi dan file size hasil audio video recording berdasarkan resolusi monitor 240p Resolusi (px)
Aspect ratio
1024 x 768 1280 x 720 1280 x 768 1280 x 800 1366 x 768
1.3333 1.7778 1.6667 1.6 1.7786
Dimensi (px) 320 x 240 426 x 240 400 x 240 384 x 240 426 x 240
360p File Size (MB) ±149 ±186 ±172 ±161 ±185
Dimensi (px) 480 x 360 640 x 360 600 x 360 576 x 360 640 x 360
480p File Size (MB) ±241 ±273 ±268 ±254 ±275
Dimensi (px) 640 x 480 852 x 480 800 x 480 768 x 480 853 x 480
File Size (MB) ±322 ±371 ±361 ±349 ±374
11. Merge Snapshots as PDF Menu merge snapshots as PDF digunakan untuk menggabungkan seluruh hasil snapshot yang tersimpan di dalam folder penyimpanan
189 menjadi sebuah file PDF. Menu merge snapshots as PDF hanya akan aktif ketika user sudah pernah menggunakan snapshot tool sebelumnya.
Gambar C.57 Tampilan menu merge snapshots as PDF yang belum aktif
Adanya fitur merge snapshots as PDF dapat memudahkan user untuk meng-copy sebuah file saja yang sudah berisikan seluruh snapshot yang dia lakukan, sehingga user tidak perlu meng-copy seluruh snapshot yang mungkin bisa lebih dari satu file.
Gambar C.58 Tampilan menu merge snapshots as PDF yang sudah aktif
190
Gambar C.59 Contoh hasil PDF yang dihasilkan oleh tool Merge Snapshots as PDF
12. Open folder Menu open folder digunakan untuk membuka tempat penyimpanan yang sudah ditentukan oleh user sebelumnya. Menu ini akan memudahkan user karena user tidak perlu mencari dimana tempat penyimpanannya berada saat akan meng-copy file-file yang dibutuhkan. Menu open folder hanya akan aktif setelah user sudah pernah melakukan snapshot atau audio video recording.
191
Gambar C.60 Tampilan menu open folder
