Pembangunan Digital Poster pada Laboratorium Microsoft Innovation Center Institut Teknologi Bandung dengan Teknologi Multitouch

Microsoft Innovation Center Institut Teknologi Bandung

Dengan Teknologi Multitouch

LAPORAN KERJA PRAKTEK

Diajukan Untuk Memenuhi Salah Satu Syarat Mata Kuliah Kerja Praktek Jenjang Studi Strata I

Program Studi Teknik Informatika

Oleh: RIZKI FAUZIAN

10109934

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS KOMPUTER INDONESIA

2012

C U R R I C U L U M V I T A E

Rizki Fauzian

Jl. Sukamaju No.114, RT.03 / RW.13 Desa.Batujajar Barat, Kec. Batujajar. Bandung Barat - 40541

e-mail: rizkifauzian@gmail.com / rizki@rizkifauzian.web.id Tlp: 022-6865846 Hp: 085722950814

DATA PRIBADI

Tempat, tanggal lahir : Bandung ,12 Juli 1991 Status : Belum Menikah Jenis kelamin : Laki-laki

Agama : Islam

PENDIDIKAN FORMAL

SMKN 1 Cimahi 2005 - 2009

MTs. Al-Ihsan Batujajar 2002 - 2005

SDN 4 Batujajar 1996 - 2002

PENGALAMAN KERJA

LSKK - Instutut Teknologi Bandung Bandung, Des - 2009

Melakukan Research And Development di Laboratorium Sistem Kendali dan Komputer Institut Teknologi Bandung, Membangun system Lab-Bahasa untuk pendidikan, Membuat Game Simulasi 3D, Membuat Sistem Ujian

Kepegawaian RS. Cinere, Membuat alat interaktif berupa Multitouch.

PT. TELKOM ( Praktek Kerja Industri ) Bandung, Juli – Nov 2009 Melakukan installasi jaringan Fiber Optik dan menganalisa kerusakan kabel optic yang ada di lapangan.

KEAHLIAN DAN KETERAMPILAN

Programming : Delphi, Visual C#, Visual C++.

Design : Photoshop, Autodesk 3Ds Max, Auto Cad Operating system: Windows, Linux

Database : MySQL

Web design tools : Adobe Dreamweaver

Office : Ms. Word, Ms. PowerPoint, Ms.Outlook, Ms.Excel, Ms.Access, Ms.Visio, Ms.Poject

iii

Halaman LEMBAR JUDUL

LEMBAR PENGESAHAN LAPORAN KERJA PRAKTEK

KATA PENGANTAR………. .……… i

DAFTAR ISI……… iii

DAFTAR TABEL………... vi

DAFTAR GAMBAR……….. vii

DAFTAR LAMPIRAN……….. ix

BAB I PENDAHULUAN 1.1 Latar Belakang Kerja Praktek………. 1

1.2 Identifikasi Masalah……… 2

1.3 Maksud dan Tujuan………... 2

1.4 Batasan Masalah………. 3

1.5 Metodologi Penelitian………. 3

1.6 Sistematika Penulisan………. 6

BAB II TINJAUAN PUSTAKA 2.1 Profil Tempat Kerja Praktek ……….. 8

2.1.1 Sejarah Instansi………... 8

2.1.2 Logo Instansi……….. 9

2.1.3 Struktur Organisasi dan Job Description……… 9

2.1.3.1 Struktur Organisasi MIC-ITB……… 10

iv

2.2 Landasan Teori ………...………... 11

2.2.1 Multitouch………. 11

2.2.2 UML ( Unified Modeling Language)……… 12

2.2.3 Computer Vision………... 19

2.2.1.1 Perangkat Keras Multitouch………... 20

2.2.1.2 Perangkat Lunak Multitouch……….. 27

BAB III PEMBAHASAN 3.1 Jadwal Kerja Praktek……….… 28

3.1.1 Data Kerja Praktek……… 28

3.2 Spesifikasi Sistem………... 29

3.3 Desain dan Perancangan Sistem………. 29

3.4 Deskripsi Kebutuhan Sistem………..… 30

3.4.1 Deskripsi Kebutuhan Fungsional……….. 30

3.4.1.1 Diagram Use Case Digital Poster……….… 31

3.4.1.2 Activity Diagram Digital Poster………... 32

3.4.1.3 Class Diagram Digital Poster……… 33

3.4.2 Deskripsi Kebutuhan non-fungsional………. 34

3.4.2.1 Antarmuka Pemakai………... 34

3.4.2.2 Kebutuhan Perangkat Keras……….. 34

3.4.2.3 Kebutuhan Perangkat Lunak……… 34

3.5 Implementasi……… 35

3.5.1 Instalasi dan Konfigurasi Perangkat Keras Multitouch dengan teknologi optik menggunakan teknik Laser Light Plane………. 35

3.5.2 Instalasi dan Konfigurasi Community Core Vision……… 37

3.5.3 Kalibrasi……… 40

3.5.4Perancangan Perangkat Lunak Digital Poster……… 43

3.5.5 Perancangan Antarmuka……… 44

BAB IV KESIMPULAN DAN SARAN 4.1 Kesimpulan………... 45

4.2 Saran………. 45 DAFTAR PUSTAKA

LAMPIRAN – LAMPIRAN DAFTAR RIWAYAT HIDUP

i

KATA PENGANTAR

Bismillahirahmannirahim

Syukur Alhamdulilah penulis panjatkan ke hadirat Allah SWT yang telah melimpahkan rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan Laporan Kerja Praktek yang berjudul : Pembangunan Digital Poster Pada Laboratorium Microsoft Innovation Center Institut Teknologi Bandung Dengan Teknologi Multitouch. Laporan Kerja Praktek ini diajukan untuk memenuhi salah satu syarat kelulusan menempuh Program Strata I jurusan akuntansi Fakultas Ekonomi Universitas Komputer Indonesia.

Penulis menyadari bahwa sepenuhnya bahwa Laporan Kerja Praktek ini masih jauh dari kesempurnaan, disebabkan oleh keterbatasan memperoleh bahan-bahan maupun kemampuan dan pengetahuan penulis sendiri. Walaupun demikian, penulis berharap semoga Laporan Kerja Praktek ini dapat memberikan manfaat bagi semua pihak, bagi penulis khususnya dan bagi para pembaca pada umumnya.

Dalam penulisan Laporan Kerja Praktek ini, penulis telah banyak mendapat bantuam dari berbagai pihak, baik berupa saran, bimbingan maupun dorongan moril, sehingga bias membantu penyelesaian Laporan Kerja Praktek ini. Maka pada kesempatan ini, dengan segala kerendahan hati, penulis ingin menyampaikan rasa terima kasih serta penghargaan yang sedalam-dalamnya, yaitu kepada :

1. Dr.Ir. Eddy Suryanto Soegoto selaku Rektor UNIKOM

