membangun sistem akuisisi data berbasis database dengan delphi

Spesifikasi:

Ukuran: 14x21 cm Tebal: 358 hlm

Harga: Rp 53.800 Terbit pertama: November 2004

Sinopsis singkat:

Membangun suatu sistem akuisisi besaran analog mutlak memerlukan perangkat lunak (software) yang khusus agar sesuai kebutuhan analisis. Saat ini sudah banyak perangkat lunak untuk menganalisis sinyal-sinyal

hasil pengukuran (software) yang dijual. Melalui buku ini, penulis mencoba membangun sebuah perangkat lunak (software) yang dapat Anda gunakan untuk keperluan akuisisi data.

Sistem akuisisi data yang dibangun berbasis pada database dengan pernyataan Local SQL. Data masukan dapat diatur agar berasal dari antarmuka ADC, ditampilkan secara online dalam bentuk grafik dengan

komponen TChart, dan juga dalam bentuk teks. Data tersebut dapat disimpan dalam suatu file database, dicari nilai statistiknya, dan dicetak. Dengan mengganti sumber data, sistem akuisisi data ini juga dapat

diterapkan dalam bidang lain, misalnya ekonomi.

Buku ini juga menyertakan topik-topik tambahan yang berhubungan dengan akuisisi data secara grafis dengan komponen TChart, TDBChart, atau Timage, dan membuat file setup suatu aplikasi.

169

BAB 3

BEBERAPA TOPIK TAMBAHAN UNTUK SUATU APLIKASI

Topik-topik tambahan yang akan dipaparkan berikut ini adalah untuk suatu aplikasi akuisisi data dengan komponen TChart. Beberapa topik dapat ditambahkan dalam setting program aplikasi Sistem Akuisisi Data pada Bab 2 dan sebagian yang lain merupakan aplikasi tambahan yang dapat diterapkan pada aplikasi yang lain. Manfaatkan form FOtherDemo (tersimpan dalam unit UOtherDemo) yang telah dibuat pada Bab 1 untuk menampung topik-topik tersebut. Untuk membuat suatu topik, dibuat form baru.

3.1 Mendesain Form FOtherDemo Pada form FOtherDemo, letakkan sebuah komponen TImage, 2 (dua) buah komponen TGroupBox, 2 (dua) buah komponen TLabel, 4 (empat) buah komponen TSpeedButton, dan 10 (sepuluh) buah komponen TRadioButton. Kemudian, ubahlah property komponen-komponen tersebut seperti tabel berikut ini (untuk property yang mempunyai nilai lebih dari satu, masing-

170

masing dipisahkan oleh tanda titik koma Sesuaikan berdasarkan urutan property Name):

Nama Object Nama Property Nilai

AutoSize True

BorderStyle bsNone

Name FOtherDemo

TForm

Position poScreenCenter

AutoSize True

Name IOtherDemo

Timage (tab Additional)

Picture Klik ganda sel disebelah kanan property ini, load gambar IOtherDemo.jpg

Caption Expand; Features

Color clWhite

Font.Color clRed

Font.Name Arial

Font.Size 9

Font.Style.fsBold True

Height 91; 154

Name GBExpand; GBFeatures

Visible False

TgroupBox (tab Standard) sebanyak 2 buah

Width 190

AutoSize True; False

Caption Read this : ; (bebas)

Font.Color clRed; clBlack

Tlabel (tab Standard) sebanyak 2 buah. Pasang pada form

Font.Name Arial

171

Font.Size 8

Font.Style.fsBold True; False

Height 14; 103

Left 138; 146

Name Label1; LNotes

Top 215; 233

Transparent True

Width 57; 201

WordWrap False; True

Caption

(kosongkan); Expand... Form; Features...; Show me The Demo !

Cursor crHandPoint

Flat True

Font.Color (bebas); clYellow; clYellow; clBlue

Font.Name Arial

Font.Size 9

Font.Style.fsBold True

Glyph Klik ganda sel disebelah kanan property ini, load gambar BExit.bmp; (kosongkan untuk selain BClose)

Height 12; 18; 18; 18

Left 346; 10; 10; 216

TSpeedButton (tab Additional) sebanyak 4 buah. Pasang dalam form

Margin -1; 5; 5; 5

172

Name BClose; BExpand; BFeatures; Bshow

Top 1; 27; 47; (bebas)

Width 12; 127; 127; 129

Caption

Cross Hair; Keyboard Scrolling; Property BackImage

Checked True; False; False

Color clWhite

Left 18

Name RCrossHair; RKeyboard; RBackImage

TradioButton (tab Standard) sebanyak 3 buah. Pasang pada GBExpand

Top 24

Caption Digital Chart; Fast Line Series; Linked Tables; Mini Small Charts; Property Paging; Statistical Bar Series; Osiloscope with TImage

Checked False untuk selain RDigital

Color clWhite

Left 18

Name RDigital; RFastLine; RLinked; RMini; RPaging; RStatistic; ROsciloscope

TradioButton (tab Standard) sebanyak 7 buah.

Pasang pada GBFeatures

Top 24; 41; 58; 75; 92; 110; 128

Biarkan nilai-nilai property yang lain sesuai nilai default-nya.

173

Prosedur Event OnMouseDown pada TImage (IOtherDemo)

Form FOtherDemo tidak dapat digeser karena property BorderStyle bernilai bsNone. Untuk mengatasinya, buat event OnMouseDown pada komponen TImage. Klik ganda sel di sebelah kanan event OnMouseDown komponen tersebut dan ketikkan kode programnya. procedure TFOtherDemo.IOtherDemoMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin ReleaseCapture; TWinControl(FOtherDemo).Perform(WM_SysCommand, $F012, 0); end;

Prosedur Event OnClose pada TForm (FOtherDemo)

Prosedur event OnClose berguna untuk menangani kejadian pada saat form ditutup, yaitu menampilkan kembali form FMainDemo yang telah disembunyikan saat form ini dibangkitkan. Pada tab event TForm, klik ganda sel di sebelah kanan OnClose dan ketik kode programnya. procedure TFOtherDemo.FormClose (Sender: TObject; var Action:

TCloseAction); begin FMainDemo.Show; end;

Prosedur Event OnClick pada Komponen TSpeedButton (BClose)

Komponen TSpeedButton BClose berfungsi untuk menutup form FOtherDemo kemudian menampilkan kembali form FMainDemo (yaitu memanggil prosedur event OnClose yang telah dibuat). Klik ganda sel di sebelah kanan event OnClick komponen tersebut kemudian ketikkan prosedur Close pada prosedur BCloseClick. procedure TFOtherDemo.BCloseClick (Sender: TObject); begin Close; end;

Prosedur Event OnCreate pada TForm (FOtherDemo)

Posisi beberapa komponen yang terpasang dalam form FOtherDemo dapat ditentukan dalam prosedur event OnCreate.

174

Pada tab event TForm, klik ganda sel di sebelah kanan OnCreate dan ketikkan kode program berikut ini. procedure TFOtherDemo.FormCreate(Sender: TObject);

procedure Position(AOwner: TControl; ax,ay : integer); begin AOwner.Left:= ax; AOwner.Top:= ay; end; begin Position(GBExpand, 157, 22); Position(GBFeatures, 157, 22); ButtonClick(BExpand); end;

Prosedur lokal Position digunakan untuk meringkas penulisan posisi kiri dan atas beberapa komponen dan prosedur ButtonClick dengan sender BExpand menyebabkan komponen TGroupBox GBExpand beserta komponen yang terpasang di dalamnya ditampilkan ketika form pertama kali dibangkitkan. Jika menginginkan keadaan tersebut terjadi setiap kali form dipanggil, deklarasikan dalam event OnShow form.

Prosedur Event OnClick pada Komponen TSpeedButton (BExpand dan BFeatures)

Menu-menu yang ada dalam form FOtherDemo terbagi dalam kelompok Expand dan Features. Kelompok pertama berisi menu yang dapat ditambahkan dalam setting program aplikasi Sistem Akuisisi Data yang telah dibuat dan menu yang kedua berisi topik untuk membuat aplikasi lain. Manfaatkan komponen TSpeedButton BExpand dan BFeatures untuk menampilkan menu-menu dalam komponen TGroupBox. Blok kedua komponen TSpeedButton tersebut, isi sel di sebelah kanan event OnClick dengan nama prosedur ButtonClick kemudian tekan tombol Enter. procedure TFOtherDemo.ButtonClick(Sender: TObject); begin GBExpand.Visible:= False; GBFeatures.Visible:= False; if Sender = BExpand then begin GBExpand.Visible:= True; BShow.Top:= 124; end else begin GBFeatures.Visible:= True; BShow.Top:= 184; end;

175

end; Kelompok menu dalam komponen TGroupBox akan ditampilkan berdasarkan sender prosedur ButtonClick, termasuk posisi atas komponen TSpeedButton BShow.

Prosedur Event OnMouseMove pada Semua Komponen

