Perancangan Sistem Perancangan Antarmuka Sistem

3.4. Perancangan Sistem

Berdasarkan hasil dari analisis maka dapat dibangun suatu Flowchart diagram alir untuk menggambarkan lebih rinci tentang bagaimana setiap langkah program atau prosedur dalam satu urutan. Pada gambar 3.5 menjelaskan mengenai beberapa Menu dari aplikasi yang dapat diakses user. Proses menampilkan objek AR dapat terlihat pada Menu Enter yang ketika di-klik maka akan masuk kedalam halaman Category, yang didalamnya terdapat 5 objek yang dapat dipilih. Didalam salah satu objek terdapat penjelasan dari objek tersebut, tombol Main dan Augmented Reality. Mulai Halaman Home [Klik] Enter [Klik] About [Klik] Exit Tidak Tidak Tidak Halaman Category Halaman About Halaman Warning Ya Ya Ya YesNo Selesai Ya Tidak [Klik] Harddisk [Klik] CDDVD ROM Tidak [Klik] RAM Tidak [Klik] Processor Tidak [Klik] Power Supply Tidak Halaman Informasi Harddisk Ya Halaman Informasi CDDVD ROM Halaman Informasi RAM Halaman Informasi Processor Halaman Informasi Power Supply Ya Ya Ya Ya [Klik] Augmented Reality [Klik] Augmented Reality [Klik] Augmented Reality [Klik] Augmented Reality [Klik] Augmented Reality Augmented Reality Harddisk Augmented Reality CDDVD ROM Augmented Reality RAM Augmented Reality Processor Augmented Reality Power Supply Ya Ya Ya Ya 2 2 2 2 2 2 [Klik] Back Tidak 1 Ya Tidak Ya Tidak Tidak Tidak Tidak Tidak 1 1 [Klik] Main Tidak Objek Harddisk Tanpa Marker Ya 2 [Klik] Main Tidak Objek CD DVD ROM Tanpa Marker Ya 2 [Klik] Main Tidak Objek RAM Tanpa Marker Ya 2 [Klik] Main Tidak Objek Processor Tanpa Marker Ya 2 [Klik] Main Tidak Objek Power Supply Tanpa Marker Ya 2 [Klik] Tutorial Tidak Halaman Tutorial Ya 1 [Klik] Music Tidak Halaman Music Ya 1 Gambar 3.5 Flowchart Sistem

3.5. Perancangan Antarmuka Sistem