2. Prof. Dr. H. Denny Kumiadie, Ir.,M.Sc selaku Dekan Fakultas Teknik Ilmu dan Komputer 3. Irawan Afrianto,S.T.,M.T selaku Ketua Program Studi Teknik Informatika

4. Alif Finandhita, S.Kom selaku Dosen Wali IF-17K dan Dosen Pembimbing yang telah berkenan meluangkan waktu, tenaga dan pikirannya dalam membimbing, memberikan arahan serta saran kepada penulis sehingga Laporan Kerja Praktek ini dapat selesai.

5. Bapa dan Mama serta adikku yang sangat aku cintai yang telah dengan tulus dan ikhlas

memberikan do’a restu dan pengorbanan yang tidak terhingga, hingga akhirnya penulis dapat

menyelesaikan Laporan ini.

6. Calon mertua dan Calon istriku Lisa Oktorina yang sangat aku cintai yang telah dengan tulus dan

ikhlas memberikan do’a restu dan pengorbanan yang tidak terhingga, hingga akhirnya penulis dapat menyelesaikan Laporan ini.

7. Pimpinan beserta staff karyawan Lab.Microsoft Innovation Center - ITB, yang telah memberikan ijin serta kesempatan kepada penulis untuk melakukan Kuliah Kerja Praktek dalam rangka penyusunan Laporan Kerja Praktek.

8. Buat teman-teman di IF-17K yang tidak dapat penulis sebutkan satu per satu terima kasih atas bantuan, dorongan dan kebersamaan kita selama ini.

Penulis hanya dapat berharap dan berdo’a semoga ilmu yang penulis peroleh selama ini akan dapat diamalkan untuk kemajuan Bangsa, Negara, dan Agama.

Bandung, Januari 2013

Daftar Pustaka

[1] Booch, Grady, Jacobson, Ivan and Rumbaugh, James. (1998) . The Unified Modeling Language Reference Manual. United States of America.

[2] Fairhurst, Michael C. (1988) “Computer vision for robotic sistems : An introduction” Prentice Hall

[3] Nui Group Community (2009) “Multitouch Technology” Nuigroup

[4] Kaltenbrunner, M., Bovermann, T., Bencina, R.,and Costanza, E. “TUIO - A Protocol for Table Based Tangible User Interfaces”. In Proceedings of the 6th In-ternational Workshop on Gesture in Human-ComputerInteraction and Simulation (GW 2005) (2005)

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Microsoft Inovation Center Institut Teknologi Bandung (LAB. MIC-ITB) merupakan organisasi kerjasama antara Microsoft dengan Institut Teknologi Bandung. Seperti tersirat dari nama MIC-ITB yang berarti Microsoft Innovation Center ITB, tujuan dari berdirinya adalah untuk membantu komunitas untuk dapat menguasai dan menggunakan teknologi Microsoft dengan berbagai skema Penguasaan Teknologi, baik untuk kebutuhan pendidikan, penelitian maupun dukungan terhadap industri. Dalam hal ini, MIC-ITB menjadi salah satu tempat yang akan menghasilkan produk – produk penelitian maka MIC – ITB membuat suatu ruangan yang bernama ruang pameran (showroom) MIC – ITB. Ruang pameran (showroom) MIC – ITB berisi semua produk dan poster tentang kegiatan dan penelitian di MIC – ITB. Konsep ruang pameran (showroom) tersebut terbilang cukup menarik karena pengunjung yang datang bisa mencoba teknologi yang dibuat di MIC-ITB serta melihat poster yang menunjukan tentang kegiatan dan hasil penelitian atau produk MIC-ITB.

Cara tersebut akan sangat tidak efektif, jika produk yang dihasilkan sangat banyak maka dana yang dikeluarkan cukup besar untuk mencetak poster yang berganti-ganti. Untuk menghadapi kendala tersebut, dibutuhkan suatu solusi efektif, salah satunya dengan memanfaatkan teknologi multitouch, dengan teknologi ini maka MIC-ITB dapat memberikan pengunjung pengetahuan tentang produk dan kegiatan dengan lebih interaktif dan tidak membosankan bagi pengunjung. Proses pencetakan poster produk dan kegiatan MIC-ITB dapat dikurangi karena poster dapat ditampilkan pada sebuah hardware jadi biaya cetak poster dapat dikurangi.

2

Berdasarkan alasan diatas, penulis tertarik untuk membuat laporan kerja praktek ini dengan judul : “Pembangunan Digital Poster Pada Laboratorium Microsoft Innovation Center Institut Teknologi Bandung Dengan Teknologi Multitouch”

1.2 Identifikasi Masalah

Dari latar belakang dapat dirumuskan suatu permasalahan yaitu,

1. Biaya yang dikeluarkan menjadi lebih besar karena poster yang dicetak berganti-ganti.

2. Bagaimana membuat sebuah aplikasi yang menarik dan interaktif agar pengunjung tidak cepat bosan berada di ruang pameran (showroom) Lab. MIC-ITB.

1.3 Maksud dan Tujuan

Adapun maksud dari pembuatan aplikasi digital poster dengan teknologi multitouch adalah sebagai berikut :

1. Mengurangi biaya pencetakan poster yang berganti-ganti.

2. Membuat Aplikasi yang dapat berinteraksi dengan pengunjung supaya pengunjung tidak cepat merasa bosan.

Sedangkan Tujuan dari pembuatan aplikasi digital poster dengan teknologi multitouch adalah memperkenalkan sebuah media penyampaian informasi yang baru kepada masyarakat luas.

1.4 Batasan Masalah

Pada penulisan ini permasalahan dibatasi sebagai berikut :

1. Instalasi dan konfigurasi perangkat keras multitouch dengan teknologi optik. 2. Instalasi dan konfigurasi perangkat lunak multitouch dengan teknik

pengolahan citra dan pengenalan pola.

3. Aplikasi multitouch digital poster berbasis Flash dengan bahasa pemrograman Action script 3

4. Aplikasi digital poster berbasis desktop 5. Instalasi Aplikasi Digital Poster MIC – ITB

6. Hardware hanya bisa membaca 20 sentuhan pada saat bersamaan 1.5 Metodologi Penelitian

Metode penelitian dapat diartikan sebagai cara untuk mencapai suatu tujuan di dalam sebuah penelitian. Penelitian adalah suatu kegiatan penyelidikan yang dilakukan menurut metode ilmiah yang sistematik untuk menemukan informasi ilmiah dan atau teknologi yang baru. Adapun metodologi penelitian yang digunakan dalam penulisan skripsi ini adalah sebagai berikut:

a) Tahap Pengumpulan Data

Metode pengumpulan data yang digunakan dalam penelitian ini adalah sebagai berikut :

a. Observasi.

Teknik pengumpulan data dengan mengadakan penelitian dan peninjauan langsung terhadap tempat sebenarnya.

4

b. Interview

Teknik pengumpulan data dengan mengadakan tanya jawab secara langsung yang ada kaitannya dengan topik yang diambil.

