Perancangan Sistem Perancangan Antarmuka Sistem

3.3.3. Squence Diagram Gambar 3.4. Diagram Squence menampilkan objek Pada Gambar 3.4 menggambarkan perilaku aktor terhadap sistem untuk menampilkan objek. Squence Diagram bersifat dinamis dan menggambarkan interakasi antara objek didalam disekitar sistem, interaksi dalam Squence Diagram menekankan pada pengiriman pesan message dalam suatu waktu tertentu.

3.4. Perancangan Sistem

Berdasarkan gambaran hasil analisis proses maka dibangun suatu model rancangan flowchart untuk menggambarkan arah arus pekerjaan secara rinci untuk setiap langkah program dalam satu urutan dan proses perancangan antar muka sistem. Pada gambar 3.5 menjelaskan flowchart sistem terdapat halaman Menu home dari aplikasi Augmented Reality musik Dairi yang dapat diakses pengguna user. Proses menampilkan objek Augmented Reality dapat terlihat pada tombol start yang ketika di-klik maka akan masuk kedalam halaman Menu Options Alat-alat musik Dairi, yang didalamnya terdapat 5 objek beserta informasi setiap objek alat musik Dairi yang dipilih. Universitas Sumatera Utara Gambar 3.5. Flowchart Sistem Pada gambar 3.5. Flowchart Sistem menggambarkan pada tampilan awal pengguna user dapat memilih 4 tombol utama pada menu halaman Home, diantaranya, tombol Info, tombol Profile, tombol Exit dan tombol Start merupakan tombol menuju halaman Menu Options terdapat 5 alat musik dalam bentuk button, jika user memilih salah salah satu alat musik Dairi akan menuju ke halaman informasi alat musik Dairi, untuk Universitas Sumatera Utara menampilkan objek 3 dimensi user dapat memilih Kamera Augmented Reality berfungsi menuju halaman Augmented Reality.

3.5. Perancangan Antarmuka Sistem

Unity digunakan untuk proses pembuatan tampilan aplikasi Augmented Reality musik Dairi menggunakan bahasa pemrograman C MonoDevelop. Aplikasi yang dibangun dapat berjalan di Smartphone Android. 3.5.1. Perancangan Halaman Menu Home Gambar 3.6. Perancangan Halaman Menu Home Tampilan pada perancangan pada halaman Menu Home dapat dilihat pada gambar 3.6, serta keterangan komponen yang terdapat pada halaman Menu Home dapat dilihat pada tabel 3.2. Tabel 3.2. Komponen-Komponen pada Halaman Menu Home No Jenis Komponen Keterangan 1 Nama Aplikasi Text Judul Aplikasi 2 Tombol Info Button Tombol akan menampilkan halaman Informasi Augmented Reality Musik Dairi 3 Tombol Profile Button Tombol akan menampilkan halaman biodata pembuat aplikasi 4 Tombol Start Button Tombol akan menampilkan halaman Menu Options aplikasi Alat-alat musik Dairi 5 Tombol Exit Button Tombol akan keluar dari halaman aplikasi Universitas Sumatera Utara 3.5.2. Perancangan Halaman Info Gambar 3.7. Perancangan Halaman Info Perancangan interface halaman Info seperti pada gambar 3.7 serta keterangan komponen pada halaman Info dapat dilihat pada tabel 3.3. Tabel 3.3. Komponen-Komponen pada Halaman Info No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Deskripsi Halaman Info Text Menjelaskan Informasi Aplikasi Augmented Reality musik Dairi dan cara kerja aplikasi 3 Tombol Home Button Tombol yang akan menampilkan halaman Home Kembali ke halaman awal aplikasi Universitas Sumatera Utara 3.5.3. Perancangan Halaman Profile Gambar 3.8. Perancangan Halaman Profile Perancangan interface halaman Profile seperti pada gambar 3.8 serta keterangan komponen pada halaman Profile dapat dilihat pada tabel 3.4. Tabel 3.4. Komponen-Komponen pada Halaman Profile No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Deskripsi Halaman Profile Image Text Menampilkan foto dan informasi Profil pembuat aplikasi 3 Tombol Home Button Tombol yang akan menampilkan halaman Home Kembali ke halaman awal aplikasi Universitas Sumatera Utara 3.5.4. Perancangan Halaman Menu Options Gambar 3.9. Perancangan Halaman Menu Options Perancangan interface Menu Options Augmented Reality alat musik Dairi seperti pada gambar 3.9 serta keterangan komponen pada halaman Options dapat dilihat pada tabel 3.5. Tabel 3.5. Komponen-Komponen pada Halaman Menu Options No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Tombol Gong Button Tombol akan menampilkan halaman informasi Gong 3 Tombol Gendang Sisibah Button Tombol akan menampilkan halaman informasi Gendang Sisibah 4 Tombol Hitada Button Tombol akan menampilkan halaman informasi Hitada 5 Tombol Kalondang Button Tombol akan menampilkan halaman informasi Kalondang 6 Tombol Panggora Button Tombol akan menampilkan halaman informasi Panggora 7 Tombol Home Button Tombol yang akan menampilkan halaman Home Kembali ke halaman awal aplikasi Universitas Sumatera Utara 3.5.5. Perancangan Halaman Informasi Alat Musik Dairi Gambar 3.10. Perancangan Halaman Informasi Alat musik Dairi Perancangan interface halaman informasi Alat-alat musik Dairi seperti pada gambar 3.10 serta keterangan komponen pada halaman Informasi Alat-alat musik Dairi dapat dilihat pada tabel 3.6. Tabel 3.6. Komponen-Komponen pada Halaman Informasi Alat musik Dairi No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Deskripsi alat musik Dairi Text Menampilkan informasi alat musik Dairi yang telah dipilih di menu Options 3 Gambar alat musik Dairi Images Menampilkan gambar alat musik Dairi 4 Tombol Kamera AR Button Tombol akan mengarahkan ke halaman Augmented Reality untuk menampilkan objek 5 Tombol Home Button Tombol yang akan menampilkan halaman Home Kembali ke halaman awal aplikasi Universitas Sumatera Utara 3.5.6. Perancangan Halaman Augmented Reality Gambar 3.11. Perancangan Halaman Augmented Reality Perancangan interface halaman informasi Alat-alat musik Dairi seperti pada gambar 3.11 serta keterangan komponen pada halaman Informasi Alat-alat musik Dairi dapat dilihat pada tabel 3.7. Tabel 3.7. Komponen-Komponen pada Halaman Augmented Reality No Jenis Komponen Keterangan 1 Tombol Show Button Button Tombol akan menampilkan papan tombol untuk mengeluarkan suara musik Dairi 2 Tombol Hide Button Button Tombol akan menghilangkan papan tombol untuk mengeluarkan suara musik Dairi 3 Objek 3D Mesh dan Texture Objek 3D yang tampil sesuai objek yang dipilih 4 Tombol Tandai Marker Button Tombol untuk menandai marker yang diinginkan user 5 Tombol Zoom Gesture Gesture untuk zoom in dan zoom out 6 Tombol Back Button Tombol yang akan menampilkan halaman Options Universitas Sumatera Utara

3.6. Proses Pembuatan Objek 3D