IMPLEMENTASI TEKNOLOGI AUGMENTED REALITY SEBAGAI MEDIA PROMOSI DENGAN TEMPLATE MATCHING

IMPLEMENTASI TEKNOLOGI AUGMENTED REALI TY SEBAGAI MEDIA PROMOSI DENGAN TEMPLATE MATCHI NG

Henoch Immanuel Binus University, Jakarta, DKI Jakarta, Indonesia

Romy Kusuma Binus University, Jakarta, DKI Jakarta, Indonesia dan

Aries Chandra Binus University, Jakarta, DKI Jakarta, Indonesia

Abstrak Tujuan dari penelitian ini yaitu untuk merancang sebuah teknologi yang berbasiskan Augmented Reality dengan menggunakan Template M atching yang dapat digunakan sebagai media promosi. M etode penelitian yang digunakan dalam penelitian ini adalah metode pengumpulan data dan wawancara, dimana kalau dalam hal ini untuk mempromosikan Binus University maka akan dibutuhkan informasi dengan wawancara dari pihak marketing. Hasil yang dicapai dari analisis dan perancangan teknologi Augmented Reality dengan menggunakan Template M atching ini adalah sebuah aplikasi yang dapat mendeteksi wajah (Face Detection) dan gambar (Image Recognition) dengan Augmented Reality. Simpulan yang dapat diambil dari hasil penelitian ini adalah sebuah teknologi Augmented Reality dengan menggunakan Template M atching yang bisa menjadi salah satu pilihan dalam mempromosikan Bina Nusantara University kepada calon mahasiswa baru. Kata Kunci : Technology, Augmented Reality, Template Matching. 1. Pendahuluan Teknologi dewasa ini sudah banyak berkembang sangat pesat, di Indonesia maupun di dunia global.Teknologi tersebut sudah dipakai di berbagai perusahaan, terutama di bidang pemasaran. M isalnya dalam hal pemasaran promosi semakin menarik cara penyampaiannya maka akan semakin membuat pelanggan tertarik. Teknologi dalam bidang promosi ini menjadi hal yang penting dikarenakan digunakan untuk penyampaian secara langsung kepada pelanggan mengenai informasi dari promosi.Perlu kita ketahui sekarang ada teknologi yang sedang berkembang pesat yang disebut Augmented Reality

(AR). Augmented Reality adalah teknologi yang menggabungkan benda maya dua dimensi (2D) dan tiga dimensi (3D) ke dalam sebuah lingkungan nyata tiga dimensi (3D)

lalu

memproyeksikan benda-benda maya tersebut dalam waktu nyata (real time). Dengan adanya teknologi Augmented Reality ini maka jika kita ingin memasarkan atau mempromosikan sesuatu akan dapat membuat lebih menarik apa lagi jika kita integrasikan dengan objek 3D. Tetapi perlu diketahui dalam Augmented Reality untuk dapat menampilkan objek 3D tersebut biasanya diperlukan suatu marker. M arker adalah suatu tanda berbentuk kotak hitam yang akan disimpan oleh program sebagai penanda objek 3D tertentu. M arker ini nanti akan di print di kertas. Selain marker kita juga memerlukan sebuah webcam untuk menampilkan dunia nyata kita, dan akan mendeteksi marker tersebut untuk menampilkan objek 3D-nya. Library yang terkenal dalam augmented reality dengan marker adalah FLARToolkit. Teknologi ini sudah mulai berkembang untuk diaplikasikan ke bidang promosi, tetapi bisa kita lihat, diperlukan suatu marker agar dapat menampilkan objek 3D tersebut.Akan lebih bagus jika kita tidak perlu memakai marker untuk menampilkan objek 3D tetapi hanya dengan mendeteksi muka (face detection).Oleh karena itu dikenal suatu library yang bernama OpenCV (Open Source Computer Vision).OpenCV merupakan suatu library yang berisi fungsi-fungsi yang berfokus untuk real time computer vision. Dengan OpenCV ini kita dapat memakai berbagai algoritma pendeteksi objek (Object Recognition) seperti pendeteksi muka (face detection).Setelah muka terdeteksi maka langsung kita tampilkan objek 3D menggunakan library Papervision3D.Library Papervision3D merupakan library yang berhubungan dengan objek 3D dan menggunakan Flash (Actionscript 3.0).M engapa Papervision3D? Karena Papervision3D berbasis flash yang dapat diaplikasikan ke dalam web, sehingga promosi dapat melalui website. Berdasarkan hal tersebut maka penulis tertarik untuk menggabungkan library OpenCV dengan library Papervision3D untuk membuat aplikasi Augmented Reality dalam bidang promosi. Penulis ingin mengembangkan penelitian yang lebih mendalam mengenai Augmented Reality ini.

2. Teori Pendukung 2.1. Teori Umum 2.1.1. Artificial Intelligence Dari pendekatan Turing Test yang diusulkan oleh Alan Turing (1950), untuk dapat mencapai makna dari intelligence maka sebuah komputer harus memiliki kemampuankemampuan berikut ini(Russel & Norvig, 2010, p. 2): •

Natural Language Processing: kemampuan untuk berkomunikasi dalam bahasa Inggris.

•

Knowledge Representation: untuk menyimpan apa yang diketahui dan didengar.

•

Automated Reasoning: untuk menggunakan informasi yang disimpan untuk menjawab pertanyaan dan menghasilkan simpulan.

•

Machine Learning: untuk beradaptasi dengan lingkungan baru dan mendeteksi pola dari kemungkinan-kemungkinan.

•

Computer Vision: untuk melihat objek-objek.

•

Robotics: untuk memanipulasi objek-objek dan pergerakannya.

2.1.2. Multimedia M ultimediaadalah kombinasi dari text, art, sound, animation, dan video yang ditampilkan komputer atau alat elektronik lainnya. Ketika anda memungkinkan seorang end user – yang dikenal juga sebagai penonton dari suatu proyek multimedia – untuk mengontrol apa dan kapan elemen-elemen disampaikan, maka hal ini disebut dengan interactive multimedia. Ketika anda menyediakan sebuah struktur dari elemen-elemen yang berhubungan dengan penggunadapat melakukan navigasi, maka interactive multimedia menjadi hypermedia(Vaughan, 2011, p. 1). 2.1.3. Human-Computer Interaction 2.1.3.1.

Eight Golden Rules

Ada delapan aturan emas dalam merancang interface (Shneiderman, Plaisant, Cohen, & Jacobs, 2010, pp. 88-89), yaitu: 1. Berusaha Untuk Konsisten 2. M enyediakan Fungsionalitas Universal 3. M emberikan Feedback Informatif 4. M erancang Dialog Untuk M enghasilkan Penutupan

5. M encegah Eror 6. M emberikan Aksi Balik Yang M udah 7. M endukung Pusat Kendali Internal 8. M engurangi Beban Ingatan Jangka Pendek 2.1.3.2.