Komponen TLabel LNotes berfungsi untuk menginformasikan keterangan suatu komponen ketika mouse bergerak di atas komponen tersebut melalui event OnMouseMove. Blok semua komponen yang tertampung dalam form FOtherDemo, isi pada sel sebelah kanan tab event OnMouseMove dengan nama prosedur Notes, lalu tekan tombol Enter. procedure TFOtherDemo.Notes(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin LNotes.Caption:= ''; if Sender = BExpand then LNotes.Caption := 'Merupakan ekspansi setting program, '+ 'seperti Cross Hair, kontrol scrolling grafik dengan '+ 'tombol Keyboard, dan mengubah property BackImage '+ 'komponen TChart.'; if Sender = BFeatures then LNotes.Caption := 'Feature yang dapat diterapkan dalam '+ 'suatu aplikasi, terdiri atas : Digital Chart, Ploting '+ 'data Series bertipe Fast Line, Akses database dengan '+ 'komponen TTable, Mini Chart yang Resizeable, + Property Paging, Nilai Statistik dalam TChartSeries, '+ 'dan membuat Osciloscope dengan komponen TImage.'; if Sender = RCrossHair then LNotes.Caption := 'Membuat garis Cross-Hair pada grafik.'; if Sender = RKeyboard then LNotes.Caption := 'Mengontrol proses zoom dan scrolling '+ 'grafik dengan menggunakan tombol-tombol Keyboard.'; if Sender = RBackImage then LNotes.Caption := 'Mengeset gambar background grafik '+ '(property BackImage).'; if Sender = RDigital then LNotes.Caption := 'Simulasi plot data digital pada grafik.'; if Sender = RFastLine then LNotes.Caption := 'Mengukur kecepatan plot data pada TChartSeries bertipe Fast Line.'; if Sender = RLinked then LNotes.Caption := 'Menghubungkan TChartSeries komponen '+ 'TDBChart dengan dataset komponen TTable.'; if Sender = RMini then LNotes.Caption := 'Membuat grafik mini yang dapat diubah '+ 'ukurannya mengikuti perubahan ukuran form dan membuat '+ 'garis divider vertikal pada suatu TChartSeries.'; if Sender = RPaging then LNotes.Caption := 'Membagi grafik dalam halaman tertentu '+

176

'dan scrolling grafik per halaman.'; if Sender = RStatisticBar then LNotes.Caption := 'Membuat nilai statistik pada '+ 'TChartSeries dan membuat TChartSeries '+ 'bertipe Bar secara run-time.'; if Sender = ROsciloscope then LNotes.Caption := 'Membuat sistem pengukuran data dengan'+ 'menggunakan komponen TImage.'; end;

Jika mouse berada di atas komponen yang menjadi sender prosedur Notes, property Caption komponen LNotes akan menampilkan keterangan untuk setiap komponen tersebut. Jika berada di luar komponen-komponen tersebut, tidak ada teks yang ditampilkan.

3.2 Membuat Garis Cross-Hair Garis Cross-Hair merupakan garis silang pada kotak grafik ketika mouse berada di atas grafik tersebut dan posisinya akan berubah mengikuti perubahan posisi mouse. Garis Cross-Hair dapat dipakai untuk mengetahui nilai suatu titik dalam grafik. Buatlah sebuah form baru dengan nama FCrossHair dan simpan nama unit dalam UCrossHair. Pada form tersebut, pasang sebuah komponen TChart, komponen TLabel, komponen TPanel, komponen TCheckBox, dan sebuah komponen TspeedButton, kemudian ubah property-nya seperti tabel berikut ini.


AutoSize True

BorderStyle bsToolWindow

Name FCrossHair

TForm


Left 205

Name LValues

TLabel (tab Standard). Pasang pada komponen Top 36

177

TChart Transparent True

BevelOuter bvNone

Color clWhite

Height 40

Left 0

Name Panel1

Top 407

TPanel (tab Standard)

Width 540

Caption &Cross Cursor

Checked True

Left 15

Name CCross

TCheckBox (tab Standard).

Pasang dalam Panel1

Top 15

Caption Cross-Hair Color

Cursor crHandPoint

Flat True

Height 22

Left 200

Name BColor

Top 10

TSpeedButton (tab Additional).

Pasang dalam Panel1

Width 135

Biarkan property yang lain sesuai nilai default-nya. Untuk mengedit property komponen TChart, klik ganda komponen tersebut sehingga muncul kotak dialog seperti Gambar 1.1. Buat

178

sebuah TChartSeries bertipe Line dua dimensi (tanda centang pada parameter 3D dihilangkan) dengan nama Series1 dan ubah nilai beberapa property lain sesuai kebutuhan.

Deklarasikan beberapa variabel pada bagian public unit dengan tipe data seperti berikut ini: public { Public declarations } OldX, OldY: Longint; CrossHairColor: TColor; CrossHairStyle: TPenStyle; end;

Variabel OldX digunakan untuk menyimpan posisi horisontal (x) mouse sebelum digeser, sedangkan posisi vertikalnya (y) disimpan dalam variabel OldY. Nilai variabel CrossHairColor bertipe TColor digunakan untuk mengisi warna pena (property Color) yang akan dipakai saat melukis garis Cross-Hair pada komponen TChart. Property Style pena tersebut berasal dari nilai variabel CrossHairStyle.

Prosedur Event OnCreate pada TForm (FCrossHair)

Kode program yang dideklarasikan dalam prosedur event OnCreate hanya dijalankan sekali, yaitu saat form dibangun. Klik ganda sel di sebelah kanan event OnCreate form sehingga muncul sebuah prosedur pada jendela Code Editor. procedure TFCrossHair.FormCreate(Sender: TObject); begin Series1.FillSampleValues(30); OldX:= -1; CrossHairColor:= clAqua; CrossHairStyle:= psSolid; CCrossClick(Sender); end;

Metode FillSampleValues akan memplot nilai acak pada TChartSeries dengan rentang data sebanyak angka dalam tanda kurung. Posisi horisontal mouse yang lama di-reset dengan memberi nilai -1 pada variabel OldX. Warna pertemuan kedua garis Cross-Hair ketika form FCrossHair pertama kali ditampilkan bernilai clAqua dan disimpan dalam variabel CrossHairColor. Garis Cross-Hair ditampilkan solid (tidak terputus-putus) dengan memberi nilai psSolid pada property Style pena (menjadi nilai

179

variabel CrossHairStyle). Prosedur CCrossClick untuk menjalankan perintah event OnClick komponen TCheckBox CCross.

Prosedur Event OnClick pada Komponen TCheckBox (CCross)

Komponen TCheckBox CCross berfungsi untuk mengubah kursor ketika mouse berada di daerah komponen TChart. Kursor ditampilkan Cross (crCross) jika property Checked komponen TCheckBox CCross bernilai True (dicentang) dan jika sebaliknya kursor berbentuk Default (crDefault). Klik ganda sel di sebelah kanan event OnClick komponen TCheckBox tersebut, kemudian deklarasikan perintahnya. procedure TFCrossHair.CCrossClick(Sender: TObject); begin if CCross.Checked then Chart1.Cursor:= crCross else Chart1.Cursor:= crDefault; Chart1.OriginalCursor:= Chart1.Cursor; end;

Property OriginalCursor me-reset kursor komponen TChart ketika mouse bergerak melewati TChartSeries yang terdapat di dalamnya.

Prosedur Event OnMouseMove pada Komponen TChart (Chart1)

Prosedur event OnMouseMove berguna untuk menangani kejadian ketika mouse digerakan di atas komponen TChart Chart1. Buatlah prosedur lokal DrawCross pada prosedur event OnMouseMove yang berisi perintah-perintah untuk melukis garis Cross-Hair dengan property Canvas komponen TChart. procedure TFCrossHair.Chart1MouseMove(Sender: TObject; Shift:

TShiftState; X, Y: Integer);

procedure DrawCross(ax,ay: Integer); begin with Chart1, Canvas do begin Pen.Color:= CrossHairColor; Pen.Style:= CrossHairStyle; Pen.Width:=1; Pen.Mode:= pmXor; MoveTo(ax, ChartRect.Top-Height3D); LineTo(ax, ChartRect.Bottom-Height3D); MoveTo(ChartRect.Left+Width3D, ay); LineTo(ChartRect.Right+Width3D, ay);

180

end; end;

var ValueX, ValueY: Double; begin if (OldX -1) then begin DrawCross(OldX, OldY); OldX:= -1; end;

if PtInRect(Chart1.ChartRect, Point(X-Chart1.Width3D, Y+Chart1.Height3D)) then begin

DrawCross(x, y); OldX:= x; OldY:= y; with Series1 do begin GetCursorValues(ValueX, ValueY); LValue.Caption:= 'Nilai X/Y :

'+GetHorizAxis.LabelValue(ValueX)+ '/'+GetVertAxis.LabelValue(ValueY); end; end else LValue.Caption:= ''; end;

Property Color TPen menentukan warna yang digunakan untuk menggambar garis dalam kanvas (komponen TChart Chart1). Property Style TPen menentukan style pena, property Width menentukan ketebalan garis tersebut, dan property Mode TPen menentukan bagaimana warna pena tersebut berinteraksi dengan warna kanvas. Tabel berikut ini menjelaskan arti nilai property Style dan Mode.

Property Nilai Arti

psSolid Garis solid (tidak terputus-putus)

psDash Garis disusun dari tanda minus (-)

psDot Garis disusun dari tanda titik (.)

psDashDot Garis disusun dari selang-seling tanda minus dan titik

psDashDotDot Garis disusun dari kombinasi tanda minus-tanda titik-tanda titik

psClear Tidak ada garis yang digambar

Style

psInsideFrame Garis solid, tetapi menggunakan banyak warna dan property Width lebih

181

dari 1

pmBlack Selalu berwarna hitam

pmWhite Selalu berwarna putih

pmNop Tidak dapat diubah

pmNot Kebalikan dari warna background kanvas

pmCopy Warna pena ditentukan berdasarkan property Color-nya

pmNotCopy Kebalikan dari property Color TPen

pmMergePenNot Kombinasi dari nilai property Color dan kebalikan warna background kanvas

pmMaskPenNot Kombinasi warna dominan di antara nilai property Color dan kebalikan warna background kanvas

pmMergeNotPen Kombinasi warna background kanvas dan kebalikan nilai property Color TPen

pmMaskNotPen Kombinasi warna dominan di antara warna background kanvas dan kebalikan nilai property Color TPen

pmMerge Kombinasi warna nilai property Color dan warna background kanvas

pmNotMerge Kebalikan dari pmMerge

pmMask Kombinasi warna dominan di antara nilai property Color dan warna background kanvas

pmNotMask Kebalikan dari pmMask

pmXor Kombinasi warna nilai property Color atau warna background kanvas, tetapi bukan keduanya.

Mode

pmNotXor Kebalikan dari pmXor

Kembali ke prosedur lokal DrawCross, metode Move To akan mengubah posisi mouse ke suatu koordinat. Pemanggilan metode

182

Move To sama dengan menentukan property PenPos TPen, serta dilakukan sebelum memanggil metode Line To. Metode Line To menggambar garis pada kanvas dari koordinat yang ditentukan dalam metode Move To sampai koordinat baru (x, y) yang ditentukan oleh mouse dan menetapkan posisi pena pada koordinat baru tersebut.

Pada prosedur lokal DrawCross, kombinasi metode MoveTo dan LineTo yang pertama untuk menggambar garis Cross-Hair vertikal dimulai dari koordinat (nilai variabel ax (posisi x Mouse), posisi atas kotak grafik (property ChartRect), tinggi dinding grafik akibat efek 3D (property Heigh3D)), sampai koordinat (nilai variabel ax, posisi bawah kotak grafik-tinggi dinding 3D). Pengurangan koordinat y dengan nilai property Height3D berguna untuk mengantisifasi tampilan grafik 3D (tiga dimensi), yaitu jika parameter CheckBox 3D pada subtab 3D (Gambar 1.10) diberi tanda centang. Property Height3D bernilai 0 jika grafik ditampilkan 2 dimensi sehingga garis Cross-Hair vertikal menempel pada dinding grafik.

Kombinasi yang kedua berguna untuk menggambar garis Cross-Hair horisontal dengan batas kiri garis pada koordinat (posisi kiri kotak grafik (property ChartRect) ditambah lebar dinding grafik akibat efek 3D (property Width3D), nilai variabel ay (posisi y Mouse)) dan batas kanan grafik pada koordinat (posisi kanan kotak grafik+lebar dinding 3D), nilai variabel ay). Property Width3D bernilai 0 jika grafik ditampilkan 2 dimensi. Nilai property Height3D dan Width3D berdasarkan nilai SpinEdit 3D% pada subtab 3D.

Pada prosedur event OnMouseMove di atas, jika posisi mouse tidak sedang di-reset (tidak sama dengan -1) maka prosedur lokal DrawCross dipanggil untuk membuat garis Cross-Hair. Nilai variabel ax dan ay berasal dari posisi (x, y) mouse sebelum posisi tersebut berubah menjadi yang tersimpan sementara dalam variabel OldX dan OldY. Posisi (x, y) mouse tersebut kemudian di-reset dengan memberi nilai -1 pada variabel OldX sehingga garis Cross-Hair yang telah terbentuk akan dihapus sebelum membuat garis Cross-Hair baru.

183

Fungsi PtInRect mengecek posisi (x, y) mouse ketika berada di dalam kotak grafik Chart1 dengan syntax sebagai berikut: function PtInRect(const Rect: TRect; const P: TPoint): Boolean;

Fungsi PtInRect akan bernilai True jika koordinat titik P berada di dalam kotak Rect. Jika posisi x mouse (dikurangi nilai property Height3D komponen TChart) dan posisi y mouse (ditambah nilai property Width3D komponen TChart) berada dalam kotak grafik (property ChartRect komponen TChart) maka garis Cross-Hair baru akan digambar berdasarkan posisi (x, y) mouse tersebut. Garis Cross-Hair lama telah terhapus dengan perintah sebelumnya. Selanjutnya, nilai posisi (x, y) mouse tersebut disimpan dalam variabel OldX (posisi x) dan OldY (posisi y).

Metode GetCursorValues berguna untuk mendapatkan nilai posisi (x, y) mouse pada TChartSeries yang ditentukan. Nilai-nilai tersebut disimpan sementara dalam variabel ValueX dan ValueY, kemudian ditampilkan dalam property Caption komponen TLabel LValue menggunakan metode LabelValue pada masing-masing sumbu grafik. Metode GetHorizAxis menghubungkan TChartSeries Series1 dengan sumbu horisontal grafik. Untuk menghubungkannya dengan sumbu vertikal grafik, gunakan metode GetVertAxis.