c. Studi Literatur

Pengumpulan data dengan cara mengumpulkan literatur, jurnal, paper dan bacaan-bacaan yang ada kaitannya dengan judul penelitian.

Model pertama yang diterbitkan untuk proses pengembangan perangkat lunak diambil dari proses rekayasa lain, model ini diilustrasikan pada gambar 1.1. Berkat penurunan dari fase ke fase yang lainnya, model ini dikenal sebagai metode ‘air terjun’ waterfall atau siklus hidup perangkat. Tahap-tahap utama dari model ini memetakan kegiatan-kegiatan pengembangan dasar yaitu :

1) Analisis

Tujuan dilakukan tahapan ini untuk memahami sistem yang sedang berjalan agar dapat mendefinisikan permasalahan sistem sehingga selanjutnya dapat menentukan kebutuhan sistem secara garis besar sebagai persiapan ke tahapan perancangan.

2) Perancangan

Pada tahap perancangan ini diberikan gambaran umum yang jelas kepada pengguna dan rancang bangun yang lengkap tentang sistem yang akan dikembangkan kepada pihak-pihak yang terlibat dalam pengembangan sistem. Tahap perancangan ini digunakan untuk persiapan implementasi.

3) Implementasi atau Coding Pemrograman

Setelah tahap perancangan sistem selanjutnya dilakukan konversi rancangan sistem kedalam kode-kode bahasa pemrograman yang diinginkan Pada tahap ini dilakukan pembuatan komponen-komponen sistem yang meliputi modul program, antarmuka, dan basis data.

4) Pengujian

Tahap pengujian ini dilakukan untuk mendapatkan serta memastikan bahwa perangkat lunak yang dihasilkan adalah valid dan sesuai dengan kebutuhan yang telah dideskripsikan.

5) Pemeliharaan

Pada tahap pemeliharaan ini perangkat lunak sudah diserahkan kepada pengguna. Pada tahap ini dilakukan evaluasi terhadap sistem yang baru untuk mengetahui apakah sistem telah memenuhi tujuan yang ingin dicapai. Dari hasil evaluasi ini dimungkinkan untuk melakukan perubahan-perubahan yang diperlukan terhadap sistem agar sistem senantiasa dapat digunakan dengan baik.

6

1.6 Sistematika Penulisan

Dalam sistematika penulisan ini dapat dibagi menjadi beberapa bab dengan pokok pembahasan secara umum sebagai berikut:

BAB I PENDAHULUAN

Bab ini berisi latar belakang, perumusan masalah, maksud dan tujuan, batasan masalah, metodologi penelitian, sistematika penulisan.

BAB II TINJAUAN PUSTAKA

Bab ini terbagi menjadi dua bagian, yaitu: tinjauan umum perusahaan dan landasan teori. Tinjauan umum perusahaan berisi tentang sejarah singkat perusahaan, struktur organisasi sedangkan landasan teori berisi teori-teori pendukung dalam membangun teknologi multitouch untuk digital poster.

BAB III PEMBAHASAN

Bab ini berisi analisis kebutuhan dalam membangun hardware dan aplikasi multitouch digital poster, analisis sistem yang sedang berjalan pada aplikasi ini sesuai dengan metode pembangunan perangkat lunak yang digunakan. Selain itu terdapat juga perancangan antarmuka untuk aplikasi yang akan dibangun sesuai dengan hasil analisis yang telah dibuat.

BAB IV KESIMPULAN DAN SARAN

Pada bab ini berisi kesimpulan yang didapat dari hasil uji coba dan saran-saran mengenai perencanaan dan pembangunan teknologi multitouch kedepannya untuk pengembangan lebih lanjut.

8

BAB II

TINJAUAN PUSTAKA

2.1 Profil Tempat Kerja Praktek

2.1.1 Sejarah Instansi

Institut Teknologi Bandung (ITB), didirikan pada tanggal 2 Maret 1959. Kampus utama ITB saat ini merupakan lokasi dari sekolah tinggi teknik pertama di Indonesia. Walaupun masing-masing institusi pendidikan tinggi yang mengawali ITB memiliki karakteristik dan misi masing-masing, semuanya memberikan pengaruh dalam perkembangan yang menuju pada pendirian ITB. ITB mempunyai beberapa laboratorium penelitian salah satunya adalah Microsoft Innovation Center ITB ( MIC ITB ).

Secara organisatoris, MIC-ITB adalah lembaga yang bernaung di bawah Institut Teknologi Bandung melalui Kantor Lembaga Penelitian dan Pengabdian pada Masyarakat dan Sekolah Teknik Elektro dan Informatika ITB, dengan dukungan dari Microsoft. Seperti tersirat dari nama MIC-ITB yang berarti Microsoft Innovation Center ITB, tujuan dari berdirinya adalah untuk:

a. Membantu komunitas untuk dapat menguasai dan menggunakan teknologi Microsoft dengan berbagai skema Penguasaan Teknologi, baik untuk kebutuhan pendidikan, penelitian maupun dukungan terhadap industri

b. Memantapkan dan mengembangkan hubungan antara Microsoft dan jejaringnya dengan komunitas pendidikan tinggi di Indonesia, khususnya di area Bandung Raya dan sekitarnya.

c. Menjadi hubungan dari berbagai stakeholder untuk dapat bekerja sama dengan mengkoordinasikan berbagai peluang dan fasilitas yang ada dalam berbagai kegiatan.

2.1.2 Logo Instansi

Berikut adalah logo dari instansi tempat penulis melakukan kerja praktek yaitu logo MIC-ITB.

Gambar 2.1 Logo Instansi

2.1.3 Struktur Organisasi dan Job Description

Struktur organisasi merupakan susunan yang terdiri dari fungsi-fungsi dan hubungan-hubungan yang ada dalam suatu instansi yang menyatakan keseluruhan kegiatan untuk mencapai sasaran instansi.

10

2.1.3.1 Struktur Organisasi MIC-ITB

Gambar 2.2 Struktur Organisasi

2.1.3.2 Job Description

Adapun job description dari MIC – ITB itu sendiri yaitu : 1. Manager MIC – ITB

a. Memberikan arahan kepada seluruh personil baik dalam instruksional, administrasi serta kendali mutu.

2. Dewan Pengarah

a. Memberikan arahan dalam perumusan, perencanaan, dan pelaksanaan proses penelitian di MIC – ITB

3. Deputi Manager Urusan Administrasi dan Keuangan

a. Merancanakan dan menganalisa pembelanjaan perusahaan b. Mengatur struktur aktiva

4. Deputy Manager Urusan Internal

a. Mengatur semua urusan kebutuhan peralatan penelitian 5. Deputy Manager Urusan Training

a. Mengatur perencanaan pelatihan dan workshop yang diselenggarakan MIC – ITB 6. Deputy Manager Urusan R&D

