Perancangan Grafis dan Antarmuka

Sataspes dan Kupu-kupu Papilio Blumei. Struktur data - Koleksi Kupu-kupu Penjelasan struktur data - Gambar[Kupu-kupu Papilio Ulysses | Kupu-kupu Papilio Sataspes |Kupu-kupu Papilio Blume] 5 Nama Data pola Kupu-kupu Where usedhow used 1. Vuforia – Proses Vefirikasi pola kupu-kupu Deskripsi Data yang digunakan ketika pengecekan pola kupu-kupu Struktur data - Koleksi Kupu-kupu Penjelasan struktur data - Gambar[Kupu-kupu Papilio Ulysses | Kupu-kupu Papilio Sataspes |Kupu-kupu Papilio Blume]

3.7 Perancangan Sistem

Perancangan akan dimulai setelah tahap analisis terhadap sistem selesai dilakukan. Perancangan dapat didefinisikan sebagai penggambaran,perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi.

3.7.1 Perancangan Grafis dan Antarmuka

Antar muka merupakan tampilan dari suatu program aplikasi AR Kupu- kupu yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan pengguna. Sistem yang akan dibangun diharapkan menyediakan interface yang mudah dipahami dan digunakan oleh pengguna. Perancangan antarmuka mendeskripsikan rencana tampilan dari setiap form yang akan digunakan pada aplikasi AR Kupu-kupu. Perancangan antarmuka pada Kupu-kupu terdiri dari perancangan menu utama, perancangan start AR, perancangan Tutorial dan perancangan About.

3.7.1.1 Perancangan Antarmuka Menu Utama

Perancangan menu utama mendeskripsikan rencana tampilan dari awal aplikasi AR Kupu-kupu dibuka. Berikut merupakan gambaran dari perancangan antarmuka aplikasi AR Kupu-kupu. Menu T01 Ukuran layar utama default 80 dari resolusi tampilan Layar menyesuaikan , jenis Potret - T01Menampilkan menu aplikasi - Sentuh Start AR : Menampilkan T02 - Sentuh Tutorial : Menampilkan T05 - Sentuh About : Menampilakn T06 - Sentuh Keluar : Menampilakn P01 Start Kamera keluar About Tutorial Gambar 3. 27 Perancangan Antar Muka Menu Utama 3.7.1.2 Perancangan Antarmuka Start Kamera Perancangan start AR mendeskripsikan rencana tampilan dari permulaan ketika user mulai mengaktifkan kamera dan akan menscan Kupu-kupu .Berikut merupakan gambaran dari perancangan start AR aplikasi AR Kupu-kupu. Start AR T02 Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12 - T02 menampilkan di mana Object Augmented Reality muncul - U1 merupakan Object Augmented Reality - U2 Merupakan Video Object Augmented Reality - Sentuh Perbesar : Memperbesar Object Augmented Reality - Sentuh Perkecil : Memperkecil Object Augmented Reality - Sentuh Atas : Rotasi Object Augmented Reality ke Arah Atas - Sentuh Bawah : Rotasi Object Augmented Reality ke Arah Bawah - Info Text : jika di sentuh maka keluar T03 Perbesar Perkecil Atas Bawah U2 Info Text U1 Gambar 3. 28 Perancangan Antar Muka Start Kamera 3.7.1.3 Perancangan Antarmuka Informasi Text Perancangan informasi text mendeskripsikan rencana tampilan dari ketika objek 3D menapilkan informasi berupa text .Berikut merupakan gambaran dari perancangan antar muka informasi text pada Kupu-kupu. Informasi Object 3D T03 Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12 - T03 Menampilkan Informasi dari Object Augmented Reality yang muncul. - Sentuh kembali : Kembali ke T02 Text Kembali Gambar 3. 29 Perancangan Antar Muka Informasi Text 3.7.1.4 Perancangan Antarmuka Play Video Perancangan play Video mendeskripsikan rencana tampilan dari ketika objek 3D menapilkan informasi berupa video .Berikut merupakan gambaran dari perancangan antar muka play video pada Kupu-kupu. Imformasi Object Berupa video T04 Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12 - T04 Menampilkan InformasiVideo Play dari Object Augmented Reality Yang Muncul - Sentuh Play : Jika Video ada maka Memunculkan P02 dan jika video tidak dapat di putar memunculkan P03 Play Gambar 3. 30 Perancangan Antar Muka Play Video 3.7.1.5 Perancangan Tutorial Perancangan antar muka Tutorial mendeskripsikan rencana tampilan dari petunjuk penggunaan aplikasi AR Kupu-kupu. Berikut merupakan gambaran dari perancangan petunjuk dari aplikasi AR Kupu-kupu. Tutorial T05 Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12 - T05 Menampilkan cara menggunakan Aplikasi AR Kupu-kupu Text Gambar 3. 31 Perancangan Antar Muka Tutorial 3.7.1.6 Perancangan About Terakhir adalah Perancangan antar muka About mendeskripsikan rencana tampilan dari informasi aplikasi AR Kupu-kupu. Berikut merupakan gambaran dari perancangan antar muka about dari aplikasi AR Kupu-kupu. About T05 Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12 - T06 Menampilkan Tentang Aplikasi Text Gambar 3. 32 Perancangan Antar Muka About

