BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.4 Perancangan Tampilan Antar Muka
3.4.5 Rancangan Halaman Informasi Hewan
Halaman ini bertujuan untuk memberikan informasi kepada pengguna tentang hewan serta untuk memulai aplikasi Augmented Reality. Rancangan halaman Informasi hewan dapat dilihat pada gambar 3.10 serta keterangannya seperti pada Tabel 3.6.
Gambar 3.10 Rancangan Halaman Informasi Hewan
Tabel 3.6 Keterangan Bagian-Bagian Rancangan Halaman Informasi Hewan
No. Jenis Objek Keterangan
1. Tombol Back Tombol untuk kembali ke halaman Main Menu.
2. Tombol AR Tombol untuk memulai Scanning pada Marker 3. Text Tombol untuk melihat Informasi tentang hewan
3.4.6 Rancangan halaman hewan AR
Rancangan tampilan halaman hewan AR seperti yang terlihat pada Gambar 3.11 memiliki tiga buah tombol yaitu back untuk kembali ke halaman informasi hewan, tombol Sound untuk mendengar suara dari hewan dan tombol video untuk melihat video tentang hewan tersebut. Selain itu ada komponen penting yaitu komponen Camera View yang berfunsi mendeteksi Marker untuk menampilkan objek hewan.Tabel 3.7 memberikan keterangan bagian-bagian dari rancangan halaman
3
1 2
Gambar 3.11 Rancangan Halaman Hewan AR
Tabel 3.7 Keterangan Bagian-Bagian Rancangan Halaman Hewan AR
No. Jenis Objek Keterangan
1. Tombol Back Tombol untuk kembali ke halaman Informasi Hewan.
2. Tombol Sound Tombol untuk mendengarkan suara dari hewan.
3. Tombol Video Tombol untuk melihat video tentang hewan tersebut.
4. Camera View Berfungsi untuk mendeteksi Marker serta menampilkan objek hewan
3.4.7 Rancangan halaman video hewan
Halaman ini bertujuan untuk manampilkan video kepada pengguna tentang hewan.
Rancangan halaman video hewan dapat dilihat pada gambar 3.12 serta keterangannya seperti pada Tabel 3.8.
Gambar 3.12 Rancangan Halaman Video Hewan 4
1 2
3
2 1
Tabel 3.8 Keterangan Bagian-Bagian Rancangan Halaman Video Hewan
No. Jenis Objek Keterangan
1. Tombol Back Tombol untuk kembali ke halaman Informasi Hewan.
2. Camera View Berfungsi untuk mendeteksi Marker serta menampilkan video hewan
3.5 Perancangan Pembuatan Objek 3D pada Blender
Pembuatan objek 3D pada Blender menggunakan beberapa fitur yang telah disediakan oleh Blender 3D antara lain fungsi Add Mesh, Extrude, Cut Edge, Join to Single mode dan sebagainya. Pemaparan penulis dalam memahami beberapa Tools yang sering dipakai dalam pembuatan objek ditampilkan pada tabel 3.9
Tabel 3.9 Keterangan Beberapa Fitur Dari Blender Yang Sering Digunakan
No. Nama Fitur Keterangan
1.
Add Mesh
Memasukan Mesh menjadi hal yang lazim dilakukan oleh pembuat 3D. Bentuk-bentuk dasar bisa berupa Cube, Plane , Cylinder, Tube, Cone, Circle, dan lainnya.
2. Scale
untuk memperbesar dan memperkecil objek. Disimbolkan berupa persegi biru, bila menggunakan keyboard bisa secara langsung menekan Ctrl+Alt+S.
3. Edit Mode untuk melakukan kegiatan pengeditan pada suatu objek dengan cara memilih titik titik tertentu.
4. Object Mode untuk melakukan kegiatan pengeditan pada suatu objek dengan cara keseluruhan.
Gambar 3.13 Halaman Awal Aplikasi Blender 3D
3.6 Perancangan Pembuatan Marker Untuk Sistem
Pembuatan Marker pada Unity 3D menggunakan Library yang diberikan oleh Vuforia. Vuforia menggunakan Image menjadi aset yang dapat diterima unity sebagai Marker. Contoh gambar dan fitur yang diberikan oleh Vuforia dapat dilihat pada Gambar 3.14.
Gambar 3.14 (a) Marker asli, (b) Marker yang telah diberi fitur oleh Vuforia Titik-titik kuning yang terdapat pada fitur akan terdeteksi oleh Unity 3D. Terlihat fitur tersebut mengikuti suatu pola yang terdapat pada gambar asli, hal ini berguna bagi Unity 3D untuk mendeteksi pola pada Marker.
IMPLEMENTASI DAN HASIL
4.1 Implementasi
Implementasi sistem merupakan tahapan lanjutan setelah melalui tahap analisa dan perancangan. Pada tahap ini menggambarkan dan menjelaskan arsitektur dan hasil perancangan interface pada aplikasi Android yang akan dijalankan pada perangkat smartphone. Aplikasi AR ini dibuat menggunakan program c#.
4.1.1 Kebutuhan software
Untuk membuat sistemSpesifikasi software yang digunakan untuk implementasi sistem adalah sebagai berikut:
1. Sistem Operasi Windows 7 32-bit 2. Unity 3D
3. Blender 4. Vuforia SDK 5. Android SDK 6. Adobe Photoshop
4.1.2 Kebutuhan hardware
Spesifikasi hardware yang digunakan untuk implementasi sistem adalah sebagai berikut:
3. Graphic card Intel® HD Graphics Family 4. Memory (RAM) 4 GB
5. Webcam
6. Mouse dan Keyboard 7. Marker AR
8. Smartphone/Tabelt
4.2 Tampilan Aplikasi 4.2.1 Halaman splash screen
Tampilan Splash Screen adalah tampilan animasi awal sebagai pembuka sebelum masuk ke halaman Home. Ketika aplikasi dibuka maka akan terlihat tampilan Splash Screen contoh aplikasi seperti pada gambar 4.1.
Gambar 4.1 Halaman Splash Screen
4.2.2. Halaman home
Secara umum Halaman Home terbagi menjadi empat bagian yaitu menu Start,About,Tutorial dan Exit. Gambar rancangan halaman Home terdapat pada Gambar 4.2.
Gambar 4.2 Halaman Home
4.2.3. Tampilan halaman About
menu About untuk mengetahaui contact person dari pembuat dapat dilihat pada gambar 4.3
Gambar 4.3 Halaman About 4.2.4. Tampilan halaman Toturial
Menu Tutorial untuk mengetahaui cara menjalankan aplikasi ini dari pembuat dapat dilihat pada gambar 4.4.
Gambar 4.4 Halaman Tutorial
4.2.5. Halaman main menu
Tampilan Main Menu pada aplikasi ini bertujuan untuk mengenal hewan kepada pengguna. Pada halaman ini terdapat lima tombol hewan, yang berfungsi untuk melihat informasi hewan. Gambar rancangan halaman terdapat pada gambar 4.5.
Gambar 4.5 Halaman Main Menu
4.2.6. Halaman Ar
Pada halaman hewan AR seperti yang terlihat pada Gambar 4.6, memiliki tombol Sound untuk mendengar suara dari hewan dan tombol video untuk melihat video tentang hewan tersebut. Selain itu ada komponen penting yaitu komponen Camera View yang berfunsi mendeteksi Marker untuk menampilkan objek hewan.
Gambar 4.6 Halaman Hewan AR
Saat Marker terdeketsi oleh kamera pada halaman Augmented Reality, maka objek hewan akan muncul di atas Marker. Tampilan saat Marker terdeteksi dapat dilihat pada gambar 4.7.
Gambar 4.7 Objek Hewan Augmented reality Yang Terdeteksi di Atas Marker
Di dalam halaman Augmented Reality terdapat menu Video yang berisi video tentang pengenalan hewan. Tampilan halaman video dapat dilihat pada gambar 4.8.
Gambar 4.8 Halaman Video 4.2.7. Marker
Marker untuk aplikasi ini terdiri dari lima jenis Marker untuk lima jenis hewan berbeda.
Tampilan dari masing-masing Marker dapat dilihat pada gambar 4.9
Gambar 4.9 Marker Pada Aplikasi Animals Siantar Zoo
4.3 Pengujian Aplikasi 4.3.1 Pengujian black box
Pengujian black box berfokus kepada pengujian dengan melihat fungsi-fungsi yang ada dalam program tanpa harus mengetahui bagaimana fungsi tersebut dibuat programnya.
Pada aplikasi ini yang menggunakan Augmented Reality, pengujian merujuk pada fungsi-fungsi yang dimiliki sistem, kemudian membandingkan hasil keluaran program dengan hasil pengujian. Pada pengujian kali ini, Tracking Marker menggunakan kamera Smartphone android untuk menguji proses-proses yang telah didesaign sebelumnya.
4.3.1.1 Proses tekan tombol pada halaman home
Hasil pengujian pada proses tekan tombol pada halaman Home seperti pada Tabel 4.1 Tabel 4.1 Hasil Pengujian Tekan Tombol Pada Halaman Home
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol Start Menekan tombol Start akan
4.3.1.2 Proses tekan tombol pada halaman about
Hasil pengujian pada proses tekan tombol About seperti pada Tabel 4.2.
Tabel 4.2 Hasil Pengujian Tekan Tombol Pada Halaman About
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol Back Menekan tombol Back kembali ke Baik
4.3.1.3 Proses tekan tombol pada halaman tutorial
Hasil pengujian pada proses tekan tombol Tutorial seperti pada Tabel 4.3.
Tabel 4.3 Hasil Pengujian Tekan Tombol Pada Halaman Tutorial
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol Back Menekan tombol Back kembali ke
halaman Main Menu.
Baik
4.3.1.4 Proses tekan tombol pada halaman main menu
Hasil pengujian pada proses tekan tombol halaman Main Menu seperti pada Tabel 4.4.
Tabel 4.4 Hasil Pengujian Tekan Tombol Pada Halaman Main Menu No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol Macan Menekan tombol Macan akan
menuju ke halaman Macan
Baik
2. Cek tombol Kura-kura Menekan tombol Kura-kura akan menuju ke halaman Kura-kura
6. Cek tombol Back Menekan tombol Back kembali ke halaman Main Menu.
Baik
4.3.1.5 Proses tekan tombol pada halaman macan
Hasil pengujian pada proses tekan tombol macan seperti pada Tabel 4.5.
Tabel 4.5 Hasil Pengujian Tekan Tombol Pada Halaman Macan
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol AR Menekan tombol AR menuju ke
halaman AR.
Baik
2. Cek tombol Back Menekan tombol Back kembali ke halaman Main Menu.
Baik
4.3.1.6 Proses tekan tombol pada halaman kura-kura
Hasil pengujian pada proses tekan tombol Kura-kura seperti pada Tabel 4.6.
Tabel 4.6 Hasil Pengujian Tekan Tombol Pada Halaman Kura-kura No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol AR Menekan tombol AR menuju ke
halaman AR.
Baik
2. Cek tombol Back Menekan tombol Back kembali ke halaman Main Menu.
Baik
4.3.1.7 Proses tekan tombol pada halaman zebra
Hasil pengujian pada proses tekan tombol Zebra seperti pada Tabel 4.7.
Tabel 4.7 Hasil Pengujian Tekan Tombol Pada Halaman Zebra
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol AR Menekan tombol AR menuju ke
halaman AR.
Baik
2. Cek tombol Back Menekan tombol Back kembali ke Baik
4.3.1.8 Proses tekan tombol pada halaman unta
Hasil pengujian pada proses tekan tombol Unta seperti pada Tabel 4.8.
Tabel 4.8 Hasil Pengujian Tekan Tombol Pada Halaman Unta
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol AR Menekan tombol AR menuju ke
halaman AR.
Baik
2. Cek tombol Back Menekan tombol Back kembali ke halaman Main Menu.
Baik
4.3.1.9 Proses tekan tombol pada halaman kuda nil
Hasil pengujian pada proses tekan tombol Kuda Nil seperti pada Tabel 4.9.
Tabel 4.9 Hasil Pengujian Tekan Tombol Kuda Nil
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol AR Menekan tombol AR menuju ke
halaman AR.
Baik
2. Cek tombol Back Menekan tombol Back kembali ke halaman Main Menu.
Baik
4.3.1.10 Proses tekan tombol pada halaman AR
Hasil pengujian pada proses tekan tombol halaman AR seperti pada Tabel 4.10.
Tabel 4.10 Hasil Pengujian Tekan Tombol Pada Halaman AR
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol Sound Menekan tombol Sound akan
mengeluarkan suara hewan.
Baik
2. Cek tombol Video Menekan tombol Video akan mengeluarkan video tentang hewan.
Baik
3. Cek tombol Back Menekan tombol Back kembali ke halaman Main Menu.
Baik
4.3.1.11 Proses tekan tombol pada halaman video
Hasil pengujian pada proses tekan tombol halaman video seperti pada Tabel 4.11.
Tabel 4.10 Hasil Pengujian Tekan Tombol Halaman Video
No. Pengujian Hasil yang diharapkan Hasil Pengujian 1. Cek tombol Back Menekan tombol Back kembali ke
halaman Main Menu.
Baik
4.4 Pengujian Objek
4.4.1 Pengujian Pendeteksian Objek
Pada tahap pengujian pendeteksian objek ini, User mengarahkan dan memfokuskan kamera ke papan informasi hewan. Secara otomatis kamera akan melakukan Autofocus terhadap Marker dan membaca titik-titik deteksi sehingga objek akan muncul dan terlihat melalui layar Smartphone. Pemunculan objek dapat dilihat pada gambar 4.10
(a) (b)
Gambar 4.10 (a) Pengujian Objek Sebelum Terdeteksi, (b) Pengujian Objek Setelah Terdeteksi
4.4.2 Pengujian Zoom
Proses Zoom menggunakan Library yang sudah disediakan oleh Unity 3D untuk menampilkan objek 3Ddengan menggunakan fungsi Transform. Dalam melakukan pengujian, User melakukan Scanning pada Marker, setelah objek muncul User dapat melakukan Zoom dengan menggerakan kedua jari dilayar ke atas dan ke bawah, makan objek akan berubah sesuai dengan keinginan pengguna dalam melihat objek 3D. Zoom dari objek dapat dilihat pada gambar 4.11.
(a) (b)
Gambar 4.11 (a) Pengujian Objek Dalam Ukuran Normal, (b) Pengujian Objek Setelah Zoom.
4.5 Pengujian Marker
Pada tahap pengujian Marker, penulis melakukan beberapa kali percobaan. Hal ini dilakukan untuk mengetahi kemampuan dari Library Vuforia dalam melakukan pendeteksian Marker. Dapat dilihat pada gambar 4.12. Sebagai contoh Marker yang dapat dibandingkan antara Marker yang mendapat cukup cahaya dan fokus dengan Marker yang kekurangan cahaya dan focus.
(a) (b)
Gambar 4.12 (a) Pengujian Marker Dengan Pencahayaan dan Fokus Yang Tepat, (b) Pengujian Marker Dengam Pencahayaan dan Fokus Yang Kurang Baik.
KESIMPULAN DAN SARAN
5.1. Kesimpulan
Berdasarkan hasil studi literatur, analisis, perancangan, implementasi, dan pengujian sistem ini, maka kesimpulan yang didapat adalah sebagai berikut:
1. Penggunaan Augmented Reality sangat memudahkan dalam melihat hewan dalam bentuk animasi objek 3D.
2. Dengan menggunakan Augmented Reality, dapat menampilkan animasi hewan 3D memalui pendeteksian Marker dengan sangat baik.
3. Aplikasi ini menggunakan Library Vuforia dan menggunakan lima buah Marker yang sudah ditentukan.
4. Marker yang digunakan akan lebih cepat terdeteksi jika mendapatkan pencahayaan dan fokus yang baik.
5. Kelemahan dari aplikasi ini adalah besarnya ukuran aplikasi dan lambatnya halaman Augmented Reality terbuka.
5.2. Saran
Berikut ini adalah hal-hal yang menjadi saran dari penelitian ini atau untuk penelitian selanjutnya yang terkait.
1. Pada penelitian selanjutnya diharapkan dapat membuat objek 3D yang lebih menarik lagi.
2. Pada penelitian selanjutnya diharapkan dapat menambah fitur-fitur yang lebih menarik untuk memudahkan pengguna.
3. Pada penelitian selanjutnya diharapkan peneliti dapat menambah objek lebih banyak lagi.
DAFTAR PUSTAKA
Wahyutama, F., Samopa, F. & Suryotrisongko, H. 2013. Penggunaan Teknologi Augmented Reality Berbasis Barcode Sebagai Sarana Penyampaian Informasi Spesifikasi dan Harga Barang yang Interaktif Berbasis Android, Studi Kasus Pada Toko Elektronik ABC Surabaya. Jurnal Teknik Pomits Vol. 2, No. 3, ISSN: 2337-3539 (2301-9271 Print) A-481 s/d A-486.
Milgram, P. 1994. Augmented Reality: A class of displays on the reality-virtualy continum. SPIE Proceedings Volume 2351: Telemanipulator an Telepresence.
Muslim, I. 2014. Implementasi Teknologi Augmented Reality Pada Buku Ensiklopedia Animal Untuk Anak-Anak Berbasis Android. Skripsi.
Universitas Komputer Indonesia.
Adam, S. 2012. Implementasi Teknologi Augmented Reality pada Agen Penjulan Rumah. Ejournal Teknik Elektro dan Komputer: 19–
25.(online)http://download.portalgaruda.org/article.php?article=262898&val=
1028&title=Implementasi%20Teknologi%20Augmented%20Reality%20pada
%20Agen%20Penjualan%20Rumah(diakses 14 Oktober 2016).
Djuniharto. 2013. Augmented RealityMenggunakan Library Artoolkit Dengan Marker Biner. (Online) http://ejurnal.stikombanyuwangi.ac.id/files/files/2013-08-02-01.pdf (diakses 12 Maret 2016).
Yoze, R. 2012. Markeless Augmented Reality Pada Perangkat Android. Proceeding Seminar Tugas Akhir Jurusan Teknik Elektro FTI – ITS Surabaya.
Liliana, Gunadi, Ir.Kartika, & Yohan, Andreas. 2012. Aplikasi Deteksi Gerak Dalam Augmented Reality. (Online) http :// repository.petra.ac.id/16405/1/Publikasi1 _03024_1019.pdf (diakses 12 Maret 2016).
Andriyadi, Anggi. 2011. Augmented Reality with ARToolkit Reality Leaves a Lot To Imgine. Penerbit ARTeam & NulisBuku.com.
Riesvicky, H. 2012. Sistem Pencarian Fasilitas Umum Terdekat Menggunakan Augmented Reality Dengan Minimum Spanning Tree, . pp. 592 - 594.
Sutrisno Adam, dkk. 2014. Implementasi Teknologi Augmented Reality pada Agen Penjualan Rumah. Journal Teknik Elektro-FT, UNSRAT, 2:19-24
Eder, Dwika Rahma Augusta.2012.Rancang Bangun Aplikasi Kamus Irregular Verb
Berbasis Mobile Pada Platform Android.(Online)
http://digilib.unila.ac.id/6893/6/BAB%20%20II.pdf (diakses 11 Maret 2016).
Novita, A. 2015. Implementasi Augmented Reality Dalam perancangan Bisnis Produk Kopi Tampan. Skripsi. Universitas Sumatra Utara.
Christy, J. 2016. Implementasi Augmented Reality Dalam Pemilihan Menu Makanan Dan Minuman Sesuai Selera Pemesan. Skripsi. Universitas Sumatra Utara.
Nugroho, A.R. 2013. Pembangunan Aplikasi Magic Book Pengenalan Binatang Untuk Anak Menggunakan Teknologi Augmented Reality. Skripsi. Universitas Komputer Indonesia.
Fadhil, A. 2015. Implementasi Augmented Reality Untuk Pembelajaran Huruf Hijaiyah Bagi Anak-Anak. Skripsi. Universitas Sumatra Utara.
Shidiqqi, A.M., & Hendrianto, D. 2012. Augmented Reality On Android Operating System-Based Device; Case study: Mosque Finder. Jurnal Department Of Informatics, Sepuluh November Institute of Technology Volume 6, Nomor4, 197-204. (Online) http://digilib.its.ac.id/public/ITS-Article-26220.pdf. (diakses pada 10 mei 2017)
Listing Program
//program even script using UnityEngine;
using System.Collections;
//monobehavior = library untuk ke unity public class Event_Script : MonoBehaviour {
public void EventGo (int startGo) {
Application.LoadLevel (startGo); //sebuah fungsi bernama EventGo yg berfungsi untuk menuju scene baru
}
public void ExitApplication () { Application.Quit();
}
//program Hide_show using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class hideshow : MonoBehaviour {
public GameObject Panel, Panel1, Panel2, Panel3, Panel4;
public void Hide()// sebuah fungsi hide {
Panel.gameObject.SetActive(false);
}
public void Show()
}
public class Rotatexx : MonoBehaviour {
private float rotationRate = 3.0f; //kecepatan rotate
void Update () {
// ketika layar disentuh
foreach (Touch touch in Input.touches) {
Debug.Log("Touching at: " + touch.position);
if (touch.phase == TouchPhase.Began) {
Debug.Log("Touch phase began at: " + touch.position);
} else if (touch.phase == TouchPhase.Moved) { Debug.Log("Touch phase Moved");
transform.Rotate (touch.deltaPosition.y * rotationRate,
0, 0, Space.World);
} else if (touch.phase == TouchPhase.Ended) { Debug.Log("Touch phase Ended");
}
private VideoPlaybackBehaviour currentVideo = null;
public void TryPickingVideo() {
if (VuforiaRuntimeUtilities.IsPlayMode()) {
if (PickVideo(Input.mousePosition) != null)
// Find out which video was tapped, if any
currentVideo = PickVideo(Input.mousePosition);
if (currentVideo != null)
state == VideoPlayerHelper.MediaState.STOPPED)
} } }
public static IEnumerator PlayFullscreenVideoAtEndOfFrame(VideoPlaybackBehaviour video)
{ } }
D AFTAR R IWAYAT H IDUP
CURRICULUM VITAE
PERSONAL DATA
Full Name : Azwar Anas Nick Name : Azwar
Place/ Date of Birth : Pematangsiantar/february 10th 1993
Sex : Male
Religion : Islam Nationality : Indonesia
Address : Jl. Rajamin Purba, Kec Siantar, Kabupaten Simalungun Mobile Phone : 082277527883
E-mail : [email protected] Marital Statu : unmarried / married
EDUCATION
SMP Swasta Yayasan Perguruan Keluarga Pematangsiantar 2005-2008
Primary Education
SD Swasta Muhammadiyah Pematangsiantar 1999-2005