tugas 6-delphi brightness,grayscale

1.1. Menampilkan gambar dan mengolah tingkat kecerahan gambar yang ditampilkan dan ditambahkan dengan membuat gambar tersebut grayscale.

Adapun langkah-langkah untuk menampilkan gambar,mengatur tingkat kecerahan dan dilanjutkan dengan membuat gambar menjadi grayscale dari program yang dibuat dengan menggunakan Aplikasi Delphi 7. Berikut ini adalah langkah-langkah secara lengkapnya :

1. Pertama kita harus membuka Aplikasi Delphi yang telah terinstall dimasing-masing laptop atau PC. Dapat dilihat lebih jelas pada gambar berikut ini :

Gambar 1.1 Memulai Program Delphi 7

2. Setelah itu akan muncul tampilan layar kosong dari program delphi. Dapat dilihat seperti gambar berikut ini :

Gambar 1.2 Tampilan Awal dari aplikasi Delphi

Tampilan Program Delphi

3. Langkah ketiga adalah dengan membuat sebuah form project, untuk menampilkan gambar yang ingin di proses kecerahan warnanya dengan cara klik File New Application. Berikut ini adalah langkah-langkahnya :

Gambar 1.3 Tampilan Proses Pembuatan Form Project Baru

4. Selain itu ada juga toolbox yang membantu untuk membuat program delphi menampilkan gambar dan mengubah tingkat kecerahan gambar. Berikut ini adalah tampilan dari toolboxnya :

Gambar 1.4 Tampilan Tool Box pada Aplikasi Delphi

5. Setelah itu buatlah tampilan untuk user interface agar program lebih menarik. Berikut ini adalah beberapa langkah untuk membuatnya :

a. Membuat group box untuk menempatkan Image View atau tempat box image untuk menempatkan gambar yang ingin ditampilkan. Sekaligus dengan membuat ImageBoxnya letakkan diatas dari group box tersebut. Berikut ini adalah tampilannya :

Gambar 1.5 (a) membuat groupbox

Gambar 1.5 (b) membuat groupbox

Setelah dapat membuat sebuah group box, maka dilajutkan dengan membuat satu buah group box lagi beserta image viewnya. Setelah itu dilajutkan dengan memberikan OpenFileDialog didalam Image View. Sehingga terlihat seperti gambar berikut ini :

Gambar 1.6 Tampilan 2 buah group box beserta image view

b. Dilanjutkan dengan membuatkan Button Click sebanyak 4 button, yang berfungsi untuk Browse Image, Copy Image, Reset, dan Exit. Dengan cara memilih toolbox button klik dan mendragnya ke dalam form yang telah dibuat tadi. Berikut ini adalah tampilannya :

Gambar 1.7 Tampilan Proses Menginputkan Button-buttonnya.

c. Setelah itu dilanjutkan dengan membuat, progress bar dan track bar pada tampilan usernya. Hampir sama dengan membuat button dan group box, dengan cara mecari text eddit, progress bar dan track bar pada tools box lalu membawanya ke dalam form project. Berikut ini adalah tampilannya :

Gambar 1.8 Tampilan Proses Menginputkan Progress Bar dan Track Bar.

Khusus pada track bar berisikan setting nilai maximum dan minimumnya, dengan cara memilih Object inspectorlalu cari Nilai Max dan Min isikan Max := 255 dan Min := -255. Dapat dilihat pada gambar dibawah ini :

Gambar 1.9 Memberikan Nilai Max dan Min pada Track Bar.

6. Setelah itu dilajutkan dengan menginputkan TextEdit untuk menginputkan nilai dari TrackBar yang berfungsi untuk mengubah kecerahan gambar, TextEdit dengan Track Bar terhubung menjadi satu, jadi apabila text bar diinputkan nilai, maka secara otomatis maka track bar secara otomatis dan real time akan berada pada posisi nilai tersebut. Berikut ini adalah proses penginputan text edit :

Gambar 1.10 Proses Penginputan Text Edit.

