LAPORAN PENELITIAN

PENGEMBANGAN TUTORIAL INTERAKTIF PENGOLAHAN CITRA DIGITAL BERBASIS WEB

Oleh: SETYO NUGROHO, ST, MKOM

DANA BERASAL DARI ANGGARAN DIPA KOPERTIS WILAYAH XI TAHUN 2005

JURUSAN TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER STMIK BALIKPAPAN NOPEMBER 2005

RINGKASAN Judul : PENGEMBANGAN TUTORIAL INTERAKTIF PENGOLAHAN CITRA DIGITAL BERBASIS WEB Penulis : Setyo Nugroho

Pemakaian komputer dan internet sebagai alat bantu dalam bidang pendidikan semakin banyak dirasakan manfaatnya. Dalam penyampaian materi pelajaran, penggunaan komputer memiliki beberapa kelebihan seperti: dapat menampilkan teks, gambar, maupun animasi, bersifat interaktif, dan dapat digunakan sewaktu-waktu tanpa tergantung oleh kehadiran pengajar. Sedangkan penggunaan internet memiliki kelebihan dalam hal dapat diakses kapan pun dan di manapun tanpa tergantung waktu dan tempat, asalkan tersedia komputer dan koneksi ke internet. Pada penelitian ini itu kami mencoba membuat suatu program berbasis web yang dapat memberikan tutorial pengolahan citra digital secara interaktif. Program ini diharapkan dapat melengkapi materi pelajaran yang sudah ada sebelumnya baik yang diperoleh dari buku maupun yang disampaikan di kelas. Dengan program ini mahasiswa dapat melakukan uji coba pada contoh-contoh yang tersedia di halaman web sehingga diharapkan dapat memperoleh pemahaman yang lebih jelas terhadap materi yang diberikan. Untuk dapat mengakses program tutorial ini, pengguna cukup menggunakan web browser yang telah mendukung Java applet. Dengan teknologi Java applet dan Java Virtual Machine, program tutorial ini dapat langsung dieksekusi secara otomatis di dalam web browser pada saat pengguna membuka halaman web tersebut. Sebagai langkah awal, penelitian ini difokuskan pada pembelajaran dengan materi pemrosesan kontras dan kecerahan citra. Hasil dari tutorial yang telah kami buat dapat diakses secara langsung melalui internet di alamat http://sn.or.id/javapcd/javapcd.htm atau dapat juga didownload kemudian dijalankan di komputer lokal. Hasil penelitian menunjukkan bahwa teknologi Java applet dapat dimanfaatkan untuk membangun tutorial interaktif berbasis web mengenai pengolahan citra digital. Tutorial interaktif ini dapat membantu mempermudah mahasiswa untuk memahami konsep dan teori pengolahan citra digital tanpa harus membuat program dan melakukan kompilasi program sendiri. Dengan tutorial yang berbasis web, pengguna juga dapat mengakses tutorial ini dari mana saja dan kapan saja selama tersedia koneksi internet dan browser internet yang mendukung.

i

SUMMARY Title : DEVELOPMENT OF INTERACTIVE WEB-BASED TUTORIAL FOR DIGITAL IMAGE PROCESSING Author : Setyo Nugroho