Jika mouse tidak berada dalam kotak grafik (fungsi PtInRect bernilai False) maka garis Cross-Hair tidak digambar dan tidak ada teks yang ditampilkan dalam property Caption komponen TLabel LValue.

Prosedur Event OnAfterDrawValue pada TChartSeries (Series1)

Event OnAfterDrawValue terjadi setelah data diplot dalam TChartSeries, yaitu me-reset posisi (x, y) mouse. Perintah ini berguna ketika plot data dilakukan secara on-line. Cara membuatnya, aktifkan jendela Object TreeView, cari object bernama Series1 (terletak pada komponen TChart), kemudian aktifkan jendela Object Inspector dan klik ganda sel di sebelah kanan event OnAfterDrawValue object tersebut. procedure TFCrossHair.Series1AfterDrawValues(Sender: TObject); begin

184

OldX:= -1; end;

Prosedur Event OnClick pada Komponen TSpeedButton (BColor)

Warna kursor Cross dapat diubah dengan mengubah nilai variabel CrossHairColor. Perubahan warna dapat dilakukan dengan memanggil kotak dialog Color dan dieksekusi dengan tombol OK. Oleh karena komponen TColorDialog tidak dipasang dalam form, deklarasikan function bernama EditColor pada bagian private unit dan ketikkan kode program untuk function tersebut untuk memanggil kotak dialog Color. private { Private declarations } function EditColor(AOwner:TComponent; AColor:TColor):TColor;

function TFCrossHair.EditColor(AOwner: TComponent; AColor: TColor): TColor;

begin with TColorDialog.Create(AOwner) do try Color:= AColor; if Execute then AColor:= Color; finally Free; end; result:= AColor; end;

Konstruktor Create pada komponen TColorDialog berguna untuk membangkitkan kotak dialog Color dan menginisialisasi warna yang terpilih berdasarkan nilai variabel AColor. Metode Execute digunakan untuk menampilkan kotak dialog Color. Jika kotak dialog Color tersebut dieksekusi, nilai variabel AColor akan sama dengan warna yang dipilih dari daftar warna pada kotak dialog Color. Hasil dari function EditColor adalah variabel AColor.

Komponen TSpeedButton BColor dipakai untuk menampilkan kotak dialog Color kemudian mengeksekusinya. Klik ganda sel di sebelah kanan event OnClick komponen tersebut. procedure TFCrossHair.BColorClick(Sender: TObject); begin CrossHairColor:= EditColor(Self, CrossHairColor); end;

185

Warna yang terpilih ketika kotak dialog Color ditampilkan sama dengan nilai variabel CrossHairColor saat itu dan pada saat kotak dialog Color dieksekusi, hasilnya (nilai variabel AColor) menjadi nilai variabel CrossHairColor yang baru. Perubahan nilai variabel tersebut akan mengubah warna kursor Cross, sedangkan warna garis Cross-Hair merupakan kombinasi warna (dua warna yang sama) yang pertemuannya menghasilkan warna kursor Cross.

Untuk menampilkan form FcrossHair, buat sebuah prosedur event OnClick pada komponen TSpeedButton BShow yang terpasang dalam form FOtherDemo. Klik ganda komponen TSpeedButton tersebut kemudian ketik kode program berikut. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal; end; end;

Form FCrossHair hanya akan ditampilkan jika komponen TGroupBox GBExpand telah ditampilkan dan komponen TRadioButton RCrossHair dipilih, kemudian pengguna menekan komponen TSpeedButton BShow.

3.3 Zoom dan Scrolling Grafik dengan Tombol Keyboard

Pada aplikasi Sistem Akuisi Data, proses zoom grafik menggunakan komponen TSpeedButton dan scrolling grafik dengan komponen TScrollBar. Kedua proses tersebut dapat dilakukan dengan keyboard, untuk itu buat sebuah form baru, beri nama Fkeyboard, dan simpan unit dalam UKeyboard. Letakkan sebuah komponen TChart, sebuah komponen TPanel, 2 (dua) buah komponen TCheckBox, dan 2 (dua) buah komponen TLabel pada form FKeyboard. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yang mempunyai nilai lebih dari satu, nilai masing-masing dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name.

186

Nama Object Nama

Property Nilai

AutoSize True


Caption Zoom-Scrolling with Keyboard Topic

KeyPreview True

Name FKeyboard

TForm


BevelOuter bvNone

Color clWhite

Height 62

Left 0

Name Panel1

Top 384

TPanel

(tab Standard)

Width 540

Caption &Inverted Scrolling; Scrolling &Limited

Left 15

Name CInverted; CLimit

TCheckBox (tab Standard) sebanyak 2 buah. Pasang dalam Panel1

Top 15; 40

Tlabel AutoSize True; False

187

Caption Read This :; Gunakan tombol panah dan Page Up/Page Bottom untuk scrolling grafik. Tekan SPACE untuk me-reset zoom dan kombinasi tombol SHIFT + tombol panah untuk zoom grafik

Height 13; 40

Left 241; 247

Name Label1; Label2

Top 1; 18

(tab Standard)

sebanyak 2 buah pasang dalam Panel1

Transparent True

Property yang lain biarkan sesuai dengan nilai default-nya. Pada komponen TChart, buat sebuah TChartSeries bertipe Line dua dimensi dengan nama Series1 dan ubah nilai beberapa property lain sesuai kebutuhan.

Untuk menampilkan form FKeyboard, buka kembali prosedur event OnClick BShowClick pada unit UOtherDemo (form FOtherDemo), kemudian tambahkan kode programnya sehingga prosedur tersebut menjadi seperti berikut ini. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal; end; end;

Prosedur Event OnCreate pada TForm (FKeyboard)

Prosedur event OnCreate hanya berguna untuk menginisialisasi TChartSeries, yaitu nilai acak dengan rentang sebanyak 500 data yang diplot dalam TChartSeries melalui metode FillSampleValues. Klik ganda sel di sebelah kanan event OnCreate form, kemudian ketikkan kode programnya.

188

procedure TFKeyboard.FormCreate(Sender: TObject); begin Series1.FillSampleValues(500); end;

Prosedur Event OnShow pada TForm (FKeyboard)

Proses zoom dan scrolling grafik dengan keyboard hanya dapat dilakukan jika komponen TChart yang dimaksud menjadi focus form sehingga setiap kali form ditampilkan, komponen TChart Chart1 harus diset menjadi focus form seperti pada prosedur event OnShow berikut ini. procedure TFKeyboard.FormShow(Sender: TObject); begin Chart1.SetFocus; end;

Prosedur event OnShow tersebut dapat diganti (dihapus) dengan memberi nilai Chart1 pada property ActiveControl form FKeyboard. Akan tetapi jika aplikasi mempunyai komponen TChart yang dapat di-zoom dan scrolling lebih dari satu, pemberian nilai property ActiveControl tersebut tidak dapat dilakukan.

Prosedur Event OnKeyDown pada TForm (FKeyboard)

Event OnKeyDown akan terjadi jika property KeyPreview form bernilai True. Ketika pengguna menekan suatu atau kombinasi tombol keyboard dan form tersebut diaktifkan, perintah-perintah dalam event ini akan dijalankan. Klik ganda sel di sebelah kanan event OnKeyDown form Fkeyboard, kemudian ketikkan kode program berikut ini. procedure TFKeyboard.FormKeyDown(Sender: TObject;

var Key: Word; Shift: TShiftState); var aX, aY, XRange,YRange:Double; begin aX:= 0; aY:= 0; with Series1.GetHorizAxis do XRange:= Maximum - Minimum; with Series1.GetVertAxis do YRange:= Maximum - Minimum;

if ssShift in Shift then begin Case key of VK_LEFT, VK_UP : Chart1.ZoomPercent(110);

189

VK_RIGHT, VK_DOWN : Chart1.ZoomPercent(90); end; exit; end else Case key of VK_LEFT : aX:= XRange/100; VK_RIGHT : aX:= -XRange/100; VK_UP : aY:= -YRange/100; VK_DOWN : aY:= YRange/100; VK_NEXT : aY:= YRange/10; VK_PRIOR : aY:= -YRange/10; VK_SPACE : begin Chart1.UndoZoom; Exit; end; end;

if CInverted.Checked then begin aX:= -aX; aY:= -aY; end;

with Chart1 do begin LeftAxis.Scroll(aY, CLimits.Checked); RightAxis.Scroll(aY, CLimits.Checked); BottomAxis.Scroll(aX, CLimits.Checked); TopAxis.Scroll(aX, CLimits.Checked); SetFocus; end; end;

Proses scrolling komponen TChart sebenarnya hanya menggeser range skala sumbu horisontal atau skala sumbu vertikal (nilai property Maximum dikurangi dengan property Minimum). Nilai skala maksimum dan minimum sumbu horisontal grafik diperoleh setelah dihubungkan dengan metode GetHorizAxis dan dengan metode GetVertAxis untuk sumbu vertikal. Range skala sumbu horisontal grafik disimpan dalam variabel XRange, sedangkan variabel YRange untuk menyimpan range skala sumbu vertikal grafik.

Flag ssShift merupakan salah satu nilai kelas bertipe TShiftState yang digunakan untuk menentukan keadaan tombol Alt, Ctrl, Shift, dan tombol mouse. Tabel berikut ini menjelaskan masing-masing arti nilai flag:

Nilai Arti

ssShift Tombol Shift ditekan

ssAlt Tombol Alt ditekan

ssCtrl Tombol Ctrl ditekan

190

ssLeft Tombol kiri mouse ditekan

ssRight Tombol kanan mouse ditekan

ssMiddle Tombol tengah mouse ditekan

ssDouble Mouse diklik ganda

Pada prosedur event KeyDown di atas, jika tombol Shift ditekan bersama dengan tombol panah kiri atau atas (VK_LEFT, VK_UP) maka grafik diperbesar 1,1 kalinya (110 %). Grafik diperkecil 90% jika kombinasi tombol Shift dan tombol panah kanan atau bawah (VK_RIGHT, VK_DOWN) ditekan pengguna. Penggunaan prosedur Exit adalah untuk mengeluarkannya dari prosedur yang sekarang sedang dijalankan.

Jika tombol Shift tidak ditekan, kemudian pengguna menekan salah satu tombol panah atau Page Up atau Page Down maka proses scrolling grafik akan dilakukan dengan metode Scroll pada masing-masing sumbu grafik. Metode Scroll mempunyai syntax: procedure Scroll(Const Offset: Double; InsideLimits: Boolean);

Metode ini akan mengeser nilai skala maksimum dan minimum suatu sumbu grafik berdasarkan konstanta Offset. Jika ingin menggeser grafik secara tidak terbatas maka variabel InsideLimits harus bernilai False. Nilai variabel InsideLimits tergantung pada nilai property Checked komponen TCheckBox CLimits.

Nilai variabel aX menentukan scrolling sumbu horisontal grafik, sedangkan variabel aY untuk scrolling sumbu vertikal grafik. Kedua variabel tersebut pertama kali diinisialisasi dengan nilai 0 untuk menghapus nilai sebelumnya. Jika penguna menekan salah satu tombol panah maka grafik akan digeser searah tanda panah tersebut sebesar nilai range sumbu grafik dibagi dengan 100. Pada sumbu horisontal, nilai range sumbu horisontal (variabel XRange) adalah 500 data (angka dalam tanda kurung metode FillSampleValues) sehingga jika pengguna menekan tombol panah kiri maka grafik akan digeser ke kiri sebesar 5 titik. Jika pengguna menekan tombol Page Up (VK_PRIOR) atau Page Down (VK_NEXT), grafik akan digeser secara vertikal sebesar nilai range