Five Measurable Human Factors Goals

Terdapat lima faktor manusia terukur yang dapat dijadikan sebagai pusat evaluasi (Shneiderman, Plaisant, Cohen, & Jacobs, 2010, p. 32), yaitu: 1. Waktu Belajar 2. Kecepatan M elakukan Suatu Tugas 3. Eror Yang Dibuat Pengguna 4. Daya Ingat Dari Waktu Ke Waktu 5. Ketertarikan 2.1.4. Waterfall Model Waterfall Model disebut juga dengan Classic Life Cycle, menyediakan sebuah pendekatan sistematik dan sekuensial pada pengembangan software yang dimulai dengan spesifikasi kebutuhan customer dan berlangsung melalui planning, modeling, construction, deployment, dan terakhir ongoing support pada software.

Gambar 2.1 Waterfall Model(Pressman, 2010, p. 39)

2.1.5. UML (Unified Modelling Language) Unified Modelling Language adalah suatu set dari model conventions yang digunakan untuk menentukan atau menjelaskan software system dalam bentuk objek – objek. UM L Diagram terdiri dari Use Case Diagram, Activity Diagram, Sequence Diagram, Class Diagram(Whitten & Bentley, 2007, p. 371). 2.1.5.1.

Use Case Diagram

Use Case Diagram merupakan sebuah diagram yang menggambarkan interaksi antara system, external systems, dan pengguna. Dengan kata lain, Use Case Diagram secara grafik menjelaskan siapa yang akan menggunakan system dan dengan cara apa

usermengharapkan untuk berinteraksi dengan system. Salah satu tool yang digunakan adalah use cases yang menjelaskan fungsi sistem dari perspektif pengguna eksternal dan dalam cara dan terminology yang mereka mengerti (Whitten & Bentley, 2007, pp. 246-250).

Gambar 2.2 Contoh Use Case Diagram(Whitten & Bentley, 2007, p. 246)

2.1.5.2.

Activity Diagram

Activity diagram merupakan diagram yang dapat digunakan secara grafik menggambarkan flow dari proses bisnis, langkah – langkah dari sebuah use case atau logika dari sebuah object behavior (method)(Whitten & Bentley, 2007, pp. 390-392).

Gambar 2.3 Contoh Activity Diagram

2.1.5.3.

S ystem Sequence Diagram

System Sequence Diagram adalah diagram yang menggambarkan interaksi antara actor dan system untuk skenario use case. Kita belum memulai analisis tiap object classes. Untuk sekarang kita masih berpikir system sebagai keseluruhan (Whitten & Bentley, 2007, p. 394).

Gambar 2.4 Contoh System Sequence Diagram (Whitten & Bentley, 2007, p. 659)

2.1.5.4.

Class Diagram

Class Diagram merupakan gambaran grafik dari sebuah struktur system’s static object, menunjukkan object classes yang menyusun system tersebut dan juga hubungan antar object classes(Whitten & Bentley, 2007, p. 400).

Gambar 2.5 Contoh Class Diagram

2.1.6. Database S ystems Database sebuah shared collection dari data yang berelasi secara logical dan deskripsinya, dibuat untuk mencapai kebutuhan informasi dari sebuah organisasi. Deskripsi dari data diketahui sebagai system catalog/data dictionary/metadata(Connolly & Begg, 2010, p. 65). 2.2. Teori Khusus 2.2.1. S ales Promotion Sales Promotion, sebuah bahan utama dalam marketing campaigns, terdiri dari peralatanperalatan yang mendorong, kebanyakan dalam jangka pendek di-design untuk menstimulasi lebih cepat atau besar pembelian produk-produk tertentu atau layananlayanan oleh konsumen atau pasar. Ketika advertising menawarkan alasan untuk membeli, sales promotion menawarkan dorongan.Salah satu tahap dalam menggunakan

sales promotion, yaitu sebuah perusahaan harus mencapai tujuannya(Kotler & Keller, 2012, p. 519). 2.2.2. Augmented Reality Augmented Reality adalah suatu teknologi yang memungkinkan penggabungan secara real-time dari digital content yang dihasilkan computer dengan dunia nyata (Haller, Billinghurst, & Thomas, 2007, pp. vi-vii). 2.2.3. Computer Vision Computer Vision adalah transformasi data dari sebuah still atau video camera ke dalam sebuah keputusan atau representasi baru. Keputusan dapat berupa “there is a person in this scene” atau “there are 14 tumor cells on this slide”. Keputusan ini didapatkan dari misal untuk mengetahui ada seseorang dalam suatu scene kita dapat melakukan deteksi wajah (Bradski & Kaehler, 2008, p. 2). 2.2.3.1.

OpenCV

OpenCV merupakan open source library yang ditulis dalam C dan C++ dan berjalan di bawah Linux, Windows, dan Mac OS X. OpenCV ini memiliki lebih dari 500 fungsi yang mendukung banyak area computer vision. OpenCV juga memiliki Machine Learning Library (MLL).Salah

satu area yang difokuskan

adalah pattern

recognition(Bradski & Kaehler, 2008, p. 1). 2.2.3.2.

Template Matching

Template M atchingmerupakan

teknik

dari digital image processing untuk

menemukan sebagian kecil dari sebuah gambar yang sama dengan gambar templatenya (Brunelli, 2009, pp. 1-3). 2.2.3.2.1.

Face Detection

Face Detection merupakan sebuah teknik dalam OpenCV yang menggunakan teknik

tree-based

dan

diberi

namaHaar

Classifier.

OpenCV

mengimplementasikan teknik face detection yang pertama kali dibuat oleh Paul Viola dan M ichael Jones (Viola-Jones detector) dan kemudian dikembangkan oleh Rainer Lienhart dan Jochen M aydt menggunakan “Haar Classifier”.Dengan adanya Haar Classifier ini, maka kita dapat mendeteksi suatu object misalnya adalah mendeteksi wajah seseorang(Bradski & Kaehler, 2008, pp. 506-507). 2.2.3.2.2.

Image Matching

Image Matching merupakan bagian dari Template Matching, dimana merupakan konsep untuk menyelesaikan berbagai masalah seperti Object Recognition, Image Registration, Visual Tracking, 3D reconstruction, dan lain-lain. Salah satu konsep yang dipakai adalah konsep Interest Point (dapat disebut keypoints atau feature points). Teknik-teknik dalam image matching adalah Detecting Harris Corners, Detecting FAST features, Detecting the scale-invariant SURF features, Describing SURF features(Laganière, 2011, p. 191). 2.2.3.3.

Papervision3D