a. Merencanakan pengembangan penelitian MIC – ITB

2.2 Landasan Teori 2.2.1 Multitouch

Multitouch adalah perangkat tambahan pada teknologi layar sentuh, yang menyediakan pengguna dengan kemampuan untuk menerapkan beberapa gerakan jari secara bersamaan ke tampilan visual elektronik kompleks untuk mengirim perintah ke perangkat. Multitouch sebenarnya adalah nama dagang yang diterapkan oleh Apple karena sifatnya yang mendeteksi banyak sentuhan. Multitouch telah diterapkan dengan berbagai cara berbeda, tergantung pada ukuran dan jenis antarmuka. Prinsip kerja suatu meja multitouch memproyeksikan melalui kaca acrylic atau kaca, dan lampu latar belakang dengan LED. Ketika sebuah jari atau benda

12

menyentuh permukaan menyebabkan cahaya terpecah, refleksi tertangkap dengan sensor atau lampu kamera yang mengirim data ke perangkat lunak yang merespon terhadap sentuhan.

2.2.2 UML ( Unified Modeling Language)

Menurut Grady (2007,p148) Unified Modeling Language (UML) adalah sebuah bahasa utama pemodelan yang digunakan untuk menganalisa, menentukan, mendesain sistem suatu perangkat lunak.

Contoh – contoh UML seperti : • Use Case Diagram

• Class Diagram • Activity Diagram a. Use Case Diagram

Menurut Grady (2007,p177) Use Case diagram adalah cara spesifik menggunakan sistem dengan menggunakan beberapa bagian dari fungsi tersebut [1]. Use Case adalah suatu pola atau gambaran yang menunjukan kelakukan atau kebiasaan sistem. Setiap Use Case adalah suatu urut-urutan (sequence) transaksi yang saling berhubungan dan dilakukan oleh sebuah actor dan sistem dalam bentuk sebuah dialog. Use Case Diagram dibuat untuk memvisualisasikan/ menggambarkan hubungan antara Actor dan Use Case. Use Case diagram mempresentasikan kegunaan atau fungsi-fungsi sistem dari perspektif pengguna.

Gambar 2.3 Use Case Diagram

Bagian – bagian use case diagram : • Use Case

Gambar use cases menggunakan lingkaran berbentuk bulat telur (oval) Beri nama oval tersebut dengan kata kerja (verb) yang menggambarkan fungsi-fungsi sistem

14

• Actors

Actors adalah para pengguna (users) dari sebuah sistem. Kadangkala sebuah sistem adalah merupakan actors bagi sistem yang lain, beri nama actors sistem tersebut dengan streotipe (bentuk klise/tiruan) actor. Actor adalah seseorang atau sesuatu yang harus berinteraksi dengan sistem atau sistem yang dibangun/dikembangkan.

Gambar 2.5 Actor • Relationship

Relationship adalah sebuah tanda yang berbentuk garis yang menghubungkan actor dan use case. Ataupun use case dengan use case lainnya. Relationship dibagi menjadi tiga yaitu:

• Include

Include Relationship adalah hubungan antara use case yang dimana jika use case yang satu dijalankan, yang satunya lagi juga harus dijalankan.

Gambar 2.6 Include Relationship

• Extend

Extend Relationship adalah hubungan antara use case dimana use case tersebut memerlukan use case lain sebagai syarat agar dapat melakukan use case selanjutnya.

16

Gambar 2.7 Extend Relationship

b. Class Diagram

Menurut Grady (2007,p192) Class diagram digunakan untuk melihat eksistensi suatu class dan relasinya dari sudut pandang logika suatu sistem[1].

Relasi di dalam class diagram :

• Generalisasi dan Inheritance

Diperlukan untuk memperlihatkan hubungan pewarisan (inheritance) antar unsur dalam diagram kelas. Pewarisan memungkinkan suatu kelas mewarisi semua atribut, operasi ,relasi, dari kelas yang berada dalam hirarki pewarisannya.

Gambar 2.8 Generalisasi • Asosiasi

Hubungan statis antar class. Umumnya menggambarkan class yang memiliki atribut berupa class lain, atau class yang harus mengetahui ekstensi class lain.

18

• Agregat

Hubungan antar-class di mana class yang satu (part class) adalah bagian dari class lainnya (whole class).

Gambar 2.10 Agregat 28

c. Activity Diagram

Menurut Grady (2007,p186) Activity Diagram mendukung aliran akt ifitas dari suatu system, aliran kerja, atau proses lain[1].

 Oval merepresentasikan aktifitas.

 Diamond merepresentasikan pilihan.

 Fork merepresentasikan awal dan akhir dari kerja yang dilakukan bersamaan.

 Black Round merepresentasikan awal dar i aliran kerja.

 Black Round with Circle merepresentasikan akhir dari aliran kerja.

2.2.3 Computer Vision

Computer Vision adalah suatu ilmu dan teknologi dimana komputer mempunyai kemampuan untuk memahami data yang didapat dari kamera photo atau video[2]. Berikut beberapa aplikasi yang menerapkan computer vision antara lain sebagai berikut :

- Controlling Processes (robot)

Aplikasi computer vision sebagai controlling processes dapat dijumpai pada sistem sensor robot yang menggunakan kamera. Melalui penerapan computer vision, kamera akan berfungsi sebagai penguhubung robot dengan lingkungan layaknya seperti mata manusia.

- Detection Event (CCTV)

Dengan mengimplementasikan teknologi computer vision, sistem CCTV dapat mendeteksi dan melakukan tindakan selanjutnya (seperti merekam gambar) secara otomatis.

- Interaction

Penerapan computer vision yang memungkinkan interaksi pengguna dengan sistem membuat sebuah petunjuk lokasi, pemainan akan menjadi lebih menarik.

20

2.2.1.1 Perangkat Keras Multitouch

Perangkat multitouch dapat berbeda tergantung dari bahan dan alat yang digunakan, bahan utama yang umum digunakan adalah cahaya infrared dan kamera inframerah. Poin penting yang mempengaruhi hasil sentuhan adalah rata-rata penangkapan gambar per detik pada kamera dan kualitas kamera [3].

a. Sumber Cahaya Infra Merah

Infrared (Infra Merah) adalah bagian dari spektrum cahaya yang tidak dapat dilihat oleh mata manusia. Ini adalah berbagai panjang gelombang lebih panjang dari cahaya tampak, Dalam hal multitouch, cahaya inframerah terutama digunakan untuk membedakan antara gambaran visual pada permukaan sentuh.

Gambar 2.12 Sumber Cahaya Infra Merah b. Kamera Infra Merah

Webcam Sederhana bekerja sangat baik untuk pembuatan multitouch, tetapi perlu di modifikasi dengan membuka filter infra merah yang terdapat pada lensa kamera.

Gambar 2.13 Kamera Infra Merah c. Permukaan Sentuhan