The use of computers and internet as additional and alternative media in education is more widely applied and believed to give many benefits. In delivering lesson topics, the use of computers have some advantages such as: able to display text, graphics, sound, and animations, interactive, and could be use any time even though when the teacher or the lecturer is not present. Furthermore, the use of internets gives advantage such as could be used any time and any where by students, as long as computers and internet connection are available. In this research, we tried to develop a web-based application that provide interactive tutorial in the field of digital image processing. This program is expected to complement other existing lesson materials form books and tutorials delivered by lecturer in the classroom. Through this program, students could do experiments by using examples provided in the web pages, so it is expected that the students will understand more clearly the lesson he have got from books or in the classroom. To access this tutorial, the students will only have to use web browser that supports Java applet. Using Java applet technology and Java Virtual Machine, this tutorial program will be executed directly in the web browser when users open the web page contain the tutorial. As the first step, this research is focused on lesson topic in contrast and brightness of digital images. The tutorial we have developed could be directly accessed via internet at http://sn.or.id/javapcd/javapcd.htm or downloaded to be run locally. The results show that Java applet technology could be used to develop interactive web-based tutorial on digital image processing. This interactive tutorial could help students understand theory and concepts of digital image processing better without developing and compiling programs by themselves. By web based tutorial, students also have access to the tutorial any where and at any time as long as internet connection and Java-enabled web browser are available.

ii

PRAKATA Segala puji syukur kami panjatkan ke hadirat Allah swt sehingga kami dapat menyelesaikan laporan penelitian kami yang berjudul PENGEMBANGAN TUTORIAL INTERAKTIF PENGOLAHAN CITRA DIGITAL BERBASIS WEB. Program hasil penelitian kami telah kami publikasikan secara terbuka melalui internet dan dapat diakses di alamat http://sn.or.id/javapcd/javapcd.htm . Pada kesempatan ini kami ingin menyampaikan ucapan terima kasih kepada Bp Drs. Satria Dharma sebagai Ketua STMIK Balikpapan dan Bp Ridwansyah Heman, SKom sebagai Pembantu Ketua Bidang Akademik yang telah memberikan dukungan penuh kepada kami untuk terus mengembangkan diri dan melaksanakan penelitian ini. Kami juga berterima kasih kepada rekan-rekan dosen dan karyawan STMIK Balikpapan atas bantuan dan kerjasamanya selama ini. Terima kasih juga untuk para mahasiswa yang telah menjadi sumber inspirasi sehingga kami memilih topik penelitian ini. Dari penelitian ini, kami berharap hasilnya dapat memberikan kontribusi untuk pengembangan ilmu pengetahuan dan teknologi. Kami juga berharap hasil penelitian kami dapat berperan dalam penyebarluasan ilmu pengetahuan, khususnya di bidang informatika. Bagi para pembaca yang ingin memberikan saran dan kritik yang membangun, kami akan menerimanya dengan senang hati.

Balikpapan, Nopember 2005

Setyo Nugroho, ST, MKom

iii

DAFTAR ISI

LEMBAR IDENTITAS DAN PENGESAHAN ................................................................. i RINGKASAN ..................................................................................................................... ii SUMMARY .......................................................................................................................iii PRAKATA ......................................................................................................................... iv DAFTAR ISI ....................................................................................................................... v I. PENDAHULUAN............................................................................................................ 1 II. TINJAUAN PUSTAKA ................................................................................................. 2 III. TUJUAN DAN MANFAAT PENELITIAN ................................................................. 7 IV. METODE PENELITIAN .............................................................................................. 7 V. HASIL DAN PEMBAHASAN .................................................................................... 11 VI. KESIMPULAN DAN SARAN ................................................................................... 13 DAFTAR PUSTAKA ........................................................................................................ 14

iv

I. PENDAHULUAN