Papervision3D merupakan sebuah library ditulis dalam bahasa action script 3.0 yang mudah digunakan memungkinkan developer untuk membuat 3D dalam flash.Karena dijalankan pada flash, maka anda dapat dengan mudah meletakkannya pada web(Winder & Tondeur, 2009, p. 1). 2.2.4. Bahasa Pemrograman ActionS cript 3.0 ActionScript merupakan bahasa pemrograman untuk Adobe Flash Player run-time environment.ActionScript memungkinkan interaktivitas, data handling, dan banyak lagi dalam konten dan aplikasi-aplikasi Flash(Adobe System Incorporated, 2007, p. 19). 3. Analisis dan Rancangan 3.1. Analisis dan S olusi Berdasarkan dari analisis wawancara yang telah dilakukan pada salah seorang ahli dalam bidang marketing, ada beberapa masalah yang ditemukan dan solusinya, sebagai berikut: 1. Kompetitor. 2. Keefektifan dan Keefisienan. 3. Ketertarikan. Jadi dapat disimpulkan, kalau dilihat dari sisi target customers-nya maka mereka yang pelajar sekitar umur 15-17 tahun yang bisa berarti prospective students, sudah memiliki PC/Laptop masing-masing. Bahkan sudah memiliki Webcam dan Flash player terinstall pada PC/Laptop masing-masing. Kebanyakan dari responden juga cukup lama dalam menggunakan PC/Laptop mereka dan menggunakan hampir seluruh waktunya untuk browsing.M ereka juga setuju dengan pemaparan promosi secara online dan dengan menggunakan teknologi video/webcam.Jadi diharapkan melalui aplikasi ini minat user dapat diperkuat.

3.2. Planning Dalam tahap ini kami menentukan apa saja yang diperlukan untuk menjalankan skripsi ini beserta dengan perencanaan rentang waktu dari masing-masing perencanaan. Tabel 3.1 Time Table

Time Table   September  No 

Activity 

October 

November 

December 

1  2  3  4  1  2  3  4  1  2  3  4  5  1  2  3  4 

Research  (Library, IDE,  1   Platform) 

  

  

  

  

  

  

  

  

  

  

Software  Modelling  2   (UML)   Construction  (Building  3   Application)  Construction  (Testing  4   Application)  5   Deployment 

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

3.3. Perancangan Sistem Dari hasil analisis masalah yang kami temukan maka kami memulai perancangan dengan menggunakan Unified Modeling Language (UM L), dimana kami menggunakan tiga diagram yaitu use case diagram, sequence diagram, dan class diagram.

Gambar 3.1 Class Diagram

Gambar 3.2 Use Case Diagram Pengguna

Gambar 3.3 Use Case Diagram Admin

Gambar 3.4 Sequence Diagram: Mendownload Image Template

3.4. Database Dictionary Tabel 3.2 Admins Database Dictionary

Field admin_id username password

Type Null Primary Key int No Yes varchar No No varchar No No

Auto Increment Yes No No

Tabel 3.3 Feedbacks Database Dictionary

Field feedback_id feedback_date feedback_email feedback_msg

Type int int varchar varchar

Null No No No No

Primary Key Yes No No No

Auto Increment Yes No No No

Tabel 3.4 Images Database Dictionary

Field

Type

Null Primary Key Auto Increment

image_id model_id image_name image_deleted

int No int No varchar No tinyint No

Yes No No No

Yes No No No

Tabel 3.5 Info Database Dictionary

Field Type Null Primary Key Auto Increment online_guests int No No No online_admin int No No No Tabel 3.6 Logs Database Dictionary

Field log_id admin_id log_date log_action

Type int int int varchar

Null No No No No

Primary Key Yes No No No

Auto Increment Yes No No No

Tabel 3.7 Models Database Dictionary

Field model_id model_name model_image model_type model_deleted

Type Null Primary Key int No Yes varchar No No varchar No No set No No tinyint No No

Auto Increment Yes No No No No

3.5. Perancangan Aplikasi Aplikasi yang kami rancang ini sebagaimana yang dapat dilihat di atas merupakan aplikasi website yang memiliki front end dan back end, dimana pada front end akan menampilkan aplikasi flash yang berisi inti dari aplikasi yang kami rancang dan pada back end merupakan halaman bagi admin untuk dapat mengatur model, template email, dan melihat log dari modifikasi yang dilakukan. 3.5.1. Front En d Pada bagian front end yang akan dilihat dan digunakan secara langsung oleh user memiliki beberapa menu, yaitu: 3.5.1.1.

Face Detection

Pada fitur ini user pertama dapat melihat wajahnya sendiri dengan menggunakan webcam. Kalau dilihat pada layar bagian kiri maka di situ ditampikan model-model

yang dapat dipilih yang dapat ditampilkan pada layar.User dapat memilih hanya dengan mengklik pada salah satu dari model-model tersebut. Ketika sudah memilih model mereka dapat memilih untuk menampilkan model tersebut pada layar, menghilangkan model tersebut dari layar, menahan model pada posisinya, melepaskan model kembali, sampai pada menyimpan screen shoot, yang dapat dipakai untuk mengabadikan gambar pada layar dari user. Posisi model itu akan disesuaikan pada wajah user. Komponen pada fitur ini yaitu: •

Pilih model,

•

Show,

•

Hide,

•

Hold,

•

Unhold, dan

•

Save gambar yang di-capture

3.5.1.2.

Image Matching

Pada fitur ini user dapat melihat, memperbesar atau memperkecil ukuran dari model.User dapat mengarahkan template image ke depan webcam, kemudian model akan muncul pada gambar yang ditunjukkan oleh user. User dapat memperbesar ukuran dari model dengan mengklik tombol “+” dan dapat memperkecil ukuran dari model dengan mengklik tombol “-”. Komponen pada fitur ini yaitu: •

Hold,

•

Unhold,

•

Increase Size, dan

•

Decrease Size

3.5.1.3.

Help

Pada menu ini merupakan bantuan bagi user yang masih baru dalam aplikasi ini. Dengan bantuan help ini mereka akan lebih mudah mengerti untuk menggunakan aplikasi yang kami rancang.

3.5.2. Back End Pada bagian back end, ditujukan bagi admin yang dapat mengatur aplikasi web ini.Pertama kali aka nada autentifikasi user sebagai admin. Setelah login sebagai admin, maka pada halaman home dapat melihat log dari modifikasi-modifikasi yang pernah dilakukan dan statistic user yang telah mengunjungi website ini. Lalu berikutnya ada fitur Manage Models dimana admin dapat mengatur model, baik itu menambah, modifikasi dan menghapus. Juga ada fitur Manage Images dimana admin dapat mengatur template images baik itu menambah, modifikasi, atau menghapus. Komponen pada fitur ini yaitu: •

Add,

•

Update,

•

Delete,

•

Upload,

•

Submit, dan

•

Cancel

3.5.3. Perancangan User Interface Tampilan user yang baik akan memberikan kemudahan bagi user dalam menggunakan aplikasi ini, dan juga memberikan kepuasan, keefektifan, dan keefisienan yang pengguna inginkan. Juga perlu diperhatikan penggunaan kata yang digunakan agar lebih mudah dimengerti oleh user sehingga informasi yang disampaikan sampai dengan benar.Untuk lebih jelasnya rancangan layar dapat dilihat pada gambar 3.5.

