Implementasi Sistem Bagian Depan Front-End

47

4.5. Implementasi Sistem Bagian Depan Front-End

Pada bagian ini dijabarkan tampilan serta prosedur operasional dari antarmuka front- end yang telah dibangun. 4.5.1. Tampilan antarmuka Antarmuka front-end dalam penelitian ini dibangun berdasarkan rancangan yang telah dijabarkan pada Bab 3 yaitu: 1. Tampilan bagian penjelasan penggunaan aplikasi Bagian penjelasan penggunaan aplikasi merupakan bagian yang pertama kali ditampilkan ketika sistem front-end dijalankan. Bagian ini dibangun untuk memberikan informasi kepada pengguna user tentang sistem front-end yang telah dibangun. Tampilan bagian penjelasan penggunaan aplikasi dapat dilihat pada Gambar 4.13. Gambar 4.13. Tampilan Bagian Penjelasan Penggunaan Aplikasi 2. Tampilan bagian panel kamera web Bagian panel kamera web juga merupakan bagian yang pertama kali ditampilkan ketika sistem front-end dijalankan. Bagian panel ini dibangun agar pengguna dapat melihat gerakan tangan yang telah dilakukan apakah berhasil dikenali oleh sistem atau tidak. Tampilan bagian panel kamera web dapat dilihat pada Gambar 4.14. Universitas Sumatera Utara 48 Gambar 4.14. Tampilan Bagian Panel Kamera Web 3. Tampilan bagian keterangan mengenai cara pengendalian aplikasi melalui gerakan tangan Bagian keterangan mengenai cara pengendalian aplikasi melalui gerakan tangan ditampilkan apabila terdapat salah satu dari aplikasi file explorer, Windows Media Player , VLC media player, Microsoft Power Point atau Acrobat Reader DC yang terbuka. Bagian ini dibangun untuk membantu pengguna dalam mengendalikan aplikasi. Tampilan bagian keterangan mengenai cara pengendalian aplikasi melalui gerakan tangan dapat dilihat pada Gambar 4.15. Gambar 4.15. Tampilan Bagian Keterangan mengenai Cara Pengendalian Aplikasi Melalui Gerakan Tangan Universitas Sumatera Utara 49 4.5.2. Prosedur operasional Saat sistem front-end dijalankan untuk pertama kali, ditampilkan bagian penjelasan penggunaan aplikasi dan bagian panel kamera web. Hal ini dapat dilihat pada Gambar 4.16. Gambar 4.16. Tampilan Pertama Kali Sistem Front-End Dijalankan Kemudian untuk melanjutkan penggunaan aplikasi, pengguna harus melakukan salah satu gerakan tangan dari empat jenis gerakan tangan yakni gerakan tangan kiri- kanan, kanan-kiri, atas-bawah atau bawah-atas. Setelah gerakan tangan untuk pertama kali dikenali maka file explorer akan terbuka. Rincian prosedur untuk mengendalikan file explorer menggunakan gerakan tangan dalam menggantikan fungsi mouse atau keyboard dapat dilihat pada Tabel 4.5. Tabel 4.5. Fungsi Gerakan Tangan pada Aplikasi File Explorer No. Jenis gerakan tangan Fungsi 1 Kanan – kiri Menuju direktori sebelumnya 2 Kiri – kanan Membuka file atau direktori 3 Atas – bawah Gerakan ke bawah 4 Bawah – atas Gerakan ke atas Universitas Sumatera Utara 50 Tampilan pada saat file explorer dibuka dan dikendalikan oleh pengguna dapat dilihat pada Gambar 4.17. Dapat dilihat bahwa pada bagian tengah terdapat file explorer yang sedang terbuka, pada bagian kanan atas terdapat keterangan untuk mengendalikan file explorer dan pada bagian kanan bawah terdapat panel kamera web. Gambar 4.17. Tampilan Saat File Explorer Dijalankan Setelah file explorer dibuka, terdapat beberapa jenis ekstensi file yang dapat dibuka pada file explorer yakni sebagai berikut: 1. File musik dengan ekstensi .mp3 Jenis file musik pada penelitian ini dibuka menggunakan aplikasi Windows Media Player . Rincian prosedur untuk mengendalikan Windows Media Player menggunakan gerakan tangan dapat dilihat pada Tabel 4.6. Tabel 4.6. Fungsi Gerakan Tangan pada Aplikasi Windows Media Player No. Jenis gerakan tangan Fungsi 1 Kanan – kiri Menurunkan volume 2 Kiri – kanan Menaikkan volume 3 Atas – bawah Play atau pause 4 Bawah – atas - Stop ketika musik sedang dimainkan atau paused - Menutup aplikasi ketika musik sedang berhentistop Universitas Sumatera Utara 51 Tampilan pada saat Windows Media Player dibuka dan dikendalikan oleh pengguna dapat dilihat pada Gambar 4.18. Dapat dilihat bahwa pada bagian kiri atas terdapat Windows Media Player yang sedang terbuka, pada bagian kanan atas terdapat keterangan untuk mengendalikan Windows Media Player dan pada bagian kanan bawah terdapat panel kamera web. Gambar 4.18. Tampilan Saat Windows Media Player Dijalankan 2. File video dengan ekstensi .avi, .flv, .mkv, .wmv, .mp4 Jenis file video pada penelitian ini dibuka menggunakan aplikasi VLC media player . Rincian jenis gerakan tangan yang harus dilakukan untuk mengendalikan VLC media player dapat dilihat pada Tabel 4.7. Tabel 4.7. Fungsi Gerakan Tangan pada Aplikasi VLC Media Player No. Jenis gerakan tangan Fungsi 1 Kanan – kiri Menurunkan volume 2 Kiri – kanan Menaikkan volume 3 Atas – bawah Play atau pause 4 Bawah – atas - Stop ketika video sedang dimainkan atau paused - Menutup aplikasi ketika video sedang berhentistop Universitas Sumatera Utara 52 Tampilan pada saat VLC media player dibuka dan dikendalikan oleh pengguna dapat dilihat pada Gambar 4.19. Dapat dilihat bahwa terdapat VLC media player yang sedang terbuka, pada bagian kanan atas terdapat keterangan untuk mengendalikan VLC media player dan pada bagian kanan bawah terdapat panel kamera web. Gambar 4.19. Tampilan Saat VLC Media Player Dijalankan 3. File presentasi dengan ekstensi .ppt dan .pptx File presentasi pada penelitian ini dibuka menggunakan aplikasi Microsoft Power Point . Rincian jenis gerakan tangan yang harus dilakukan untuk mengendalikan Microsoft Power Point dapat dilihat pada Tabel 4.8. Tabel 4.8. Fungsi Gerakan Tangan pada Aplikasi Microsoft Power Point No. Jenis gerakan tangan Fungsi 1 Kanan – kiri Menuju slide sebelumnya 2 Kiri – kanan Menuju slide selanjutnya 3 Atas – bawah Slide show 4 Bawah – atas - End show ketika slide show - Menutup aplikasi ketika end show Universitas Sumatera Utara 53 Tampilan pada saat Microsoft Power Point dibuka dan dikendalikan oleh pengguna dapat dilihat pada Gambar 4.20. Dapat dilihat bahwa terdapat Microsoft Power Point yang sedang terbuka, pada bagian kanan atas terdapat keterangan untuk mengendalikan Microsoft Power Point dan pada bagian kanan bawah terdapat panel kamera web. Gambar 4.20. Tampilan Saat Microsoft Power Point Dijalankan 4. File dokumen dengan ekstensi .pdf File PDF pada penelitian ini dibuka menggunakan aplikasi Acrobat Reader DC. Rincian prosedur untuk mengendalikan Acrobat Reader DC menggunakan gerakan tangan dapat dilihat pada Tabel 4.9. Tabel 4.9. Fungsi Gerakan Tangan pada Aplikasi Acrobat Reader DC No. Jenis gerakan tangan Fungsi 1 Kanan – kiri Menutup aplikasi 2 Kiri – kanan Zoom in atau zoom out 3 Atas – bawah Scroll ke bawah 4 Bawah – atas Scroll ke atas Tampilan pada saat Acrobat Reader DC dibuka dan dikendalikan oleh pengguna dapat dilihat pada Gambar 4.21. Dapat dilihat bahwa pada bagian kiri terdapat Acrobat Reader DC yang sedang terbuka, pada bagian kanan atas terdapat Universitas Sumatera Utara 54 keterangan untuk mengendalikan Acrobat Reader DC dan pada bagian kanan bawah terdapat panel kamera web. Gambar 4.21. Tampilan Saat Acrobat Reader DC Dijalankan Universitas Sumatera Utara

BAB 5 KESIMPULAN DAN SARAN