Pemakaian komputer dan internet sebagai alat bantu dalam bidang pendidikan semakin banyak diterapkan dan dirasakan manfaatnya. Dalam penyampaian materi pelajaran, penggunaan komputer memiliki beberapa kelebihan seperti: dapat menampilkan teks, gambar, maupun animasi, bersifat interaktif, dan dapat digunakan sewaktu-waktu tanpa tergantung oleh kehadiran pengajar. Sedangkan penggunaan internet memiliki kelebihan dalam hal dapat diakses kapan pun dan di manapun tanpa tergantung waktu dan tempat, asalkan tersedia komputer dan koneksi ke internet. Pengolahan citra digital adalah salah satu mata kuliah yang diberikan di jurusan teknik informatika. Materi yang diberikan pada mata kuliah ini banyak berisi teori dan contoh penerapan algortima untuk mengolah citra digital. Contoh-contoh yang tersedia di buku-buku teks yang digunakan selama ini memiliki keterbatasan, yaitu tidak bisa dipraktekkan secara langsung dan interaktif dengan memberikan jenis masukan citra maupun parameter perubahan yang berbeda. Ada juga buku teks yang menyediakan contoh source program, namun untuk dapat menjalankan program tersebut, mahasiswa harus menyiapkan dan menginstalasi developer tools atau compiler bahasa program yang sesuai, kemudian melakukan kompilasi program, dan selanjutnya mengeksekusi program tersebut untuk melihat hasilnya. Untuk itu kami mencoba membuat suatu program berbasis web yang dapat memberikan tutorial pengolahan citra digital secara interaktif. Program ini diharapkan dapat melengkapi materi pelajaran yang sudah ada sebelumnya baik yang diperoleh dari buku maupun yang disampaikan di kelas. Dengan program ini mahasiswa atau pengguna dapat melakukan uji coba pada contoh-contoh yang tersedia di halaman web sehingga diharapkan dapat memperoleh pemahaman yang lebih jelas terhadap materi yang diberikan. Untuk dapat mengakses program tutorial ini, pengguna cukup menggunakan web browser yang telah mendukung Java applet. Mahasiswa tidak perlu melakukan instalasi software compiler, melakukan kompilasi program, dan mengeksekusi program seperti biasanya. Dengan teknologi Java applet dan Java Virtual Machine, program tutorial ini dapat langsung dieksekusi secara otomatis di dalam web browser pada saat pengguna membuka halaman web tersebut. Sebagai langkah awal, penelitian ini difokuskan pada pembelajaran dengan materi pemrosesan kontras dan kecerahan citra.

1

II. TINJAUAN PUSTAKA

HTML Salah satu protokol yang banyak digunakan di internet adalah HTTP (hypertext transer protocol). HTTP adalah protokol yang digunakan untuk mentransfer data atau dokumen antara web server dengan web browser (Internet Explorer, Firefox, Netscape, Opera, dll). Protokol ini melakukan transfer dokumen yang ditulis dengan menggunakan format standar yang disebut dengan HTML (hypertext markup language). Kemampuan yang disediakan oleh HTML antara lain: Mengontrol tampilan dari web page dan isinya. Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia. Membuat form online yang bisa di gunakan untuk menangani input dan transaksi secara online. Menambahkan objek-objek seperti image, audio, video dan juga java applet dalam document HTML.

TEKNOLOGI JAVA Java adalah bahasa pemrograman yang dibuat oleh SUN Microsystems. Java merupakan bahasa pemrograman tingkat tinggi yang memiliki berbagai kelebihan antara lain sebagai berikut: berorientasi objek, portabel, netral terhadap arsitektur, memiliki fasilitas keamanan yang tinggi, dan mendukung multithreaded. Dalam pemrograman Java, program yang ditulis akan dikompilasi sehingga menghasilkan Java bytecode, yaitu kode yang bersifat bebas-platform dan siap dijalankan oleh interpreter yang tersedia. Interpreter ini disebut juga Java Virtual Machine (Java VM). Kompilasi program Java hanya perlu dilakukan sekali saja, sedangkan interpretasi akan dilakukan setiap kali program dieksekusi. Java bytecode dapat dipandang sebagai kumpulan instruksi-instruksi kode mesin untuk dijalankan oleh mesin virtual Java (Java VM). Java bytecode memungkinkan apa yang disebut dengan istilah write once, run anywhere. Artinya, program Java hanya perlu dikompilasi sekali menjadi bytecode, kemudian bytecode tersebut dapat dijalankan di komputer dengan sistem operasi apapun (Windows, UNIX, Linux, MacOS, dan lain-lain ) asalkan sudah dilakukan instalasi JVM di dalam komputer tersebut. Gambar di bawah ini menggambarkan sifat multiplatform dari suatu program yang ditulis dengan bahasa Java. 2