Permukaan Sentuhan bisa berbahan dasar kaca atau acrylic yang telah dilapis oleh film untuk area sentuhnya.

Gambar 2.14 Permukaan Sentuhan Ada beberapa macam teknik pembuatan multitouch berbasik optik diantaranya :

22

Gambar 2.15 Metode FTIR

FTIR adalah nama yang digunakan oleh suatu komunitas multitouch untuk mendiskripsikan metode yang dikembangkan oleh Jeff Han (2005). Metode yang digunakan adalah dengan meletakkan kamera-IR di bawah layar yang dapat berupa acrylic atau kaca yang dilapisi oleh karet silikon dan dibatasi oleh IR-LED yang berfungsi sebagai sensor. IR-LED memantulkan sinar sensor ke dalam lapisan layar dan berefek ketika tangan menyentuh layar[3].

b. DI (Diffused Illumination)

Gambar 2.16 Metode DI

Metode lain yakni Diffused Illumination (DI) seperti yang terlihat pada Gambar 2.2, terbagi menjadi dua yakni Rear-DI dan Front-DI di mana keduanya berprinsip dasar yang sama yang menjadi pembeda adalah IR yang ditembakkan berposisi di bawah layar pada Rear-DI sedangkan untuk Front-DI, IR ditembakkan pada atas layar[3]

24

c. LLP (Laser Light Plane)

Gambar 2.17 Metode LLP

Berbeda dengan FTIR dan DI, Laser Light Plane (LLP), seperti yang terlihat pada Gambar 2.3 menggunakan laser-IR sebagai pengganti IR-LED[3]. Prinsip yang digunakan lebih sederhana yakni hanya dengan menembakkan laser-IR di atas permukaan layar seperti jaring dan apabila jaring menerima sentuhan, jaring akan terputus dan mengirimkan suatu perintah ke perangkat lunak.

d. DSI (Diffused Screen Illumination)

Gambar 2.18 Metode DSI

Lain halnya dengan Diffused Surface Illumination (DSI), seperti yang terlihat pada Gambar 2.4. DSI memakai suatu jenis acrylic yang istimewa di mana acrylic menyebarkan sensor ke atas dan ke bawah secara vertikal. Hal tersebut yang menjadi pembeda DSI dengan FTIR[3]. Sensor yang tersebar ini bila bergesekan dengan tangan akan menjadi bentuk inputan dalam multitouch.

26

e. LED –LP (LED Light Plane)

Gambar 2.19 Metode LED Light Plane

Metode yang umum digunakan sekarang adalah LED Light Plane (LED-LP) seperti yang terlihat pada Gambar 2.5 yakni metode di mana dasar penginstalasian mirip dengan FTIR yang menjadi pembeda adalah penambahan LED pada lapisan atas layar. Pada dasarnya prinsip kerja semua metode adalah sama[3]. Pertanyaan yang sering keluar adalah teknik apa yang paling baik, dan tidak ada jawaban yang mudah. Tiap teknik memiliki kelebihan sendiri dan kekurangan sendiri.

2.2.1.2 Perangkat Lunak Multitouch a. TUIO

TUIO merupakan program opensource yang mendefinisikan protokol umum dan API untuk permukaan multitouch. Protokol TUIO memungkinkan transmisi deskripsi abstrak dari permukaan interaktif, termasuk peristiwa sentuhan dan objek nyata. Protokol ini mengkodekan data kontrol dari aplikasi tracker (misalnya didasarkan pada visi komputer) dan mengirimkannya ke aplikasi client.

b. Adobe Flash

Adobe Flash merupakan program yang didesain khusus oleh Adobe dan program aplikasi standar authoring tool professional yang digunakan untuk membuat animasi dan bitmap yang sangat menarik untuk keperluan pembangunan situs web yang interaktif dan dinamis. Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan navigasi pada situs web, tombol animasi, banner, menu interaktif, screen saver dan pembuatan aplikasi-aplikasi lainnya.

c. CCV (Community Core Vision)

Community Core Vision adalah library open source untuk pengolahan citra dan pengenalan pola input video atau output tracking data (contohnya koordinat dan ukuran sentuhan) dan kondisi (contoh nya jari menekan, bergerak, dan mengangkat ) yang dibutuhkan untuk membangun sebuah aplikasi multitouch.

28

BAB III

PEMBAHASAN

3.1 Jadwal Kerja Praktek

Dalam kesempatan ini penulis melakukan kerja praktek di MIC - ITB yang berlokasi di Jl. Ganesha 10/12 Bandung. Kerja praktek yang tercantum dalam surat sekertaris jurusan (sekjur) UNIKOM dilaksanakan selama 1 (satu) bulan yaitu mulai tanggal 2 Juli 2012 sampai dengan 31 Juli 2012.

No Waktu & Kegiatan Juli

I II III IV

1 Pengumpulan Data 2 Analisis

3 Perancangan 4 Implementasi

Tabel 3.1 jadwal kerja praktek 3.1.1 Data Kerja Praktek

Kegiatan kerja praktek yang dilakukan di MIC – ITB telah dilaksanakan selama satu bulan. Adapun jadwal masuk kerja yang harus dipenuhi dari mulai hari Senin sampai Jumat pukul 08.00 sampai 17.00 WIB. Berhubung karena kondisi mahasiswa yang juga sebagai pegawai, maka perusahaan memberikan keringanan waktu dan hari. Tugas yang diberikan oleh MIC – ITB adalah analisis. perancangan dan impelemntasi teknologi multitouch untuk digital poster di MIC – ITB . Mahasiswa mendapatkan tugas dari pembimbing Kerja Praktek, dan melaporkan hasil dan perkembangannya ke Instansi.

3.2 Spesifikasi Sistem

Sistem program yang dirancang ini harus dapat memenuhi spesifikasi sebagai berikut :

- Menampilkan poster digital yang interaktif

- Gerakan berupa drag, zoom, rotate, touch.

- Mampu mendeteksi lebih dari satu titik sentuhan pada saat yang bersamaan (multi-touch)

- Eksekusi program harus lebih cepat dari atau minimal sama dengan framerate camera agar tidak terjadi delay. Framerate kamera antara 25fps – 30 fps.

- Dapat mendeteksi sentuhan dengan has sentuhan minimal seluas sentuhan jari kelingking orang dewasa (1cm2_).

3.3 Desain dan Perancangan Sistem

Secara umum sistem yang akan dirancang ini memiliki alur proses seperti tertera pada gambar 3.1. Sentuhan yang dilakukan oleh pengguna akan ditangkap melalui kamera. Gambar yang ditangkap kamera akan diproses pada komputer. Hasil dari proses ditampilkan kembali kepada proyektor. Semua proses ini dilakukan dalam waktu yang cepat, sehingga tercipta sebuah interaksi yang real-time antara pengguna dengan sistem.

Gambar 3.1 Flow proses aplikasi digital poster

Camera Deteksi

Sentuhan

Proses Data Sentuhan (CCV)