3.7.1.7 Perancangan Pesan

Pada gambar dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi AR Kupu-kupu. Adapun tampilan pesan yang ada adalah sebagai berikut :

3.7.1.7.1 Perancangan Pesan Exit

Pesan Exit P01 Ukuran layar utama default 80 dari resolusi tampilan Layar menyesuaikan , jenis Potret - P01Menampilkan Pesan Konfirmasi - Sentuh Tidak : Menampilkan T01 - Sentuh Ya : Keluar Dari Aplikasi Apa Anda ingin keluar dari Aplikasi Tidak Ya Gambar 3. 33 Perancangan Antarmuka Pesan Exit 3.7.1.7.2 Perancangan Pesan Video Play dalam Proses Pesan Video Play Dalam Proses P02 Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12 - P02 Menampilkan Video dalam proses untuk ditampilkan Loading Video Gambar 3. 34 Perancangan Video Play dalam Proses 3.7.1.7.3 Perancangan Pesan Video Play Error Pesan Video Play Dalam Proses P02 Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12 - P02 Menampilkan ketika Video tidak dapat diputar Maaf Video Tidak dapat di putar Gambar 3. 35 Perancangan Pesan Video Play Error 3.7.2 Jaringan Semantik Jaringan semantik merupakan gambaran grafis yang menunjukkan antar objek lingkaran dan garis yang menggambarkan formasi antar objek tersebut. Adapun jaringan semantik untuk aplikasi AR Kupu-kupu dapat dilihat pada gambar dibawah: T01 T05 T06 T02 T04 T03 P01 Gambar 3. 36 Jaringan semantik 3.7.3 Perancangan Prosedural Pada bagian ini akan dibuat deskripsi rinci dari perangkat lunak, yaitu algoritma yang akan digunakan oleh masing-masing prosedur yang ada pada masing-masing modul. Perancangan prosedural menjelaskan tentang bagaimana program aplikasi berjalan. Adapun deskripsi rincinya adalah sebagai berikut :

3.7.3.1 Flowchart Menampilkan Object Kupu-kupu

Flowchart pada gambar 3.37 menunjukkan proses dari sistem untuk menampilkan objek Kupu-kupu dari masing – masing Kupu-kupu. Gambar 3. 37 Flowchart Menampilkan Object Kupu-kupu

3.7.3.2 Flowchart Menampilkan Video Kupu -kupu

Flowchart pada gambar 3.38 menunjukkan proses dari sistem untuk menampilkan Video Kupu-kupu dari masing – masing Kupu-kupu. Gambar 3. 38 Flowchart Menampilkan Video Kupu-kupu

3.7.3.3 Flowchart Mengontrol Kupu-kupu

Flowchart pada gambar 3.39 menunjukkan proses dari sistem untuk Mengontrol Object Kupu-kupu dari masing – masing Kupu-kupu. . Gambar 3. 39 Flowchart mengontrol Kupu-kupu 105 4 BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM Bab ini merupakan tahap penerjemahan kebutuhan pembangunan aplikasi ke dalam representasi perangkat lunak sesuai dengan hasil analisis yang telah dilakukan. Setelah implementasi maka dilakukan pengujian sistem yang baru dimana akan dilihat kekurangan-kekurangan pada aplikasi yang baru untuk selanjutnya diadakan pengembangan sistem.

4.1 Implementasi

Tujuan implementasi sistem adalah untuk menjelaskan tentang manual modul kepada semua pengunjung yang akan menggunakan sistem. Sehingga pengunjung tersebut dapat merespon apa yang ditampilkan di sistem dan memberikan masukan kepada pembuat sistem untuk dilakukan perbaikan agar sistem lebih baik lagi.

4.2 Implementasi Mobile

Pada analisis tahapan implementasi mobile ini menjelaskan bahwa bagaimana scenario aplikasi yang dibangun dapat berjalan pada sebuah flatform mobile.Aplikasi Augmented Reality yang telah dirancang menggunakan Unity 3D dapat digunakan atau dapat diimplementasikan dalam aplikasi mobile harus dengan menggunakan sebuah library, libray tersebut yaitu berupa Vuforia SDK untuk Android, dimana didalam library tersebut berupa fungsi-fungsi yang digunakan untuk memanggil scenario AR serta menyertakan class Component untuk mengatur segala inisialisasi pada framelayout dan untuk mengatur segala aktivitas aplikasi mobile. Gambar 4. 1 Implementasi mobile layar landscape