Program JavaClass Coba { public static void main(String[] args) { System.out.println(Coba); } }

Compiler

Interpreter

Interpreter

Interpreter

Win32

Linux

MacOS

Gambar 1. Sifat multiplatform program Java

JAVA PLATFORM Platform adalah lingkungan perangkat keras atau perangkat lunak di mana suatu program dapat dijalankan. Beberapa contoh platform yang banyak digunakan saat ini adalah Windows, Linux, Solaris, dan MacOS. Pada umumnya platform-platform tersebut di atas adalah merupakan kombinasi antara sistem operasi dengan perangkat keras tertentu, misalnya Windows/Linux pada arsitektur Intel 386. Java platform adalah platform yang hanya terdiri dari perangkat lunak dan berjalan di atas platform-platform lain yang berbasis perangkat keras. Java platform memiliki dua komponen, yaitu Java Virtual Machine (Java VM) dan Java Application Programming Interface (Java API). Java VM merupakan mesin virtual yang dapat menjalankan program-program Java dalam bentuk bytecode. Sedangkan Java API adalah sekumpulan komponen perangkat lunak yang menyediakan berbagai kemampuan, termasuk sarana antar muka grafis (graphical user interface). Java API dikelompokkan menjadi paket-paket (package) yang berisi class-class dan interface-interface yang berkaitan. Di antara jenis-jenis program yang dapat ditulis dengan bahasa Java adalah applet dan application. Java applet adalah program Java khusus yang dapat dijalankan pada web browser yang mendukung Java VM. Dengan adanya Java applet dimungkinkan untuk membangun aplikasi berbasis web yang lebih interaktif. Untuk menjamin keamanan data pada komputer, Java applet memiliki batasan-batasan tertentu yang berbeda dengan 3

program Java yang lain. Sebagai contoh, Java applet tidak dapat melakukan operasi baca tulis pada file yang berada di dalam komputer yang sedang mengeksekusinya.

JAVA APPLET Di antara jenis-jenis program yang dapat dihasilkan dengan bahasa Java adalah applet, application, dan servlet. Java applet adalah program Java khusus yang dapat dijalankan pada web browser yang mendukung JVM. Dengan adanya Java applet dimungkinkan untuk membangun aplikasi berbasis web yang lebih interaktif. Untuk menjamin keamanan data pada komputer, Java applet memiliki batasan-batasan tertentu yang berbeda dengan program Java yang lain. Sebagai contoh, Java applet tidak dapat melakukan operasi baca tulis pada file yang berada di dalam komputer yang sedang mengeksekusinya. Adapun Java application adalah program yang berdiri sendiri (standalone) dan dapat langsung dijalankan pada platform Java. Sedangkan Java servlet adalah aplikasi yang dapat dijalankan pada web server yang dapat digunakan untuk membangun aplikasi web interaktif pada sisi server.

CITRA DIGITAL DAN CONTRAST STRETCHING Citra didefinisikan sebagai fungsi intensitas cahaya dua-dimensi f(x,y) dimana x dan y menunjukkan koordinat spasial, dan nilai f pada suatu titik (x,y) sebanding dengan kecerahan (brightness) yang biasanya dinyatakan dalam tingkatan abu-abu (gray-level) dari citra di titik tersebut. Citra digital adalah citra dengan f(x,y) yang nilainya didigitalisasi-kan (dibuat diskrit) baik dalam koordinat spasialnya maupun dalam gray-levelnya. Digitalisasi dari koordinat spasial citra disebut dengan image sampling, sedangkan digitalisasi dari gray-level citra disebut dengan gray-level quantization. Citra digital dapat dibayangkan sebagai suatu matriks dimana baris dan kolomnya menunjukkan suatu titik di dalam citra, dan nilai elemen matriks tersebut menunjukkan gray level di titik tersebut. Elemen-elemen dari citra digital tersebut biasanya disebut dengan pixel, yang merupakan singkatan dari picture elements. Tujuan pengolahan citra digital adalah untuk mendapatkan citra baru yang lebih sesuai untuk digunakan dalam aplikasi tertentu. Salah satu jenis pengolahan citra adalah yang disebut dengan contrast stretching. Contrast stretching ini adalah teknik yang digunakan untuk mendapatkan citra baru dengan kontras yang lebih baik daripada kontras dari citra asalnya. Citra yang memiliki kontras rendah dapat terjadi karena kurangnya pencahayaan, kurangnya bidang dinamika dari sensor citra, atau kesalahan setting 4

