Perancangan Antarmuka Sistem Interface System

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