Perancangan dan Realisasi Dinding Presentasi Interaktif Dengan Pendeteksian Posisi Sinar Pointer Laser Sebagai Operator Kursor Mouse.

(1)

i Universitas Kristen Maranatha

PERANCANGAN DAN REALISASI DINDING PRESENTASI

INTERAKTIF DENGAN PENDETEKSIAN POSISI SINAR

POINTER LASER SEBAGAI OPERATOR KURSOR MOUSE

Naftali Inafiar Yonida 0822077

Email : naph_yon@yahoo.com

Jurusan Teknik Elektro, Fakultas Teknik Universitas Kristen Maranatha

Jl. Prof. Drg. Suria Sumantri 65, Bandung 40164, Indonesia

ABSTRAK

Saat melakukan presentasi, pembicara sering kali mengalami kesulitan untuk

berinteraksi langsung dengan tampilan presentasinya. Oleh karena itu, alat bantu

presentasi seperti wireless mouse sering digunakan. Namun wireless mouse memiliki

kelemahan karena jog yang digunakan terasa sulit dan pergerakkannya lambat, selain

itu harganya yang tidak murah. Sedangkan pointer laser memiliki keunggulan harga

yang murah, mudah diperoleh, dan mudah digerakkan.

Pada Tugas Akhir ini dirancang dan direalisasikan sebuah dinding presentasi

interaktif dengan pendeteksian posisi sinar pointer laser sebagai operator kursor

mouse. Posisi sinar pointer laser pada suatu koordinat tombol pada tampilan

menandakan operator klik.

Realisasi dalam Tugas Akhir ini menggunakan kamera web sebagai sensor

untuk menangkap gambar, pointer laser sebagai masukan untuk operator kursor

mouse, dan komputer untuk mengolah gambar. Gambar diolah menggunakan Visual

Basic dan tampilan presentasi dibuat dengan menggunakan Flash.

Pengujian dinding presentasi interaktif dilakukan pada tiga jarak yang berbeda

(1.5 m, 1.75 m, dan 2 m) antara kamera dan dinding serta enam warna latar tampilan

yang berbeda (putih, kuning, merah, hijau, biru, hitam) serta pada intensitas cahaya

ruangan lebih kecil dari 100 lux. Lalu diperoleh kesimpulan untuk menghasilkan

tingkat keberhasilan tertinggi dapat diperoleh dengan mengatur jarak kamera dan

dinding sejauh 1.5 meter dan menggunakan warna latar tampilan Flash berwarna biru.

(2)

ii Universitas Kristen Maranatha

THE DESIGNING AND REALIZATION OF INTERACTIVE

PRESENTATION WALL BY DETECTING LASER POINTER

BEAM POSITION AS A MOUSE CURSOR OPERATOR

Naftali Inafiar Yonida 0822077

Email : naph_yon@yahoo.com

Department of Electrical Engineering, Faculty of Engineering Maranatha Christian University

Jl. Prof. Drg. Suria Sumantri 65, Bandung 40164, Indonesia

ABSTRACT

During the presentation, speaker often has difficulty to interact directly with the

appearance of the presentation. Hence, presentation tools such a wireless mouse is

often used. But a wireless mouse have weaknesses because jog used feels difficult

and slow, beside the price is not cheap. While laser pointer has the advantages of low

prices, it’s easy to get, and easily driven.

At the Final Project was designed and realized a interactive presentation wall

by detecting laser pointer beam position as a mouse cursor operator. The position of

laser pointer beam at button’s coordinate signifying operator click.

The realization in this final project using a web camera as sensor to capture,

laser pointer as input to be a mouse cursor, and a computer manipulate images. The

images were processed using Visual Basic and display presentation created using

Flash.

Testing interactive presentation wall performed on three different distance (1.5

m, 1.75 m, and 2 m) between camera and walls and six different colors background

display (white, yellow, red, green, blue, and black) and also on the intensity of light

room less than 100 lux. Then obtained conclusions to produce the highest level of

success can be obtained by adjusting the distance of the camera and the wall as far as

1.5 meters and using blue as background color of the display Flash.

(3)

iii Universitas Kristen Maranatha

DAFTAR ISI

LEMBAR PENGESAHAN

PERNYATAAN ORISINALITAS LAPORAN PENELITIAN

PERNYATAAN PUBLIKASI LAPORAN KERJA PRAKTEK

KATA PENGANTAR

ABSTRAK ...i

ABSTRACT ...ii

DAFTAR ISI...iii

DAFTAR TABEL ...v

DAFTAR GAMBAR...vi

1. BAB I PENDAHULUAN ...1

1.1. Latar Belakang Masalah...1

1.2. Identifikasi Masalah ...2

1.3. Tujuan ...2

1.4. Pembatasan Masalah ...2

1.5. Sistematika Penulisan ...2

