Gambar 3.5. Sequence Diagram
3.3. Perancangan Antarmuka Sistem Interface System
Desain interface atau tampilan antarmuka pada sistem Augmented Reality berbasis Android ini terdiri dari halaman utama, Augmented Reality Camera, 7 tujuh marker
yang berbeda-beda, halaman pilihan tipe objek, halaman informasi objek, 7 tujuh halaman objek 3D, 7 tujuh halaman video review dari objek 3D dan halaman about.
Perancangan ini dapat menunjukkan hubungan langsung antara sistem dan actor user, sehingga aplikasi dapat dijalankan sesuai dengan perintah actor. Atau dapat
berfungsi sebagai jembatan penghubung antara user dan sistem untuk berinteraksi. Dalam perancangan antarmuka perancang antarmuka dituntut untuk membuat
antarmuka yang mudah dimengerti oleh pengguna sehingga penggunaan aplikasi akan lebih interaktif.
: User Aplikasi
I nput Camera
Marker 1 : Buka Aplikasi
2 : Tampil Halaman Ut ama 3 : Klik But t on pada halaman Menu
4 : Tampil Halaman yg dipilih 5 : Klik but t on salah sat u objek AR
6 : Tampil Halaman Objek 7 : Camera Akt if
8 : Camera siap diarahkan 9 : Memindai Marker
10 : Tampil Objek AR 3D
3.3.1. Rancangan Halaman Menu Utama
Rancangan antarmuka halaman menu utama seperti pada Gambar 3.6, serta keterangan komponen pada halaman menu utama dapat dilihat pada Tabel 3.2.
Gambar 3.6. Rancangan Halaman Menu Utama
Tabel 3.2 Komponen – komponen pada halaman Menu Utama No
Jenis Komponen Keterangan
1. Tombol Objek AR
Button Tombol akan menampilkan halaman Object AR
2. Tombol About Button
Tombol akan menampilkan halaman Informasi Aplikasi
3. Tombol Help Button
Tombol akan menampilkan halaman Tutorial Penggunaan
4. Tombol Keluar
Button Tombol akan menampilkan halaman Keluar
3.3.2. Rancangan Halaman Augmented Reality
Rancangan antarmuka halaman Augmented Reality seperti pada gambar 3.7, serta keterangan komponen pada halaman Augmented Reality dapat dilihat pada tabel 3.3 .
TENTANG
KELUAR 1
2
3 BANTUAN
OBJEK AR
4
.
Gambar 3.7. Rancangan Halaman Augmented Reality
Tabel 3.3 Komponen – komponen pada halaman Augmented Reality No
Jenis Komponen Keterangan
1 Augmented Reality Camera
Kamera menangkap marker dan
menampilkan objek berupa 3D visual 2
Zoom function Digunakan untuk memperbesar objek 3D
dengan menggunakan sentuhan 2 dua jari 3
Rotate function Digunakan untuk memutar objek 3D dengan
menggunakan sentuhan 2 dua jari
4 Back function
Digunakan untuk kembali pada halaman sebelumnya dengan menggunakan tombol
back pada smartphone
3.3.3. Rancangan Halaman Pilihan Tipe Objek
Rancangan antarmuka halaman pilihan tipe objek seperti pada Gambar 3.8, serta keterangan komponen pada halaman pilihan tipe objek dapat dilihat pada Tabel 3.4
halaman selanjutnya.
1 2
3 4
Gambar 3.8 Rancangan Halaman Pilihan Tipe Objek
Tabel 3.4 Komponen – komponen pada halaman pilihan tipe objek No Jenis Komponen
Keterangan
1 PILIH OBJEK Text
Judul halaman 2
Tombol Objek 1 Button Tombol untuk masuk ke halaman informasi
objek yang dipilih
3 Tombol Objek 2 Button
Tombol untuk masuk ke halaman informasi objek yang dipilih
4 Tombol Objek 3 Button
Tombol untuk masuk ke halaman informasi
Objek 1
Objek 3
Objek 5 1
2
3
4 Objek 2
Objek 4 PILIH OBJEK
9 5
Objek 6
Objek 7 6
7
8
objek yang dipilih 5
Tombol Objek 4 Button Tombol untuk masuk ke halaman informasi
objek yang dipilih 6
Tombol Objek 5 Button Tombol untuk masuk ke halaman informasi
objek yang dipilih 7
Tombol Objek 6 Button Tombol untuk masuk ke halaman informasi
objek yang dipilih 8
Tombol Objek 7 Button Tombol untuk masuk ke halaman informasi
objek yang dipilih
9 Back function
Digunakan untuk kembali pada halaman sebelumnya dengan menggunakan tombol
back pada smartphone
3.3.4. Rancangan Halaman Informasi Objek
Rancangan antarmuka halaman informasi objek seperti pada gambar 3.9, serta keterangan komponen pada halaman informasi objek dapat dilihat pada tabel 3.5
halaman selanjutnya.
Gambar 3.9. Rancangan Halaman Informasi Objek
Nama Objek
Informasi Objek Gambar
Objek 1
2
4 3
Video AR
5 6
Tabel 3.5 Komponen – komponen pada halaman informasi objek No Jenis komponen
Keterangan
1 Nama Objek Text
judul halaman 2
Photo Image Gambar objek
3 Informasi Objek Text
Informasi objek 4
Tombol AR Button Tombol untuk masuk ke halaman visualisasi
objek berupa bentuk 3D 5
Tombol Video Button Tombol untuk masuk ke halaman pemutar
video
6 Back function
Digunakan untuk kembali pada halaman sebelumnya dengan menggunakan tombol back
pada smartphone
3.3.5. Rancangan Halaman Objek
Rancangan antarmuka halaman objek 3D seperti pada gambar 3.10, serta keterangan komponen pada halaman objek 3D dapat dilihat pada tabel 3.6 halaman selanjutnya.
Gambar 3.10. Rancangan Halaman Objek 3D
Objek 3D 1
2 3
4
Tabel 3.6 Komponen – komponen pada halaman objek 3D No Jenis komponen
Keterangan
1 Objek 3D
Tampilan Objek berupa visual 3D 2
Zoom function Digunakan untuk memperbesar objek 3D
dengan menggunakan sentuhan 2 dua jari 3
Rotate function Digunakan untuk memutar objek 3D dengan
menggunakan sentuhan 2 dua jari
4 Back function
Digunakan untuk kembali pada halaman sebelumnya dengan menggunakan tombol back
pada smartphone
3.3.6. Rancangan Halaman Video Review
Rancangan antarmuka halaman video review seperti pada gambar 3.11, serta keterangan komponen pada halaman video review dapat dilihat pada tabel 3.7 halaman
selanjutnya.
Gambar 3.11. Rancangan Halaman Video Review
Video review 1
2
Tabel 3.7 Komponen – komponen pada halaman video review No Jenis komponen
Keterangan
1 Video review Video
Tampilan pemutar video review objek
2 Back function
Digunakan untuk kembali pada halaman sebelumnya dengan menggunakan tombol back
pada smartphone
3.3.7. Rancangan Halaman tentang
Rancangan antarmuka halaman tentang seperti pada gambar 3.12, serta keterangan komponen pada halaman about dapat dilihat pada tabel 3.8.
Gambar 3.12. Rancangan Halaman Tentang
Tabel 3.8 Komponen – komponen pada halaman tentang No Jenis komponen
Keterangan
1 TENTANG Text
Judul halaman 2
Informasi Tentang Text Informasi pada halaman about
3 Back function
Digunakan untuk kembali pada halaman sebelumnya
TENTANG
Informasi tentang 1
2
3
BAB 4
IMPLEMENTASI DAN PENGUJIAN
Bab ini berisi implementasi Augmented Reality perancangan sistem dari hasil analisis pada bab 3 yang telah dibuat, dan menguji sistem.
4.1. Implementasi Sistem