7. Setelah itu dilanjutkan dengan membuat sebuah group box dan berinama Menampilkan Grayscale dimana didalamnya berisikan image view dan menambahkan button graycsale pada form 1. Berikut ini adalah tampilannya :

Gambar 1.11 Tampilan Group Box Menampilkan Grayscale

8. Apabila tampilan sudah selesai dibuat, maka dilanjutkan dengan menginputkan kode program atau script program yang berfungsi sesuai dengan kegunaannya dan tampilannya. Adapun beberapa fungsinya sebagai berikut ini :

a. Fungsi Button Browse.

Pada button browse berisikan script program yang berfungsi untuk memanggil gambar yang berupa gambar yang berjenis bitmap. Kenapa gambar bitmap, diakrenakan pada program yang saya buat hanya dapat mengolah gambar yang bertipekan bitmap. Berikut ini adalah script program browse image :

procedure TForm1.BitBtn1Click(Sender: TObject);begin if openpicturedialog1.Execute then begin image1.Picture.LoadFromFile(openpicturedialog1.Filename); end;end;

Kode Program 1.1 Fungsi Script Program Menampilkan Gambar

Keterangan sintaks :

Apabila if openpicturedialog1.Execute bias berjalan tanpa eror maka sintaks program tersebut akan langsung menuju sintaks berikutnya yaitu image1. Picture. Load From File (open picture dialog1.Filename); yang berfungsi untuk mencari gambar yang ada didalam PC atau Laptop dimana program atau aplikasi tersebut

dijalankan lalu meletakkannya atau menampilkannya di dalam image view 1.

b. Fungsi Button Copy.

Didalam program yang saya buat, juga terdapat satu fungsi lain selain fungsi untuk menampilkan gambar, yaitu fungsi copy. Fungsi copy ini berjalan pada saat user/pengguna mengklik button copy, yang dimana pada button copy inilah script fungsi copy image diletakkan. Berikut ini adalah sintaks dari script program fungsi Copy :

procedure TForm1.BitBtn2Click(Sender: TObject);varx,y : Integer;

begin ProgressBar1.Min:=0; ProgressBar1.Max:=Image1.Picture.Bitmap.Width; Image5.Picture.Bitmap := TBitmap.Create; Image5.Picture.Bitmap.Width := Image1.Picture.Bitmap.Width; Image5.Picture.Bitmap.Height := Image1.Picture.Bitmap.Height;

for x:= 0 to Image1.Picture.Bitmap.Width -1 do begin for y:= 0 to Image1.Picture.Bitmap. Height -1 do begin Image5.Picture.Bitmap.Canvas.Pixels[x,y] := Image1.Picture.Bitmap.Canvas.Pixels[x,y]; end; ProgressBar1.Position:=x; end; ProgressBar1.Position:=0;end;

Kode Program 1.2. Sript Program Fungsi Copy Image


Pada sintaks program copy ini terdapat beberapa perulangan, dimana perulangan tersebut berfungsi untuk mengambil warna per pixel yang sudah ada pada Image View 1, lalu dibawa ke Image View 5, sintaksnya dapat dilihat pada kode program 1.2 yang diberi tanda kotak merah.

c. Fungsi Track Bar untuk mengatur tingkat kecerahan Gambar.

Fungsi track bar pada program ini adalah suatu track bar yang mengatur tingkat kecerahan dari suatu gambar dengan menggunakan track bar, maka user akan langsung menentukan kecerahan yang diinginkannya. Berikut ini adalah sintaks programnya :

procedure TForm1.TrackBar1Change(Sender: TObject);varx,y,input : Integer;r,g,b : Integer;color,warna : Tcolor;

begin ProgressBar1.Min:=0; ProgressBar1.Max:=Image1.Picture.Bitmap.Width; Image5.Picture.Bitmap := TBitmap.Create; Edit1.Text := IntToStr(TrackBar1.Position); Image5.Picture.Bitmap.Width := Image1.Picture.Bitmap.Width; Image5.Picture.Bitmap.Height := Image1.Picture.Bitmap.Height; input := TrackBar1.Position; for x:= 0 to Image1.Picture.Bitmap.Width -1 do begin for y:= 0 to Image1.Picture.Bitmap.Height -1 do begin color := Image1.Picture.Bitmap.Canvas.Pixels[x,y];