pembuka lensa pada saat pengambilan citra. Ide dari proses contrast stretching adalah untuk meningkatkan bidang dinamika dari gray level di dalam citra yang akan diproses. Proses contrast stretching termasuk proses perbaikan citra yang bersifat point processing, yang artinya proses ini hanya tergantung dari nilai intensitas (gray-level) dari satu pixel, tidak tergantung dari pixel lain yang ada di sekitarnya.

255 d2

d

d1 0 c1 c2 255

c Gambar 2. Transformasi Nilai Intensitas Pixel pada Contrast Stretching

Gambar 2 menunjukkan salah satu bentuk transformasi yang dapat digunakan untuk contrast stretching. Disini diasumsikan bahwa citra memiliki range gray level dari 0 sampai 255. Pada gambar tersebut, c adalah gray-level dari citra sebelum diproses dan d adalah gray-level dari citra setelah diproses. Titik (c1,d1) dan titik (c2,d2) akan menentukan bentuk dari fungsi transformasi, dan dapat diatur untuk menentukan tingkat penyebaran gray-level dari citra yang dihasilkan. Jika c1=c2 dan d1=d2 maka transformasi akan berbentuk garis lurus yang berarti tidak ada perubahan gray level pada citra yang dihasilkan. Secara umum diasumsikan c1 8) & 0xff; cB = (color) & 0xff; color = pixels[py*imgw + px]; cR2 = (color >> 16) & 0xff; cG2 = (color >> 8) & 0xff; cB2 = (color) & 0xff; lblColor.setText("x,y=(" + px + "," + py + "). RGB=(" + cR + "," + cG + "," + cB + ") / (" + cR2 + "," + cG2 + "," + cB2 + ")" ); return; } if (blMouseInHistogram) { lblHistogram.setText("Level " + px + ": " + arHistogram[px] + " / " + arHistogram2[px]); return; } return; } //========================================== =================================== //========================================== =================================== void BukaCitra() { image = getImage(getDocumentBase(), strImgFileName); System.out.println("BukaCitra"); showStatus("Sedang membuka file citra..."); do { imgw = image.getWidth(this); } while (imgw==-1); do { imgh = image.getHeight(this); } while (imgh==-1); showStatus("width=" + imgw + " , height=" + imgh); pixels_asal = new int[imgw*imgh]; pixels = new int[imgw*imgh]; PixelGrabber pg = new PixelGrabber(image, 0, 0, imgw, imgh, pixels_asal, 0, imgw); try { pg.grabPixels(); } catch (InterruptedException e) { System.err.println("interrupted waiting for pixels!"); return; } for (int i=0; i> 8) & 0xff; } int getB(int color) { return (color) & 0xff; } void setBrightness(int add) { int ix,iy; int clr; int r,g,b; for (ix=0; ix maxhistR) maxhistR = i; }