Gambar 3.5 Rancangan Layar Web

4. Implementasi dan Evaluasi 4.1. S pesifikasi Sistem Untuk dapat mengimplementasikan aplikasi PromoTech ini dengan baik, maka berikut ini dipaparkan spesifikasi dari perangkat keras, perangkat lunak, dan prosedur penggunaan yang direkomendasikan agar dapat diimplementasikan dengan sebaik mungkin. 4.1.1. Computer Pada penelitian yang kami lakukan, computer yang disarankan atau direkomendasikan untuk dipakai dalam menggunakan aplikasi PromoTech ini sebagai spesifikasi minimum, sebagai berikut: •

Processor: Intel® Pentium® dual-core, 1.73 GHZ

•

RAM : 2 GB

•

Harddisk: 50 M B

•

VGA: 128 M B

•

M onitor: LCD 16”

4.1.2. Digital Camera Digital camera yang digunakan adalah yang kita kenal dengan namaWebcam. Webcam digunakan untuk menampilkan real time image ke sebuah komputer atau jaringan komputer.Spesifikasi minimum yang disarankan adalah VGA Webcam (0.3 M P).

4.1.3. Image Template Image Template digunakan sebagai template untuk pendeteksian gambar.

4.1.4. S oftware Untuk software yang direkomendasikan untuk dipakai yaitu web browse yang mendukung css3, adobe flash player (lebih baru atau versi 9). 4.2. Implementasi 4.2.1. Petunjuk Pengoperasian Oleh User Ketika pengguna ingin mulai menggunakan aplikasi ini maka sebelumnya mereka harus memiliki adobe flash player dengan kebutuhan minimal seperti yang sudah dipaparkan sebelumnya dan ter-install pada web browser mereka. Juga dengan webcam yang sudah ter-install pada komputer masing-masing. Pengguna tinggal memasukkan url dari aplikasi web ini ke address bardari web browser masing-masing. Ketika ada dialog konfirmasi menanyakan apakah pengguna memperbolehkan akses ke webcam mereka, maka pilih Yes. Berikut ini merupakan langkah-langkah yang dapat diambil pengguna untuk menggunakan aplikasi ini: 4.2.1.1.

Face Simulation

1. Pilih menu face pada halaman utama dari aplikasi ini. 2. Pilih Allow ketika kotak dialog muncul. 3. Arahkan wajah anda ke depan webcam yang sudah terpasang. 4. Pilih objek yang hendak ditampilkan pada layar. 5. Pengguna dapat memilih menu yang sudah tersedia (Show/Hide, Hold, Save). 4.2.1.2.

Image Simulation

1. Klik pada menu Image Simulation. 2. Pilih Allow ketika kotak dialog muncul. 3. Arahkan gambar ke webcam. 4. Sebuah model akan muncul pada tengah layar. 5. Tekan Alt dan gerakkan pointer untuk merotasi terhadap sumbu X dan Y, tekan Ctrl dan gerakkan pointer untuk merotasi terhadap sumbu Z, Tahan

Shift dan gerakkan pointer untuk memindahkan model, Scroll untuk memperbesar atau memperkecil ukuran model. 4.2.2. Petunjuk Pengoperasian Oleh Admin 4.2.2.1.

Manage Models

4.2.2.1.1.

Add

1. Klik button Add yang ada pada sebelah title Models. 2. Sebuah kotak dialogakan muncul. 3. Browsefile model yang ingin di-upload. 4. Browsefile gambar yang ingin di-upload. 5. Pilih tipe yang diinginkan: a. None: untuk ditampilkan pada image simulation. b. Top: untuk ditampilkan pada bagian kepala. c. Center: untuk ditampilkan pada daerah mata. 6. Klik button save jika ingin menyimpan, atau cancel untuk membatalkan. 7. Sebuah pesan berhasil atau tidak penambahan model ini akan ditampilkan. 4.2.2.1.2.

Edit

1. Klik button Edit pada model yang ingin diganti. 2. Browse model jika ingin mengganti file model yang ada. 3. Browse gambar jika ingin mengganti file gambar yang ada. 4. Pilih tipe jika ingin mengganti dari tipe. 5. Klik button save jika ingin menyimpan, atau cancel untuk membatalkan. 6. Sebuah pesan berhasil atau tidak penggantian model ini akan ditampilkan. 4.2.2.1.3.

Delete

1. Klik button Delete pada model yang ingin dihapus. 2. Akan muncul kotak dialog konfirmasi apakah yakin untuk menghapus model. Yang dihapus bukan hanya modelnya tetapi juga gambarnya. 3. Klik Yes untuk menghapus dan No untuk membatalkan. 4. Sebuah pesan berhasil atau tidak penghapusan model ini akan ditampilkan. 4.2.2.2.

Manage Images

4.2.2.2.1.

Add

1. Klik button Add yang ada pada sebelah title Images.

2. Sebuah kotak dialogakan muncul. 3. Browse file gambar yang ingin di-upload. 4. Pilih model yang ingin ditampilkan oleh gambar yang di-upload. 5. Klik button save jika ingin menyimpan, atau cancel untuk membatalkan. 6. Sebuah pesan berhasil atau tidak penambahan

gambar ini akan

ditampilkan. 4.2.2.2.2.

Edit

1. Klik button Edit pada gambar yang ingin diubah. 2. Sebuah kotak dialog akan muncul. 3. Browse file gambar yang ingin di-upload bila ingin mengubah gambar. 4. Pilih model yang ingin ditampilkan oleh gambar yang di-upload bila ingin mengganti model. 5. Klik button save jika ingin menyimpan, atau cancel untuk membatalkan. 6. Sebuah pesan berhasil atau tidak pengubahan

gambar ini akan

ditampilkan. 4.2.2.2.3.

Delete

1. Klik button Delete pada gambar yang ingin dihapus. 2. Sebuah kotak dialog konfirmasi akan muncul. 3. Klik button Yes jika ingin menyimpan, atau No untuk membatalkan. 4. Sebuah pesan berhasil atau tidak penghapusan gambar ini. 4.3. Tampilan User Interface 4.3.1. Halaman Utama Halaman ini merupakan halaman awal aplikasi yang dilihat oleh pengguna ketika pertama kali membuka aplikasi PromoTech ini. Pengguna disediakan dengan tomboltombol yang dapat dipilih sebagai menu, yang mencakup: Face Simulation, Image Simulation, Help, dan Exit. M enu dapat diklik dengan mengarahkan cursor ke menu yang hendak dipilih dan kemudian mengklik pada tombol tersebut untuk masuk ke menu yang diinginkan. Bila pengguna ingin menggunakan fitur untuk simulasi wajah, maka dapat memilih menu Face Simulation.Bila pengguna ingin menggunakan fitur untuk simulasi gambar, maka pengguna dapat memilih Image Simulation. Bila pengguna ingin mengetahui

