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
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
iii
Halaman LEMBAR JUDUL
LEMBAR PENGESAHAN LAPORAN KERJA PRAKTEK
KATA PENGANTAR………. .……… i 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.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
i
KATA PENGANTAR
BismillahirahmannirahimSyukur 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
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
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
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
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
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
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
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
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
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
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
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
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
Gambar 2.6 Include Relationship
• Extend
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
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
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
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
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
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
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
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
28
BAB III
PEMBAHASAN
3.1 Jadwal Kerja Praktek
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
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
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)
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.
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
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
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
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().
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).