Perancangan Antarmuka Sistem Implementasi Augmented Reality Pada Alat Musik Bonang Jawa Berbasis Android

3.4. Perancangan Antarmuka Sistem

Untuk rancangan antar muka dari sistem yang akan dibangun menggunakan bahasa pemograman Java sebagai lingkungan pengoperasian aplikasi berbasis Android. Sistem akan dibangun menggunakan Unity Game Engine dan Handphone digunakan untuk menampilkan antar muka yang responsive menyesuaikan dengan display perangkat, tempat aplikasi berjalan. 3.4.1. Rancangan Halaman Home Tampilan rancangan halaman Home yang terdapat pada halaman awal ABonJAR dapat dilihat pada Gambar 3.4. MULAI TENTANG KELUAR GAMBAR ABonJAR 1 2 3 4 5 Gambar 3.4 Rancangan Halaman Home Keterangan komponen yang terdapat pada halaman awal ABonJAR dapat dilihat pada Tabel 3.1. Tabel 3.1. Keterangan Bagian-Bagian Rancangan Halaman Home No Jenis Objek Keterangan 1 Nama aplikasi Image Judul Aplikasi yang akan dirancang. 2 Gambar Gambar Alat Musik Bonang Jawa 3 Tombol Mulai Menampilkan halaman menu utama 4 Tombol Tentang Menampilkan halaman pemilik aplikasi 5 Tombol Keluar Keluar dari aplikasi 3.4.2. Rancangan Halaman Menu Utama Bentuk tampilan perancangan halaman Menu Utama dapat dilihat pada gambar 3.5. Gambar 3.5 Rancangan Halaman Menu Utama Keterangan komponen yang terdapat pada halaman Menu utama dapat dilihat pada Tabel 3.2. Tabel 3.2. Keterangan Bagian-Bagian Rancangan Menu Utama No. Jenis Objek Keterangan 1 Gambar Logo Lambang aplikasi ABonJAR. 2 Tombol Main Tombol ini akan menampilkan objek 3D Alat Musik Bonang Jawa 3 Tombol Info Tombol ini akan menampilkan informasi tentang Alat Musik Bonang Jawa 4 Tombol Petunjuk Tombol ini akan menampilkan petunjuktata cara memainkan alat musik Bonang Jawa 5 Tombol Kembali Tombol ini akan kembali ke halaman Home. 3.4.3. Rancangan Halaman Pilihan Halaman Pilihan merupakan bagian dari tombol main dapat dilihat pada gambar 3.6. 1 Judul AUGMENT MAIN 2 3 Gambar 3.6 Rancangan Halaman Main Keterangan komponen yang terdapat pada halaman pilihan dapat dilihat pada Tabel 3.3. Tabel 3.3. Keterangan Bagian-Bagian Rancangan Halaman Pilihan No. Jenis Objek Keterangan 1 Teks Judul halaman pilihan 2 Tombol Augment Menampilkan halaman augment 3 Tombol Main Masuk ke halaman Main 3.4.4. Rancangan Halaman Main Bentuk rancangan halaman Main dapat dilihat pada gambar 3.7. OBJEK 3D BONANG JAWA 1 3 Kembali 2 Judul Gambar 3.7 Rancangan Halaman Main Keterangan komponen yang terdapat pada halaman Main dapat dilihat pada Tabel 3.4. Tabel 3.4. Keterangan Bagian-Bagian Rancangan Halaman Main No. Jenis Objek Keterangan 1 Objek 3D Objek 3D alat musik Bonang Jawa dan bila disentuh pada alat musik tersebut maka akan mengeluarkan bunyi. 2 Teks Judul halaman main 3 Tombol Kembali Keluar dari halaman Main 3.4.5. Rancangan Halaman Petunjuk Bentuk rancangan Halaman Petunjuk dapat dilihat pada gambar 3.8 PETUNJUK ISI 1 2 TUTORIAL UNDUH MARKER 3 4 Gambar 3.8 Rancangan Halaman Petunjuk Keterangan komponen yang terdapat pada halaman Petunjuk dapat dilihat pada Tabel 3.5. Tabel 3.5. Keterangan Bagian-Bagian Rancangan Halaman Petunjuk No. Jenis Objek Keterangan 1 Teks NamaJudul Halaman Petunjuk 2 Teks Berisi petunjuk dan tata cara memainkan alat musik Bonang Jawa. 3 Tombol Tutorial Menampilkan video cara memainkan alat musik Bonang Jawa 4 Tombol Unduh Marker Masuk ke linksitus untuk mengunduh marker. 3.4.6. Rancangan Halaman Info Bentuk rancangan Halaman Info dapat dilihat pada gambar 3.9. Gambar 3.9 Rancangan Halaman Info Keterangan komponen yang terdapat pada halaman Info dapat dilihat pada Tabel 3.6. Tabel 3.6. Keterangan Bagian-Bagian Rancangan Halaman Info No. Jenis Objek Keterangan 1 Teks NamaJudul Halaman 2 Image Gambar Alat Musik Bonang Jawa 3 Teks Berisi tentang informasi dan sejarah Alat Musik Bonang Jawa. 4 Tombol Kembali Keluar dari halaman Info 3.4.7. Rancangan Halaman Tentang Bentuk rancangan Halaman Tentang dapat dilihat pada gambar 3.10. Gambar 3.10 Rancangan Halaman Tentang Keterangan komponen yang terdapat pada halaman Tentang dapat dilihat pada Tabel 3.7. Tabel 3.7. Keterangan Bagian-Bagian Rancangan Halaman Tentang No. Jenis Objek Keterangan 1 Teks NamaJudul Halaman 2 Teks Berisi biodata pemilik aplikasi 3 Tombol Kembali Keluar dari halaman Tentang

3.5. Pseudo-Code