caramenggunakan aplikasi ini, sudah disediakan fitur Help yang menyediakan informasi mengenai bagaimana pengguna dapat menggunakan aplikasi ini beserta dengan penjelasannya. Untuk lebih jelasnya dapat dilihat pada gambar 4.1.

Gambar 4.1 Tampilan Halaman Utama

4.4. Evaluasi Dalam evaluas i ini ada dua hal yang kami evaluasi yaitu Tujuan dan M anfaat dan HumanComputer Interaction.Dilakukan dengan kuisioner dan wawancara langsung terhadap pengguna yang langsung menggunakan aplikasi ini.Dari responden sekitar 20 orang, kami mendapatkan bahwa aplikasi yang kami rancang ini sudah mencapai tujuan dan manfaatnya, termasuk memenuhi Human-Computer Interaction. 5. Simpulan dan S aran 5.1. Simpulan Simpulan yang dapat diperoleh melalui analisis, perancangan, implementasi, dan evaluasi dari aplikasi PromoTech yaitu sebagai berikut: a. Aplikasi PromoTech ini dibuat dengan menggunakan teknologi Augmented Reality melalui metode Template Matching yang mendukung 2 fitur utama, yaitu pendeteksian wajah (Face Detection) dan pengenalan gambar (Image Recognition). b. Aplikasi PromoTech menggunakan flash yang ditampilkan pada web dan juga memiliki admin panel dimana para admin dapat mengatur isi dari website ini.

c. Penulis menggunakan bahasa ActionScript 3.0 dengan menggunakan FlashDevelop sebagai IDE untuk aplikasi flash-nya dan bahasa php untuk aplikasi web dengan menggunakan NetBeans sebagai IDE-nya. d. M erancang aplikasi dengan menggunakan library OpenCV dan Papervision3D. e. Penggunaan aplikasi tidak mengalami kesulitan karena sudah banyak pengguna yang memiliki PC/Laptop sendiri dengan webcam dan adobe flashplayer ter-install pada web browser masing-masing yang dapat diakses secara online. 5.2. S aran Saran-saran yang dapat diberikan untuk dapat mengembangkan aplikasi PromoTech untuk pengembangan yang lebih lanjut, yaitu: a. Pengembangan fungsi-fungsi interaktif pada baik menu face simulation maupun image simulation dalam mempromosikan suatu produk. b. Penambahan dan pengembangan model 3D, termasuk bentuk dan animasinya. c. Perbaikan

informasi

mengenai

memperbesar/memperkecil

model

cara

untuk

memutar,

pada

bagian

Image

menggerakkan,

Simulation

untuk

mempermudah pengguna dalam menggunakan fitur ini. d. Pengembangan versi mobile sehingga memudahkan orang-orang dalam mengakses aplikasi

ini

Daftar Pustaka Adobe System Incorporated. (2007). Programming ActionScript™ 3.0. San Jose, California, USA: Adobe System Incorporated. Bradski, G., & Kaehler, A. (2008). Learning OpenCV (1st ed.). Sebastopol, CA, United States of America: O’Reilly M edia. Brunelli, R. (2009). Template Matching Techniques in Computer Vision: Theory and Practice (1st ed.). Chippenham, Wiltshire, United Kingdom: Wiley. Connolly, T. M ., & Begg, C. E. (2010). Database Systems: A Practical Approach to Design, Implementation, and Management (5th ed.). Boston, MA, United States of America: Pearson Education. Haller, M ., Billinghurst, M ., & Thomas, B. H. (2007). Emerging Technologies of Augmented Reality: Interfaces and Design (1st ed.). Hershey, PA, United States of America: Idea Group Inc. Kotler, P., & Keller, K. L. (2012). Marketing Management (14th ed.). New Jersey, United States Of America: Prentice Hall. Laganière, R. (2011). OpenCV 2 Computer Vision Application Programming Cookbook (1st ed.). Olton, Birmingham, B27 6PA, UK: Packt Publishing Ltd. Pressman, R. S. (2010). Software Engineering A Practicioner's Approach (7th ed.). New York, United States of America: M cGraw-Hill. Russel, S., & Norvig, P. (2010). Ar tificial intelligence A Modern Approach (3rd ed.). Upper Sadle River, New Jersey, United States of America: Pearson Education. Shneiderman, B., Plaisant, C., Cohen, M ., & Jacobs, S. (2010). Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th ed.). Boston, MA, United States of America: Addison-Wesley. Vaughan, T. (2011). Multimedia: Making It Work (8th ed.). Appleton, M aine, United States of America: M cGraw-Hill. Whitten, J. L., & Bentley, L. D. (2007). System Analysis and Design Methods (7th ed.). New York: M cGraw-Hill. Winder, J., & Tondeur, P. (2009). Papervision3D Essentials (1st ed.). Olton, Birmingham, B27 6PA, United Kingdom: Packt Publishing Ltd.

Biography

IMPLEMENTATION OF AUGMENTED REALI TY TECHNOLOGY AS MEDIA PROMOTION WITH TEMPLATE MATCHING

Henoch Immanuel Binus University, Jakarta, DKI Jakarta, Indonesia

Romy Kusuma Binus University, Jakarta, DKI Jakarta, Indonesia and

Aries Chandra Binus University, Jakarta, DKI Jakarta, Indonesia

Abstract The purpose of this research is to design a technology-based Augmented Reality by using Template M atching can be used as a media promotion. The research method used in this study is the method of data collection and interview, which in this case to promote University Bina Nusantara need information with interview from the marketing side. The results obtained from analysis and design of Augmented Reality technology by using Template M atching, is an application that can detect face (Face Detection) and image (Image Recognition) with Augmented Reality. Conclusions can be drawn from the results of this study is an Augmented Reality technology by using Template M atching could be one option in the promotion of Bina Nusantara University to prospective new student. Keyword: Technology, Augmented Reality, Template Matching. 1. Preface This technology has been growing in Indonesia and in the global world. The technology is already used in many companies, especially in the field of marketing. For example, in terms of promotional marketing increasingly attractive the more it will customers interested. Technology in this promotion important to be used for direct delivery to customers regarding promotional information. We need to know there is new technology called Augmented Reality (AR). Augmented Reality is a technology that combines the virtual object two-dimensional (2D) and three-dimensional (3D) environment into a real three-dimensional (3D) and then projecting the virtual objects in real time (real time).