2. BAB II LANDASAN TEORI ...4

2.1. Dinding Presentasi Interaktif...4

2.2. Laser...4

2.3. Mouse ...5

2.4. TeoriWarna ...5

2.4.1 Citra Keabuan (Grayscale) dan Citra Hitam Putih...7

2.5. Macromedia Flash 8 ...9

2.6. Dynamic-Link Library...11

2.6.1 User32.dll ...11

2.6.2 Avicap32.dll ...12

2.7. Visual Basic 6.0 dan Macromedia Flash 8...13

(4)

iv Universitas Kristen Maranatha

3. BAB III PERANCANGAN DAN REALISASI...16

3.1. Perancangan Perangkat Keras ...16

3.2. Perancangan Perangkat Lunak ...17

3.2.1 Tampilan Flash...18

3.2.2 Perancangan GUI (Graphical User Interface)...26

3.2.3 Pengambilan Gambar dari Kamera Web ...29

3.2.4 Konversi Citra Asal Menjadi Citra Hitam Putih ...29

3.2.5 Klik Mouse ...32

4. BAB IV DATA PENGAMATAN DAN ANALISIS DATA...35

4.1. Data Pengamatan...39

4.2. Analisis Data ...46

4.3. Pengujian Terhadap Intensitas Cahaya Ruangan ...46

5. BAB V KESIMPULAN DAN SARAN...49

5.1. Kesimpulan ...49

5.2. Saran...49

6. DAFTAR PUSTAKA ...51

(5)

v Universitas Kristen Maranatha

8. DAFTAR TABEL

9.

10.Tabel 3.1 Koordinat Tombol-tombol ...26

11.Tabel 3.2 Komponen dan Properti yang Digunakan pada GUI ...28

12.Tabel 4.1 Hasil Pengujian Pada Jarak 1.5 Meter ...40

13.Tabel 4.2 Hasil Pengujian Pada Jarak 1.75 Meter ...42

14.Tabel 4.3 Hasil Pengujian Pada Jarak 2 Meter ...44

15.Tabel 4.4 Tabel Tingkat Keberhasilan Berdasarkan Jarak Kamera Terhadap Dinding ...46

16.Tabel 4.5 Tabel Tingkat Keberhasilan Berdasarkan Warna Latar ...47

17.Tabel 4.6 Hasil Pengujian Intensitas Cahaya Ruangan...48

18.

(6)

vi Universitas Kristen Maranatha

DAFTAR GAMBAR

20.

21.Gambar 2.1 Dinding Presentasi Interaktif...4

22.Gambar 2.2 Komponen Utama Pointer Laser Merah ...5

23.Gambar 2.3 Spektrum Cahaya ...7

24.Gambar 2.4 Proses Konversi Citra RGB ke Citra Keabuan...8

25.Gambar 2.5 Area Kerja pada Flash ...9

26.Gambar 2.6 Integrasi Flash dan Visual Basic ...14

27.Gambar 2.7 Bagian-bagian Proyektor LCD...15

28.Gambar 3.1 Diagram Blok Perangkat Keras...16

29.Gambar 3.2 Pemasangan Filter Film Kamera Analog Pada Kamera Web...17

30.Gambar 3.3 Diagram Alir Dinding Presentasi Interaktif ...17

31.Gambar 3.4 Tampilan Flash pada Frame 1...19

37.Gambar3.10 Perancangan GUI Proses Setting Posisi Hasil Tangkapan Kamera 26 38.Gambar 3.11 Jendela Components...27

39.Gambar 3.12 Perancangan GUI Setelah Ditambah Flash ...27

40.Gambar 3.13 Diagram Alir Konversi Citra Asal Menjadi Citra Hitam Putih...30

41.Gambar 3.14 Diagram Alir Klik Mouse...32

42.Gambar 4.1 Tampilan Presentasi Flash...37

43.Gambar 4.2 Macam-macam Warna Latar yang Digunakan...39

(7)

A-1 Private Declare Function SendMessage Lib "USER32" Alias "SendMessageA" (ByVal hwnd As Long, ByVal wMsg As Long, ByVal wParam As Long, lParam As Any) As Long

Private Declare Function capCreateCaptureWindow Lib "avicap32.dll" Alias "capCreateCaptureWindowA" (ByVal lpszWindowName As String, ByVal dwStyle As Long, ByVal X As Long, ByVal Y As Long, ByVal nWidth As Long, ByVal nHeight As Long, ByVal hwndParent As Long, ByVal nID As Long) As Long

Private mCapHwnd As Long

Private Const CONNECT As Long = 1034 Private Const DISCONNECT As Long = 1035 Private Const GET_FRAME As Long = 1084 Private Const COPY As Long = 1054

Dim continue As Boolean

Sub STARTCAM()

