Tabel 3.22 Storyboard untuk Front-End Application Multimedia Storyboard
Project: "Bee Board" Date: 1 Jan 2013
Multimedia Storyboard
Screen Description: Aplikasi front-end adalah aplikasi utama dari "Bee Board", dimana terdapat berbagai macam tools untuk mencoret, menggambar, serta menunjang penggunaan aplikasi “Bee Board” pada proses belajar mengajar.
Link From Screen ID: - Link to Screen ID: - Color Scheme:
• Background color: white (#ffffff) • Font color: black (#000000) Text Attributes: • Text: o Font-family: MS Shell Dlg 2 o Font-size: 9pt o Color: black Images:
• Title: bb_text.png (On-hover: bb_text_h.png)
• Pen Dropdown Button: pen.png (On-hover: pen_h.png) • Eraser Dropdown Button:eraser.png (On-hover: eraser_h.png)
• Highlighter Dropdown Button: highlighter.png (On-hover: highlighter_h.png) • Shape Dropdown Button: ellipse.png (On-hover: ellipse_h.png)
• Tool Color Dropdown Button: color_picker.png (On-hover: color_picker_h.png) • Canvas Dropdown Button: hide.png (On-hover: hide_h.png)
• Undo Button: no_undo.png (On-hover: undo.png) • Redo Button: no_redo.png (On-hover: redo.png)
• Snapshot Dropdown Button: screenshot.png (On-hover: screenshot_h.png) • Recording Button: record.png (On-hover: record_h.png)
• Merge Snapshots as PDF Button: pdf.png (On-hover: pdf_h.png) • Open Folder: open_folder.png (On-hover: open_folder_h.png) Audio: -
Video: -
Pada aplikasi front-end, terdapat beberapa menu, yaitu: a. Pen
Pen berfungsi untuk menulis, menggambar atau mencoret pada canvas. User hanya diperkenankan untuk menulis, menggambar, atau mencoret hanya ketika kondisi canvas sedang diaktifkan. User juga dapat mengatur tingkat ketebalan pen yang akan digunakan. Terdapat enam tingkatan ketebalan pen pada aplikasi ini.
b. Eraser
Eraser berfungsi untuk menghapus hasil coretan/gambar yang ada di canvas. Terdapat dua jenis bentuk eraser, yaitu bentuk lingkaran dan segiempat. Selain itu, disediakan tiga tingkatan ukuran untuk eraser, yaitu small, medium, dan large. Pada menu ini, user juga dapat membersihkan canvas yang sedang aktif secara langsung.
c. Highlighter
Highlighter berfungsi untuk menandakan suatu bagian pada canvas. Berbeda dengan pen, highlighter tidak akan menutupi coretan canvas yang sudah ada sebelumnya, karena tingkat opacity yang digunakan highlighter lebih rendah daripada pen. Terdapat enam tingkatan ketebalan highlighter pada aplikasi ini.
Tool shape digunakan untuk menggambar shape pada canvas. Terdapat tiga jenis shape yang dapat dipilih, yaitu persegi, lingkaran, dan garis. Terdapat enam tingkatan ketebalan untuk shape pada aplikasi ini.
e. Tool Color
Tool color digunakan untuk mengatur warna yang digunakan pada pen, highlighter, dan shape. Pada awalnya, sudah disediakan empat warna default ketika user memilih menu color, yaitu merah, hitam, hijau dan biru. Selain empat warna yang ada, user dapat memilih warna lainnya juga dengan memilih menu “More”.
f. Canvas
Canvas digunakan untuk melakukan pengaturan terhadap canvas aplikasi. Pengaturan yang dapat dilakukan antara lain, opacity canvas, warna canvas, dan menyembunyikan canvas atau menampilkan canvas.
g. Snapshot
Snapshot digunakan untuk mengambil gambar dari layar yang sedang aktif pada aplikasi. User dapat memilih untuk mengambil snapshot hanya pada canvas yang sedang aktif, atau beserta dengan latar belakangnya. File hasil snapshot akan disimpan dalam
format PNG dan berada pada folder yang telah ditentukan pada aplikasi back-end.
h. Audio Video Recording
Video digunakan untuk merekam semua aktivitas yang terjadi pada canvas dalam rentang waktu tertentu.
i. Merge Snapshots as PDF
Merge snapshots as PDF digunakan untuk menggabungkan semua file hasil snapshot ke dalam sebuah file dengan ekstensi PDF. Snapshot yang akan digabung akan diurutkan berdasarkan nomor halaman canvas.
j. Undo
Undo digunakan untuk membatalkan perintah yang sudah dilaksanakan sebelumnya. Banyaknya tingkatan undo ditentukan melalui pengaturan pada aplikasi back-end.
k. Redo
Redo digunakan untuk membatalkan undo yang dilaksanakan. Banyaknya tingkatan redo disamakan dengan banyaknya tingkatan undo.
l. Open Folder
Open folder digunakan untuk membuka folder yang digunakan untuk menyimpan hasil snapshot dan video. Lokasi open folder ditentukan melalui pengaturan pada aplikasi back-end.
2. Back-End
a. Application Settings
Tabel 3.23 Storyboard Application Settings (back-end application) Multimedia Storyboard
Project: "Bee Board" Date: 1 Jan 2013
Screen: 2 of 3 Screen ID: Back-end Application
Screen Description: Back-end Application adalah bagian untuk pengaturan yang berhubungan aplikasi “Bee Board”.
Multimedia Storyboard
Link From Screen ID: 3 Link to Screen ID: 2 Color Scheme:
• Background color: gray (#f0f0f0) • Font color: black (#000000) Text Attributes: • Text: o Font-family: MS Shell Dlg 2 o Font-size: 8pt o Color: black Images:
• Application Page: settings.png • WiiMote Page: wiimote.png Audio: -
Video: - Animation: -
Pada menu Application Settings, terdapat beberapa pengaturan, yaitu:
1) Audio Input
Audio input berfungsi untuk mengatur darimana input audio berasal ketika video recording dijalankan.
2) Video Dimension
Pada video dimension, user dapat mengatur besar resolusi video yang akan digunakan untuk merekam aktivitas yang terjadi pada canvas. Terdapat 3 resolusi yang bisa diplih, yaitu 240p, 320p, dan 480p. Resolusi default-nya adalah 480p.
3) Default Save Location
Default save berfungsi untuk menentukan folder dimana file hasil snapshot dan video akan disimpan. Lokasi penyimpanan default-nya adalah folder user sistem operasi yang sedang aktif.
4) Undo Levels
Undo levels berfungsi untuk menentukan berapa banyak tingkatan undo dan redo yang dapat digunakan. Nilai default-nya adalah 10.
5) Restore to Default
Restore to Default berfungsi untuk mengembalikan semua pengaturan ke pengaturan awal.
6) Save
Save digunakan untuk menyimpan config. Config yang akan disimpan kemudian di-save dalam format XML.
7) Close
b. WiiMote Settings
Tabel 3.24 Storyboard WiiMote Settings (back-end application) Multimedia Storyboard
Project: "Bee Board" Date: 1 Jan 2013
Screen: 3 of 3 Screen ID: Back-end WiiMote
Screen Description: Back-end WiiMote adalah bagian yang memberikan informasi WiiMote serta digunakan untuk melakukan kalibrasi WiiMote dengan layar proyektor yang digunakan.
Link From Screen ID: 2 Link to Screen ID: 3 Color Scheme:
Multimedia Storyboard
• Font color: black (#000000) Text Attributes: • Text: o Font-family: MS Shell Dlg 2 o Font-size: 8pt o Color: black Images:
• Application Page: settings.png • WiiMote Page: wiimote.png Audio: -
Video: - Animation: -
Pada menu WiiMote Settings, terdapat beberapa informasi dan pengaturan untuk koneksi antara WiiMote dan komputer, beberapa diantaranya adalah:
1) Connected
Connected berfungsi untuk menandakan apakah WiiMote yang digunakan terhubung dengan komputer atau tidak.
2) Battery
Battery berfungsi untuk mengukur kapasitas baterai pada WiiMote yang tersisa. Kadar baterai yang tersisa ditunjukan dalam satuan percentage (%).
3) IR Sensor
IR Sensor digunakan untuk menunjukan lokasi LED pen yang ditangkap oleh WiiMote.
4) Utilization
Utilization menunjukkan seberapa besar persentase area layar proyektor yang sudah di kalibrasi sebelumnya terhadap besar area kamera yang dapat dibaca WiiMote.
5) Calibrate
Calibrate berfungsi untuk mengkalibrasi posisi antara layar yang diproyeksikan dan posisi WiiMote. Lokasi hasil kalibrasi ini kemudian akan di-save dalam sebuah file dengan format XML.