Upload
ramadhankurniawan
View
18
Download
4
Embed Size (px)
DESCRIPTION
nnnmmm
Citation preview
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.
Nama Object Nama Property Nilai
AutoSize True
BorderStyle bsToolWindow
Name FCrossHair
TForm
Position poScreenCenter
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
BorderStyle bsToolWindow
Caption Zoom-Scrolling with Keyboard Topic
KeyPreview True
Name FKeyboard
TForm
Position poScreenCenter
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
BorderStyle bsToolWindow
Caption Property BackImage Topic
Name FBackImage
TForm
Position poScreenCenter
BevelOuter bvNone
Color clWhite
Height 54
Left 0
TPanel (tab Standard)
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.
Nama Object Nama Property Nilai
AutoSize True
BorderStyle bsToolWindow
Caption Digital Series Topic
Name FDigital
TForm
Position poScreenCenter
BevelOuter bvNone
Color clWhite
Height 72
Left 0
Name Panel1
Top 407
TPanel (tab Standard)
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
BorderStyle bsToolWindow
Caption Fast Line Series Topic
Name FFastLine
TForm
Position poScreenCenter
203
BevelOuter bvNone
Color clWhite
Height 40
Left 0
Name Panel1
Top 407
TPanel (tab Standard)
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.
Nama Object Nama Property Nilai
AutoSize True
BorderStyle bsToolWindow
Caption Linked Table Topic
Name FLinked
TForm
Position poScreenCenter
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.
Nama Object Nama Property Nilai
BorderStyle bsSizeToolWin
Caption Mini Small Chart Topic
Height 148
Name FMini
Position poScreenCenter
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.
Nama Object Nama Property Nilai
AutoSize True
BorderStyle bsToolWindow
Caption Linked Table Topic
Name FLinked
TForm
Position poScreenCenter
220
BevelOuter bvNone
Color clWhite
Height 90
Left 0
Name Panel1
Top 407
TPanel (tab Standard)
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
BorderStyle bsToolWindow
Caption Statistic Bar Series Topic
Name FStatisticBar
TForm
Position poScreenCenter
BevelOuter bvNone
Color clWhite
Height 72
Left 0
Name Panel1
Top 407
TPanel (tab Standard)
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