3

} for (int i=0; i 0) { if (i < minhistG) minhistG = i; if (i > maxhistG) maxhistG = i; } } for (int i=0; i 0) { if (i < minhistB) minhistB = i; if (i > maxhistB) maxhistB = i; } } // contrast stretching int c1, c2, d1, d2; int c1R, c2R, d1R, d2R; int c1G, c2G, d1G, d2G; int c1B, c2B, d1B, d2B; c1 = minhist; c2 = maxhist; c1R = minhistR; c2R = maxhistR; c1G = minhistG; c2G = maxhistG; c1B = minhistB; c2B = maxhistB; //if contrast is set to 255 (maximum), then d1=0 , d2=255 if (add > 0) { d1 = (int) (minhist - ((float)add / 255 * minhist)); d2 = (int) (maxhist + ((float)add / 255 * (255-maxhist))); d1R = (int) (minhistR - ((float)add / 255 * minhistR)); d2R = (int) (maxhistR + ((float)add / 255 * (255-maxhistR))); d1G = (int) (minhistG - ((float)add / 255 * minhistG)); d2G = (int) (maxhistG + ((float)add / 255 * (255-maxhistG))); d1B = (int) (minhistB - ((float)add / 255 * minhistB)); d2B = (int) (maxhistB + ((float)add / 255 * (255-maxhistB))); } else { int histwidth = maxhist - minhist; d1 = (int) (minhist - ((float)add / 255 * ((float)histwidth/2))); d2 = (int) (maxhist + ((float)add / 255 * ((float)histwidth/2))); int histwidthR = maxhistR minhistR; d1R = (int) (minhistR - ((float)add / 255 * ((float)histwidthR/2))); d2R = (int) (maxhistR + ((float)add / 255 * ((float)histwidthR/2))); int histwidthG = maxhistG minhistG; d1G = (int) (minhistG - ((float)add / 255 * ((float)histwidthG/2))); d2G = (int) (maxhistG + ((float)add / 255 * ((float)histwidthG/2))); int histwidthB = maxhistB - minhistB; d1B = (int) (minhistB - ((float)add / 255 * ((float)histwidthB/2))); d2B = (int) (maxhistB + ((float)add / 255 * ((float)histwidthB/2))); } //System.out.println("d1,d2="+d1+","+d2); int color,R,G,B; int newR, newG, newB; for (int i=0; i> 16) & 0xff; G = (color >> 8) & 0xff;

B = (color) & 0xff; // komponen R c1=c1R; c2=c2R; d1=d1R; d2=d2R; if (R < c1 ) // zone 1 newR = (int)( (float) R * d1 / c1 ); else if (R < c2) // zone 2 newR = d1 + (int)( (float)(R-c1) * (d2-d1) / (c2-c1) ); else // zone 3 newR = d2 + (int)( (float)(R-c2) * (255-d2) / (255-c2) ); // komponen G c1=c1G; c2=c2G; d1=d1G; d2=d2G; if (G < c1 ) // zone 1 newG = (int)( (float) G * d1 / c1 ); else if (G < c2) // zone 2 newG = d1 + (int)( (float)(G-c1) * (d2-d1) / (c2-c1) ); else // zone 3 newG = d2 + (int)( (float)(G-c2) * (255-d2) / (255-c2) ); // komponen B c1=c1B; c2=c2B; d1=d1B; d2=d2B; if (B < c1 ) // zone 1 newB = (int)( (float) B * d1 / c1 ); else if (B < c2) // zone 2 newB = d1 + (int)( (float)(B-c1) * (d2-d1) / (c2-c1) ); else // zone 3 newB = d2 + (int)( (float)(B-c2) * (255-d2) / (255-c2) ); pixels[i] = 0xff000000 | (newR 8) & 0xff; b = (color) & 0xff; gray = (int)((r+g+b) / 3); arHistogram[gray]++; arHistogramR[r]++; arHistogramG[g]++; arHistogramB[b]++; } maxh = 0; for (i=0; i 8) & 0xff; b = (color) & 0xff; gray = (int)((r+g+b) / 3); arHistogram2[gray]++; } maxh = 0; for (i=0; i