30

Untuk dapat menghasilkan titik sentuhan yang presisi dan real-time sebelum aplikasi digital poster dapat disentuh maka dibutuhkan beberapa tahapan sebagai berikut :

a. Instalasi dan Konfigurasi Perangkat Keras Multitouch dengan teknik Laser Light Plane

b. Instalasi dan Konfigurasi Community Core Vision (CCV)

Dalam rangka menangkap (tracking) sentuhan jari, CCV harus dikonfigurasi terlebih dahulu. Tujuannya untuk menangkap hasil akhir berupa gambar blob(gumpalan) putih yang datang dari jari atau benda yang ditempatkan pada permukaan sentuhan.

c. Kalibrasi

Tahap awal menentukan koordinat permukaan multi-touch sehingga titik sentuhan menjadi presisi dan real-time

3.4 Deskripsi Kebutuhan Sistem

Sebelum membangun sebuah sistem perlu dilakukan analisis kebutuhan sistem untuk menjamin bahwa sistem yang dibuat sesuai dengan kebutuhan pengguna dan layak untuk dikembangkan. Tahapan analisis kebutuhan sistem dapat dirinci menjadi beberapa tahap guna mempermudah proses analisis secara keseluruhan. Tahapan-tahapan ini sangat penting untuk menjamin keberhasilan pengembangan sistem secara keseluruhan.

3.4.1 Deskripsi Kebutuhan Fungsional

Kebutuhan fungsional dianalisis dengan memodelkan sistem. Pemodelan yang digunakan untuk memodelkan perangkat lunak digital poster ini adalah pemodelan berorientasi objek. Perangkat lunak ini dimodelkan menggunakan Unified Modeling Language (UML). Pemodelan akan digambarkan menggunakan diagram use case dan spesifikasi proses dibuat dengan menggunakan case tools.

3.4.1.1 Diagram Use Case Digital Poster

Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan “bagaimana”. Sebuah use case merepresentasikan sebuah interaksi antara aktor (user) dengan sistem.

Adapun use case diagram aplikasi digital poster ini adalah sebagai berikut :

Gambar 3.2 Diagram Use Case Menjalankan Aplikasi Digital Poster

Skenario Use Case dari aplikasi digital poser :

Nama Use Case : Memilih Poster

Skenario :

Aksi Aktor Reaksi Sistem

1.Memilih poster yang akan dibaca

2.Menampilkan poster yang dipilih 3.Menggeser poster ke area baca poster

32

3.4.1.2 Activity Diagram Digital Poster

Activity diagram ini menunjukkan alur atau aktifitas yang dilakukan user secara

prosedural. Diagram ini berguna untuk mendokumentasikan aktifitas yang dilakukan oleh

user terhadap sistem.

3.4.1.3 Class Diagram Digital Poster

Class diagram mendeskripsikan struktur statis dari kelas–kelas dalam system dan

mengilustrasikan attribute, operations dan relationship antara satu kelas dengan kelas yang lain

Gambar 3.4 Class Diagram Aplikasi Digital Poster

Rotate + Poster : String +id_poster : int

+ addChild() : int

Scale + Poster : String +id_poster : int

+ addChild() : int Zoom + Poster : String +id_poster : int

+ addChild() : int

Hapus + Poster : String +id_poster : int

+ removeChild() : int

Show + Poster : String +id_poster : int

34

3.4.2 Deskripsi Kebutuhan non-fungsional

Analisis kebutuhan non-fungsional akan diuraikan secara rinci untuk keperluan perancangan parangkat lunak. Kebutuhan antarmuka eksternal tersebut meliputi antarmuka pemakai, antarmuka perangkat keras, dan antarmuka perangkat lunak.

3.4.2.1 Antarmuka Pemakai

Pengguna digital poster berbasis multitouch yang dibangun ini adalah pengunjung dari berbagai kalangan mulai anak-anak sampai kalangan dewasa.

3.4.2.2 Kebutuhan Perangkat Keras

Pembangunan digital poster berbasis multitouch ini memerlukan beberapa perangkat keras seperti :

1. Prosessor Dual Core 1.86 GHz 2. RAM 1 GB

3. Webcam dengan filter Inframerah 4. Permukaan kaca / acrylic

5. Laser Inframerah 6. Proyektor Short Throw

3.4.2.3 Kebutuhan Perangkat Lunak

Pembangunan digital poster berbasis multitouch dengan minimal kebutuhan perangkat lunak sebagai berikut :

1. Operating System : Windows XP SP3 2. Adobe Flash Player 11

3. Adobe Air 3

3.5 Implementasi

Setelah mengetahui kebutuhan fungsional dan non fungional maka implementasi pembangunan digital poster dengan teknologi multitouch dapat dilakukan.

3.5.1 Instalasi dan Konfigurasi Perangkat Keras Multitouch dengan teknologi optik menggunakan teknik Laser Light Plane

Gambar 3.5 Metode LLP (Laser Light Plane)

Seperti yang terlihat pada Gambar 3.1 menggunakan laser-IR sebagai pengganti IR-LED. Prinsip yang digunakan lebih sederhana yakni hanya dengan menembakkan laser-IR di atas permukaan layar seperti jaring dan apabila jaring menerima sentuhan, jaring akan terputus dan mengirimkan suatu perintah ke perangkat lunak.

Gambar 3.6 Posisi laser pada Metode LLP (Laser Light Plane)

Permukaan Sentuh Jangakauan Infra Merah Laser Infra Merah

36

Laser Infra Merah berfungsi penting pada pembangunan multitouch dengan metode LLP(Laser Light Plane) .Laser infra merah digunakan untuk menguatkan pendeteksian cahaya sentuh yang akan ditangkap oleh kamera infra merah.

Gambar 3.7 Posisi penempatan proyektor

Proyektor digunakan untuk menampilkan aplikasi ke layar sentuhan (surface). Proyektor ditempatkan tepat dibelakang layar sentuhan atau dengan kata lain posisi rear view. Proyektor yang digunakan adalah dengan tipe short-throw dan direfleksikan dengan sebuah cermin untuk dapat menjangkau seluruh layar permukaan sentuh.

Proyektor Permukaan Sentuh

Kaca

Field of View

Gambar 3.8 Posisi penempatan kamera

Posisi kamera ditempatkan dari belakang permukaan layar sentuh. Kamera digunakan untuk menangkap objek sentuhan.

3.5.2 Instalasi dan Konfigurasi Community Core Vision

Pengaturan default mungkin tidak akan ideal. Maka konfigurasi diperlukan untuk dapat memberikan hasil pengaturan terbaik untuk permukaan sentuhan yang akan dipakai. Fungsi dari CCV dapat dilihat di gambar 3.1.

Field of View

Kamera Permukaan multitouch

38

Gambar 3.9 Fitur Community Core Vision

1. Source image– Menampilkan gambar video baik dari kamera atau file video.

