• Tidak ada hasil yang ditemukan

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

N/A
N/A
Protected

Academic year: 2017

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

Copied!
58
0
0

Teks penuh

(1)

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

(2)
(3)
(4)

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

(5)

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

(6)

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

(7)

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

(8)

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

(9)

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

(10)

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

(11)

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

(12)

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

(13)

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

(14)

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

(15)

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.

(16)

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

(17)

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

(18)

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

(19)

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

(20)

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.

(21)

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

(22)

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

(23)

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

(24)

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

(25)

Gambar 2.6 Include Relationship

• Extend

(26)

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.

(27)

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.

(28)

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].

(29)

 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

(30)

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

(31)

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 :

(32)

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

(33)

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

(34)

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

(35)

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

(36)

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

(37)

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

(38)

28

BAB III

PEMBAHASAN

3.1 Jadwal Kerja Praktek

(39)

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)

(40)

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

(41)

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

(42)

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.

(43)

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

(44)

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

(45)

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)

(46)

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

(47)

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

(48)

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.

(49)

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

(50)

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

(51)

Gambar 3.11 Layar Kalibrasi

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

(52)

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

(53)

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

(54)

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

(55)

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");

(56)

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().

(57)

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;

(58)

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).

Gambar

Gambar 1.1 Siklus hidup perangkat lunak
Gambar 2.2 Struktur Organisasi
Gambar 2.3 Use Case Diagram
Gambar 2.6 Include Relationship
+7

Referensi

Dokumen terkait

Menurut penulis pandangan fiqih siyasah dusturiyah terhadap kedudukan DPD RI berdasarkan teori pada bab sebelumnya mengenai Tugas dan wewenang lembaga perwakilan

Hukum kesehatan adalah semua ketentuan-ketentuan atau peraturan-peraturan perundang-undangan di bidang kesehatan yang mengatur hak dan kewajiban individu, kelompok atau

Karakteristik perkembangan anak usia dini adalah ciri yang khas yang dimiliki oleh seorang anak sebagai pembeda dengan anak yang lainnya, karakteristik bisa disebut

Bank BRISyariah Cabang Banda Aceh mempunyai struktur organisasi garis lurus, maksudnya yaitu pada setiap tingkat atau level organisasi dikepalai oleh seorang atasan yang

Hilangnya statu Persero dari ketiga BUMN tambang tersebut yang diributkan dan mendapatkan banyak kritikan dari berbagai pihak, menurut penulis secara hukum

8) Ibid.. 10) Sedangkan Peter Mahmud Marzuki memperkuat pendapat ini dengan menguraikan ciri-ciri ketentuan yang bersifat memaksa. 11) Ciri pertama, biasanya

[r]