With the Augmented Reality technology if we want to market or promote something more interesting we can integrate with 3D objects. But keep in mind in Augmented Reality to be able to display 3D objects , required of a marker. M arker is a box-shaped that will be stored by the program as a specific marker of 3D objects. This marker will be in print in the paper. In addition to the marker we also need a webcam to show our real world, and will detect the marker to display its 3D object. Library of augmented reality with a well-known with the marker is FLARToolkit. These technologies have already begun to be applied to the field of promotion, but we can see, we need a marker to display the 3D object. It would be great if we do not need to wear a marker to display the 3D object, but only to detect a face (face detection). Therefore, it is known a library called OpenCV (Open Source Computer Vision). OpenCV is a library that contains functions that focus on real time computer vision. With OpenCV we can use a variety of object detection algorithms (Object Recognition) such as face detection (face detection). After face is detected then we can show 3D objects directly using the Papervision3D library. Papervision3D library is a library that is associated with 3D objects and using Flash (Actionscript 3.0). Why Papervision3D? Because Papervision3D-based flash that can be applied to the web, so the promotion can be through the website. Because this conditions, the authors are interested in combining with the OpenCV library Papervision3D library to create Augmented Reality applications in the field of promotion. The author would develop a more research on Augmented Reality. 2. Theory 2.1. General 2.1.1. Artificial Intelligence The Turing Test, proposed by Alan Turing (1950), was designed to provide a satisfactory operational definition of intelligence. A computer passes the test if a human interrogator, after posing some written questions, cannot tell whether the written responses come from a person or from a computer. Chapter 26 discusses the details of the test and whether a computer would really be intelligent if it passed. For now, we note that programming a computer to pass a rigorously applied test provides plenty to work on. The computer would need to possess the following capabilities(Russel & Norvig, 2010, p. 2):

•

Natural Language Processing: to enable it to communicate successfully in English.

•

Knowledge Representation: to store what it knows or hears.

•

Automated Reasoning to use the stored information to answer questions and to draw new conclusions.

•

Machine Learning: to adapt to new circumstances and to detect and extrapolate patterns.

•

Computer Vision: to perceive objects.

•

Robotics to manipulate objects and move about.

2.1.2. Multimedia M ultimedia is any combination of text, art, sound, animation, and video delivered to you by computer or other electronic or digitally manipulated means. When you allow an end user—also known as the viewer of a multimedia project—to control what and when the elements are delivered, it is called interactive multimedia. When you provide a structure Of linked elements through which the user can navigate, interactive multimedia becomes hypermedia(Vaughan, 2011, p. 1). 2.1.3. Human-Computer Interaction 2.1.3.1.

Eight Golden Rules

There are eight golden rules of interface design (Shneiderman, Plaisant, Cohen, & Jacobs, 2010, pp. 88-89): 1. Strive for consistency. 2. Cater to universal usability. 3. Offer informative feedback. 4. Design dialog to yield closure. 5. Prevent errors. 6. Permit easy reversal of actions. 7. Support internal locus of control. 8. Reduce short-term memory load. 2.1.3.2.

Five Measurable Human Factors Goals

There are five measureable human factors that used for direct evaluation (Shneiderman, Plaisant, Cohen, & Jacobs, 2010, p. 32):

1. Time to learn. 2. Speed of performance. 3. Rate of errors by users. 4. Retention over time. 5. Subjective satisfaction. 2.1.4. Waterfall Model The waterfall model, sometimes called the ctassic life gtcle, suggests a systematic, sequential approach to software development that begins with customer specificationof requirementsandprogressesthroughplanning,modeling,construction,anddeployment, culminating in ongoing support of the completed software (Pressman, 2010, p. 39).

Gambar2.1 Waterfall Model(Pressman, 2010, p. 39)

2.1.5. UML (Unified Modelling Language) UnigiedM odelling Language is a set of modeling conventions that is used to specify or describe a software system in term of objects (Whitten & Bentley, 2007, p. 371). 2.1.5.1.

Use Case Diagram

Use-case diagram is a diagram that depicts the interaction between the system and external systems and users. In other words, it graphically describes who will use the system and in what ways the user expects to interact with the system (Whitten & Bentley, 2007, pp. 246-250).

Gambar2.2Contoh Use Case Diagram(Whitten & Bentley, 2007, p. 246)

2.1.5.2.

Activity Diagram

Activity diagram is a diagram that can be used to graphically depict the flow of business process, the steps of the use case, or the logic of an object behavior (method) (Whitten & Bentley, 2007, pp. 390-392).

Gambar2.3Contoh Activity Diagram

2.1.5.3.

S ystem Sequence Diagram

System sequence diagram is a diagram that depicts the interaction between the actor and the system for a use case scenario(Whitten & Bentley, 2007, p. 394).

Gambar2.4Contoh System Sequence Diagram (Whitten & Bentley, 2007, p. 659)

2.1.5.4.

Class Diagram

Class diagram is a graphical depiction of system’s static object structure, showing object classes that the system is composed as well as the relationships between those object classes (Whitten & Bentley, 2007, p. 400).

Gambar2.5Contoh Class Diagram

2.1.6. Database S ystems Database is a shared collection of data that related logically and its description, created to establish information requirements from an organization. Description of data known as system catalog/data dictionary/metadata(Connolly & Begg, 2010, p. 65). 2.2. S pecial 2.2.1. S ales Promotion Sales promotion, a key ingredient in marketing campaigns, consists of a collection of incentivetools, mostly short term, designed to stimulate quicker or greater purchase of particular productsor services by consumers or the trade.50Whereas advertising offers a reason to buy, sales promotion offers an incentive. Sales promotionincludes tools for consumer promotion (samples, coupons, cash refund offers, prices off, premiums,prizes, patronage rewards, free trials, warranties, tie-in promotions, cross-promotions, pointofpurchasedisplays,and demonstrations), trade promotion (prices off, advertising and display allowances,and free goods), and business and sales force promotion (trade shows and conventions,contests for sales reps, and specialty advertising)(Kotler & Keller, 2012, p. 519).

2.2.2. Augmented Reality Augmented reality (AR) research aims to develop technologies that allow the real-time fusionof computer-generateddigitalcontentwith the real world (Haller, Billinghurst, & Thomas, 2007, pp. vi-vii). 2.2.3. Computer Vision (Bradski & Kaehler, 2008, p. 2). 2.2.3.1.

OpenCV