2. Use Camera Toggle - Mengatur sumber input ke kamera dan meraih frame dari kamera yang dipilih.

3. Use Video Toggle - Mengatur sumber input untuk video dan meraih frame dari file video. 4. Previous Camera Button – Mendapatkan perangkat kamera sebelumnya yang terpasang

ke komputer jika terpasang lebih dari satu kamera.

5. Next Camera Button - Mendapatkan perangkat kamera sebelumnya yang terpasang ke komputer jika terpasang lebih dari satu kamera.

6. Tracked Image - Menampilkan gambar akhir setelah penyaringan gambar yang digunakan untuk deteksi blob.

7. Inverse –tracking blob hitam bukan yang putih.

8. Threshold Slider - Mengatur tingkat pixel diterima. Pilihan yang lebih tinggi adalah, semakin besar gumpalan harus dikonversi dalam tracking blob.

9. Movement filtering - Sesuaikan tingkat jarak diterima (dalam piksel) sebelum gerakan gumpalan terdeteksi. Semakin tinggi pilihan tersebut, semakin Anda harus benar-benar menggerakkan jari Anda untuk CCV untuk mendaftarkan gerakan gumpalan.

10.Min Blob Size –Pengaturan untuk menyesuaikan tingkat ukuran blob minimum yang dapat diterima.

11.Max Blob Size - Pengaturan untuk menyesuaikan tingkat ukuran blob maksimal yang dapat diterima.

12.Remove Background Button –untuk menghapus gangguan yang menyebabkan noise. 13.Dynamic Subtract Toggle –untuk penyesuaian gambar yang ditangkap kamera terhadap

cahaya

14.Smooth Slider - memperhalus gambar dan mengurangi noise.

15.Highpass Blur Slider –untuk pengaturan ketajaman kamera dalam menangkap gambar 16.Highpass Noise –mengurangi noise dari gambar yang ditangkap kamera.

17.Amplify Slider –untuk pengaturan gambar yang kurang jelas agar kamera dapat menangkap gambar lebih jelas

18.On/Off Toggle - Digunakan pada setiap filter, ini digunakan untuk menghidupkan setiap proses filtering atau mematikan.

19.Camera Settings Button - Membuka pengaturan kamera

20.Flip Vertical Toggle –menyesuaikan gambar dari kamera secara vertical 21.Flip Horizontal Toggle –menyesuaikan gambar dari kamera secara horizontal 22.GPU Mode Toggle –memproses melalui graphic art

23.Send UDP Toggle - mengaktifkan pengiriman data melalui TUIO 24.Flash XML –mengaktifkan pengiriman data ke aplikasi flash

25.Binary TCP –mengaktifkan pengiriman pesan RAW (x,y, koordinat) 26.Enter Calibration –memuat layar kalibrasi

40

3.5.3 Kalibrasi

Proses kalibrasi merupakan suatu proses verifikasi keakuratan titik sentuhan terhadap bidang permukaan sentuhan. Kalibrasi pada CCV dimulai dengan menyentuh titik sentuhan yang ditentukan. Setelah proses kalibrasi selesai maka apabila permukaan sentuhan di sentuh oleh jari maka hasil sentuhan akan tampil ditempat yang disentuh tersebut. Berikut ini adalah proses kalibrasi pada aplikasi CCV. Tahapan proses kalibrasi pada CCV adalah sebagai berikut:

1. Klik tombol “enter calibration” untuk masuk ke layar kalibrasi seperti proses di gambar 3.

Gambar 3.10 letak enter calibration pada CCV

2. Tekan “c” dari keyboard untuk memulai proses kalibrasi, maka akan muncul layar seperti gambar 3.6

Gambar 3.11 Layar Kalibrasi

3. Ikuti oleh sentuhan jari lingkaran berwarna merah, sampai proses kalibrasi selesai seperti ditampilkan pada gambar 3.6

42

4. Setelah proses kalibrasi selesai maka titik sentuhan akan sama letaknya dengan sentuhan jari yang menyentuh permukaan multitouch seperti yang dapat dilihat di gambar 3. 7

3.5.4Perancangan Perangkat Lunak Digital Poster

Aplikasi digital poster berbasis multitouch dibuat dengan software adobe flash dengan action script 3 dan dibutuhkan library TUIOAS3 untuk mengintegrasikannya dengan perangkat keras multitouch. Diagram kerja library TUIO AS3 dapat dilihat pada gambar 3.7.

Gambar 3.14 Diagram Library TUIO AS3

TUIO (Tabel-Top User Interface Objects) adalah sebuah protokol sederhana namun serbaguna dirancang khusus untuk memenuhi kebutuhan multitouch. Library AS3 TUIO adalah kumpulan class dan object yang difungsikan sebagi connector dari perangkat keras multitouch ke perangkat lunak berbasis adobe flash.

44

3.5.5 Perancangan Antarmuka

Perancangan antarmuka merupakan sebuah penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi. Adapun perancangan antarmuka aplikasi digital poster adalah sebagai berikut :

Tampilan Aplikasi Digital Poster

Keterangan :

Nama Scene : Digital Poster Ukuran Scene : 1025 x 768 Background :Purple Poster 1 Poster 2 Poster 3 Poster 4 Poster 5 Poster 6 Display Poster - Touch Poster untuk mulai interaksi

-- Geser Poster ke area display poster

-- Rotasi poster pada area display poster

-- Zoom in/out poster pada area display poster

Gambar 3.16 Implementasi Tampilan Antar Muka Aplikasi Digital Poster Proses pertama dalam pembuatan aplikasi flash digital poster berbasis digital poster adalah dengan menghubungkan dengan library TUIO dengan bahasa action script 3.

Koneksi Flash dengan TUIO dengan Action Script 3

import flash.events.TUIO;

//---connect to TUIO--- TUIO.init(this,'localhost',3000,'',true); trace("TUIO Initialized");

46

Poster yang akan dipasang masih dimasukan secara hardcode, jadi setiap poster yang akan dipasang harus dideklarasikan terlebih dahulu sebagai movie clip.

Action Script 3 untuk pendeklarasian poster sebagai movie clip.

Gambar poster yang telah dideklarasikan sebagai movie clip akan ditampilkan ke dalam stage dengan fungsi addchild().

Action Script 3 untuk menampilkan objek ke dalam stage dengan fungsi addChild().

public var gbr1x:Gambar1; public var gbr2x:Gambar2; public var gbr3x:Gambar3; public var gbr4x:Gambar4; public var gbr5x:Gambar5; public var gbr6x:Gambar6; public var gbr7x:Gambar7; public var gbr8x:Gambar8; public var gbr9x:Gambar9; public var gbr10x:Gambar10; public var gbr11x:Gambar11; public var gbr12x:Gambar12; public var gbr13x:Gambar13; public var gbr14x:Gambar14; public var gbr15x:Gambar15; public var gbr16x:Gambar16;

gbr1x = new Gambar1(); addChild(gbr1x);

