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. Kata kunci :pointer laser, kamera web, klik, interaktif

(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

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

32.Gambar 3.5 Tampilan Flash pada Frame 2...20

33.Gambar 3.6 Tampilan Flash pada Frame 3...22

34.Gambar 3.7 Tampilan Flash pada Frame 4...23

35.Gambar 3.8 Tampilan Flash pada Frame 5...24

36.Gambar 3.9 Tampilan Flash pada Frame 6...25

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

(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

End Sub

Private Sub Command1_Click() ShockwaveFlash1.Rewind

ShockwaveFlash1.Visible = True End Sub

Private Sub Command2_Click() ShockwaveFlash1.Visible = False End Sub

Private Sub Form_Activate()

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) grey = r

If (grey = 255 And t < tinggi And l < lebar) Then Text1.Text = t

Text2.Text = l Form1.Refresh

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

ElseIf t > 20 And t < 70 And l > 10 And l < 60 Then ShockwaveFlash1.GotoFrame (0)

End If

ElseIf ShockwaveFlash1.FrameNum = 2 Then

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

ElseIf t > 165 And t < 205 And l > 30 And l < 80 Then ShockwaveFlash1.Back

ElseIf t > 20 And t < 70 And l > 10 And l < 60 Then ShockwaveFlash1.GotoFrame (0)

End If

ElseIf ShockwaveFlash1.FrameNum = 3 Then

(9)

A-3 ShockwaveFlash1.Back

ElseIf t > 20 And t < 70 And l > 10 And l < 60 Then ShockwaveFlash1.GotoFrame (0)

End If

ElseIf ShockwaveFlash1.FrameNum = 4 Then

If t > 10 And t < 40 And l > 230 And l < 280 Then ShockwaveFlash1.GotoFrame (5)

ElseIf t > 20 And t < 70 And l > 10 And l < 60 Then ShockwaveFlash1.GotoFrame (0)

End If

ElseIf ShockwaveFlash1.FrameNum = 5 Then

If t > 10 And t < 40 And l > 230 And l < 280 Then ShockwaveFlash1.GotoFrame (4)

ElseIf t > 20 And t < 70 And l > 10 And l < 60 Then ShockwaveFlash1.GotoFrame (0)

End If End If End If Next l Next t

Clipboard.Clear End Sub

(10)

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 pendeteksian posisi sinar inframerah sebagai operator kursor mouse?

(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, pembatasan masalah, dan sistematika penulisan pada Tugas Akhir ini.

(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 juga saran dari penulis.

(13)

Universitas Kristen Maranatha

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 dengan baik jika kamera dan dinding berada pada jarak yang jauh.

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

Universitas Kristen Maranatha

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 9. http://www.ehow.com/info_8067825_parts-laser-pointers.html