NIM : 10109934
Tempat/tgl lahir : Bandung, 12 Juli 1991 Jenis Kelamin : Laki-laki
Alamat : Jl. Sukamaju No.114 RT.03/RW.13 Desa Batujajar Barat, Kec.Batujajar, Kab.Bandung Barat
Agama : Islam
Email : rizkifauzian@gmail.com
RIWAYAT PENDIDIKAN
1996-2002 SDN 4 Batujajar 2002 – 2005 MTS Al-Ihsan
2005 – 2009 SMK Negeri 1 Cimahi
Jurusan Rekayasa Perangkat Lunak 2009 – 2014 Universitas Komputer Indonesia
PEMBANGUNAN DIGITAL POSTER DENGAN TEKNOLOGI
MULTITOUCH (STUDI KASUS DI LABORATORIUM
MIC-INSTITUT TEKNOLOGI BANDUNG)
SKRIPSI
Diajukan untuk Menempuh Ujian Akhir Sarjana
RIZKI FAUZIAN
10109934
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
iv
yang berjudul : Pembangunan Digital Poster Dengan Teknologi Multitouch (Studi Kasus di Laboratorium MIC-Institut Teknologi Bandung). Skripsi ini diajukan untuk memenuhi salah satu syarat kelulusan menempuh Program Studi Strata 1 Jurusan Teknik Informatika Fakultas Teknik dan Ilmu Komputer Universitas Komputer Indonesia.
Penulis menyadari bahwa sepenuhnya bahwa skripsi ini masih jauh dari kesempurnaan, disebabkan oleh keterbatasan memperoleh bahan-bahan maupun kemampuan dan pengetahuan penulis sendiri. Walaupun demikian, penulis berharap semoga skripsi ini dapat memberikan manfaat bagi semua pihak, bagi penulis khususnya dan bagi para pembaca pada umumnya.
Dalam penulisan skripsi, penulis telah banyak mendapat bantuan dari berbagai pihak, baik berupa saran, bimbingan maupun dorongan moril sehingga bisa membantu penyelesaian skripsi 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 Kurniadie, Ir., M.Sc selaku Dekan Fakultas Teknik dan Ilmu Komputer
v
4. Alif Finandhita, S.Kom selaku Dosen Wali.
5. Harsa Wara Prabawa, S.Si., M.Pd selaku Dosen Pembimbing yang telah berkenan meluangkan waktu, tenaga dan pikirannya dalam membimbing, memberikan arahan serta saran kepada penulis sehingga Skripsi ini dapat selesai.
6. Dr. Ary Setijadi selaku Ketua MIC-ITB yang telah memberikan izin serta kesempatan kepada penulis melakukan penelitian dalam rangka penyusunan skripsi.
7. Bapak 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 skripsi ini.
8. 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 skripsi ini.
9. Buat teman-teman MIC-ITB 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, 25 Februari 2014
vi
ABSTRACT ... ii
KATA PENGANTAR ... iii
DAFTAR ISI ... vi
DAFTAR GAMBAR ... x
DAFTAR TABEL ... xiii
DAFTAR SIMBOL ... xiv
DAFTAR LAMPIRAN ... xvii
BAB 1 PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Rumusan Masalah ... 2
1.3 Maksud dan Tujuan ... 2
1.4 Batasan Masalah... 3
1.5 Metodologi Penelitian ... 3
1.5.1 Sistematika Penulisan ... 5
BAB 2 TINJAUAN PUSTAKA ... 7
2.1 Profil Instansi ... 7
2.1.1 Sejarah Instansi ... 7
2.1.2 Logo Instansi ... 7
2.1.3 Struktur Organisasi dan Job Description... 8
2.1.3.1 Struktur Organisasi ... 8
vii
2.2 Landasan Teori ... 9
2.2.1 Poster ... 9
2.2.2 Multitouch ... 10
2.2.3 Interaksi Manusia dan Komputer ... 15
2.2.4 UML (Unified Modeling Language) ... 17
2.2.5 Computer Vision... 24
2.2.6 Image Processing ... 24
2.2.7 Citra Digital ... 25
2.2.8 Perangkat Keras Multitouch ... 29
2.2.9 Perangkat Lunak Multitouch ... 34
BAB 3 ANALISIS DAN PERANCANGAN ... 39
3.1 Analisis Sistem ... 39
3.1.1 Preprocessing ... 40
3.1.2 Tracking ... 42
3.1.3 Communication Protocols ... 42
3.2 Spesifikasi Sistem ... 44
3.3 Desain dan Perancangan Sistem ... 45
3.3.1 Proses Tracking Community Core Vision ... 46
3.4 Deskripsi Kebutuhan Sistem ... 49
3.4.1 Deskripsi Kebutuhan Fungsional ... 49
3.4.1.1 Diagram Use Case Digital Poster ... 50
3.4.1.2 Activity Diagram Digital Poster ... 58
3.4.1.3 Class Diagram Digital Poster... 65
3.4.1.4 Sequence Diagram Digital Poster... 66
viii
3.5 Instalasi dan Konfigurasi Digital Poster ... 68
3.5.1 Instalasi dan Konfigurasi Perangkat Keras Multitouch dengan teknologi optik menggunakan teknik Laser Light Plane ... 68
3.5.2 Instalasi dan Konfigurasi Community Core Vision ... 70
3.5.3 Kalibrasi ... 71
3.5.4 Perancangan Perangkat Lunak Digital Poster ... 73
3.5.5 Perancangan Antarmuka ... 76
BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM ... 79
4.1 Implementasi ... 79
4.1.1 Implementasi Perangkat Keras ... 79
4.1.2 Implementasi Perangkat Lunak ... 79
4.1.3 Implementasi Class Pada Sistem ... 80
4.1.3.1 Implementasi Kelas RotatableScalable ... 80
4.1.4 Implementasi Community Core Vision ... 81
4.1.5 Implementasi Antarmuka Sistem ... 82
4.2 Pengujian Sistem ... 89
4.2.1 Pengujian Alpha ... 89
4.2.1.1 Rencana Pengujian ... 90
4.2.1.2 Hasil Pengujian ... 91
4.2.1.3 Kesimpulan Hasil Pengujian Alpha... 93
4.2.2 Pengujian Beta ... 95
ix
BAB 5 KESIMPULAN DAN SARAN ... 101
5.1 Kesimpulan ... 101
5.2 Saran ... 101
103
[1] Lori Siebert dan Lisa Ballard, Making a Good layout, North Light Book, Cincinnati, Ohio, 2001.
[2] Nui Group Community, Multitouch Technology Book, Nuigroup ,2009. [3] Sommerville Alur Metode Waterfall. 5-6, 2001
[4] Nui Group Community Multitouch Technology Nuigroup, 2009.
[5] Shneiderman, B, Designing the User Interface - Strategies for Effective
Human-Computer Interaction, Third Edition, Addison-Wesley, USA.,1998.
[6] Booch, Grady, Jacobson, Ivan and Rumbaugh, James, The Unified Modeling
Language User Guide. United States of America, 1999.
[7] Tan Wei Jie, Multi-Touch Table – Touch Sensing by Using Frustrated
Total Internal Reflection (Ftir) Method , Universiti Teknologi Malaysia ,2013.
[8] Kusrianto, Adi. Pengantar Desain Komunikasi Visual. Surabaya. Penerbit ANDY
Yogyakarta, 2006.
[9] Espen Solberg Nygard, Multitouch Interaction with Gesture Recognition,
Norwegian University of Science and Technology, 2010
[10] Martin Kaltenbrunner, Till Bovermann, Ross Bencina, dan Enrico Costanza,
TUIO-a protocol for table based tangible user interface, International
1
BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
Poster dapat dideskripsikan sebagai bentuk publikasi dua dimensional, satu muka, menyajikan informasi berupa data, jadwal dan penawaran atau untuk mempromosikan sesuatu, tempat, produk, jasa, perusahaan atau organisasi. Tugas poster adalah menangkap audiens yang tengah bergerak dengan pesan yang disampaikan[1]. Poster harus mampu menyampaikan informasi atau pesan pada audiens yang sedang sibuk, hanya dalam waktu beberapa detik. Karena waktu baca begitu singkat dan dalam situasi sibuk, maka harus memilih salah satu informasi untuk dijadikan elemen kunci, yaitu elemen yang paling dominan dan memiliki daya pikat (eye-catching) paling kuat.
Pada saat ini poster yang ada mempunyai kelemahan yaitu informasi yang disampaikan bersifat tunggal atau poster hanya memuat satu informasi dan kurang memiliki daya tarik pengunjung untuk membacanya karena informasi yang disajikan bersifat statis, serta keterbatasan terhadap ruangan penyimpanan poster sehingga ruang pameran Laboratoium MIC ITB terlihat tidak tertata dengan rapi. Melihat hal tersebut maka digital poster dengan teknologi multitouch adalah solusi untuk menggantikan poster yang ada agar informasi yang disampaikan lebih bervariasi, mempunyai daya tarik lebih tinggi dibanding poster konvensional, serta dapat meminimalisir penggunaan ruangan dalam penyimpanan poster.
Teknologi Multitouch merupakan suatu perangkat teknik interaksi yang memungkinkan pengguna untuk mengontrol aplikasi grafis dengan beberapa jari[2]. Perangkat multitouch terdiri dari layar sentuh (misalnya: display screen, komputer, meja, dinding) atau touchpad, serta perangkat lunak yang mengenali titik sentuh secara simultan, yang bertentangan dengan standar layar sentuh (misalnya touchpad komputer), yang hanya mengenali satu titik sentuh. Teknik pengembangan multitouch berbasis optik digunakan dalam membuat perangkat keras pendukung aplikasi poster menggunakan metode Laser Light Plane (LLP). Pada metode Laser Light Plane (LLP), berkas sinar inframerah digunakan di atas layar dan diarahkan sejajar dengan permukaan layar multi-touch. Sentuhan jari pada layar akan memantulkan berkas sinar inframerah tersebut ke belakang layar dan akhirnya akan ditangkap oleh kamera.
Institut Teknologi Bandung mempunyai beberapa laboratorium penelitian salah satunya adalah Microsoft Innovation Center ITB (MIC ITB). Laboratorium MIC ITB mempunyai ruang pamer yang berisi hasil karya mahasiswa dan poster penelitian.
Berdasarkan hal di atas, di sini penulis tertarik membangun perangkat lunak untuk menampilkan poster digital yang interaktif dengan menggunakan teknologi multitouch.
1.2 Rumusan Masalah
Berdasarkan latar belakang yang telah dipaparkan diatas maka dapat dirumuskan permasalahannya yaitu: Bagaimana membangun digital poster dengan teknologi multitouch (Studi kasus di Laboratorium MIC-Institut Teknologi Bandung).
1.3 Maksud dan Tujuan
Berdasarkan permasalahan yang diteliti, maka maksud dari penulisan tugas akhir ini adalah untuk membangun aplikasi digital poster dengan teknologi multitouch (Studi kasus di Laboratorium MIC-Institut Teknologi Bandung).
Sedangkan tujuan yang akan dicapai dalam penelitian ini adalah :
3
2. Menyediakan layanan informasi yang dapat memfasilitasi banyak konten poster dalam satu perangkat.
1.4 Batasan Masalah
Dalam penelitian ini, penulis membatasi masalah sebagai berikut:
1. Instalasi dan konfigurasi perangkat keras multitouch dengan teknologi optik menggunakan metode Laser Light Plane (LLP).
2. Instalasi dan konfigurasi perangkat lunak multitouch dengan pengolahan citra dan pengenalan pola menggunakan software
community core vision.
3. Aplikasi multitouch digital poster berbasis Flash dengan bahasa pemrograman Action script 3
4. Aplikasi digital poster berbasis desktop stand alone.
5. Konten digital poster berisi poster interaktif berupa gambar, teks dan video.
6. Instalasi Aplikasi Digital Poster MIC–ITB dengan teknologi multitouch.
7. Informasi poster yang dijadikan penelitan ini diambil dari poster penelitan Laboratorium MIC-IITB.
8. Aplikasi Digital Poster berisi 8 poster.
1.5 Metodologi Penelitian
Metodologi penelitian yang digunakan dalam penulisan skripsi ini adalah sebagai berikut:
1. Metode Pengumpulan Data
Metode pengumpulan data yang digunakan dalam penelitian ini adalah sebagai berikut:
a. Observasi
b. Interview
Teknik pengumpulan data dengan mengadakan tanya jawab secara langsung kepada Kepala Lab. MIC tentang kebutuhan penyampaian informasi di ruang pamer Laboratorium MIC.
c. Studi Literatur
Pengumpulan data dengan cara mengumpulkan literatur, jurnal, paper dan bacaan-bacaan yang ada kaitannya tentang teknologi multitouch dan pengaplikasiannya.
2. Metode Pengembangan Perangkat Lunak
Metode pembangunan perangkat lunak yang digunakan menggunakan model waterfall, karena menghasilkan sistem yang terstruktur dengan baik ditiap prosesnya. Waterfall merupakan salah satu model pembangunan
software, dimana kemajuan suatu proses dipandang sebagai aliran yang
mengalir ke bawah seperti air terjun, maka tahapan dalam model ini disusun bertingkat. Setiap tahap dalam model ini dilakukan berurutan, selain itu dari satu tahap dapat kembali ke tahap sebelumnya.
Tahapan yang meliputi beberapa proses tersebut adalah sebagai berikut:
5
1. Analisis
Analisis merupakan tahap pengumpulan kebutuhan secara lengkap kemudian dianalisis dan didefinisikan kebutuhan yang harus dipenuhi oleh program yang akan dibangun. Fase ini harus dikerjakan secara lengkap untuk bisa menghasilkan desain yang lengkap.
2. Desain
Desain adalah tahap dimana proses desain sistem terbagi dalam kebutuhan perangkat keras dan perangkat lunak secara keseluruhan. Desain perangkat lunak mewakili fungsi sistem perangkat lunak dalam suatu bentuk yang dapat ditransformasikan ke dalam satu atau lebih program yang dapat dieksekusi.
3. Implementasi
Implementasi adalah tahap dimana desain program diterjemahkan ke dalam kode-kode dengan menggunakan bahasa pemrograman yang sudah ditentukan. Program yang dibangun langsung diuji baik secara unit.
4. Integrasi
Integrasi merupakan tahap dimana penyatuan perangkat lunak dan perangkat keras kemudian diuji secara keseluruhan (system testing). 5. Pemeliharaan
Pemeliharaan adalah tahap mengoperasikan program dan melakukan pemeliharaan, seperti penyesuaian atau perubahan karena adaptasi dengan situasi sebenarnya.
1.5.1 Sistematika Penulisan
Sistematika penulisan proposal penelitian ini disusun untuk memberikan gambaran umum tentang penelitian yang dijalankan. Sistematika penulisan tugas akhir ini adalah sebagai berikut:
BAB I PENDAHULUAN
diterapkan dalam memperoleh dan mengumpulkan data serta sistematika penulisan
BAB II. LANDASAN TEORI
Membahas berbagai konsep dasar dan teori-teori yang berkaitan dengan topik penelitian yang dilakukan dan hal-hal yang berguna dalam proses analisis permasalahan serta tinjauan terhadap penelitian-penelitian serupa yang telah pernah dilakukan sebelumnya termasuk sintesisnya.
BAB III. ANALISIS MASALAH
Menganalisis masalah dari model penelitian untuk memperlihatkan keterkaitan antar variabel yang diteliti serta model matematis untuk analisisnya.
BAB IV. IMPLEMENTASI DAN PENGUJIAN SISTEM
Merupakan tahapan yang dilakukan dalam penelitian secara garis besar sejak dari tahap persiapan sampai penarikan kesimpulan, metode dan kaidah yang diterapkan dalam penelitian. Termasuk menentukan variabel penelitian, identifikasi data yang diperlukan dan cara pengumpulannya, penentuan sampel penelitian dan teknik pengambilannya, serta metode/teknik analisis yang akan dipergunakan dan perangkat lunak yang akan dibangun jika ada.
BAB V. KESIMPULAN DAN SARAN
7
BAB II
TINJAUAN PUSTAKA
2.1 Profil Instansi
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:
1. Membantu komunitas untuk dapat menguasai dan menggunakan teknologi Microsoft dengan berbagai skema Penguasaan Teknologi, baik untuk kebutuhan pendidikan, penelitian maupun dukungan terhadap industri
2. Memantapkan dan mengembangkan hubungan antara Microsoft dan jejaringnya dengan komunitas pendidikan tinggi di Indonesia, khususnya di area Bandung Raya dan sekitarnya.
3. 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
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.
2.1.3.1Struktur Organisasi MIC-ITB
Gambar 2.2 Struktur Organisasi
2.1.3.2Job 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.
9
2. Dewan Pengarah
a. Memberikan arahan dalam perumusan, perencanaan dan pelaksanaan proses penelitian di MIC–ITB.
3. Deputi Manager Urusan Administrasi dan Keuangan
a. Merencanakan 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 Poster
Poster dapat dideskripsikan sebagai bentuk publikasi dua dimensional, satu muka, menyajikan informasi berupa data, jadwal dan penawaran atau untuk mempromosikan sesuatu, tempat, produk, jasa, perusahaan atau organisasi. Tugas poster adalah menangkap audiens yang tengah bergerak dengan pesan yang disampaikan[1]. Poster harus mampu menyampaikan informasi atau pesan pada audiens yang sedang sibuk, hanya dalam waktu beberapa detik. Karena waktu baca begitu singkat dan dalam situasi sibuk, maka harus memilih salah satu informasi untuk dijadikan elemen kunci, yaitu elemen yang paling dominan dan memiliki daya pikat (eye-catching) paling kuat. Kriteria[8] sebuah poster yang baik adalah:
1. Poster yang ideal memiliki ukuran minimal A3 (29,7cm X 42cm) atau bisa juga menggunakan ukuran A2 (42cm X 59,4cm) dan A1 (59,4cm X 84cm) disesuaikan dengan tempat pengaplikasian poster tersebut. 2. Kombinasi gambar dan tulisan tidak berlebihan, poster dengan banyak
membingungkan terhadap informasi yang ingin disampaikan terhadap pembaca.
3. Tulisan didalam poster harus jelas dan terbaca , tulisan dalam poster itu sangat berguna sekali, karena pokok utama penyampaian pesan atau informasi dari sebuah poster adalah dari tulisan dan gambar. Dengan tulisan yang jelas dan mudah terbaca maka pesan yang hendak disampaikan ke sasaran melalui poster tersebut akan tersampaikan dengan baik.
4. Kombinasi Warna Yang Tepat, poster yang mempunyai background warna putih (kode warna FFFFFF) dengan gambar dan tulisan yang berwarna abu-abu (kode warna F8F8F8), pasti hasilnya tidak jelas. Berbeda dengan poster yang memiliki background gambar berwarna merah tua (kode warna 66000) dengan kombinasi gambar atau tulisan berwarna kuning menyala (kode warna FFFF00) pasti hasilnya lebih bagus dan menarik.
2.2.2 Multitouch
Touch screen adalah sebuah perangkat input komputer yang bekerja
dengan adanya sentuhan pada layar menggunakan jari atau pena digital (stylus)
11
Dr Andrew Hsu, seorang ahli teknologi layar sentuh, menyatakan bahwa " layar IR (inframerah) adalah permukaan yang paling tahan lama dan dapat menangani lingkungan yang sulit, membuat mereka cocok untuk aplikasi militer "[3]. Meskipun penelitian ini tidak akan berfokus pada teknologi dalam hal aplikasi militer, Dapat dilihat bahwa layar sentuh dengan teknologi inframerah, akan menjadi permukaan paling tahan lama, dan juga paling serbaguna. Fleksibilitas ini didapatkan dari dua sistem varian sentuhan inframerah layar. Sistem pertama adalah mirip dengan sistem resistif dimana terdiri dari dua dimensi grid cahaya inframerah.
Dalam teknologi ini, LED inframerah (light emitting dioda) yang disusun di sisi berlawanan diatas permuakaan kaca. Dioda memproyeksikan cahaya inframerah ke sensor yang terletak di seberang sensor. Sensor membaca kekuatan pancara sinar inframerah, dan "ketika pengguna membuat kontak dengan layar, sistem mengukur penurunan sinyal output sensor, pengukuran ini memungkinkan sistem untuk menghitung lokasi sentuhan "[3]. Hal ini menunjukan bahwa ketika jari menyentuh layar, pancaran cahaya inframerah terhalang oleh jari pengguna, namun sebagian pancaran cahaya bisa lolos dan melewatkan cahaya terhadap sensor. Sensor mengirim pengukuran cahaya ke sistem, dimana sistem akan menganalisis data dan mengetahui di mana pengguna menyentuh. Teknologi ini sudah memiliki kemampuan multi-touch karena pancaran cahaya inframerah tidak pernah sepenuhnya terhalang oleh sentuhan pengguna.
perintah "[4]. Dalam contoh lain, terhadap layar kaca, memungkinkan untuk menggunakan Lensa tipis yang hanya tahan lama, lebih murah, dan lebih tangguh.
Gambar 2.3 Transmitter dan receiver Inframerah layar sentuh tipis
1. Microsoft Surface
Contoh pengaplikasian refleksi layar sentuh infra merah adalah Microsoft
Surface. Di awal tahun 2001, "Steve Bathiche dari Microsoft Hardware dan Andy
Wilson dari Microsoft Research ", memulai pengembangan surface[6]. Proses berlanjut pada pembangunan sampai dengan tahun 2003 ketika ide ini disampaikan kepada Bill Gates, dan 85 prototipe diciptakan untuk pengembang pada Surface Computing Group, sebuah kelompok yang diciptakan pada tahun 2004 hanya untuk mengembangkan Surface. Pada tahun 2005, berbagai prototipe yang dibuat dan dianalisis dan akhirnya, pada tahun 2008, Microsoft Surface
dijual kepada publik dengan harga $ 12.500 atau $ 15.000 [6].
Teknologi Surface ini menggunakan beberapa sensor gambar sekitar satu sisi dari permukaan sentuh dan lampu inframerah pada sisi lain. Ketika pengguna menempatkan jarinya di permukaan, menghalangi sinar inframerah, maka perangkat akan memproyeksikan bayangan. Menggunakan beberapa kamera, unit mengkonversi bayangan ini menjadi titik sentuh melalui triangulation "[3]. Seperti yang dinyatakan oleh Dr Hsu, Surface menggunakan sistem kamera dan LED Inframerah untuk menangkap gambar dari objek yang menyentuh permukaan. Teknologi Surface mengambil langkah maju dengan teknologi mereka, mengembangkan motherboard khusus untuk menghitung data yang ditransmisikan pada 100 megabyte per detik, dari kamera. Kemudian
13
menentukan apa yang relevan dan apa yang tidak. Data yang dianggap relevan adalah data berubah yang diterima kamera. Contoh dari hal tersebut adalah bayangan dari cahaya inframerah berubah ketika seseorang menyentuh layar. Perangkat lunak ini dapat mendeteksi dan membedakan berbagai jenis sentuhan.
Surface mengkategorikan sentuhan menjadi tiga set: finger, blobs dan object.
Gambar 2.4 Microsoft Surface
2. Resistive Touch Screens
Gambar 2.5 Layar Sentuh Resistif
3. Capacitive Touch Screen
Sangat ‘smooth’ untuk dioperasikan karena hanya membutuhkan keberadaan jari tangan, tanpa tekanan. Tampilan layarnya memiliki kejernihan hingga sekitar 90% dan bila terkena paparan sinar matahari tidak mempengaruhi kualitas tampilan. Namun kelemahannya adalah tidak mendukung penggunaan stylus. Terlebih lagi jenis layar sentuh yang ini tidak bisa digunakan sama sekali saat menggunakan sarung tangan.
Gambar 2.6 Layar Sentuh Capacitive
15
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 menyentuh permukaan menyebabkan cahaya terpecah, refleksi tertangkap dengan sensor atau lampu kamera yang mengirim data ke perangkat lunak yang merespon terhadap sentuhan.
Perangkat multitouch dapat berbeda tergantung dari bahan dan alat yang digunakan, bahan utama yang umum digunakan adalah infrared dan kamera optik. Poin penting yang mempengaruhi hasil sentuhan adalah rata-rata penangkapan gambar per detik pada kamera dan kualitas kamera[4].
2.2.3 Interaksi Manusia dan Komputer
Interaksi Manusia dan Komputer adalah suatu ilmu yang berhubungan dengan perancangan, evaluasi dan implementasi sistem komputer interaktif untuk digunakan oleh manusia, serta studi fenomena-fenomena besar yang berhubungan dengannya. Interaksi antara pengguna dan komputer terjadi pada antarmuka pengguna meliputi perangkat lunak dan perangkat keras, misalnya karakter atau objek dari suatu aplikasi ditampilkan oleh perangkat lunak pada monitor[5].
Interaksi manusia dan komputer didefinisikan sebagai “suatu disiplin yang berkaitan dengan desain, evaluasi dan implementasi sistem komputer interaktif untuk digunakan oleh manusia dan dengan studi fenomena utama yang mengelilingi mereka” oleh Asosiasi Mesin Komputasi (The Association of
Computing Machinery). Sebuah aspek penting interaksi manusia dan komputer
interface pengguna adalah membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal pengguna mencapai tujuan apa yang sering disebut desain yang berpusat pada pengguna. Desain antarmuka pengguna yang baik memfasilitasi, menyelesaikan tugas yang ada tanpa menarik perhatian yang berlebih. Desain grafis dapat dimanfaatkan untuk mendukung kegunaan. Proses desain harus menyeimbangkan fungsi teknis dan elemen visual untuk menciptakan sebuah sistem yang tidak hanya operasional, tetapi juga bermanfaat serta beradaptasi terhadap perubahan kebutuhan pengguna.
Pedoman yang sering dipakai oleh para perancang dalam merancang antarmuka pemakai, yaitu delapan aturan emas perancangan dialog [5], antara lain:
1. Berusaha untuk konsisten
Kekonsistenan dalam warna, tipe dan cara penulisan, pembuatan menu. 2. Adanya penggunaan shortcuts
Adanya tombol-tombol dan perintah khusus yang dapat dipakai oleh pemakai untuk mendapatkan waktu respon dan penampilan informasi ke layar lebih cepat.
3. Adanya umpan balik yang inovatif
Untuk setiap tindakan pemakai, maka sistem akan merespon dengan umpan balik yang sesuai.
4. Merancang dialog untuk memberikan keadaan akhir
Supaya menghindari penyelesaian otomatis dan memungkinkan pemakai memberi tanda bahwa pekerjaan telah selesai. Memberikan pencegahan dan penanganan kesalahan yang sederhana Desain sistem sebaik mungkin tidak membiarkan pemakai membuat kesalahan yang serius. Untuk setiap kesalahan, maka setiap sistem dapat memperbaiki sendiri kesalahan tersebut.
5. Memungkinkan pembalikan aksi yang mudah
Seluruh tindakan yang mempengaruhi sistem secara keseluruhan dapat dibatalkan atau di-undo.
17
Pemakai ingin supaya sistem dapat merespons terhadap aksi yang telah dilakukannya.
7. Mendukung beban ingatan jangka pendek
Karena terbatasnya kemampuan manusia, maka manusia memerlukan tampilan yang sederhana, tidak memerlukan pelatihan secara terus-menerus, frekuensi pergerakan jendela harus dikurangi.
Pengguna interaksi manusia dan komputer dibagi menjadi tiga jenis[5] yaitu:
a. Novice or First-Time User
Pada tingkat pemula ini, user diasumsikan hanya mengetahui sedikit tentang konsep antarmuka. Perancangan antarmuka yang diperlukan oleh tingkat pemula ini dengan adanya umpan balik yang inovatif, pesan kesalahan harus bersifat membangun atau spesifik, terdapat fasilitas menu help dan tutorial.
b. Knowledgeable Intermittent User
Pada tingkat menengah, user sudah mempunyai sedikit pengetahuan tentang sistem berjalan, tetapi masih sulit untuk mengenal struktur menu dan lokasi menu pada 12 sistem. Perancangan antarmuka yang sesuai untuk tingkat menengah ini adalah desain dari sistem harus sederhana dan konsisten, perlu adanya pengembalian aksi yang mudah.
c. Expert Frequent User
Pada tingkat mahir, user sudah mengenal dengan baik konsep antarmuka di dalam sistem. Perancangan antarmuka yang sesuai adalah umpan balik yang singkat penyediaan fasilitas shortcuts untuk mempercepat kerjaan.
2.2.4 UML (Unified Modeling Language)
Unified Modeling Language (UML) adalah sebuah bahasa utama
pemodelan yang digunakan untuk menganalisa, menentukan, mendesain sistem suatu perangkat lunak[6]. Dalam aplikasinya, UML dapat dimodelkan dengan beberapa variasi diagram yaitu sebagai berikut:
1. Use Case Diagram
Use Case diagram adalah cara spesifik menggunakan sistem dengan
menggunakan beberapa bagian dari fungsi tersebut [6]. 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.7 Use Case Diagram
Bagian-bagian Use Case Diagram:
1. Use Case
19
Gambar 2.8 Use Case
2. 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.9 Actor
3. Relationship
Relationship adalah sebuah tanda yang berbentuk garis yang
menghubungkan actor dan use case. Ataupun use case dengan use case
lainnya. Relationship dibagi menjadi dua yaitu:
a. Include
Include Relationship adalah hubungan antara use case yang dimana
Gambar 2.10 Include Relationship
b. Extend
Extend Relationship adalah hubungan antara use case dimana use
case tersebut memerlukan use case lain sebagai syarat agar dapat melakukan use case selanjutnya.
21
c. Generalisasi
Generalisasi pada aktor dan use case digunakan untuk menyederhanakan model dengan cara menarik keluar sifat-sifat pada aktor maupun use case yang sejenis. Untuk mengetahui kapan dibutuhkan generalisasi berdasarkan pada tujuan:
1. Mekanisme berbeda dengan satu tujuan yang sama (generalisasi
use case).
2. Agen berbeda dengan satu tujuan yang sama (generalisasi aktor).
Gambar 2.12 Contoh Generalisasi Pada Use Case
2. Class Diagram
Class diagram digunakan untuk melihat eksistensi suatu class dan relasinya dari sudut pandang logika suatu sistem[6]. Relasi di dalam class diagram:
a. Generalisasidan Inheritance
Diperlukan untuk memperlihatkan hubungan pewarisan
(inheritance) antar unsur dalam diagram kelas. Pewarisan
Gambar 2.13 Generalisasi
b. Asosiasi
Hubungan statis antar class umumnya menggambarkan class yang memiliki atribut berupa class lain atau class yang harus mengetahui ekstensi class lain.
Gambar 2.14 Asosiasi
c. Agregat
23
Gambar 2.15 Agregat
3. Activity Diagram
Activity Diagram mendukung aliran aktivitas dari suatu sistem,
aliran kerja atau proses lain[6].
Gambar 2.16 Activity Diagram
1. Oval merepresentasikan aktivitas.
2. Diamond merepresentasikan pilihan.
3. Fork merepresentasikan awal dan akhir dari kerja yang dilakukan bersamaan.
4. Black Round merepresentasikan awal dari aliran kerja.
2.2.5 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 :
1. 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.
2. Detection Event (CCTV)
Dengan mengimplementasikan teknologi computer vision, sistem CCTV dapat mendeteksi dan melakukan tindakan selanjutnya (seperti merekam gambar) secara otomatis.
3. Interaction
Penerapan computer vision yang memungkinkan interaksi pengguna dengan sistem membuat sebuah petunjuk lokasi, pemainan akan menjadi lebih menarik.
2.2.6 Image Processing
Image Processing adalah manipulasi dan analisi suatu informasi gambar. Gambar yang dimaksud disini adalah gambar visual dalam dua dimensi. Konsep dasar dari sistem image processing diambil dari kemampuan indera penglihatan manusia yang selanjutnya dihubungkan dengan kemampuan otak manusia. Image
Processing dalam sejarahnya telah diaplikasikan dalam berbagai cabang ilmu.
Image Processing menyangkut pula berbagai gabungan cabang-cabang ilmu,
seperti diantaranya optik, elektronik, matematika, fotografi dan teknologi komputer.
25
2.2.7 Citra Digital
Citra Digital adalah citra yang dibaca, disimpan dalam komputer. Citra digital tersusun dalam bentuk raster (grid atau kisi). Setiap kotak yang terbentuk disebut pixel(picture element) dan memiliki koordinat (x,y). Setiap pixel tersebut akan memiliki nilai (value atau number) yang merepresentasikan intensitas kecerahan satu warna pada pixel tersebut.
Pada dasarnya pengolahan citra digital dapat dibagi menjadi tiga bagian utama yaitu contact extraction, contact tracking dan coordinate transformation.
1. Contact Extraction
Gambar 2.16 menunjukkan diagram alir proses untuk mengekstrak kontak yang diperlukan informasi. Pada bagian ini, informasi yang tidak terkait gambar yang diambil, hanya menyisakan informasi kontak terkait untuk tujuan pengolahan citra.
Gambar akan ditangkap dengan menggunakan kamera IR. Setelah itu, gambar yang ditangkap berubah menjadi gambar grayscale. Gambar harus diubah ke gambar grayscale karena lebih mudah untuk mengekstrak informasi. Langkah ketiga adalah penghapusan latar belakang gambar yang ditangkap. Gambar latar depan akan diubah menjadi citra biner dengan menerapkan nilai ambang batas yang dipilih. Citra biner mengalami. Proses smoothing untuk mengurangi efek noise dan identifikasi kontak dapat ditingkatkan dengan menggunakan metode morfologi. Langkah ini adalah untuk meningkatkan sensitivitas dan akurasi dari sistem multi-touch. Terakhir, posisi dari satu set poin kontur dapat diambil dari fungsi ekstraksi kontur. Itu daerah kontur digunakan untuk memperoleh massa dan koordinat centroid digunakan sebagai hubungi koordinat.
2. Contact Tracking
Metode yang paling umum digunakan dalam target tracking adalah Kalman filter tetapi metode ini tidak cocok dalam tracking multi-touch karena kurangnya hasil secara real-time. Model tracking dapat disederhanakan dengan menggunakan pembatasan gerak jarak berdasarkan jari satuan waktu. Dalam rangka untuk memiliki interaksi yang berkelanjutan dalam Sistem multi-touch, persyaratan minimum dalam frame rate untuk kamera adalah 30 frame per detik tetapi keterbatasan jarak gerakan adalah 33ms. Karena batasan ini, algoritma k-NN dapat digunakan untuk melacak jari, di mana k diatur menjadi 1. Jarak Euclidean dari semua kontak harus dihitung dan dibandingkan dari waktu ke waktu. Perhitungan ini meningkat dalam bentuk eksponensial ketika jumlah jari meningkat. Ada dua hipotesis yang dibuat untuk menyederhanakan perhitungan:
a. Gangguan (noise) antara kontak yang sekecil mungkin.
27
Dari hipotesis yang dibuat, algoritma pelacakan kontak dapat dilakukan sebagai berikut:
Dari frame sebelumnya, kita bisa tahu bahwa ada koordinat jari p(oldx (i), oldy (i)) di mana 1 <i <p dan kita bisa tahu bahwa ada jari q koordinat (baru (i), Newy (i)) dalam frame di mana 1 <j <q. Semua koordinat jari akan diatur dalam urutan kronologis karena koordinat gambar. Menurut diekstraksi informasi kontur dengan urutan koordinat dalam proses ekstraksi, langkah ini bisa dilakukan dan jari-jari ditentukan.
Variabel k dapat diatur sebagai berbagai pelacakan kontak sementara area efektif layar interaktif yang dapat ditangkap oleh kamera dapat ditetapkan sebagai lebar dan dikalikan dengan tinggi. Jika nilai k = 1, kontak harus dibandingkan semua dengan kontak lainnya dalam gambar yang efektif ditangkap oleh kamera. Jika nilai k = 0,5,
Kontak yang dibandingkan dengan kontak dalam wilayah persegi panjang di mana pusat adalah kontak terdeteksi dan panjang sisi akan menjadi setengah dari total lebar.
Terakhir, jarak Euclidean antara kontak dapat dihitung dengan menggunakan rumus seperti yang ditunjukkan:
Distance=√((oldx(i)-newx(j)) ^(2 ^ ) )+(oldy(i)-newy(j))2
Ini menunjukkan bahwa kontak hilang jika tidak ada kontak lain dalam daerah perbandingan. Hal ini juga menunjukkan bahwa ada kontak baru ditambahkan ke arus bingkai jika kondisi q> p dan ada kejadian beberapa kontak yang tidak ditandai
3. Coordinate Transformation
Koordinat gambar dan layar koordinat dapat dihubungkan oleh koordinat transformasi. Kamera akan menangkap lokasi sesuai jari ke dalam gambar ketika jari menyentuh panel sentuh. Langkah ini diikuti dengan proses transformasi koordinat dan kemudian diubah menjadi koordinat layar. Terakhir layar koordinat dikirim ke program aplikasi. Layar akan dibagi menjadi 12 persegi panjang dimemesan untuk mendapatkan 15 simpul koordinat . Dengan menggunakan 15 titik kontrol, 12 persegi panjang yang sesuai dapat ditemukan dalam foto yang diambil, sehingga identitas pemetaan antara 30 titik kontrol dapat ditemukan. Pembagian persegi panjang digambar ke dua segitiga tepat di arah yang sama dilakukan. Dari dikenal tiga simpul koordinat segitiga, setiap titik intern R dapat dinyatakan dengan menggunakan rasio kawasan segitiga dengan luas total di mana:
(Rx_ ,Ry_ ) = V _1×(S _1)/s + V2 × (S _2)/s + V3 × (S _3)/s
29
2.2.8 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 [4].
1. 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.19 Sumber Cahaya Infra Merah
2. Kamera Infra Merah
Webcam Sederhana bekerja sangat baik untuk pembuatan multitouch,
tetapi perlu dimodifikasi dengan membuka filter infra merah yang terdapat pada lensa kamera.
3. Permukaan Sentuhan
Permukaan Sentuhan bisa berbahan dasar kaca atau acrylic yang telah dilapis oleh film untuk area sentuhnya.
Gambar 2.21 Permukaan Sentuhan
Ada beberapa macam teknik pembuatan multitouch berbasis optik diantaranya:
1. FTIR (Frustrated Total Internal Reflection)
Gambar 2.22 Metode FTIR
31
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[4].
2. DI (Diffused Illumination)
Gambar 2.23 Metode DI
3. LLP (Laser Light Plane)
Gambar 2.24 Metode LLP
Berbeda dengan FTIR dan DI, Laser Light Plane (LLP), seperti yang terlihat pada Gambar 2.23 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.
4. DSI (Diffused Screen Illumination)
33
Lain halnya dengan Diffused Surface Illumination (DSI), seperti yang terlihat pada Gambar 2.24. 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[4]. Sensor yang tersebar ini bila bergesekan dengan tangan akan menjadi bentuk inputan dalam multitouch.
5. LED–LP (LED Light Plane)
Gambar 2.26 Metode LED Light Plane
Metode yang umum digunakan sekarang adalah LED Light Plane
2.2.9 Perangkat Lunak Multitouch
1. TUIO
TUIO (Table-Top User Interface Objects) 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. Apabila aplikasi client memakai Flash maka harus di konversi dari UDP ke TCP menggunakan tool FLOSC (Flash OSC).
Gambar 2.27 Ilustrasi Diagram TUIO
2. Adobe Flash
Adobe Flash merupakan program yang didesain khusus oleh Adobe
35
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.
3. CCV (Community Core Vision)
Community Core Vision adalah perangkat lunak 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. Perangkat lunak ini dapat beroperasi pada MS Windows, Linux dan Mac OS.
Gambar 2.28 Fitur Community Core Vision
Fitur dari perangkat lunak Community Core Vision dapat dilihat pada gambar 2.28. Berikut adalah keterangan dari 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
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
37
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.
27.Save Settings –menyimpan semua pengaturan saat ini ke dalam file
101
BAB V
KESIMPULAN DAN SARAN
Pada bab ini akan dikemukakan kesimpulan yang dapat diperoleh dari pembahasan bab-bab sebelumnya serta saran untuk perbaikan dan pengembangan sistem yang lebih lanjut.
5.1Kesimpulan
1. Dengan Aplikasi Digital Poster berbasis multitouch Lab.MIC-ITB dapat Menyediakan layanan informasi berupa digital poster yang interaktif.
2. Dengan Aplikasi Digital Poster dapat memfasilitasi banyak konten poster dalam satu perangkat.
5.2Saran
Dalam pembangunan Aplikasi ini masih jauh dari sempurna dan masih banyak kekurangan. Oleh karena itu perlu dilakukan pengembangan dan penyempurnaan lebih lanjut. Adapun saran agar aplikasi ini bisa berfungsi dengan lebih optimal dan lebih menarik sebagai berikut:
1. Membuat aplikasi digital poster terintegrasi dengan sistem yang telah ada di Lab.MIC – ITB.
Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)
Edisi. .. Volume. .., Bulan 20.. ISSN : 2089-9033PEMBANGUNAN DIGITAL POSTER DENGAN TEKNOLOGI
MULTITOUCH (STUDI KASUS DI LABORATORIUM MIC-INSTITUT
TEKNOLOGI BANDUNG)
Rizki Fauzian
Teknik Informatika – Universitas Komputer Indonesia Jl. Dipatiukur 112-114 Bandung
E-mail : rizkifauzian@gmail.com
ABSTRAK
Poster dapat dideskripsikan sebagai bentuk publikasi dua dimensional, satu muka, menyajikan informasi berupa data, jadwal dan penawaran atau untuk mempromosikan sesuatu, tempat, produk, jasa, perusahaan atau organisasi. Pada saat ini poster yang ada mempunyai kelemahan yaitu informasi yang disampaikan bersifat tunggal atau poster hanya memuat satu informasi dan kurang memiliki daya tarik pengunjung untuk membacanya karena informasi yang disajikan bersifat statis, serta keterbatasan terhadap ruangan penyimpanan poster sehingga ruang pameran Laboratoium MIC ITB terlihat tidak tertata dengan rapi. Melihat hal tersebut maka digital poster dengan teknologi multitouch adalah solusi untuk menggantikan poster yang ada agar informasi yang disampaikan lebih bervariasi, mempunyai daya tarik lebih tinggi
dibanding poster konvensional, serta dapat
meminimalisir penggunaan ruangan dalam
penyimpanan poster. Digital poster adalah sebuah media baru dalam penyampaian informasi yang memungkinkan penyampaian informasi dengan cara yang interaktif serta tidak terbatas pada ukuran poster sebenarnya. Digital Poster terdiri dari kumpulan poster berupa gambar, teks dan video yang diintegrasikan dengan teknologi multitouch. Digital poster terdiri dari dua aplikasi yaitu aplikasi digital poster (front end) dan aplikasi pengolah digital poster (back end). Aplikasi digital poster
(front-end) terpasang pada perangkat keras
multitouch. Pembangunan aplikasi digital poster menggunakan bahasa action script 3, sedangkan
aplikasi pengolah digital poster (back-end)
menggunakan bahasa c#. Metode yang digunakan adalah pemodelan berorientasi objek dan alat yang
digunakan adalah UML (Unified Modeling
Language). Pengembangan perangkat lunak pada kedua sistem ini menggunakan metode waterfall. Berdasarkan hasil penelitian yang dilakukan, Aplikasi digital poster dapat memberikan informasi dengan cara yang lebih interaktif, mudah untuk
digunakan, mempunyai tampilan yang menarik, dan dapat meminimalisir penggunaan ruangan dalam hal penyimpanan poster.
Kata kunci : digital,poster, multitouch, media interaktif, pengelola poster.
1. PENDAHULUAN
Poster dapat dideskripsikan sebagai bentuk publikasi dua dimensional, satu muka, menyajikan informasi berupa data, jadwal dan penawaran atau untuk mempromosikan sesuatu, tempat, produk, jasa, perusahaan atau organisasi. Tugas poster adalah menangkap audiens yang tengah bergerak dengan pesan yang disampaikan[1]. Poster harus mampu menyampaikan informasi atau pesan pada audiens yang sedang sibuk, hanya dalam waktu beberapa detik. Karena waktu baca begitu singkat dan dalam situasi sibuk, maka harus memilih salah satu informasi untuk dijadikan elemen kunci, yaitu elemen yang paling dominan dan memiliki daya pikat (eye-catching) paling kuat.
Pada saat ini poster yang ada mempunyai kelemahan yaitu informasi yang disampaikan bersifat tunggal atau poster hanya memuat satu informasi dan kurang memiliki daya tarik pengunjung untuk membacanya karena informasi yang disajikan bersifat statis, serta keterbatasan terhadap ruangan penyimpanan poster sehingga ruang pameran Laboratoium MIC ITB terlihat tidak tertata dengan rapi. Melihat hal tersebut maka digital poster dengan teknologi multitouch adalah solusi untuk menggantikan poster yang ada agar informasi yang disampaikan lebih bervariasi, mempunyai daya tarik lebih tinggi
dibanding poster konvensional, serta dapat
meminimalisir penggunaan ruangan dalam
penyimpanan poster.
Digital poster adalah sebuah media baru dalam
penyampaian informasi yang memungkinkan
multitouch dapat mendeteksi sentuhan lebih dari satu sentuhan pada saat yang bersamaan.
Teknologi Multitouch merupakan suatu perangkat teknik interaksi yang memungkinkan pengguna untuk mengontrol aplikasi grafis dengan beberapa jari[2]. Perangkat multitouch terdiri dari layar sentuh (misalnya: display screen, komputer, meja, dinding) atau touchpad, serta perangkat lunak yang mengenali titik sentuh secara simultan, yang bertentangan dengan standar layar sentuh (misalnya touchpad komputer), yang hanya mengenali satu titik sentuh. Teknik pengembangan multitouch berbasis optik
digunakan dalam membuat perangkat keras
pendukung aplikasi poster menggunakan metode Laser Light Plane (LLP). Pada metode Laser Light Plane (LLP), berkas sinar inframerah digunakan di atas layar dan diarahkan sejajar dengan permukaan layar multi-touch. Sentuhan jari pada layar akan memantulkan berkas sinar inframerah tersebut ke belakang layar dan akhirnya akan ditangkap oleh kamera.
Institut Teknologi Bandung mempunyai beberapa laboratorium penelitian salah satunya adalah Microsoft Innovation Center ITB (MIC ITB). Laboratorium MIC ITB mempunyai ruang pamer yang berisi hasil karya mahasiswa dan poster penelitian.
Berdasarkan hal di atas, di sini penulis tertarik membangun perangkat lunak untuk menampilkan poster digital yang interaktif dengan menggunakan teknologi multitouch.
Sedangkan tujuan yang akan dicapai dalam penelitian ini adalah :
1. Menyediakan layanan informasi berupa digital poster yang interaktif.
2. Menyediakan layanan informasi yang dapat
memfasilitasi banyak konten poster dalam satu perangkat.
2. ISI PENELITIAN
2.1 Poster
Poster dapat dideskripsikan sebagai bentuk publikasi dua dimensional, satu muka, menyajikan informasi berupa data, jadwal dan penawaran atau untuk mempromosikan sesuatu, tempat, produk, jasa, perusahaan atau organisasi. Tugas poster adalah menangkap audiens yang tengah bergerak dengan pesan yang disampaikan[1]. Poster harus mampu menyampaikan informasi atau pesan pada audiens yang sedang sibuk, hanya dalam waktu beberapa detik. Karena waktu baca begitu singkat dan dalam situasi sibuk, maka harus memilih salah satu informasi untuk dijadikan elemen kunci, yaitu elemen yang paling dominan dan memiliki daya
(29,7cm X 42cm) atau bisa juga menggunakan ukuran A2 (42cm X 59,4cm) dan A1 (59,4cm X
84cm) disesuaikan dengan tempat
pengaplikasian poster tersebut.
2. Kombinasi gambar dan tulisan tidak berlebihan,
poster dengan banyak kombinasi gambar dan tulisan dapat menimbulkan efek tidak jelas atau membingungkan terhadap informasi yang ingin disampaikan terhadap pembaca.
3. Tulisan didalam poster harus jelas dan terbaca , tulisan dalam poster itu sangat berguna sekali, karena pokok utama penyampaian pesan atau informasi dari sebuah poster adalah dari tulisan dan gambar. Dengan tulisan yang jelas dan mudah terbaca maka pesan yang hendak disampaikan ke sasaran melalui poster tersebut akan tersampaikan dengan baik.
4. Kombinasi Warna Yang Tepat, poster yang
mempunyai background warna putih (kode warna FFFFFF) dengan gambar dan tulisan yang berwarna abu-abu (kode warna F8F8F8), pasti hasilnya tidak jelas. Berbeda dengan poster yang memiliki background gambar berwarna merah tua (kode warna 66000) dengan kombinasi gambar atau tulisan berwarna kuning menyala (kode warna FFFF00) pasti hasilnya lebih bagus dan menarik.
2.2 Multitouch
Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)
Edisi. .. Volume. .., Bulan 20.. ISSN : 2089-9033 penelitian ini tidak akan berfokus pada teknologidalam hal aplikasi militer, Dapat dilihat bahwa layar sentuh dengan teknologi inframerah, akan menjadi permukaan paling tahan lama, dan juga paling serbaguna. Fleksibilitas ini didapatkan dari dua sistem varian sentuhan inframerah layar. Sistem pertama adalah mirip dengan sistem resistif dimana terdiri dari dua dimensi grid cahaya inframerah. Dalam teknologi ini, LED inframerah (light emitting dioda) yang disusun di sisi berlawanan diatas permuakaan kaca. Dioda memproyeksikan cahaya inframerah ke sensor yang terletak di seberang sensor. Sensor membaca kekuatan pancara sinar inframerah, dan "ketika pengguna membuat kontak dengan layar, sistem mengukur penurunan sinyal output sensor, pengukuran ini memungkinkan sistem untuk menghitung lokasi sentuhan "[3]. Hal ini menunjukan bahwa ketika jari menyentuh layar, pancaran cahaya inframerah terhalang oleh jari pengguna, namun sebagian pancaran cahaya bisa lolos dan melewatkan cahaya terhadap sensor. Sensor mengirim pengukuran cahaya ke sistem, dimana sistem akan menganalisis data dan
mengetahui di mana pengguna menyentuh.
Teknologi ini sudah memiliki kemampuan multi-touch karena pancaran cahaya inframerah tidak pernah sepenuhnya terhalang oleh sentuhan pengguna.
Tipe kedua dari sistem inframerah membutuhkan lebih banyak tempat daripada yang pertama. Sistem ini didasarkan pada refleksi; pancaran cahaya yang dipancarkan dari dalam kaca dan sebagian cahaya keluar melalui lensa sedangkan sebagian lain masuk kembali ke unit. Kamera ditempatkan di dalam kaca dan dikalibrasi dengan standar refleksi sehingga,
“Ketika objek seperti jari menyentuh permukaan,
memancarkan cahaya pada titik kontak,
menyebabkan refleksi di dalam akrilik maka kamera dibawah permukaan menangkap hasil penyebaran dan mengirimkan informasi ke perangkat lunak pengolah gambar, yang dapat membaca beberapa sentuhan secara simultan dan menerjemahkannya ke dalam perintah "[4]. Dalam contoh lain, terhadap layar kaca, memungkinkan untuk menggunakan Lensa tipis yang hanya tahan lama, lebih murah, dan lebih tangguh.
Gambar 1. Transmitter dan Receiver Inframerah layar sentuh tipis
1. Microsoft Surface
Teknologi Surface ini menggunakan beberapa sensor gambar sekitar satu sisi dari permukaan sentuh dan lampu inframerah pada sisi lain. Ketika pengguna menempatkan jarinya di
permukaan, menghalangi sinar inframerah,
maka perangkat akan memproyeksikan
bayangan. Perangkat lunak ini dapat mendeteksi dan membedakan berbagai jenis sentuhan. Surface mengkategorikan sentuhan menjadi tiga set: finger, blobs dan object. berbagai aplikasi, seperti ponsel, genggam permainan, perangkat navigasi GPS, dan bahkan beberapa digital kamera [3]. Teknologi layar sentuh Resistif beroperasi dengan cara yang
sangat sederhana. Layar ini dibangun
menggunakan dua lapis bahan konduktif Indium Tin Oxide (ITO), dipisahkan oleh celah udara kecil [3]. Lapisan bawah umumnya adalah kaca dan bagian atas adalah bahan fleksibel, atau seringkali plastik [8].
Gambar 3. Layar Sentuh Resistif
3. Capacitive Touch Screen
Teknologi Multitouch adalah fitur penting dari layar sentuh Capacitive yang mempunyai kemampuan untuk mengenali dan menghitung beberapa titik sentuhan pada satu waktu.
Gambar 4. Layar Sentuh Capacitive
2.3 Interaksi Manusia dan Komputer
Interaksi Manusia dan Komputer adalah suatu ilmu yang berhubungan dengan perancangan, evaluasi dan implementasi sistem komputer interaktif untuk digunakan oleh manusia, serta studi fenomena-fenomena besar yang berhubungan dengannya. Interaksi antara pengguna dan komputer terjadi pada antarmuka pengguna meliputi perangkat lunak dan perangkat keras, misalnya karakter atau objek dari suatu aplikasi ditampilkan oleh perangkat lunak pada monitor[5].
2.4 UML (Unified Modeling Language)
Gambar 5. Use Case Diagram
Bagian-bagian Use Case Diagram:
1. Use Case
Gambar Use Case menggunakan lingkaran
berbentuk bulat telur (oval). Beri nama oval
tersebut dengan kata kerja (verb) yang
menggambarkan fungsi-fungsi sistem.
Gambar 6. Use Case
2. Actors
Actors adalah para pengguna (user) 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 7. Actor
3. Relationship
Relationship adalah sebuah tanda yang
berbentuk garis yang menghubungkan actor dan
use case. Ataupun use case dengan use case
lainnya. Relationship dibagi menjadi dua yaitu:
a. Include
Include Relationship adalah hubungan antara
use case yang dimana jika use case yang satu
dijalankan, yang satunya lagi juga harus dijalankan
. Gambar 8. Include Relationship
b. Extend
Extend Relationship adalah hubungan antara
use case dimana use case tersebut memerlukan
use case lain sebagai syarat agar dapat
melakukan use case selanjutnya.
Gambar 9. Extend Relationship
2. Class Diagram
Relasi di dalam class diagram: a. 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 10. Generalisasi b. Asosiasi
Hubungan statis antar class umumnya
menggambarkan class yang memiliki atribut berupa class lain atau class yang harus mengetahui ekstensi class lain.
Gambar 11. Asosiasi
Activity Diagram mendukung aliran aktivitas
Jurnal Ilmiah Komputer dan Informatika (KOMPUTA)
Edisi. .. Volume. .., Bulan 20.. ISSN : 2089-9033Gambar 13. Activity Diagram
1. Oval merepresentasikan aktivitas.
2. Diamond merepresentasikan pilihan.
3. Fork merepresentasikan awal dan akhir dari kerja yang dilakukan bersamaan.
4. Black Round merepresentasikan awal
dari aliran kerja.
5. Black Round with Circle
merepresentasikan akhir dari aliran kerja.
2.5 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 :
1. 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.
2. Detection Event (CCTV)
Dengan mengimplementasikan teknologi computer
vision, sistem CCTV dapat mendeteksi dan
melakukan tindakan selanjutnya (seperti merekam gambar) secara otomatis.
3. Interaction
Penerapan computer vision yang memungkinkan
interaksi pengguna dengan sistem membuat sebuah petunjuk lokasi, pemainan akan menjadi lebih menarik.
2.6 Image Processing
Image Processing adalah manipulasi dan analisi
suatu informasi gambar. Gambar yang dimaksud disini adalah gambar visual dalam dua dimensi. Konsep dasar dari sistem image processing diambil dari kemampuan indera penglihatan manusia yang selanjutnya dihubungkan dengan kemampuan otak manusia. Image Processing dalam sejarahnya telah diaplikasikan dalam berbagai cabang ilmu. Image Processing menyangkut pula berbagai gabungan cabang-cabang ilmu, seperti diantaranya optik, elektronik, matematika, fotografi dan teknologi komputer. Dalam bidang ilmu komputer, image processing merupakan salah satu bagian pemrosesan data berupa gambar, baik gambar foto maupun gambar bergerak (video).
2.7 Citra Digital
Citra Digital adalah citra yang dibaca, disimpan dalam komputer. Citra digital tersusun dalam bentuk raster (grid atau kisi). Setiap kotak yang terbentuk disebut pixel (picture element) dan memiliki koordinat (x,y). Setiap pixel tersebut akan memiliki nilai (value atau number) yang merepresentasikan intensitas kecerahan satu warna pada pixel tersebut. Pada dasarnya pengolahan citra digital dapat dibagi menjadi tiga bagian utama yaitu:
1. Contact Extraction
Gambar 14. Alur Diagram dari Contact Extraction
2. Contact Tracking
Gambar 15. Perbandingan kontak atau titik terdeteksi
3. Coordinate Transformation
2.8 Perangkat Keras Multitouch
1. 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 16. Sumber Cahaya Infra Merah 2. Kamera Infra Merah
Webcam sederhana bekerja sangat baik untuk
pembuatan multitouch, tetapi perlu dimodifikasi dengan membuka filter infra merah yang terdapat pada lensa kamera.
Gambar 17. Kamera Infra Merah 3. Permukaan Sentuhan
Permukaan Sentuhan bisa berbahan dasar kaca atau
acrylic yang telah dilapis oleh film untuk area