OpenCV [OpenCV] i s a n open source (see http://opensource.org) computer v i sion l ibrar y available from http://SourceForge.net/projects/opencvlibrary. Th e library is written in C and C++ and runs under Linux, Windows and M ac OS X.OpenCV also contains a full, general-purpose M achine Learning Library (M LL). Th is sublibrary is focused on statistical pattern recognition and clustering (Bradski & Kaehler, 2008, p. 1). 2.2.3.2.

Template Matching

Template M atching is a digital image processing techniqueto find a small piecesof the same imagethat similar to the template image(Brunelli, 2009, pp. 1-3). 2.2.3.2.1.

Face Detection

Face Detection is a technique inOpenCVthat used tree-based techniqueand calledHaar Classifier. OpenCVimplementing face detection techniquethat first made by Paul Viola and M ichael Jones (Viola-Jones detector) and than developed by Rainer LienhartandJochenM aydtusing “Haar Classifier”.With this Haar Classifier, we are able to detect an objectfor example a person’s face(Bradski & Kaehler, 2008, pp. 506-507). 2.2.3.2.2.

Image Matching

Image M atching is a part of Template M atching, a concept to solve problems such as Object Recognition, Image Registration, Visual Tracking, 3D reconstruction, etc. One of those concept that has been used nowadaysis interest point concept( keypointsor feature points). Techniques in image matching is Detecting Harris Corners, Detecting FAST features, Detecting the scale-invariant SURF features, Describing SURF features(Laganière, 2011, p. 191).

2.2.3.3.

Papervision3D

Papervision3D is an easy to use library written in action script 3.0 that allow developer to load 3D to flash. Because run in flash, you are able to put it easily on the website(Winder & Tondeur, 2009, p. 1). 2.2.4. BahasaPemrogramanActionS cript 3.0 ActionScript is a programming language for Adobe Flash Player run-time environment. ActionScript allow interactivity, data handling, and many other stuff in flash contents and applications(Adobe System Incorporated, 2007, p. 19). 3. Analysis and Design 3.1. Analysis dan S olution Based on the analysis of the interview that have been done by the expert in field of marketing, there are some problem encountered and solution , as follow : 1. Competitor. 2. Effectiveness and efficiency. 3. Interest. So the conclusion, view from the side of target customers, they are students around the age of 15-17 years can mean prospective students, already have a PC / Laptop respectively. Even already have a Webcam and Flash player installed on your PC / Laptop respectively. M ost of the respondents also long enough in using the PC / Laptop and almost all their time to browsing. They also agree with the online exposure and promotion by using video technology / webcam. 3.2. Planning In this phase we determine what is needed to run this thesis with a planning period of each plan. Tabel3.1 Time Table

Time Table  

 

No 

 

Activity 

September 

November 

December 

1  2  3  4  1  2  3  4  1  2  3  4  5  1  2  3  4 

Research  (Library, IDE,  1   Platform) 

October 

  

  

Software  Modelling  2   (UML)  

  

  

  

  

  

  

  

  

Construction  (Building  3   Application)  Construction  (Testing  4   Application)  5   Deployment 

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

3.3. PerancanganSistem From the analysis of the problems, we start the design by using the Unified M odeling Language (UM L), where we use the three diagrams that is use case diagram, sequence diagram and class diagram.

Picture3.1 Class Diagram

Picture3.2 Use Case Diagramfor User

Picture3.3 Use Case Diagramfor Admin

Picture3.4 Sequence Diagram: Download Image Template

3.4. Database Dictionary Tabel3.2 Admins Database Dictionary

Field admin_id username password

Type Null Primary Key int No Yes varchar No No varchar No No

Auto Increment Yes No No

Tabel3.3 Feedbacks Database Dictionary

Field feedback_id feedback_date feedback_email feedback_msg

Type int int varchar varchar

Null No No No No

Primary Key Yes No No No

Auto Increment Yes No No No

Tabel3.4 Images Database Dictionary

Field image_id

Type int

Null Primary Key Auto Increment No Yes Yes

Field model_id image_name image_deleted

Type Null int No varchar No tinyint No

Primary Key No No No

Auto Increment No No No

Tabel3.5 Info Database Dictionary

Field Type Null Primary Key Auto Increment online_guests int No No No online_admin int No No No Tabel3.6 Logs Database Dictionary

Field log_id admin_id log_date log_action

Type int int int varchar

Null No No No No

Primary Key Yes No No No

Auto Increment Yes No No No

Tabel3.7 Models Database Dictionary

Field model_id model_name model_image model_type model_deleted

Type Null Primary Key int No Yes varchar No No varchar No No set No No tinyint No No

Auto Increment Yes No No No No

3.5. Design Application Application that we had designed as can be seen above the application which has a front end and back end, where the front end will feature a flash application that contains the core of our application design and the back end is a page for the admin to be able to adjust the model , image templates, and see a log of modifications made. 3.5.1. Front En d At the front end can be viewed and used directly by a user,has several menus, that is: 3.5.1.1.

Face Detection

This feature user can see his own face using a webcam. When viewed on left the screen it is shown that models can be selected that can be displayed on the screen. User can select by clicking on one of these models. When the model is chosen it will display the model on the screen, remove the model from the screen, hold the model in

place, the model can be saved. The position of the model will be adjusted on the user's face. Components of this feature that is : •

Choose model,

•

Show,

•

Hide,

•

Hold,

•

Unhold, and

•

Save picture

3.5.1.2.

Image Matching

In this feature the user can view, zoom in or zoom out of the model. User can show directly the template image in the front of the webcam, then the model will appear in the image indicated by the user. Users can enlarge the size of the model by clicking the "+" and can reduce the size of the model by clicking the "-". Components of this feature that is : •

Hold,

•

Unhold,

•

Increase Size, and

•

Decrease Size

3.5.1.3.

Help

On this menu will help users who are new in this application. With this help, they would be easier to understand to use application that we designed. 3.5.2. Back End On the back end, intended for the admin can manage this web application. First time user authentication as admin. Once logged in as admin, then on the home page to view the log of the modification that have been done and statistical users who have visited this website. Then there is the next Manage Models feature where the admin can set the model, add, modify and delete. Manage Images are also a feature where the admin can set a template images that add, modify, or delete.

Components of this feature that is : •

Add,

•

Update,

•

Delete,

•

Upload,

•

Submit, and

•

Cancel

3.5.3. Design User Interface User Interface for user will provide convenience for the user to use this application, and also gives satisfaction, effectiveness, and efficiency that users want. The use of the words used to be more easily understood by the user. For more details, screen design can be seen in Picture 3.5.

Picture3.5Design Web

4. Implementation and Evaluation 4.1. S ystem S pecification To be able to implement this PromoTech application, we provide the specification of hardware, software, and the recommended procedure to use and to implement this application so well. 4.1.1. Computer In this research we suggest or recommend the following for the minimum specification of computer to be used in PromoTech application:

•

Processor: Intel® Pentium® dual-core, 1.73 GHZ

•

RAM : 2 GB

•

Harddisk: 50 M B

•

VGA: 128 M B

•

M onitor: LCD 16”

4.1.2. Digital Camera The digital camerathat we used is Webcam. Webcam is used to showing the real time image to computer or computer network. The minimum specification that we suggest is VGA Webcam (0.3 M P).

4.1.3. Image Template Image Template is used for template to detect the images.

4.1.4. S oftware For the software we recommend web browser supporting css3, and adobe flash player (version 9 or later)

4.2. Implementation 4.2.1. Operating Guide by User When user want to use this application, user must have adobe flash player installed in web browser. And user must have webcam installed in computer. User just entering url for this application in web browser address bar. When confirm dialog showed and ask user to allowing access to the webcam, click Yes. The following are steps for user to use this application: 4.2.1.1.

Face Simulation

1. Choose Face Simulation menu in main page of this application. 2. Choose Allow when dialog box showed. 3. Point your face in front of the webcam that already installed. 4. Choose object that you want to displayed on the screen.

5. User can choose the menus that available in the application. (Show/Hide, Hold, Save). 4.2.1.2.

Image Simulation

1. Click Image Simulation menu. 2. Choose Allow when dialog box showed. 3. Point the images to the webcam. 4. A model will appear in the middle of screen. 5. Hold Alt and move the pointer for rotating by X axis and Y axis, hold Ctrl and move the pointer for rotating by Z axis, Hold Shift and move the pointer to moving the model, Scroll the mouse to increase or decrease the size of model. 4.2.2. Operating Guide by Admin 4.2.2.1.

Manage Models

4.2.2.1.1.

Add

1. Click button Add next to the title M odels. 2. A dialog box will appear. 3. Browsefile model that want to be uploaded. 4. Browsefile image that want to be uploaded. 5. Choose type: a. None:for model that will displayed in image simulation. b. Top: for model that will displayed in the head. c. Center: for model that will displayed in the eyes. 6. Click button save if you want to save, or cancel to cancel the process. 7. A message will appear if success or not for adding the models. 4.2.2.1.2.

Edit

1. Click button Edit on model that want to be edited. 2. Browse model if you want change model file. 3. Browse image if you want change the image file. 4. Choose type if you want to change the type. 5. Click button save if you want to save, or cancel to cancel the process. 6. A message will appear if success or not for editing the models. 4.2.2.1.3.

Delete

1. Click button Delete on model that want to be deleted. 2. A confirmation dialog box will appear and asking are you sure want to delete the model. The model will be deleted and the image will be deleted too. 3. Click Yes to delete, and No to cancel the delete. 4. A message will appear if success or not for deleteing the models. 4.2.2.2.

Manage Images

4.2.2.2.1.

Add

1. Click button Add next to title Images. 2. A dialog box will appear. 3. Browse file image that you want to be uploaded. 4. Choose model that you want to displayed for uploaded image. 5. Click button save if you want to save, or cancel to cancel the process. 6. A message will appear if success ot not for adding the images. 4.2.2.2.2.

Edit

1. Click button Edit on image that want to be edited. 2. A dialog box will appear. 3. Browse file image that you want to upload if want to change the image. 4. Choose model that you want to displayed with uploaded image if you want to change the model. 5. Click button save if you want to save, or cancel to cancel the process. 6. A message will appear if success or not for editing the images. 4.2.2.2.3.

Delete

1. Click button Delete on image that you want to delete. 2. A confirmation dialog box will appear. 3. Click button Yes if you want to delete or No to cancel the delete. 4. A message will appear if success or not for deleting the models. 4.3. User Interface 4.3.1. Main Page This page is a main page for this application which viewed by user when user first open the PromoTech application. Users are provided with buttons that can be selected as the

menu, which includes: Face Simulation, Image Simulation, Help, and Feedback. The menu can be clicked with pointing cursor to the menu that you want to choose and then click to enter the selected menu. If user wants use feature in face simulation, then user can choose Face Simulation menu. If user wants use feature for image simulation, then user can choose Image Simulation menu. If user want to know how to use this application, we provide feature Help that providing information about how user can use this application with the description. M ore detail can be seen in figure 4.1.

Figure4.1Main Page

4.4. Evaluation In this evaluation there are 2 things that we evaluate, first is Objectives and Benefits and second is Human-Computer Interaction. We conduct the questionnaire and interview to user that use this application directly. Of the respondents about 20 people, we get data about our application that we design has reached the objectives and benefits, including HumanComputer Interaction. 5. Conclusion and S uggestions 5.1. Conclusion The conclusion that can be obtained through the analysis, design, implementation, and evaluation from PromoTech application are:

a. PromoTech application created using Augmented Reality technology through Template Matching method that support 2 main features, first is Face Detection and second is Image Recognition. b. PromoTech application use flash that displayed on web and have admin panel where the admins can settings the content of this website. c. Writers use ActionScript 3.0 language using FlashDevelop as the IDE for the flash application and using php language for web application using NetBeans as the IDE. d. Designing application using OpenCV library and Papervision3D. e. The use of application not making the problem, because many user already have PC/Laptop with webcam dan adobe flash player installed on web browser and can be accessed online. 5.2. Suggestion The suggestions that can given for PromoTech application for further development are: a. Development of interactive functions in both face simulation and image simulation in promoting the products. b. The addition and development of 3D models, including the shape and animation. c. Improvement of information o how to rotate, move, scale model in Image Simulation to simplify the user to use this feature. Development of mobile version for making it easier for people to access the application.

Bibliography Adobe System Incorporated. (2007). Programming ActionScript™ 3.0. San Jose, California, USA: Adobe System Incorporated. Bradski, G., & Kaehler, A. (2008). Learning OpenCV (1st ed.). Sebastopol, CA, United States of America: O’Reilly M edia. Brunelli, R. (2009). Template Matching Techniques in Computer Vision: Theory and Practice (1st ed.). Chippenham, Wiltshire, United Kingdom: Wiley. Connolly, T. M ., & Begg, C. E. (2010). Database Systems: A Practical Approach to Design, Implementation, and Management (5th ed.). Boston, MA, United States of America: Pearson Education. Haller, M ., Billinghurst, M ., & Thomas, B. H. (2007). Emerging Technologies of Augmented Reality: Interfaces and Design (1st ed.). Hershey, PA, United States of America: Idea Group Inc. Kotler, P., & Keller, K. L. (2012). Marketing Management (14th ed.). New Jersey, United States Of America: Prentice Hall. Laganière, R. (2011). OpenCV 2 Computer Vision Application Programming Cookbook (1st ed.). Olton, Birmingham, B27 6PA, UK: Packt Publishing Ltd. Pressman, R. S. (2010). Software Engineering A Practicioner's Approach (7th ed.). New York, United States of America: M cGraw-Hill. Russel, S., & Norvig, P. (2010). Ar tificial intelligence A Modern Approach (3rd ed.). Upper Sadle River, New Jersey, United States of America: Pearson Education. Shneiderman, B., Plaisant, C., Cohen, M ., & Jacobs, S. (2010). Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th ed.). Boston, MA, United States of America: Addison-Wesley. Vaughan, T. (2011). Multimedia: Making It Work (8th ed.). Appleton, M aine, United States of America: M cGraw-Hill. Whitten, J. L., & Bentley, L. D. (2007). System Analysis and Design Methods (7th ed.). New York: M cGraw-Hill. Winder, J., & Tondeur, P. (2009). Papervision3D Essentials (1st ed.). Olton, Birmingham, B27 6PA, United Kingdom: Packt Publishing Ltd.

Biography