//Set nilai R r := GetRValue(color) + input; if r > GetRValue(clWhite) then r := GetRValue(clWhite) else if r < GetRValue(clBlack) then r := GetRValue(clBlack);

//Set nilai G g := GetGValue(color) + input; if g > GetGValue(clWhite) then g := GetGValue(clWhite) else if g < GetGValue(clBlack) then g := GetGValue(clBlack);

//Set nilai B b := GetBValue(color) + input;

if b > GetBValue(clWhite) then b := GetBValue(clWhite) else if b < GetBValue(clBlack) then b := GetBValue(clBlack);

warna := RGB(r, g, b); Image5.Picture.Bitmap.Canvas.Pixels[x,y] := warna; end; ProgressBar1.Position:=x; end; ProgressBar1.Position:=0;end;

Kode Program 1.3. Sintaks Program Fungsi Track Bar untuk mengatur kecerahan warna gambar

d. Fungsi Kode Program yang ada pada Text Edit.

Fungsi dari Text Edit ini didalam program yang saya buat tidak jauh beda dengan fungsi dari track bar, namun didalam peredaany terletak pada proses penginputan nilai dan keterangan dari nilai yang ditentukan untuk tingkat kecerahan gambar. Dikarenakan pada text edit ini user/pengguna langsung menginputkan nilai dari tingkat kecerahan gambarnya dengan batas yang sama dengan track bar yaitu -255 sampai dengan 255. Berikut ini adalah sintaks programnya :

procedure TForm1.Edit1Change(Sender: TObject);varx,y,input : Integer;r,g,b : Integer;color,warna : Tcolor;

begin Image5.Picture.Bitmap := TBitmap.Create; Image5.Picture.Bitmap.Width := Image1.Picture.Bitmap.Width; Image5.Picture.Bitmap.Height := Image1.Picture.Bitmap.Height; if (Edit1.Text = '') or (Edit1.Text = '-') then input := 0 else input := StrToInt(Edit1.Text); TrackBar1.Position := input; for x:= 0 to Image1.Picture.Bitmap.Width -1 do ProgressBar1.Min:=0; ProgressBar1.Max:=Image1.Picture.Bitmap.Width;begin for y:= 0 to Image1.Picture.Bitmap.Height -1 do begin color := Image1.Picture.Bitmap.Canvas.Pixels[x,y];

//Set nilai R

r := GetRValue(color) + input; if r > GetRValue(clWhite) then r := GetRValue(clWhite) else if r < GetRValue(clBlack) then r := GetRValue(clBlack); //Set nilai G g := GetGValue(color) + input; if g > GetGValue(clWhite) then g := GetGValue(clWhite) else if g < GetGValue(clBlack) then g := GetGValue(clBlack); //Set nilai B b := GetBValue(color) + input; if b > GetBValue(clWhite) then b := GetBValue(clWhite) else if b < GetBValue(clBlack) then b := GetBValue(clBlack); warna := RGB(r, g, b); Image5.Picture.Bitmap.Canvas.Pixels[x,y] := warna; end; ProgressBar1.Position:=x; end; ProgressBar1.Position:=0;end;

Kode Program 1.4 Sintaks Fungsi pada Edit Text 1 untuk mengatur tingkat kecerahan warna gambar

e. Fungsi Button Reset.

Fungsi Button reset pada program ini ialah untuk mengembalikan program pada kondisi awal yaitu kosong atau null, dimana tidak ada gambar yang dimuat pada image 1 dan 2, dan tidak ada nilai yang diinputkan pada text edit ataupun track bar. Berikut ini adalah sintaksnya :

procedure TForm1.BitBtn5Click(Sender: TObject);begin image1.Picture:=nil; image2.Picture:=nill; image5.Picture:=nill; edit1.Text :=nill;end;