gbr2x = new Gambar2(); addChild(gbr2x);

gbr3x = new Gambar3(); addChild(gbr3x);

gbr4x = new Gambar4(); addChild(gbr4x);

gbr5x = new Gambar5(); addChild(gbr5x);

gbr6x = new Gambar6(); addChild(gbr6x);

gbr7x = new Gambar7(); addChild(gbr7x);

gbr8x = new Gambar8(); addChild(gbr8x);

Poster yang telah dipasang bisa dapat dirotasi dan discale secara interaktif dengan memakai fungsi RotatableScalable().

Action Script 3 untuk setiap poster RotatableScalable().

Tampilan perangkat lunak pada saat dijalankan pada alat multitouch di MIC-ITB

Gambar 3.17 Tampilan Aplikasi Digital Poster

import flash.display.Sprite;

import app.core.action.RotatableScalableRev; class Gambar1 extends RotatableScalableRev {

public var gbr1:Gbr1; public function Gambar1() {

gbr1 = new Gbr1(); addChild(gbr1); x = 96,50; y = 118; }

45

BAB IV

KESIMPULAN DAN SARAN

4.1 Kesimpulan

Dari seluruh paparan di atas, dapat ditarik kesimpulan

1. Sistem yang diimplementasikan mampu mendeteksi dan memetakan koordinat titik sentuhan

2. Sistem dapat berjalan dengan baik ketika objek sentuhan lebih dari satu titik (multitouch) 3. Poster dapat ditampilkan di ruang pameran tanpa harus dicetak terlebih dahulu.

4. Pengunjung dapat mempunyai pengalaman lebih untuk membaca sebuah poster.

4.2 Saran

Pengembangan aplikasi digital poster sangat terbuka dilakukan pada bagian kalibrasi. Ini dikarenakan pada aplikasi digital poster saat ini kalibrasi yang dilakukan masih bersifat manual (kalibrasi dilakukan diluar aplikasi digital poster).

Pengembangan teknologi multitouch sangat memungkinkan untuk dikembangkan sesuai kebutuhan yang dibutuhkan.

3.5.4Perancangan Perangkat Lunak Digital Poster

Aplikasi digital poster berbasis multitouch dibuat dengan software adobe flash dengan action script 3 dan dibutuhkan library TUIO AS3 untuk mengintegrasikannya dengan perangkat keras multitouch. Diagram kerja library TUIO AS3 dapat dilihat pada gambar 3.7.

Gambar 3.14 Diagram Library TUIO AS3

TUIO (Tabel-Top User Interface Objects) adalah sebuah protokol sederhana namun serbaguna dirancang khusus untuk memenuhi kebutuhan multitouch. Library AS3 TUIO adalah kumpulan class dan object yang difungsikan sebagi connector dari perangkat keras multitouch ke perangkat lunak berbasis adobe flash.

Perancangan antarmuka merupakan sebuah penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi. Adapun perancangan antarmuka aplikasi digital poster adalah sebagai berikut :

Tampilan Aplikasi Digital Poster

Keterangan :

Nama Scene : Digital Poster Ukuran Scene : 1025 x 768 Background :Purple Poster 1 Poster 2 Poster 3 Poster 4 Poster 5 Poster 6 Display Poster - Touch Poster untuk mulai interaksi

-- Geser Poster ke area display poster

-- Rotasi poster pada area display poster

-- Zoom in/out poster pada area display poster

Gambar 3.16 Implementasi Tampilan Antar Muka Aplikasi Digital Poster Proses pertama dalam pembuatan aplikasi flash digital poster berbasis digital poster adalah dengan menghubungkan dengan library TUIO dengan bahasa action script 3.

Koneksi Flash dengan TUIO dengan Action Script 3 import flash.events.TUIO;

//---connect to TUIO--- TUIO.init(this,'localhost',3000,'',true); trace("TUIO Initialized");

akan dipasang harus dideklarasikan terlebih dahulu sebagai movie clip. Action Script 3 untuk pendeklarasian poster sebagai movie clip.

Gambar poster yang telah dideklarasikan sebagai movie clip akan ditampilkan ke dalam stage dengan fungsi addchild().

Action Script 3 untuk menampilkan objek ke dalam stage dengan fungsi addChild(). public var gbr1x:Gambar1;

public var gbr2x:Gambar2; public var gbr3x:Gambar3; public var gbr4x:Gambar4; public var gbr5x:Gambar5; public var gbr6x:Gambar6; public var gbr7x:Gambar7; public var gbr8x:Gambar8; public var gbr9x:Gambar9; public var gbr10x:Gambar10; public var gbr11x:Gambar11; public var gbr12x:Gambar12; public var gbr13x:Gambar13; public var gbr14x:Gambar14; public var gbr15x:Gambar15; public var gbr16x:Gambar16;

gbr1x = new Gambar1(); addChild(gbr1x);

gbr2x = new Gambar2(); addChild(gbr2x);

gbr3x = new Gambar3(); addChild(gbr3x);

gbr4x = new Gambar4(); addChild(gbr4x);

gbr5x = new Gambar5(); addChild(gbr5x);

gbr6x = new Gambar6(); addChild(gbr6x);

gbr7x = new Gambar7(); addChild(gbr7x);

gbr8x = new Gambar8(); addChild(gbr8x);

Poster yang telah dipasang bisa dapat dirotasi dan discale secara interaktif dengan memakai fungsi RotatableScalable().

Action Script 3 untuk setiap poster RotatableScalable().

Tampilan perangkat lunak pada saat dijalankan pada alat multitouch di MIC-ITB

Gambar 3.17 Tampilan Aplikasi Digital Poster import flash.display.Sprite;

import app.core.action.RotatableScalableRev; class Gambar1 extends RotatableScalableRev {

public var gbr1:Gbr1; public function Gambar1() {

gbr1 = new Gbr1(); addChild(gbr1); x = 96,50; y = 118; }

45

KESIMPULAN DAN SARAN

4.1 Kesimpulan

Dari seluruh paparan di atas, dapat ditarik kesimpulan

1. Sistem yang diimplementasikan mampu mendeteksi dan memetakan koordinat titik sentuhan

2. Sistem dapat berjalan dengan baik ketika objek sentuhan lebih dari satu titik (multitouch) 3. Poster dapat ditampilkan di ruang pameran tanpa harus dicetak terlebih dahulu.

4. Pengunjung dapat mempunyai pengalaman lebih untuk membaca sebuah poster.

4.2 Saran

Pengembangan aplikasi digital poster sangat terbuka dilakukan pada bagian kalibrasi. Ini dikarenakan pada aplikasi digital poster saat ini kalibrasi yang dilakukan masih bersifat manual (kalibrasi dilakukan diluar aplikasi digital poster).

Pengembangan teknologi multitouch sangat memungkinkan untuk dikembangkan sesuai kebutuhan yang dibutuhkan.