191

sumbu vertikal (variabel YRange) dibagi 10. Nilai range sumbu vertikal tergantung pada data random yang di-plot dalam TChartSeries.

Untuk me-reset zoom grafik, digunakan tombol SPACE (VK_SPACE) dengan memanggil metode UndoZoom. Arah proses scrolling akan terbalik dengan arah tombol panah jika komponen TCheckBox CInverted dicentang, yaitu hanya dengan memberi nilai minus pada variabel aX dan aY.

Prosedur Event OnClick pada TCheckBox (CInverted dan CLimits)

Pemberian/penghilangan tanda centang pada komponen TCheckBox akan membangkitkan event OnClick dan fokus form berada pada komponen tersebut. Proses scrolling dan zoom grafik dengan tombol keyboard hanya akan terjadi jika komponen TChart yang dimaksud menjadi focus form sehingga prosedur event OnClick pada kedua komponen tersebut hanya berguna untuk mengembalikan focus form pada komponen TChart dengan memanggil metode SetFocus. Klik ganda masing-masing komponen TCheckBox sehingga pada jendela Code Editor akan muncul dua buah prosedur bernama CInvertedClick dan ClimitsClick. Ketikkan kode program berikut untuk masing-masing prosedur. procedure TFKeyboard.CInvertedClick(Sender: TObject); begin Chart1.SetFocus; end;