Kode Program 1.5 Fungsi Reset


Pada sintaks program fungsi reset ini terdiri dari 4 sintaks utama yaitu :

1. Image1.Picture :=nill; (yang berfungsi untuk mengosongkan image view 1 dari gambar yang telah ditampilkan).



4. Edit1.Text :=nill; (yang berfungsi mengosongkan inputan berupa teks pada edit text 1);

f. Fungsi Button Exit

Fungsi program pada button exit adalah menampilkan konfirmasi atau pemberitahuan kepada user untuk menanyakan apakah ingin keluar dari aplikasi atau tidak. Berikut ini adalah sintaks :

procedure TForm1.BitBtn6Click(Sender: TObject);begin if(application.MessageBox('Yakin Anda Ingin Keluar?','Konfimasi',MB_YesNo)=ID_Yes) then begin close; end;end;

Kode Program 1.6 Fungsi Exit

Keterangan Sintaks :

Pada fungsi exit ini memiliki 2 sintaks utama yaitu sintaks message box yang berfungsi untuk menanyakan user “apa yakin keluar” dari aplikasi yang dibuat. Apabila pilihannya “Yes” maka akan keluar, dan apabila pilihannya “No” maka akan tetap berada pada aplikasi yang telah dibuat.

9. Dilanjutkan dengan menambahkan script program pada button grayscale agar dapat menampilkan gambar grayscale. Berikut ini adalah sintaks programnya :

procedure TForm1.BitBtn3Click(Sender: TObject);var brs, kol ,x ,y , i: Integer; color : Longint; r,g,b,clr : Byte; rgb1 : array [0..2] of integer;begin Image2.Picture.Bitmap := Image1.Picture.Bitmap; for kol := 0 to Image2.Picture.Bitmap.Height-1 do begin Application.ProcessMessages; ProgressBar1.Min:=0; ProgressBar1.Max:=Image1.Picture.Bitmap.Width; for brs := 0 to Image2.Picture.Bitmap.Width-1 do begin color := ColorToRGB(Image2.Picture.Bitmap.Canvas.Pixels[brs,kol]); //---mengambil warna per piksel r := GetRValue(color); g := GetgValue(color); b := GetbValue(color); clr := ((r+g+b)div 3); rgb1[0]:= r; rgb1[1]:= g; rgb1[2]:= b; Image2.Picture.Bitmap.Canvas.Pixels[brs,kol] := RGB(clr,clr,clr); end; ProgressBar1.Position:=x; end; ProgressBar1.Position:=0;end;

Kode Program 1.7 Fungsi Grayscale Image

10. Setelah semuanya terisi dengan script dan tampilan. Maka hasil runningnya sebagai berikut ini :

a. Proses Input Image.

1. Pertama klik butto Browselalu pilih imageopen. Berikut ini adalah tampilannya :

Gambar 1.12 Open File Image.

2. Menampilkan Image pada Program yang dibuat. Berikut ini hasil tampilannya :

Gambar 1.13 Hasil Open File Image

b. Proses Copy Image.

Proses Copy akan dijalankan apabila user menekan button Copy Image pada program dan akan menghasilkan gambar seperti berikut ini :

Gambar 1.14 Mengcopy Image

c. Proses Membuat Gambar Grayscale.

Proses Grayscale Image akan dijalankan apabila user menekan button Grayscale pada program dan akan menghasilkan gambar seperti berikut ini :

Gambar 1.15 Hasil dari Grayscale Gambar

d. Proses Mengatur Kecerahan Gambar.

Proses mengatur kecerahan gambar dapat dilakukan melalui track bar ataupun edit text, yang dimana hasilny sama saja. Berikut ini hasil running programnya :

Gambar 1.16 Hasil dari mengatur kecerahan warna Gambar

Terlihat perbedaan antara gambar asli dengan gambar yang sudah diatur kecerahan warna gambarnya dengan program yang telah kita buat.

11. Selesai.

tugas 6-delphi brightness,grayscale

Documents