Sistem yang akan dibangun menggunakan Unity sebagai media pembuat user interface tatap muka, dan juga sebagai compiler untuk menjadikan project Unity menjadi ekstensi .apk yang berjalan pada Smartphone Android. Bahasa pemrograman yang dipakai penulis adalah C Sharp C. 3.5.1. Rancangan Halaman Home Tampilan rancangan pada halaman Home dapat dilihat pada gambar 3.6, serta keterangan komponen yang terdapat pada halaman Home dapat dilihat pada tabel 3.2. About Enter Tutorial Sound Exit Pengenalan Hardware Komputer 1 2 3 4 5 6 Gambar 3.6 Rancangan Halaman Home Tabel 3.2 Komponen-Komponen pada Halaman Home No Jenis Komponen Keterangan 1 Nama Aplikasi Text Judul Aplikasi 2 Tombol Enter Button Tombol yang akan menampilkan halaman Category 3 Tombol Tutorial Button Tombol yang akan menampilkan halaman Tutorial 4 Tombol Sound Button Tombol yang akan menampilkan halaman Sound 5 Tombol About Button Tombol yang akan menampilkan halaman About 6 Tombol Exit Button Tombol yang akan menampilkan halaman Warning untuk keluar aplikasi 3.5.2. Rancangan Halaman Category Dalam Rancangan halaman Category dapat dilihat pada gambar 3.7, serta keterangan komponen yang terdapat pada halaman Category dapat dilihat pada tabel 3.3. Category 1 2 3 4 5 7 Home Harddisk CDDVD ROM RAM Processor Power Suply 6 Gambar 3.7 Rancangan Halaman Category Tabel 3.3 Komponen-Komponen pada Halaman Category No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Tombol Harddisk Button Tombol yang akan menampilkan halaman informasi Harddisk 3 Tombol CDDVD ROM Button Tombol yang akan menampilkan halaman informasi CDDVD ROM 4 Tombol RAM Button Tombol yang akan menampilkan halaman informasi RAM 5 Tombol Processor Button Tombol yang akan menampilkan halaman informasi Processor 6 Tombol Power Suply Button Tombol yang akan menampilkan halaman informasi Power Suply 7 Tombol Home Button Tombol yang akan menampilkan kembali ke halaman Home 3.5.3. Rancangan Halaman Informasi Objek Dalam Rancangan halaman informasi objek dapat dilihat pada gambar 3.8, serta keterangan komponen yang terdapat pada halaman informasi objek dapat dilihat pada tabel 3.4. Nama Objek 1 2 3 4 5 6 Home Text Main Augmented Reality Gambar 3.8 Rancangan Halaman Informasi Objek Tabel 3.4 Komponen-Komponen pada Halaman Informasi Objek No Jenis Komponen Keterangan 1 Nama halaman Text Judul Objek Halaman 2 Deskripsi Objek Text Menjelaskan Pengertian, Jenis dan Fungsi dari objek yang dipilih 3 Vertical Bar Scroll Bar Digunakan untuk menggulung Deskripsi Objek secara vertikal 4 Tombol Main Button Tombol yang akan menampilkan halaman Main dari objek yang dipilih 5 Tombol Augmented Reality Button Tombol yang akan men-trigger memicu kamera smartphone untuk menampilkan objek Augmented Reality pada Marker 6 Tombol Home Button Tombol yang akan menampilkan kembali ke halaman Home 3.5.4. Rancangan Halaman Main Dalam Rancangan halaman Main dapat dilihat pada gambar 3.9, serta keterangan komponen yang terdapat pada halaman Main dapat dilihat pada tabel 3.5. 1 2 4 Back Control Left Control Right Objek 3D 3 5 Gambar 3.9 Rancangan Halaman Main Tabel 3.5 Komponen-Komponen pada Halaman Main No Jenis Komponen Keterangan 1 Objek 3D Mesh dan Texture Objek 3D yang tampil sesuai dengan objek yang dipilih pada halaman Category Automatic Rotate 2 Tombol Control Left Button Berfungsi sebagai kontrol arah kiri 360 o Sumbu Y 3 Tombol Control Right Button Berfungsi sebagai kontrol arah kanan 360 o Sumbu Y 4 Vertical Slider Zoom Slider Slider akan memperbesar dan memperkecil objek 5 Tombol Back Button Tombol yang akan menampilkan kembali ke halaman Category 3.5.5. Rancangan Halaman Augmented Reality Dalam Rancangan halaman Augmented Reality dapat dilihat pada gambar 3.10, serta keterangan komponen yang terdapat pada halaman Augmented Reality dapat dilihat pada tabel 3.6. 1 4 2 Back Left Right Objek 3D dengan Augmented Reality 5 3 Up Down 6 7 Gambar 3.10 Rancangan Halaman Augmented Reality Tabel 3.6 Komponen-Komponen pada Halaman Augmented Reality No Jenis Komponen Keterangan 1 Objek 3D Mesh dan Texture Objek 3D yang tampil sesuai dengan objek yang dipilih pada halaman Category 2 Tombol Left Button Berfungsi sebagai kontrol arah kiri 360 o 3 Tombol Right Button Berfungsi sebagai kontrol arah kanan 360 o 4 Tombol Up Button Berfungsi sebagai kontrol arah atas 360 o 5 Tombol Down Button Berfungsi sebagai kontrol arah bawah 360 o 6 Vertical Slider Zoom Slider Slider akan memperbesar dan memperkecil objek 7 Tombol Back Button Tombol yang akan menampilkan kembali ke halaman Category 3.5.6. Rancangan Halaman Tutorial Dalam Rancangan halaman Tutorial dapat dilihat pada gambar 3.11, serta keterangan komponen yang terdapat pada halaman Tutorial dapat dilihat pada tabel 3.7. Tutorial 1 2 3 4 5 6 Home Text Download Marker Animasi: Logo Ilkom USU Animasi: Logo Ilkom USU Gambar 3.11 Rancangan Halaman Tutorial Tabel 3.7 Komponen-Komponen pada Halaman Tutorial No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Deskripsi Tutorial Text Menjelaskan bagaimana cara pemakaian aplikasi Pengenalan Hardware Komputer 3 Tombol Download Marker Button Tombol yang akan men-trigger memicu browser smartphone untuk membuka suatu link download berupa Marker dengan ekstensi .jpg 4 Logo Ilkom USU Cube, Image, Rotate Gambar Ilkom USU yang diatur dengan rotasi otomatis 5 Logo Ilkom USU Cube, Image, Rotate Gambar Ilkom USU yang diatur dengan rotasi otomatis 6 Tombol Home Button Tombol yang akan menampilkan kembali ke halaman Home 3.5.7. Rancangan Halaman Sound Dalam Rancangan halaman Sound dapat dilihat pada gambar 3.12, serta keterangan komponen yang terdapat pada halaman Sound dapat dilihat pada tabel 3.8. Control So und 1 2 3 4 5 Home 1. Melody 1 Play Mute 2. Melody 2 3. Melody 3 4. Melody 4 5. Melody 5 Pause Stop Play Pause Stop Play Pause Stop Play Pause Stop Play Pause Stop Gambar 3.12 Rancangan Halaman Sound Tabel 3.8 Komponen-Komponen pada Halaman Sound No Jenis Komponen Keterangan 1 Nama Halaman Text Judul halaman 2 Control Sound Button Terdapat 5 Sound Melody yang dapat dipilih user sebagai Back Sound Musik Latar Scene tersebut. Terdiri dari tombol Play, Pause, dan Stop 3 Volume Bar Slider Berfungsi sebagai kontrol Volume Sound yang dipilih 4 Tombol Mute Button Tombol yang berfungsi sebagai Mute pada semua Sound 5 Tombol Home Button Tombol yang akan menampilkan kembali ke halaman Home 3.5.8. Rancangan Halaman About Dalam Rancangan halaman About dapat dilihat pada gambar 3.13, serta keterangan komponen yang terdapat pada halaman About dapat dilihat pada tabel 3.9. Logo ILKOM USU Text1 Text About 1 2 3 4 5 6 Home Gambar1 Gambar2 Gambar3 Gambar4 Gambar5 Text3 Text2 Text4 Text5 Gambar 3.13 Rancangan Halaman About Tabel 3.9 Komponen-Komponen pada Halaman About No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Logo Ilkom USU Image Gambar Ilkom USU 3 Deskripsi Penulis Text Keterangan Penulis serta ucapan terimakasih 4 Vertical Bar Scroll Bar Digunakan untuk menggulung Deskripsi Penulis secara vertikal 5 Informasi Penulis Image, Text Informasi beberapa media sosial yang digunakan penulis 6 Tombol Home Button Tombol yang akan menampilkan kembali ke halaman Home 3.5.9. Rancangan Halaman Warning Dalam Rancangan halaman About dapat dilihat pada gambar 3.14, serta keterangan komponen yang terdapat pada halaman About dapat dilihat pada tabel 3.10. Warning 1 2 3 No Yes Gambar 3.14 Rancangan Halaman Warning Tabel 3.10 Komponen-Komponen pada Halaman Warning No Jenis Komponen Keterangan 1 Nama Halaman Text Judul Halaman 2 Tombol No Button Tombol yang akan menampilkan kembali ke halaman Home 3 Tombol Yes Button Tombol yang akan mengakhiri aplikasi

3.6. Proses Pembuatan Objek 3D