mCapHwnd = capCreateCaptureWindow("WebcamCapture", 0, 0, 0, 640, 480, Me.hwnd, 0)

DoEvents

SendMessage mCapHwnd, CONNECT, 0, 0 Timer1.Enabled = True

Call ShockwaveFlash1.LoadMovie(0, "E:\Materi Kuliah\Tugas Akhir\Tampilan Flash\PapanPresentasiInteraktif3menu.swf")

Call Timer1_Timer STARTCAM

Picture2.BackColor = RGB(0, 0, 0) End Sub

Private Sub Timer1_Timer()

SendMessage mCapHwnd, GET_FRAME, 0, 0 SendMessage mCapHwnd, COPY, 0, 0 Picture1.Picture = Clipboard.GetData tinggi = Picture1.Height

(8)

A-2 For t = 0 To tinggi Step 5

For l = 0 To lebar Step 5 wrn = Picture1.Point(l, t) r = wrn And RGB(255, 0, 0)

g = Int(wrn And RGB(0, 255, 0) / 256)

b = Int(Int((wrn And RGB(0, 255, 0)) / 256) / 256) grey = (r + g + b) / 3

If (grey > 150) Then grey = 255

Else

grey = 0 End If

Picture2.PSet (l, t), RGB(grey, grey, grey) Next l

Next t

' cek

For t = 0 To tinggi Step 5 For l = 0 To lebar Step 5

wrn = Picture2.Point(l, t) r = wrn And RGB(255, 0, 0)

If ShockwaveFlash1.FrameNum = 0 Then

If t > 90 And t < 115 And l > 40 And l < 120 Then ShockwaveFlash1.GotoFrame (1)

ElseIf t > 155 And t < 190 And l > 40 And l < 120 Then ShockwaveFlash1.GotoFrame (4)

End If

ElseIf ShockwaveFlash1.FrameNum = 1 Then

If t > 165 And t < 205 And l > 220 And l < 275 Then ShockwaveFlash1.Forward

End If

If t > 165 And t < 205 And l > 220 And l < 275 Then

(9)

A-3 ShockwaveFlash1.Back

End If

End If End If End If Next l Next t

Clipboard.Clear

(10)

1

Universitas Kristen Maranatha

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Dalam dunia akademis maupun bisnis, presentasi merupakan hal yang

tidak asing lagi dilakukan. Tujuan dilakukan suatu presentasi agar peserta dapat

memahami hal yang akan disampaikan oleh pembicara. Oleh karena itu penyajian

presentasi dibuat sedemikian rupa agar tampil menarik dan interaktif.

Namun sering kali pembicara memiliki kesulitan untuk berinteraksi

langsung dengan tampilan presentasinya. Biasanya saat pembicara ingin

menjelaskan sesuatu yang ada pada tampilan presentasinya, pembicara akan

menggunakan alat bantu. Alat bantu yang biasa digunakan seperti pointer fisik,

pointer inframerah, atau juga wireless mouse.

Alat bantu seperti wireless mouse sudah mampu membantu pembicara

untuk mengganti halaman tampilan. Namun untuk memilih pilihan tombol yang

lain harus dilakukan dengan menggerakkan jog yang pergerakkannya lambat dan

kadang terasa sulit. Selain itu wireless mouse juga merupakan alat yang harganya

tidak murah.

Pointer laser sudah sering digunakan sebagai alat bantu presentasi, tapi

hanya bekerja sebagai penunjuk secara visual. Padahal pointer laser memiliki

keunggulan harganya yang murah, mudah diperoleh, dan mudah digerakkan. Oleh

karena itu pada Tugas Akhir ini akan dirancang dan direalisasikan pembuatan

dinding presentasi interaktif dengan mendeteksi posisi sinar pointer laser sebagai

operator kursor mouse untuk menekan atau memilih suatu tombol.

1.2 Identifikasi Masalah

Bagaimana merealisasikan dinding presentasi interaktif dengan

(11)

2 Universitas Kristen Maranatha

1.3 Tujuan

Merancang dan merealisasikan dinding presentasi interaktif dengan

pendeteksian posisi sinar inframerah sebagai operator kursor mouse.

1.4 Pembatasan Masalah

Dalam Tugas Akhir ini, pembatasan dibatasi sampai hal-hal berikut, yaitu:

1. Percobaan dilakukan dalam ruangan tertutup dengan intensitas cahaya

yang rendah (lebih kecil dari 100 Lux)

2. Pointer laser yang digunakan adalah pointer laser berwarna merah.

3. Pantulan sinar pointer laser yang dideteksi sebanyak satu buah.

4. Operasi yang dilakukan adalah melakukan operasi klik pada tombol yang

ada pada tampilan.

5. Posisi pantulan sinar pointer laser pada suatu koordinat tertentu

menandakan operasi klik pada tampilan.