procedure TFKeyboard.CLimitsClick(Sender: TObject); begin if CLimits.Checked then begin ShowMessage('Scrolling grafik terbatas hanya pada data '+ 'yang telah diplot.'+#13+ 'Lakukan zoom terlebih dahulu '+ 'sebelum scrolling grafik.'); Chart1.SetFocus; end else Chart1.SetFocus; end;

Tambahan kode program pada prosedur ClimitsClick digunakan untuk menampilkan sebuah pesan ketika komponen TCheckBox Climits diberi tanda centang (property Checked bernilai True).

192

Pesan tersebut tidak akan muncul ketika pengguna menghilangkan tanda centang pada komponen TCheckBox Climits.

3.4 Mengubah Property BackImage Komponen TChart Secara Run-time

Property BackImage komponen TChart berguna untuk memberi latar belakang grafik dengan gambar. Saat desain form, gambar tersebut dicari dengan tombol Browse pada GroupBox BackImage subtab Panel (lihat kembali Gambar 1.7). Buat sebuah form dengan nama FBackImage dan simpan unit dalam UBackImage. Kemudian tambahkan sebuah komponen TOpenDialog, sebuah komponen TChart, sebuah komponen TPanel, sebuah komponen TGroupBox, 3 (tiga) buah komponen TRadioButton, dan 2 (dua) buah komponen TSpeedButton. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yang mempunyai nilai lebih dari satu, nilai masing-masing dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name.

Nama Object Nama

Property Nilai

AutoSize True


Caption Property BackImage Topic

Name FBackImage

TForm


BevelOuter bvNone

Color clWhite

Height 54

Left 0


Name Panel1

193

Top 407

Width 540

Caption Style

Color clWhite

Height 43

Left 8

Name GBStyle

Top 7

TGroupBox (tab Standard). Pasang pada Panel1

Width 212

Caption Stretch; Tile; Center

Checked True; False; False

Left 17; 81; 137

Name RStretch; RTile; RCenter

TRadioButton (tab Standard) sebanyak 3 buah. Pasang dalam GBStyle

Top 20

Caption Browse...; Clear Bitmap

Cursor crHandPoint

Flat True

Height 22

Left 349; 447

Name BBrowse; BClear

Top 20

TSpeedButton (tab Additional) sebanyak 2 buah. Pasang dalam Panel1

Width 80

Biarkan Property yang lain sesuai nilai default-nya. Komponen TOpenDialog berfungsi untuk membuka folder tempat file gambar. Jika ingin menyaring file gambar dengan eketensi tertentu ketika kotak dialog Open ditampilkan, misalnya hanya file gambar

194

bertipe Bitmap (bmp), ubah property Filter-nya. Caranya, aktifkan jendela Object Inspector dan klik ganda sel di sebelah kanan property Filter sehingga muncul kotak dialog Filter Editor. Isikan sel pertama sebelah kiri dengan File Bitmap dan sel di sebelah kanannya dengan *.bmp, kemudian tekan tombol OK.

Untuk mengedit komponen TChart, klik ganda komponen tersebut sehingga muncul Gambar 1.1. Buat sebuah TChartSeries bertipe Line dua dimensi dengan nama Series1. Klik subtab Panel dan berikan gambar background Chart1 dengan menekan tombol Browse.... Pilih RadioButton Stretch pada GroupBox Style dan tandai CheckBox Inside. Ubah nilai beberapa property lain sesuai kebutuhan.

Buka kembali prosedur BShowClick pada unit UotherDemo, kemudian tambahkan kode program untuk menampilkan form FBackImage melalui tombol BShow pada form FOtherDemo. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal; end; end;

Prosedur Event OnCreate pada TForm (FBackImage)

Kode program pada event OnCreate form FBackImage hanya digunakan untuk menambahkan data pada TChartSeries Series1 sebanyak 100 data dengan memanggil metode FillSampleValues. Klik ganda sel di sebelah kanan event OnCreate, kemudian ketikkan perintahnya. procedure TFBackImage.FormCreate(Sender: TObject); begin Series1.FillSampleValues(100); end;

195

Prosedur Event OnClick pada Komponen TSpeedButton (BBrowse dan BClear)

Komponen TSpeedButton BBrowse berfungsi untuk mencari gambar yang akan mengisi background komponen TChart Chart1, sedangkan komponen BClear berfungsi untuk menghapus gambar background tersebut. Klik ganda pada masing-masing komponen TSpeedButton tersebut sehingga pada jendela Code Editor muncul dua buah prosedur, kemudian ketikkan kode program berikut ini. procedure TFBackImage.BClearClick(Sender: TObject); begin Chart1.BackImage:= nil; GBStyle.Enabled:= False; CInside.Enabled:= False; end;

procedure TFBackImage.BBrowseClick(Sender: TObject); begin if OpenDialog1.Execute then begin Chart1.BackImage.LoadFromFile(OpenDialog1.FileName); GBStyle.Enabled:= True; CInside.Enabled:= True; end; end;

Pada prosedur BClearClick, gambar background grafik dihapus dengan memberi nilai nil pada property BackImage komponen TChart Chart1.

Sebuah kotak dialog Open akan muncul ketika pengguna menekan komponen BBrowse, kemudian jika kotak dialog tersebut dieksekusi (tombol Open ditekan) maka dengan metode LoadFromFile, background grafik akan diisi dengan file gambar yang telah dipilih. Property Enabled komponen TGroupBox GBStyle dan komponen TCheckBox CInside diberi nilai True sehingga dapat diakses kembali setelah pada prosedur BClearClick dinonaktifkan.

Prosedur Event OnClick pada Komponen TRadioButton (RStretch, RTile, dan RCenter)

Style gambar dapat diset dalam mode Stretch, Tile, dan Center. Mode Stretch menyebabkan gambar mengambil ukuran dan bentuk komponen TChart, artinya jika ukuran dan bentuk komponen TChart diubah maka gambar akan ikut berubah.

196

Seluruh gambar background akan ditampilkan seukuran komponen TChart meskipun ukuran gambar tersebut terlalu besar. Dalam mode Tile, jika gambar background terlalu besar maka gambar tersebut tidak seluruhnya mengisi komponen TChart, tetapi ditampilkan apa adanya dimulai dari posisi kiri atas gambar kemudian terpotong sampai pada batas bawah dan kanan grafik. Pada mode Center, hanya posisi tengah gambar yang akan memenuhi background grafik jika ukuran gambar tersebut terlalu besar. Blok ketiga komponen tersebut, isi sel di sebelah kanan event OnClick dengan nama prosedur RadioButtonClick, kemudian tekan tombol Enter. procedure TFBackImage.RadioButtonClick(Sender: TObject); begin if RStretch.Checked then Chart1.BackImageMode := pbmStretch else if RTile.Checked then Chart1.BackImageMode := pbmTile else Chart1.BackImageMode := pbmCenter; end;

Jika pengguna memilih komponen TRadioButton RStretch maka gambar background grafik ada dalam mode Stretch, demikian seterusnya untuk komponen TRadioButton yang lain.

Prosedur Event OnClick pada Komponen TCheckBox (CInside)

Gambar background grafik dapat dibuat memenuhi seluruh dinding komponen TChart atau hanya dalam kotak grafiknya saja, bergantung pada nilai property BackImageInside-nya. Untuk mengendalikan nilai property tersebut, gunakan nilai property Checked komponen TCheckBox CInside. Klik ganda komponen TCheckBox tersebut kemudian ketik kode programnya. procedure TFBackImage.CInsideClick(Sender: TObject); begin Chart1.BackImageInside:= CInside.Checked; end;

Property BackImageInside komponen TChart akan bernilai True jika komponen TCheckBox CInside diberi tanda centang.

197

3.5 Digital Series Seluruh sistem operasi dalam komputer sebenarnya menggunakan kombinasi bilangan biner, yaitu 0 (nol) dan 1 (satu). Proses tersebut kemudian dinamakan proses digital. Buat sebuah form baru bernama FDigital dan simpan unitnya dengan nama UDigital. Pada form tersebut, letakkan sebuah komponen TChart, sebuah komponen TPanel, sebuah komponen TTimer, sebuah komponen TspeedButton, dan 3 (tiga) buah komponen TCheckBox. Ubah property komponen-komponen tersebut seperti tabel berikut ini.


AutoSize True


Caption Digital Series Topic

Name FDigital

TForm


BevelOuter bvNone

Color clWhite

Height 72

Left 0

Name Panel1

Top 407


Width 540

Enabled False

Interval 1

TTimer (tab System)

Name Timer1

TSpeedButton Caption &Run

198

Cursor crHandPoint

Flat True

Height 54

Left 424

Name BRun

Top 10

(tab Additional). Pasang dalam Panel1

Width 102

Caption Last Values in Legend; View 3D; Z Order

Cheked True

Left 15

Name CLastValues; CView; COrder

TCheckBox (tab Standard) sebanyak 3 buah. Pasang dalam Panel

Top 10; 30; 50

Biarkan nilai property yang lain sesuai default-nya. Pada komponen Tchart, buat empat buah TChartSeries bertipe line tiga dimensi, kemudian beri judul yang berbeda sebagai nama masing-masing TChartSeries, dengan menekan tombol Title... pada subtab Series (Gambar 1.1). Klik tab Series, kemudian pilih subtab Format seperti Gambar 2.3. Pada GroupBox Line Mode, beri tanda centang pada CheckBox Stairs untuk mengubah TChartSeries dalam bentuk seperti tangga (umumnya grafik digital). Ubah property komponen TChart yang lain sesuai kebutuhan.

Untuk memanggil form FDigital, tambahkan beberapa kode pada prosedur event OnClick komponen TSpeedButton BShow (BShowClick). Prosedur tersebut sekarang menjadi seperti berikut: procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin

199

if RDigital.Checked then FDigital.ShowModal; end; end;

Prosedur Event OnCreate pada TForm (FDigital)

Prosedur event OnCreate form hanya berisi inisialisasi beberapa property. Klik ganda sel di sebelah kanan event OnCreate form, kemudian ketikkan kode program berikut pada prosedur yang muncul. procedure TFDigital.FormCreate(Sender: TObject); begin Chart1.ApplyZOrder:= COrder.Checked; Chart1.Legend.Inverted:= True; end;

Property ApplyZOrder digunakan untuk mengontrol ketika beberapa TChartSeries pada komponen TChart yang sama harus ditampilkan independen dalam ruang Z yang berbeda. Property tersebut valid jika grafik ditampilkan 3D dan mempunyai lebih dari satu TChartSeries. Pemberian nilai True pada property Inverted subtab Legend untuk membalikkan urutan legend grafik dari TChartSeries berindeks terbesar.

Prosedur Event OnTimer pada Komponen TTimer (Timer1)

Untuk simulasi operasi, data sinyal digital berupa data acak dengan range 2 data (0 dan 1) diplot pada keempat TChartSeries dengan menggunakan komponen TTimer Timer1. Klik ganda komponen tersebut sehingga pada jendela Code Editor muncul sebuah prosedur. procedure TFDigital.Timer1Timer(Sender: TObject); var GainData: Longint; begin for GainData:= 0 to Chart1.SeriesCount-1 do with Chart1.Series[GainData] do Add(2*GainData+Random(2), '', clTeeColor);

with Chart1.BottomAxis do begin Automatic := False; Maximum := Series1.XValues.Last; Minimum := Maximum - 100; end; end;

200

Variabel GainData berguna untuk menaikkan TChartSeries pada suatu posisi sehingga keempat TChartSeries tersebut tidak saling tumpang tindih. Plot data pada masing-masing TChartSeries menggunakan metode Add dengan syntax: function Add(Const AValue:Double; Const ALabel:String; AColor:TColor):Longint; virtual;

Metode Add digunakan untuk menambahkan data pada TChartSeries jika nilai sumbu horisontal grafik (x) secara otomatis ditentukan ketika nilai sumbu vertikal (y) akan diplot. Varibel ALabel dan AColor merupakan parameter pilihan seperti pada metode AddXY. Nilai Y grafik untuk TChartSeries kedua bergeser secara vertikal sebanyak 2 (dua) kalinya, sedangkan yang ketiga bergeser 4 (empat) kalinya dan yang keempat bergeser sebanyak 6 (enam) kalinya.

Kode program selanjutnya adalah untuk menggeser grafik ke kiri setiap kali ada data yang diplot dalam TChartSeries. Nilai skala maksimum sumbu bawah grafik mengambil nilai terakhir yang telah diplot dalam TChartSeries. Range sumbu horisontal grafik yang ingin ditampilkan setiap kali ada plot data adalah 100 data. Kode program ini dapat ditulis dalam event OnAfterAdd pada keempat TChartSeries seperti pada pembuatan aplikasi Sistem Akuisisi Data.

Prosedur Event OnClick pada Komponen TSpeedButton (BRun)

Pada saat desain form, property Enabled komponen TTimer Timer1 bernilai False sehingga untuk mengendalikannya dimanfaatkanlah komponen TSpeedButton BRun. Klik ganda sel di sebelah kanan event OnClick komponen tersebut, kemudian ketik kode programnya. procedure TFDigital.BRunClick(Sender: TObject); begin if BRun.Caption = '&Run' then begin BRun.Caption:= 'Stop'; Timer1.Enabled:= True; end else begin BRun.Caption:= '&Run'; Timer1.Enabled:= False; end end;

201

Selain untuk mengaktifkan komponen TTimer Timer1, komponen TSpeedButton BRun juga digunakan untuk menonaktifkann berdasarkan nilai property Caption komponen TSpeedButton tersebut.

Prosedur Event OnClick pada Komponen TCheckBox (CLastValues, CView, dan COrder)

Ketiga komponen TCheckBox tersebut berfungsi untuk mengubah beberapa property komponen TChart, yaitu property LegendStyle pada subtab Legend, property 3D pada subtab 3D, dan property ApplyZOrder. Klik ganda masing-masing komponen TCheckBox, sehingga muncul tiga buah prosedur. Lengkapi ketiga prosedur tersebut sehingga menjadi seperti berikut ini procedure TFDigital.CLastValuesClick(Sender: TObject); begin if CLastValues.Checked then Chart1.Legend.LegendStyle:= lsLastValues else Chart1.Legend.LegendStyle:= lsAuto; end;

procedure TFDigital.CViewClick(Sender: TObject); begin Chart1.View3D:= CView.Checked; end;

procedure TFDigital.COrderClick(Sender: TObject); begin Chart1.ApplyZOrder:= COrder.Checked; Chart1.Repaint; end;

Property LegendStyle berguna untuk menentukan materi mana yang akan ditampilkan dalam legend grafik. Jika diberi nilai Last Values maka akan ditampilkan nilai terakhir dari semua TChartSeries yang aktif. Jika diberi nilai Automatic maka secara otomatis nilai property Title TChartSeries akan ditampilkan dalam legend grafik. Metode Repaint menyebabkan Chart induk di-repaint (digambar ulang).

202

Prosedur Event OnGetLegendTex pada Komponen TChart (Chart1)

Event OnGetLegendText digunakan untuk mengganti penulisan teks pada legend grafik. Klik ganda sel di sebelah kanan event OnGetLegendText komponen TChart Chart1, kemudian ketikkan kodenya. procedure TFDigital.Chart1GetLegendText(Sender:

TCustomAxisPanel; LegendStyle: TLegendStyle; Index: Integer; var LegendText: String);

begin if LegendStyle = lsLastValues then LegendText:= LegendText+' --> '+Chart1.Series[Index].Title; end;

Teks legend akan diganti jika komponen TCheckBox CLastValues diberi tanda centang (atau property LegendStyle komponen TChart bernilai lsLastValues).

3.6 Mengukur Kecepatan Plot Data pada TChartSeries Bertipe Fast Line

Plot data pada TChartSeries bertipe Fast Line lebih cepat dibandingkan dengan tipe Line. Untuk mnegukur kecepatannya, buat sebuah form baru dan simpan dalam unit UFastLine. Selanjutnya, pasang sebuah komponen TChart, sebuah komponen TPanel, sebuah komponen TSpeedButton, dan 3 (tiga) buah komponen TCheckBox. Ubah property komponen-komponen tersebut seperti tabel berikut ini.

Nama Object Nama

Property Nilai

AutoSize True


Caption Fast Line Series Topic

Name FFastLine

TForm


203

BevelOuter bvNone

Color clWhite

Height 40

Left 0

Name Panel1

Top 407


Width 540

Caption Speed Test

Cursor crHandPoint

Flat True

Height 22

Left 392

Name BSpeed

Top 10

TSpeedButton (tab Additional). Pasang dalam Panel1

Width 134

Caption &Buffered Display; Draw &Axis; &Clip Points

Left 15; 150; 250

Name CBuffered; CDraw; CClip

TCheckBox (tab Standard) sebanyak 3 buah. Pasang dalam Panel

Top 15

Biarkan nilai property yang lain sesuai default-nya. Klik ganda komponen TChart untuk mengedit property-nya. Klik tab Chart dan pilih subtab Series, lalu buat dua buah TChartSeries bertipe Fast Line dua dimensi dengan menekan tombol Add.... Selanjutnya, pilih subtab General, hilangkan tanda centang pada CheckBox Clip Points. Pada subtab Axis, hilangkan tanda centang pada CheckBox Show Axis sehingga sumbu grafik tidak

204

ditampilkan. Property yang lain dapat diubah sesuai kebutuhan Anda.

Form FFastLine ditampilkan melalui form FOtherDemo dengan menekan komponen TSpeedButton BShow di mana komponen TGroupBox GBFeatures telah ditampilkan dan komponen TRadioButton RFastLine dipilih. Buka kembali prosedur BShowClick pada unit UOtherDemo untuk menambahkan beberapa kode seperti berikut ini. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; end; end;

Prosedur Event OnCreate pada TForm (FFastLine)

Inisialiasasi beberapa variabel, plot data random dalam TChartSeries dilakukan ketika form dibangun melalui prosedur event OnCreate. Klik ganda sel di sebelah event tersebut, kemudian ketik perintah-perintahnya. procedure TFFastLine.FormCreate(Sender: TObject); var DataX, DataRandom: Longint; begin TeeEraseBack:= False; Chart1.BufferedDisplay:= False; TeeDefaultCapacity:= 2000;

for DataX:= 1 to 1000 do begin DataRandom:= Random(Abs(500-DataX))-(Abs(500-DataX) div 2); Series1.Add(DataX+DataRandom, '', clTeeColor); Series2.Add(1000-DataX+DataRandom, '', clTeeColor); end; end;

Variabel global TeeEraseBack berfungsi untuk menangani pesan (message) WM_ERASEBACK. Jika bernilai False, akan mencegah

205

TeeChart menghapus latar belakang panel ketika ada perubahan ukuran grafik. Property BufferedDisplay secara default bernilai True untuk mencegah kelap-kelip ketika grafik yang mempunyai banyak titik diplot kembali sehingga kedipan tersebut hanya terjadi pada daerah kotak grafik. Variabel global TeeDefaultCapacity merupakan kapasitas default untuk object Tlist. Komponen TChart selalu menggunakan variabel ini untuk menginisialisasi kapasitas TList. Secara default, ia bernilai 0 dan jika diset lebih besar lagi dapat meningkatkan kecepatan ketika memplot data pada TChartSeries.

Data yang akan diplot pada masing-masing TChartSeries adalah sebanyak 1000 data. Agar data random yang diplot tersebut terlihat menyempit ke tengah dan melebar ke kedua sisinya, buat suatu fungsi pada variabel DataRandom. Penambahan variabel DataRandom dengan nilai DataX dalam fungsi Add pada TChartSeries Series1 menyebabkan TChartSeries tersebut diplot diagonal dalam kotak grafik. TChartSeries Series2 diplot terbalik dari Series2 sehingga pada posisi tengah (titik 500) keduanya saling berpotongan.

Prosedur Event OnClick pada Komponen TSpeedButton (BSpeed)

Untuk mengukur kecepatan plot data pada TChartSeries, dilakukan proses pembesaran dan pengecilan grafik. Klik ganda sel di sebelah kanan event OnClick komponen TSpeedButton BSpeed sehingga muncul suatu prosedur pada jendela Code Editor. procedure TFFastLine.BSpeedClick(Sender: TObject); var Time1, Time2, Zoom: Longint; begin Screen.Cursor:= crHourGlass; try Chart1.AnimatedZoom:= False; Time1:= GetTickCount; for Zoom:= 1 to 30 do Chart1.ZoomPercent(105); for Zoom:= 1 to 30 do Chart1.ZoomPercent(95); Time2:= GetTickCount; Chart1.AnimatedZoom:= True; Chart1.UndoZoom; finally Screen.Cursor:= crDefault; end;

206

Showmessage('Waktu untuk mem-plot 2000 data'+#13+ 'Sebanyak 61 kali : '+#13+ IntToStr(Time2-Time1)+' milidetik.'); end;

Waktu pertama kalinya plot data disimpan dalam variabel Time1 dengan memanggil metode GetTickCount, kemudian proses pembesaran grafik dilakukan sebanyak 30 kali yang disusul dengan proses pengecilan grafik sebanyak 30 kali. Waktu setelah proses zoom tersebut disimpan dalam variabel Time2. Selanjutnya grafik dikembalikan pada keadaan awal dengan memanggil UndoZoom. Jadi, proses plot ulang data dilakukan sebanyak 61 kali, yaitu 60 kali untuk proses zoom dan sekali proses UndoZoom. Oleh karena masing-masing TChartSeries mempunyai 1.000 data maka data yang diplot pada keduanya adalah 2.000 data. Waktu seluruh proses (dalam milidetik) kemudian ditampilkan pada suatu pesan yang segera muncul ketika proses tersebut berakhir. Selama proses plot data berlangsung, kursor berbentuk Hour-Glass dan jika telah selesai bentuknya kembali pada Default.

Prosedur Event OnClick pada Komponen TCheckBox (CBuffered, CDraw, dan CClip)

Kecepatan plot data dalam TChartSeries juga bergantung pada nilai property BufferedDisplay, ada/tidaknya skala sumbu grafik (property AxisVisible), dan nilai property ClipPoints komponen TChart. Gunakan ketiga komponen TCheckBox yang terpasang dalam form untuk mengendalikan nilai property komponen TChart tersebut. Klik ganda masing-masing komponen TCheckBox sehingga pada jendela Code Editor muncul tiga buah prosedur. procedure TFFastLine.CBufferedClick(Sender: TObject); begin Chart1.BufferedDisplay:= CBuffered.Checked; end;

procedure TFFastLine.CDrawClick(Sender: TObject); begin Chart1.AxisVisible:= CDraw.Checked; end;

procedure TFFastLine.CClipClick(Sender: TObject); begin Chart1.ClipPoints:= CClip.Checked; end;

207

Kecepatan plot data semakin lambat jika komponen-komponen TCheckBox tersebut dicentang.

3.7 Menghubungkan Komponen TDBChart dengan Komponen TTable

Suatu aplikasi grafik berbasis database sebenarnya lebih mudah dibuat dengan komponen TDBChart. Data yang diplot pada TChartSeries dapat diset melalui property DataSource-nya. Dataset dapat berupa komponen TQuery maupun komponen TTable. Pada bagian ini TChartSeries komponen TDBChart akan dihubungkan dengan komponen TTable. Buat sebuah form dengan nama FLingked dan simpan unit-nya dengan nama ULingked. Pada form tersebut, letakkan sebuah komponen TDBChart, sebuah komponen TPanel, sebuah komponen TDBNavigator, 2 (dua) buah komponen TTable, 2 (dua) buah komponen TDataSource, dan 2 (dua) buah komponen TDBGrid. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yang mempunyai nilai lebih dari satu, masing-masing nilainya dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name.


AutoSize True


Caption Linked Table Topic

Name FLinked

TForm


BevelOuter bvNone

Color clWhite

Height 305

Left 0

TPanel

(tab Standard)

Name Panel1

208

Top 0

Width 540

Active True

DatabaseName D:\Program\Database

IndexName (dikosongkan); CusNo

MasterFields (dikosongkan); CusNo

MasterSource (dikosongkan); DataSource1

Name Table1; Table2

Ttable (tab BDE) sebanyak 2 buah

TableName customer.db; orders.db

DataSet Table1; Table2 TdataSource (tab Data Access) sebanyak 2 buah Name DataSource1;

DataSource2

DataSource DataSource1

Flat True

Height 25

Left 8

Top 8

TDBNavigator (tab Data Controls). Pasang dalam Panel1

VisibleButton hanya nbFirst; nbPrior; nbNext; nbLast yang bernilai True

Ctl3D False;

DataSource DataSource1; DataSource2

Height 120

Left 8

Name DBGrid1; DBGrid2

TDBGrid

(tab Data Controls)

sebanyak 2 buah

pasang dalam Panel1

Options.dgEditing False; True

209

Options.dgIndicator False

Options.dgRowLine False

Options.dgRowSelect True; False

Top 41; 172

Width 521

Biarkan property yang lain sesuai dengan nilai default-nya. Pada komponen TDBChart, buat sebuah TChartSeries bertipe Bar tiga dimensi. Klik tab Series, kemudian pilih subtab Format seperti terlihat pada Gambar 3.1.

Gambar 3.1 Kotak dialog Editing Chart untuk subtab Format bertipe Bar

Parameter-parameter yang terdapat dalam subtab Format adalah:

1. ComboBox Style: menentukan bentuk bar yang digunakan untuk menggambar TChartSeries.

210

2. CheckBox Color Each: mengendalikan warna yang akan digambar pada titik TChartSeries. Jika ditandai maka setiap titik TChartSeries akan diberi warna berbeda, jika sebaliknya maka warna setiap titik TChartSeries sesuai dengan warna yang dipilih dengan menekan tombol Color.

3. Tombol Color: untuk mencari warna yang akan diberikan pada setiap titik TChartSeries jika CheckBox Color Each tidak ditandai.

4. GroupBox Multi Bar: akan memberikan efek jika dalam TDBChart yang sama mempunyai lebih dari satu TChartSeries.

5. CheckBox Use Origin: jika bernilai False maka nilai minimum dari daftar nilai akan digunakan sebagai nilai awal sumbu vertikal. Jika sebaliknya maka property YOrigin akan dipakai sebagai titik awal sumbu vertikal.

6. Isian di sebelah Use Origin (property YOrigin): nilai yang digunakan sebagai nilai awal sumbu vertikal grafik. Berlaku jika CheckBox Use Origin dicentang.

7. SpinEdit % Bar Width: menentukan persentase lebar total bar yang digunakan.

8. SpinEdit % Bar Offset: mengindikasikan penempatan bar dalam persen dari ukuran bar.

9. CheckBox Dark Bar 3D Sides: mengontrol apakah sisi bar akan diisi dengan warna bayangan atau tidak. Akan memberikan efek jika grafik dalam bentuk 3D.

10. CheckBox Bar Side Margins: mengontrol apakah bar yang ditampilkan pertama dan terakhir akan dipisahkan dari kotak grafik.

11. CheckBox Auto Mark Position: mengontrol apakah Mark TChartSeries akan direposisi jika terdapat mark yang saling tumpang tindih.

Selanjutnya, klik subtab Data Source untuk menetapkan dataset yang akan digunakan TChartSeries. Pilih Data Set, kemudian pilih Tabel2 pada ComboBox Dataset. ComboBox Labels digunakan untuk mengeset nilai x grafik. Pilih field SaleDate dari daftar fields

211

komponen Table2 dan pilih field AmountPaid sebagai nilai y grafik pada ComboBox Bar sehingga sekarang subtab Data Source menjadi seperti Gambar 3.2.

Gambar 3.2 Kotak dialog Editing Chart untuk subtab Data Source

Form FLinked ditampilkan dengan menekan komponen TSpeedButton BShow yang terpasang pada form FOtherDemo di mana komponen TGroupBox GBFeatures telah ditampilkan dan komponen TRadioButton RLingked dipilih. Buka kembali prosedur BShowClick pada unit UotherDemo, kemudian tambahkan kode program untuk menampilkan form FLingked. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then

212

FLinked.ShowModal; end; end;

Pastikan bahwa di folder D:\Program\Database telah ada file database bernama customer.db, order.db, dan items.db. File database tersebut disertakan dalam CD.

Prosedur Event OnDataChange pada Komponen TDataSource (DataSource1)

Event ini terjadi ketika ada perubahan data pada dataset karena proses scrolling data atau edit data. Klik ganda sel di sebelah kanan event OnDataChange pada komponen TDataSource DataSource1. procedure TFLinked.DataSource1DataChange(Sender: TObject;

Field: TField); begin DBChart1.CheckDataSource(Series1); end;

Metode CheckDataSource akan me-refresh semua data pada TchartSeries, baik dari database Query, Table, atau sumber data TChartSeries lain. Metode ini dapat dipanggil secara rutin jika kita ingin menambahkan atau memodifikasi data yang ditampilkan secara realtime pada TChartSeries. Jadi, data yang diplot pada TChartSeries Series1 akan berubah ketika ada perubahan data pada dataset Tabel2.

3.8 Membuat Grafik Mini yang Resizeable dan Garis Divider

Ukuran komponen TChart dapat diubah sesuai perubahan ukuran form induknya. Garis divider merupakan garis pembatas antara titik baru dan titik lama yang diplot dalam TChartSeries. Buat sebuah form baru dengan nama FMini dan simpan dalam unit UMini. Pada form tersebut, tambahkan sebuah komponen TTimer, 2 (dua) buah komponen TPanel dan 4 buah komponen TChart. Ubah property-nya seperti tabel berikut ini. Untuk property yang mempunyai nilai lebih dari satu, nilai masing-masing dipisahkan

213

oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name.


BorderStyle bsSizeToolWin

Caption Mini Small Chart Topic

Height 148

Name FMini


TForm

Width 202

Enabled False

Interval 1

TTimer (tab System)

Name Timer1

Align alLeft; alClient

Color clWhite

Name Panel1; Panel2

TPanel (tab Standard) sebanyak 2 buah

Width 97

Align alTop; alClient; alTop; alClient

Height 56

TChart (tab Additional) sebanyak 2 buah. Pasang pada Panel1, sisanya pada Panel2

Name Chart1; Chart2; Chart3; Chart4

Untuk mengedit komponen TChart, klik ganda komponen tersebut kemudian buat sebuah TChartSeries bertipe Bar 2 Dimensi dengan nama BarSeries1 pada Chart1, dua buah TChartSeries bertipe Line 3 Dimensi dengan nama LineSeries1, dan LineSeries2 pada Chart2. Kedua komponen TChart tersebut terpasang pada Panel1. Pada Chart3, buat sebuah TChartSeries bertipe Pie 3 Dimensi

214

dengan nama PieSeries1, sedangkan untuk Chart4, buat sebuah TChartSeries bertipe Line 2 Dimensi dengan nama LineSeries3 dan sebuah TChartSeries bertipe Area 2 Dimensi dengan nama AreaSeries1.

Klik subtab Axis dan hilangkan tanda centang pada CheckBox Show Axis untuk semua komponen TChart. Property yang lain dapat diubah sesuai kebutuhan.

Sebelum membuat prosedur dalam unit ini, buka kembali unit UotherDemo, kemudian tambahkan beberapa kode pada prosedur BShowClick untuk menampilkan form FMini melalui form FOtherDemo. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then FLinked.ShowModal; if RMini.Checked then FMini.ShowModal; end; end;

Prosedur Event OnCreate pada TForm (FMini)

Nilai beberapa variabel dan plot data pada TChartSeries dilakukan dalam prosedur event OnCreate. Deklarasikan variabel ValueXChart2 dan ValueXChart4 bertipe Longint pada bagian Public unit. Variabel pertama digunakan untuk menggambar garis divider vertikal pada komponen TChart Chart2 dan variabel yang kedua pada Chart4. Banyaknya data yang akan diplot pada beberapa TChartSeries berdasarkan konstanta NumData. Beri nilai 30 pada konstanta tersebut dan ketikkan tepat di bawah kompiler seperti berikut ini. implementation

{$R *.dfm}

215

Const NumData = 30;

Kemudian klik ganda sel di sebelah kanan event OnCreate form FMini dan tulis kode programnya. procedure TFMini.FormCreate(Sender: TObject); begin ValueXChart2:= -1; ValueXChart4:= NumData div 2; BarSeries1.FillSampleValues(6); PieSeries1.FillSampleValues(8); LineSeries1.FillSampleValues(NumData); LineSeries2.FillSampleValues(NumData); AreaSeries1.FillSampleValues(NumData); LineSeries3.FillSampleValues(NumData); end;

Posisi awal garis divider vertikal pada komponen TChart Chart2 berada di luar kotak grafik, sedangkan pada Chart4 berada tepat di tengah karena banyaknya data yang diplot pada TChartSeries AreaSeries1 dan LineSeries3 berdasarkan nilai konstanta NumData (30 data). Metode FillSampleValues akan memplot nilai acak pada suatu TChartSeries dengan rentang data sebanyak angka dalam tanda kurung.

Prosedur Event OnResize pada TForm (FMini)

Kode program yang dideklarasikan pada event OnResize akan segera dijalankan ketika ukuran form diubah. Klik ganda sel di sebelah kanan event tersebut, kemudian ketikkan kodenya. procedure TFMini.FormResize(Sender: TObject); begin Panel1.Width:= ClientWidth div 2; Chart1.Height:= ClientHeight div 2; Chart3.Height:= ClientHeight div 2; end;

Property Align komponen TPanel Panel1 bernilai alLeft sehingga jika form di-resize maka property Height akan mengikuti perubahan ukuran form. Property Width-nya ditentukan sebagai setengah dari perubahan nilai property ClientWidth form. Ukuran komponen TPanel Panel2 secara otomatis akan mengikuti perubahan ukuran form dan komponen Panel1 karena property Align-nya bernilai alClient, begitu juga dengan ukuran komponen TChart Chart2 yang akan mengikuti perubahan ukuran Panel1 dan komponen Chart1. Ukuran Chart4 juga akan mengikuti perubahan

216

ukuran Panel2 dan komponen Chart3 karena property Align kedua komponen TChart tersebut (Chart2 dan Chart4) bernilai alClient. Pada komponen TChart Chart1 dan Chart3, nilai property Align-nya adalah alTop dan perubahan ukuran Panel1 dan Panel2 hanya akan mengubah lebar (property Width) kedua komponen TChart tersebut sementara tingginya (property Height) tetap. Untuk menyesuaikan ukurannya, property Height komponen TChart Chart1 ditentukan sebagai setengah dari nilai property ClientHeight komponen TPanel Panel1 dan property Height komponen Chart3 juga ditentukan sebagai setengah dari nilai property ClientHeight komponen Panel2.

Prosedur Event OnClose dan OnShow pada TForm (FMini)

Event OnClose terjadi ketika form FMini ditutup, sedangkan event OnShow akan dijalankan setiap kali form ditampilkan. Klik ganda sel di sebelah kanan masing-masing event sehingga pada jendela Code Editor muncul dua buah prosedur. procedure TFMini.FormClose(Sender: TObject; var Action:

TCloseAction); begin Timer1.Enabled:= False; end;

procedure TFMini.FormShow(Sender: TObject); begin Timer1.Enabled:= True; end;

Saat desain property Enabled komponen TTimer Timer1 bernilai False, komponen TTimer tersebut akan diaktifkan setiap kali form ditampilkan dan dinonaktifkan kembali jika form ditutup.

Prosedur Event OnTimer pada Komponen TTimer (Timer1)

Animasi plot data pada TChartSeries dilakukan dalam event OnTimer komponen TTimer Timer1. Klik ganda komponen TTimer tersebut, kemudian buat sebuah prosedur lokal RefreshChart pada prosedur yang muncul. procedure TFMini.Timer1Timer(Sender: TObject);

procedure RefreshChart(AOwner: TChart;

217

var ValueXChart: Longint); var a: Longint; LastValue: Double; begin Inc(ValueXChart); if ValueXChart >= NumData then ValueXChart:= 0; for a:= 0 to AOwner.SeriesCount-1 do begin if ValueXChart = 0 then begin with AOwner do begin LeftAxis.Automatic:= True; LeftAxis.SetMinMax(MinYValue(LeftAxis),

MaxYValue(LeftAxis)); end; LastValue:= AOwner.Series[a].YValues.Last; end else LastValue:= AOwner.Series[a].YValue[ValueXChart-1];

AOwner.Series[a].YValue[ValueXChart]:= LastValue + Random(ChartSamplesMax) -

(ChartSamplesMax div 2); end; end;

var DataBar: Longint; begin RefreshChart(Chart2, ValueXChart2); RefreshChart(Chart4, ValueXChart4);

with PieSeries1 do RotationAngle:= (RotationAngle+1) mod 359;

with BarSeries1 do begin DataBar:= Random(Count); YValue[DataBar]:= YValue[DataBar]*(80.0+Random(40))/100.0; end; end;

Prosedur lokal RefreshChart berguna untuk mengubah nilai suatu TChartSeries setiap detik berdasarkan posisi nilai x-nya (variabel ValueXChart). Setiap detik nilai variabel ValueXChart akan bertambah 1 (satu) melalui prosedur Inc. Nilai variabel tersebut dikembalikan pada nilai 0 (nol) jika telah sama dengan banyaknya data (konstanta NumData). Jika posisi x grafik kembali ke awal (bernilai 0) maka dengan metode SetMinMax, nilai skala minimum dan maksimum sumbu kiri grafik diisi dengan nilai minimum dan maksimum sumbu kiri grafik tersebut. Nilai y yang terakhir disimpan dalam variabel LastValue. Jika posisi x grafik tidak 0 (nol) maka nilai variabel LastValue sama dengan nilai y pada

218

posisi x saat itu. Nilai variabel LastValue tersebut ditambah dengan suatu nilai acak menjadi nilai y grafik pada posisi x yang sekarang.

Seluruh TChartSeries yang terdapat pada komponen TChart Chart2 dan Chart4 akan diplot dengan prosedur lokal tersebut, di mana nilai x untuk TChartSeries pada Chart2 berasal dari nilai variabel ValueXChart2 sedangkan pada Chart4 berasal dari nilai variabel ValueXChart4. Dengan kata lain, variabel ValueXChart pada prosedur lokal RefreshChart diganti dengan ValueXChart2 atau ValueXChart4, bergantung pada nilai variabel AOwner-nya.

TChartSeries bertipe Pie yang terdapat dalam Chart1 akan terus berputar dengan sudut putar sama dengan nilai sisa pembagian sudut putar saat itu (setelah ditambah 1 derajat) terhadap 359 derajat. Nilai y yang diplot pada TChartSeries bertipe bar dan berasal dari nilai y saat itu dikalikan dengan 80% nilai acak antara 0 sampai 39.

Prosedur Event OnAfterDrawValue pada TChartSeries Komponen TChart (LineSeries2 dan LineSeries3)

Setelah data diplot pada TChartSeries LineSeries2 dan LineSeries3, sebuah garis divider vertikal segera digambar pada komponen TChart di mana kedua TChartSeries tersebut berada (Chart2 dan Chart4). Klik ganda sel di sebelah kanan event OnAfterDrawValue pada masing-masing TChartSeries tersebut. procedure TFMini.LineSeries2AfterDrawValues(Sender: TObject); begin if ValueXChart2 >= 0 then with Chart2, Canvas do begin Pen.Color:= clRed; DoVertLine(Series[0].CalcXPos(ValueXChart2), ChartRect.Top+1, ChartRect.Bottom-1); end; end;

procedure TFMini.LineSeries3AfterDrawValues(Sender: TObject); begin if ValueXChart4 >= 0 then with Chart4,Canvas do begin Pen.Color:= clBlue; DoVertLine(Series[0].CalcXPos(ValueXChart4), ChartRect.Top+1, ChartRect.Bottom-1); end;

219

end;

Garis divider vertikal berwarna merah digambar pada TChartSeries LineSeries2 dan berwarna biru pada TChartSeries LineSeries3 dengan metode DoVertLine. Metode DoVertLine ditulis dengan syntax: procedure DoVertLine (X,Y0,Y1:Integer); virtual; abstract;

Metode ini akan menggambar garis vertikal dari Y0 sampai Y1 pada posisi horisontal X. Variabel Y0 merupakan posisi atas kotak grafik ditambah 1 pixel; variabel Y1 diisi dari nilai posisi bawah kotak grafik setelah dikurangi 1 pixel; dan posisi horisontal X diperoleh menggunakan metode CalXPos berdasarkan nilai x masing-masing TChartSeries.

3.9 Membuat Halaman Grafik TChartSeries yang telah diplot dapat dibagi dalam beberapa halaman bergantung jumlah total data dan jumlah data per halaman. Halaman-halaman tersebut kemudian dapat ditelusuri dengan metode-metode scroll grafik. Buat sebuah form baru dengan nama FPaging dan simpan dalam unit UPaging. Pada form tersebut, letakkan sebuah komponen TChart, sebuah komponen TPanel, sebuah komponen TSpinEdit, sebuah komponen TCheckBox, 2 (dua) buah komponen TLabel, dan 4 (empat) buah komponen TSpeedButton. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yang mempunyai nilai lebih dari satu, masing-masing nilai dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name.


AutoSize True


Caption Linked Table Topic

Name FLinked

TForm


220

BevelOuter bvNone

Color clWhite

Height 90

Left 0

Name Panel1

Top 407


Width 540

Left 235

MaxValue 100000

MinValue 0

Name SEPaging

TSpinEdit (tab Samples). Pasang pada Panel1

Top 8

Caption Scale Last Page

Left 290

Name CScale

TCheckBox (tab Standard). Pasang dalam Panel1

Top 10

Caption Points Per Page :; (bebas)

Left 131; 181

Name Label1; LCurrent

Top 11; 38

Tlabel (tab Standard) sebanyak 2 buah. Pasang dalam Panel1

Transparent True

Caption &First; &Previous; &Next; &Last

Flat True

TSpeedButton (tab Additional) sebanyak 4 buah. Pasang dalam Panel1

Glyph Klik ganda sel di sebelah kanan property ini, load gambar BFirst.bmp; BPrevious.bmp; BNext.bmp; BLast.bmp

221

Height 22

Left 69; 165; 261; 357

Name BFirst; BPrevious; BNext; BLast

Top 58

Width 88

Biarkan nilai property yang lain sesuai default-nya. Untuk komponen TChart, klik ganda komponen tersebut kemudian pilih subtab Series pada tab Chart. Tekan tombol Add... untuk menambahkan sebuah TChartSeries bertipe Line 2 Dimensi dan beri nama Series1. Ubah property yang lain sesuai dengan kebutuhan.

Form FPaging akan ditampilkan melalui form FOtherDemo ketika pengguna menekan komponen TSpeedButton BShow di mana komponen TGroupBox GBFeatures telah ditampilkan dan komponen TRadioButton RPaging dipilih. Klik ganda komponen TSpeedButton tersebut dan tambahkan kode untuk menampilkan form FPaging pada prosedur BShowClick. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then FLinked.ShowModal; if RMini.Checked then FMini.ShowModal; if RPaging.Checked then FPaging.ShowModal; end; end;

222

Prosedur Event OnCreate pada TForm (FPaging)

Event OnCreate form hanya akan dijalankan sekali saat form dibangun. Klik ganda sel di sebelah kanan event tersebut, kemudian ketikkan kode programnya. procedure TFPaging.FormCreate(Sender: TObject); begin Series1.FillSampleValues(100); SEPaging.Value:= 18; Chart1PageChange(Chart1); end;

Data sebanyak 100 diplot dalam TChartSeries dengan metode FillSampleValues. Property Value komponen TSpinEdit SEPaging diinisialisasi dengan nilai 18. Nilai property tersebut menunjukkan banyaknya data per halaman sebagai pengganti SpinEdit Points per Page pada subtab Paging (property MaxPointsPerPage) yang nilainya dapat diubah secara run-time. Prosedur Chart1PageChange merupakan prosedur event OnPageChange pada komponen TChart Chart1.

Prosedur Event OnPageChange pada Komponen TChart (Chart1)

Event OnPageChange terjadi ketika property Page komponen TChart telah diubah dan sebelum halaman grafik tersebut berubah. Property MaxPointsPerPage (SpinEdit Points per Page pada subtab Paging) harus lebih besar dari 0 (nol) untuk mengaktifkan mekanisme pemberian nomor halaman secara otomatis. Klik ganda sel di sebelah kanan event tersebut. procedure TFPaging.Chart1PageChange(Sender: TObject); begin Chart1.UndoZoom; LCurrent.Caption:= 'Current/Total : '+

IntToStr(Chart1.Page)+'/'+IntToStr(Chart1.NumPages); BFirst.Enabled:= BPrevious.Enabled; BPrevious.Enabled:= Chart1.Page > 1; BNext.Enabled:= Chart1.Page < Chart1.NumPages; BLast.Enabled:= BNext.Enabled; end;

Untuk menghitung banyaknya halaman grafik dengan benar, komponen TChart harus tidak dalam keadaan diperbesar/diperkecil, jadi coba panggil metode UndoZoom.

223

Informasi suatu halaman terhadap total halaman grafik ditampilkan melalui property Caption komponen TLabel. Property Page komponen TChart mengeset halaman grafik saat ini, sedangkan property NumPages menunjukkan total halaman grafik.

Untuk grafik yang mempunyai halaman lebih dari satu, komponen TSpeedButton BFirst dapat diakses tergantung aktif/tidaknya komponen BPrevious. Komponen BPrevious akan aktif jika halaman grafik yang sekarang ditampilkan bukan halaman pertama. Dan komponen BNext akan aktif jika halaman grafik yang sekarang ditampilkan bukan halaman terakhirnya, sedang aktif/tidaknya komponen BLast tergantung pada aktif/tidaknya komponen BNext. Jika grafik hanya terdiri atas satu halaman maka keempat komponen TSpeedButton tersebut tidak aktif.

Prosedur Event OnChange pada Komponen TSpinEdit (SEPaging)

Komponen TSpinEdit SEPaging merupakan pengganti SpinEdit Points per Page pada subtab Paging, perubahan nilainya akan mempengaruhi banyaknya data per halaman (nilai property MaxPointsPerPage komponen TChart). Klik ganda sel di sebelah kanan event OnChange komponen TSpinEdit tersebut kemudian ketikkan kode programnya pada prosedur SEPagingChange yang muncul.

procedure TFPaging.SEPagingChange(Sender: TObject); begin Chart1.MaxPointsPerPage:= SEPaging.Value; Chart1PageChange(Chart1); end;

Halaman grafik mungkin akan berubah setiap kali ada perubahan nilai property Value komponen TSpinEdit SEPaging sehingga prosedur Chart1PageChange perlu dipanggil kembali untuk menyesuaikan keadaan beberapa komponen.

224

Prosedur Event OnClick pada Komponen TCheckBox (CScale)

Jika saat mengedit komponen TChart Anda tidak menandai CheckBox Scale Last Page pada subtab Paging maka halaman terakhir akan ditampilkan dengan range sumbu horisontal grafik sama dengan halaman yang lain. Jika sebaliknya maka skala halaman terakhir grafik akan diatur berdasarkan banyaknya titik yang tampak pada halaman terakhir tersebut. Komponen TCheckBox CScale berfungsi untuk mengontrol property ScaleLastPage komponen TChart Chart1. Klik ganda komponen TCheckBox tersebut. procedure TFPaging.CScaleClick(Sender: TObject); begin Chart1.ScaleLastPage:= CScale.Checked; end;

Prosedur Event OnClick pada Komponen TSpeedButton (BFirst, BPrevious, BNext, dan BLast)

Untuk menampilkan suatu halaman ke halaman lain, manfaatkan keempat komponen TSpeedButton tersebut. Blok keempat komponen tersebut dan isi sel di sebelah kanan event OnClick dengan nama prosedur ButtonClick, kemudian tekan tombol Enter. procedure TFPaging.ButtonClick(Sender: TObject); begin if Sender = BFirst then Chart1.Page:= 1 else if Sender = BPrevious then Chart1.PreviousPage else if Sender = BNext then Chart1.NextPage else Chart1.Page:= Chart1.NumPages; end;

Jika pengguna menekan komponen BFirst maka halaman pertama grafik akan ditampikan. Jika BPrevious ditekan maka metode PreviousPage akan membawa ke halaman sebelumnya, sedangkan untuk menampilkan halaman selanjutnya, panggil metode NextPage, yaitu ketika pengguna menekan komponen BNext. Halaman yang terakhir akan ditampilkan ketika pengguna menekan komponen BLast.

225

3.10 Menampilkan Nilai Statistik dalam TChartSeries Bertipe Line

Nilai statistik data dapat dibuat dengan mengeset property Data Source suatu TChartSeries dengan suatu fungsi statistik seperti Average, High, dan Low. Buat sebuah form baru lagi, beri nama FstatisticBar, dan simpan dalam unit UStatisticBar. Kemudian, tambahkan sebuah komponen TChart, sebuah komponen TPanel, sebuah komponen TTimer, 3 (tiga) buah komponen TSpeedButton, dan 3 (tiga) komponen TCheckBox. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yang mempunyai nilai lebih dari satu, masing-masing nilai dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name.

Nama Object Nama

Property Nilai

AutoSize True


Caption Statistic Bar Series Topic

Name FStatisticBar

TForm


BevelOuter bvNone

Color clWhite

Height 72

Left 0

Name Panel1

Top 407


Width 540

Enabled False TTimer (tab System)

Interval 100

226

Name Timer1

Caption &Print Graph; Copy to Clipboard; &Run

Cursor crHandPoint

Flat True

Height 22; 22; 54

Left 280; 280; 427

Name BPrint; BCopy; BRun

Top 10; 10; 42

TSpeedButton (tab Additional) sebanyak 3 buah. Pasang dalam Panel1.

Width 113; 113; 102

Caption View 3D; Two Bar Series; Bar Visible

Checked False; False; True

Left 15

Name CView; CTwoBar; CBarVisible

TCheckBox (tab Standard) sebanyak 3 buah. Pasang dalam Panel1.

Top 10; 30; 50

Biarkan nilai property yang lain sesuai default-nya. Untuk komponen TChart, tambahkan sebuah TChartSeries bertipe Bar 3 Dimensi, lalu beri nama Series1. Tambahkan juga 3 (tiga) buah TChartSeries bertipe Line 3 dimensi dengan nama BiggestSeries, AverageSeries, dan SmallestSeries. Ubah judul keempat TChartSeries tersebut dengan menekan tombol Title pada subtab Series (Series, Biggest, Average, dan Smallest). Tampilkan legend grafik dengan memberi tanda centang pada CheckBox Visible pada subtab Legend. Sesuaikan property yang lain dengan kebutuhan.

Untuk menampilkan form FstatisticBar, tambahkan perintah pada prosedur BShowClick. Buka kembali unit UOtherDemo dan klik ganda komponen TSpeedButton BShow sehingga kursor jendela

227

Code Editor akan berada pada prosedur tersebut. Sekarang prosedur BShowClick menjadi seperti berikut ini. procedure TFOtherDemo.BShowClick(Sender: TObject); begin if GBExpand.Visible then begin if RCrossHair.Checked then FCrossHair.ShowModal else if RKeyboard.Checked then FKeyboard.ShowModal else FBackImage.ShowModal end else begin if RDigital.Checked then FDigital.ShowModal; if RFastLine.Checked then FFastLine.ShowModal; if RLinked.Checked then FLinked.ShowModal; if RMini.Checked then FMini.ShowModal; if RPaging.Checked then FPaging.ShowModal; if RStatisticBar.Checked then FStatisticBar.ShowModal; end; end;

Prosedur Event OnCreate pada TForm (FStatisticBar)

Prosedur ini berisi inisialisasi beberapa property ketika form pertama kali dibangun. Klik ganda sel di sebelah kanan event OnCreate, kemudian ketikkan kode program berikut. procedure TFStatisticBar.FormCreate(Sender: TObject); begin TeeEraseBack:= False; NewBar:= nil; Chart1.View3D:= CView.Checked; Chart1.Chart3DPercent:= 35;

Series1.Fillsamplevalues(6); Series1.Dark3D:= Chart1.IsScreenHighColor; end;

Deklarasikan terlebih dahulu variabel NewBar bertipe TBarSeries dalam bagian public unit. Variabel ini dipakai untuk membuat sebuah TChartSeries bertipe Bar secara run-time sehingga pada event OnCreate diberi nilai nil. Tampilan grafik dalam 3D bergantung pada nilai property Checked komponen TCheckBox Cview. Property Chart3DPercent ditentukan bernilai 35%. Data sebanyak 6 (enam) titik diplot pada TChartSeries Series1 dengan metode FillSampleValues. Property Dark3D Series1 (CheckBox

228

Dark Bar 3D Sides pada subtab Format) nilainya ditentukan berdasarkan mode warna grafik yang dipakai dan bernilai True jika dipakai mode lebih dari 256 warna dengan metode IsScreenHighColor.

Prosedur Event OnAfterDraw pada Komponen TChart (Chart1)

Event OnAfterDraw hanya akan dipanggil setelah komponen TChart tersebut telah menggambar semua TChartSeries yang terdapat di dalamnya. Event ini berisi kode untuk menampilkan teks pada masing-masing TChartSeries statistik yang menginformasikan nilai statistik data. Klik ganda sel di sebelah event OnAfterDraw komponen TChart tersebut, kemudian ketikkan kode programnya. procedure TFStatisticBar.Chart1AfterDraw(Sender: TObject); begin if not CTwoBar.Checked then with Chart1, Canvas do begin Brush.Style:= bsClear;

Font.PixelsPerInch:= Screen.PixelsPerInch; Font.Size:= 10; Font.Style:= [fsBold,fsItalic]; Font.Color:= AverageSeries.SeriesColor; TextOut(ChartXCenter, AverageSeries.CalcYPos(0), AverageSeries.Title+' '+ AverageSeries.ValueMarkText[0]);

Font.Color:= BiggestSeries.SeriesColor; TextOut(ChartXCenter, BiggestSeries.CalcYPos(0), BiggestSeries.Title+' '+ BiggestSeries.ValueMarkText[0]);

Font.Color:= SmallestSeries.SeriesColor; TextOut(ChartXCenter, SmallestSeries.CalcYPos(0), SmallestSeries.Title+' '+ SmallestSeries.ValueMarkText[0]); end; end;

Event ini diberlakukan jika komponen TCheckBox CTwoBar tidak dicentang. Pola TBrush ditentukan bernilai bsClear untuk membersihkan pola sebelumnya. Property PixelsPerInch digunakan untuk memastikan bahwa font yang disalin dari kanvas ke printer mempunyai ukuran yang sama. Faktor konversi antara pixel dan

229

inci untuk font tersebut mengambil nilai yang sama dengan nilai pada layar monitor. Huruf yang dipakai untuk menginformasikan nilai statistik dalam TChartSeries statistik berukuran 10 pixel dalam huruf tebal dan miring. Warna huruf diambil dari warna masing-masing TChartSeries tersebut. Untuk menuliskan teks dalam kanvas (komponen TChart Chart1), digunakan metode TextOut yang mempunyai syntax: procedure TextOut(X, Y: Integer; const Text: string);

Penulisan teks tersebut (isi variabel Text) dilakukan pada koordinat (X, Y). Koordinat X untuk semua teks ditentukan dari nilai tengah koordinat horisontal grafik yang diperoleh dengan metode ChartXCenter. Nilai yang dihasilkan metode ini tidak sama dengan property Width dibagi dua karena margin grafik, margin sumbu, lebar legend grafik, dan sebagainya bukan bagian dari ukuran horisontal grafik. Nilai Y berasal dari koordinat vertikal yang merupakan hasil pemanggilan metode CalYPos pada masing-masing TChartSeries statistik. Teks yang ditampilkan terdiri atas judul masing-masing TChartSeries tersebut (property Title TChartSeries) dan nilai Mark-nya (property ValueMarkText TChartSeries).

Prosedur Event OnGetLegendText pada Komponen TChart (Chart1)

Teks informasi nilai statistik pada prosedur event OnAfterDraw di atas hanya ditampilkan ketika komponen TCheckBox CTwoBar tidak dicentang. Untuk menginformasikan nilai statistik jika komponen TCheckBox tersebut dicentang, gunakan legend grafik dengan mengganti nilai property LegendText melalui event OnGetLegendText. K

membangun sistem akuisisi data berbasis database dengan delphi

Documents