6. Kamera yang digunakan adalah kamera web laptop yang memiliki resolusi

1.3 MP

7. Akan dicoba pada tampilan Flash yang memiliki beberapa tombol untuk

dipilih dengan enam warna latar yang berbeda (putih, kuning, merah,

hijau, biru, hitam) dan pada tiga jarak kamera dan dinding yang berbeda

(1.5 meter, 1.75 meter, dan 2 meter).

8. Diasumsikan tidak ada gangguan, seperti orang berjalan atau sebagainya,

yang tertangkap kamera.

9. Program aplikasi diimplementasikan dalam Visual Basic 6.0

1.5 Sistematika Penulisan • Bab I Pendahuluan

Bab ini berisi latar belakang masalah, identifikasi masalah, tujuan,

(12)

3 Universitas Kristen Maranatha • Bab II Landasan Teori

Bab ini berisi penjelasan mengenai dinding presentasi interaktif, laser,

mouse, teori warna, Flash, Dynamic-Link Library, Hubungan Visual Basic

dan Flash, serta proyektor LCD.

• Bab III Perancangan dan Realisasi

Bab ini berisi proses perancangan perangkat keras dan perangkat lunak

mengenai tampilan Flash, perancangan GUI, pengambilan gambar dari

kamera web, konversi citra asal menjadi citra hitam putih, dan proses klik

mouse dari Tugas Akhir ini.

• Bab IV Data Pengamatan dan Analisa

Bab ini berisi data pengamatan pada tiga jarak yang berbeda dengan enam

warna latar yang berlainan dan analisa dari program yang telah dibuat.

• Bab V Penutup

Bab ini berisi mengenai kesimpulan dari pembahasan yang dilakukan dan

(13)

49

BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Kesimpulan yang dapat diambil dalam Tugas Akhir ini adalah sebagai berikut:

1. Dinding presentasi interaktif dengan pendektesian posisi pointer laser

sebagai operator kursor mouse telah direalisasikan dan berhasil

mendeteksi posisi sinar pointer laser untuk melakukan operasi klik

tombol pada tampilan presentasi yang dibuat menggunakan Flash

dengan metode konversi citra asal dari kamera web menjadi citra hitam

putih.

2. Tingkat keberhasilan yang tinggi dapat diperoleh dengan mengatur

jarak kamera dan dinding sebesar 1.5 meter dan menggunakan warna

latar belakang tampilan presentasi dengan menggunakan warna biru

serta dilakukan pada ruangan yang memiliki intensitas cahaya lebih

kecil dari 100 lux.

3. Saat melakukan proses klik tombol terdapat delay pada kisaran 0.29

detik sampai 11.98 detik.

5.2 Saran

Saran-saran yang dapat diberikan untuk memperbaiki dan mengembangkan

Tugas Akhir ini di masa yang akan datang adalah :

1. Dinding presentasi interaktif dapat dikembangkan tidak hanya untuk

tampilan dari Flash saja, tetapi dapat juga untuk Microsoft Power Point

atau lainnya.

2. Dinding presentasi interaktif sebaiknya disempurnakan lagi dengan

proses kalibrasi posisi tampilan pada dinding sehingga dapat bekerja

(14)

50 Universitas Kristen Maranatha

3. Proses pendeteksian posisi pantulan sinar pointer laser juga perlu

disempurnakan lagi agar dapat bekerja dengan baik untuk berbagai

warna latar yang berbeda.

4. Perbaikan waktu proses klik tombol perlu dilakukan agar tidak terjadi

(15)

51

DAFTAR PUSTAKA

1. Fatta, Hanif. 2007.”Konversi Format Citra RGB ke Format Grayscale Menggunaan

Visual Basic”.Seminar Nasional Teknologi 2007.

2. Jugiyanto. 1992.”Pengenalan Komputer : Dasar Ilmu Komputer, Pemrograman, Sistem

Informasi, dan IntelegensiBuatan”. Yogyakarta: Andi Offset.

3. Mindfire Solution. 2003. “Macromedia Flash and VB:A Potent Combination”.

( www.mindfiresolutions.com )

4. Munir, Rinaldi. 2004. ”Pengolahan Citra Digital Dengan Pendekatan Algoritma

Informatika”. Bandung: Penerbit Informatika.

5. Pranowo, Galih. 2011. “Kreasi Animasi Interaktif dengan Actionscript 3.0 pada Flash

CS5”. Yogyakarta: Penerbit Andi.

6. Santi, Candra. 2011.”Mengubah Citra Berwarna Menjadi Gray-Scale dan CitraBiner”.

Jurnal Teknologi Informasi DINAMIK, Vol 16 No 1 : 14-19.

7. http://id.wikipedia.org/wiki/Proyektor_LCD

8. http://msdn.microsoft.com/en-us/library/windows/desktop/ms682589(v=vs.85).aspx