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.
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-
169
masing dipisahkan oleh tanda titik koma Sesuaikan berdasarkan urutan property Name): Nama Object TForm
Timage (tab Additional)
TgroupBox (tab Standard) sebanyak 2 buah
Tlabel (tab Standard) sebanyak 2 buah. Pasang pada form
170
Nama Property
Nilai
AutoSize
True
BorderStyle
bsNone
Name
FOtherDemo
Position
poScreenCenter
AutoSize
True
Name
IOtherDemo
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
Width
190
AutoSize
True; False
Caption
Read this : ; (bebas)
Font.Color
clRed; clBlack
Font.Name
Arial
TSpeedButton (tab Additional) sebanyak 4 buah. Pasang dalam form
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
Margin
-1; 5; 5; 5
171
TradioButton (tab Standard) sebanyak 3 buah. Pasang pada GBExpand
TradioButton (tab Standard) sebanyak 7 buah.
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
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
Top
24; 41; 58; 75; 92; 110; 128
Pasang pada GBFeatures
Biarkan nilai-nilai property yang lain sesuai nilai default-nya.
172
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.
173
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 menumenu 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;
174
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 '+
175
'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 TForm
TLabel (tab Standard). Pasang pada komponen
176
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Name
FCrossHair
Position
poScreenCenter
Left
205
Name
LValues
Top
36
TChart
Transparent
True
TPanel (tab Standard)
BevelOuter
bvNone
Color
clWhite
Height
40
Left
0
Name
Panel1
Top
407
Width
540
Caption
&Cross Cursor
Checked
True
Left
15
Name
CCross
Top
15
Caption
Cross-Hair Color
Cursor
crHandPoint
Flat
True
Height
22
Left
200
Name
BColor
Top
10
Width
135
TCheckBox (tab Standard). Pasang dalam Panel1
TSpeedButton (tab Additional). Pasang dalam Panel1
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
177
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) 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.
Kode
procedure TFCrossHair.FormCreate(Sender: TObject); begin Series1.FillSampleValues(30); OldX:= -1; CrossHairColor:= clAqua; CrossHairStyle:= psSolid; CCrossClick(Sender); end;
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 Metode
178
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 melewati TChartSeries yang terdapat di
mouse bergerak 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);
179
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 Style
180
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
psInsideFrame
Garis solid, tetapi menggunakan banyak warna dan property Width lebih
dari 1 Mode
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.
pmNotXor
Kebalikan dari pmXor
Kembali ke prosedur lokal DrawCross, metode Move To akan mengubah posisi mouse ke suatu koordinat. Pemanggilan metode 181
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 CrossHair 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 direset dengan memberi nilai -1 pada variabel OldX sehingga garis Cross-Hair yang telah terbentuk akan dihapus sebelum membuat garis Cross-Hair baru.
182
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
183
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;
184
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.
185
Nama Object TForm
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Caption
Zoom-Scrolling with Keyboard Topic
KeyPreview
True
Name
FKeyboard
Position
poScreenCenter
TPanel
BevelOuter
bvNone
(tab Standard)
Color
clWhite
Height
62
Left
0
Name
Panel1
Top
384
Width
540
Caption
&Inverted Scrolling; Scrolling &Limited
Left
15
Name
CInverted; CLimit
Top
15; 40
AutoSize
True; False
TCheckBox (tab Standard) sebanyak 2 buah. Pasang dalam Panel1
Tlabel
186
(tab Standard)
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
Transparent
True
sebanyak 2 buah pasang dalam Panel1
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. 187
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);
188
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
189
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 190
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). 191
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 komponenkomponen 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 TForm
TPanel (tab Standard)
192
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Caption
Property BackImage Topic
Name
FBackImage
Position
poScreenCenter
BevelOuter
bvNone
Color
clWhite
Height
54
Left
0
Name
Panel1
TGroupBox (tab Standard). Pasang pada Panel1
TRadioButton (tab Standard) sebanyak 3 buah. Pasang dalam GBStyle
TSpeedButton (tab Additional) sebanyak 2 buah. Pasang dalam Panel1
Top
407
Width
540
Caption
Style
Color
clWhite
Height
43
Left
8
Name
GBStyle
Top
7
Width
212
Caption
Stretch; Tile; Center
Checked
True; False; False
Left
17; 81; 137
Name
RStretch; RTile; RCenter
Top
20
Caption
Browse...; Clear Bitmap
Cursor
crHandPoint
Flat
True
Height
22
Left
349; 447
Name
BBrowse; BClear
Top
20
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 193
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;
194
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. 195
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.
196
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 TForm
TPanel (tab Standard)
TTimer (tab System)
TSpeedButton
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Caption
Digital Series Topic
Name
FDigital
Position
poScreenCenter
BevelOuter
bvNone
Color
clWhite
Height
72
Left
0
Name
Panel1
Top
407
Width
540
Enabled
False
Interval
1
Name
Timer1
Caption
&Run
197
(tab Additional). Pasang dalam Panel1
TCheckBox (tab Standard) sebanyak 3 buah. Pasang dalam Panel
Cursor
crHandPoint
Flat
True
Height
54
Left
424
Name
BRun
Top
10
Width
102
Caption
Last Values in Legend; View 3D; Z Order
Cheked
True
Left
15
Name
CLastValues; CView; COrder
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 masingmasing 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
198
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;
199
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;
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. Metode
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;
200
Selain untuk mengaktifkan komponen TTimer Timer1, komponen TSpeedButton BRun juga digunakan untuk menonaktifkann berdasarkan nilai property Caption komponen TSpeedButton tersebut.
Prosedur Event OnClick pada (CLastValues, CView, dan COrder)
Komponen
TCheckBox
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).
201
Prosedur (Chart1)
Event
OnGetLegendTex
pada
Komponen
TChart
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 TForm
202
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Caption
Fast Line Series Topic
Name
FFastLine
Position
poScreenCenter
TPanel (tab Standard)
TSpeedButton (tab Additional). Pasang dalam Panel1
TCheckBox (tab Standard) sebanyak 3 buah. Pasang dalam Panel
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
Width
134
Caption
&Buffered Display; Draw &Axis; &Clip Points
Left
15; 150; 250
Name
CBuffered; CDraw; CClip
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
203
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) 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.
Inisialiasasi
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
204
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;
205
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;
206
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 komponenkomponen 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 TForm
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Caption
Linked Table Topic
Name
FLinked
Position
poScreenCenter
TPanel
BevelOuter
bvNone
(tab Standard)
Color
clWhite
Height
305
Left
0
Name
Panel1
207
Top
0
Width
540
Active
True
DatabaseName
D:\Program\Database
IndexName
(dikosongkan); CusNo
MasterFields
(dikosongkan); CusNo
MasterSource
(dikosongkan); DataSource1
Name
Table1; Table2
TableName
customer.db; orders.db
DataSet
Table1; Table2
Name
DataSource1; DataSource2
DataSource
DataSource1
Flat
True
Height
25
Left
8
Top
8
VisibleButton
hanya nbFirst; nbPrior; nbNext; nbLast yang bernilai True
TDBGrid
Ctl3D
False;
(tab Data Controls)
DataSource
DataSource1; DataSource2
Height
120
Left
8
Name
DBGrid1; DBGrid2
Options.dgEditing
False; True
Ttable (tab BDE) sebanyak 2 buah
TdataSource (tab Data Access) sebanyak 2 buah TDBNavigator (tab Data Controls). Pasang dalam Panel1
sebanyak 2 buah pasang dalam Panel1
208
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.
209
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 210
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
211
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
212
oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name. Nama Object TForm
TTimer (tab System)
TPanel (tab Standard) sebanyak 2 buah
TChart (tab Additional) sebanyak 2 buah. Pasang pada Panel1, sisanya pada Panel2
Nama Property
Nilai
BorderStyle
bsSizeToolWin
Caption
Mini Small Chart Topic
Height
148
Name
FMini
Position
poScreenCenter
Width
202
Enabled
False
Interval
1
Name
Timer1
Align
alLeft; alClient
Color
clWhite
Name
Panel1; Panel2
Width
97
Align
alTop; alClient; alTop; alClient
Height
56
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
213
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}
214
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 215
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 Alignnya 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;
216
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
217
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;
218
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 TForm
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Caption
Linked Table Topic
Name
FLinked
Position
poScreenCenter
219
TPanel (tab Standard)
TSpinEdit (tab Samples). Pasang pada Panel1
TCheckBox (tab Standard). Pasang dalam Panel1
Tlabel (tab Standard) sebanyak 2 buah. Pasang dalam Panel1
TSpeedButton (tab Additional) sebanyak 4 buah. Pasang dalam Panel1
220
BevelOuter
bvNone
Color
clWhite
Height
90
Left
0
Name
Panel1
Top
407
Width
540
Left
235
MaxValue
100000
MinValue
0
Name
SEPaging
Top
8
Caption
Scale Last Page
Left
290
Name
CScale
Top
10
Caption
Points Per Page :; (bebas)
Left
131; 181
Name
Label1; LCurrent
Top
11; 38
Transparent
True
Caption
&First; &Previous; &Next; &Last
Flat
True
Glyph
Klik ganda sel di sebelah kanan property ini, load gambar BFirst.bmp; BPrevious.bmp; BNext.bmp; BLast.bmp
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;
221
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.
222
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.
223
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.
224
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 TForm
TPanel (tab Standard)
TTimer (tab System)
Nama Property
Nilai
AutoSize
True
BorderStyle
bsToolWindow
Caption
Statistic Bar Series Topic
Name
FStatisticBar
Position
poScreenCenter
BevelOuter
bvNone
Color
clWhite
Height
72
Left
0
Name
Panel1
Top
407
Width
540
Enabled
False
Interval
100
225
TSpeedButton (tab Additional) sebanyak 3 buah. Pasang dalam Panel1.
TCheckBox (tab Standard) sebanyak 3 buah. Pasang dalam Panel1.
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
Width
113; 113; 102
Caption
View 3D; Two Bar Series; Bar Visible
Checked
False; False; True
Left
15
Name
CView; CTwoBar; CBarVisible
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
226
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 227
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 228
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 masingmasing TChartSeries statistik. Teks yang ditampilkan terdiri atas judul masing-masing TChartSeries tersebut (property Title TChartSeries) dan nilai Mark-nya (property ValueMarkText TChartSeries).
Prosedur (Chart1)
Event
OnGetLegendText
pada
Komponen
TChart
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. Klik ganda sel di sebelah kanan event OnGetLegendText pada komponen TChart Chart1. procedure TFStatisticBar.Chart1GetLegendText(Sender: TCustomAxisPanel;LegendStyle: TLegendStyle; Index: Integer; var LegendText: String); begin if CTwoBar.Checked then LegendText:= Chart1.Series[Index].Title+' : '+LegendText else LegendText:= Chart1.Series[Index].Title; end;
229
Jika property Checked komponen TCheckBox CTwoBar bernilai True, teks yang ditampilkan pada legend grafik terdiri atas judul setiap TChartSeries ditambah nilai property LegendText-nya. Jika sebaliknya, legend grafik hanya menampilkan judul masingmasing TChartSeries.
Prosedur Event OnTimer pada Komponen TTimer (Timer1) Simulasi plot data pada TChartSeries Series1 dilakukan menggunakan komponen TTimer Timer1. Klik ganda komponen TTimer tersebut sehingga pada event OnTimer muncul sebuah nama prosedur Timer1Timer. procedure TFStatisticBar.Timer1Timer(Sender: TObject); var t: Longint; begin t:= Random(Series1.Count); Series1.YValue[t]:= Series1.YValue[t]+Random(50)-25; if Random(100) < 8 then Series1.BarStyle:= TBarStyle(Random(1 + Ord(High(TBarStyle)))); if Random(100) < 2 then CView.Checked:= not CView.Checked; end;
Nilai Y yang diplot pada indeks t berasal dari nilai Y tersebut ditambah dengan suatu fungsi nilai acak. Variabel t berasal dari nilai acak banyaknya data dalam TChartSeries Series1, yaitu 6 data. Style TChartSeries Series1 akan berubah jika jumlah nilai acak dengan rentang data 100 kurang dari nilai 8. Fungsi Ord akan menghasilkan posisi ordinal dari suatu eksepsi Ordinal-type (dalam tanda kurung). Fungsi High menghasilkan nilai tertinggi dari range bertipe TBarStyle. Jika nilai acak hasil deklarasi fungsi nilai Y tersebut kurang dari nilai 2 maka secara otomatis tanda centang pada komponen TCheckBox akan dihilangkan kembali.
230
Prosedur Event OnClick pada Komponen TSpeedButton (BRun, BPrint, dan BCopy)
Event OnClick komponen TSpeedButton BRun berisi kode untuk mengaktifkan dan menonaktifkan komponen TTimer, sedangkan komponen BPrint digunakan untuk mencetak grafik. Komponen BCopy berguna untuk menyalin gambar grafik dalam clipboard Windows. Klik ganda masing-masing komponen TSpeedButton tersebut sehingga muncul tiga buah prosedur dan ketikkan kode programnya. procedure TFStatisticBar.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; procedure TFStatisticBar.BPrintClick(Sender: TObject); begin Chart1.PrintLandscape; end; procedure TFStatisticBar.BCopyClick(Sender: TObject); begin Chart1.CopyToClipboardMetafile(True); ShowMessage('Grafik telah disalin dalam Clipboard'); end;
Pada prosedur BRunClick, komponen TTimer akan aktif ketika property Caption komponen TSpeedButton BRun bernilai &Run. Property Caption tersebut akan berubah ketika pengguna menekan komponen BRun sekaligus mengaktifkan/menonaktifkan komponen TTimer Timer1. Metode PrintLandscape akan dipanggil ketika pengguna menekan komponen TSpeedButton BPrint. Metode tersebut akan mengeset printer pada orientasi Landscape (posisi kertas horisontal), kemudian metode Print akan dipanggil untuk mencetak gambar grafik. Metode CopyToClipboardMetafile akan menyalin seluruh daerah grafik ke clipboard dalam format metafile. Gambar grafik tersebut kemudian dapat di-paste ke aplikasi lain, misalnya Microsoft Word.
231
Prosedur Event OnClick pada Komponen TCheckBox (CView, CTwoBar, dan CBarVisible) Komponen TCheckBox yang terpasang pada form akan mengontrol property View3D (CheckBox 3D pada subtab 3D) komponen TChart, membuat/menghapus TChartSeries baru bertipe Bar, dan menampilkan/menyembunyikan TChartSeries Series1. Klik ganda masing-masing komponen TCheckBox sehingga tiga buah prosedur CViewClick, CTwoBarClick, CBarVisibleClick muncul. procedure TFStatisticBar.CViewClick(Sender: TObject); begin Chart1.View3d:= CView.Checked; end; procedure TFStatisticBar.CTwoBarClick(Sender: TObject); begin if CTwoBar.Checked then begin NewBar:= TBarSeries.Create(Self); NewBar.ParentChart:= Chart1; NewBar.Title:= 'New Series'; NewBar.BarStyle:= bsPyramid; NewBar.FillSampleValues(Series1.Count); AverageSeries.DataSources.Add(NewBar); NewBar.AddLinkedSeries(AverageSeries); BiggestSeries.DataSources.Add(NewBar); NewBar.AddLinkedSeries(BiggestSeries); SmallestSeries.DataSources.Add(NewBar); NewBar.AddLinkedSeries(SmallestSeries); end else begin NewBar.Free; NewBar:= nil; end; Series1.RefreshSeries; end; procedure TFStatisticBar.CBarVisibleClick(Sender: TObject); begin Series1.Active:= CBarVisible.Checked; if Assigned(NewBar) then NewBar.Active:= CBarVisible.Checked; end;
Grafik akan ditampilkan dalam bentuk 3 dimensi jika property Checked komponen TCheckBox CView bernilai True. Pada prosedur CTwoBarClick, sebuah TChartSeries baru bertipe Bar bernama NewBar akan dibuat jika pengguna memberi tanda 232
centang pada komponen CTwoBar dengan memanggil konstruktor Create. TChartSeries baru tersebut dapat menjadi bagian dari komponen Chart1 dengan mengeset Chart1 pada property ParentChart-nya. Property Title-nya bernilai New Series dan mempunyai style bar berbentuk piramid. Banyaknya data yang diplot pada TChartSeries tersebut sama dengan jumlah data pada TChartSeries Series1. Untuk menghitung kembali nilai statistik, tambahkan TChartSeries NewBar tersebut pada property DataSource masing-masing TChartSeries statistik. Jika komponen TCheckBox CTwoBar tidak dicentang maka TChartSeries NewBar dihapus kembali dengan metode Free. Kemudian, metode RefreshSeries akan me-refresh TChartSeries Series1. Pada prosedur CBarVisibleClick, fungsi Assigned mengecek nilai pointer nil pada variabel NewBar. Jika nilainya tidak nil maka ditampilkan/tidaknya TChartSeries NewBar bergantung pada nilai property Checked komponen TCheckBox CbarVisible. Hal ini berlaku juga untuk TChartSeries Series1.
3.11 Membuat Osiloskop dengan Komponen TImage Selain dengan komponen TChart atau TDBChart, grafik juga dapat dibuat dengan komponen TImage. Untuk membangun sebuah aplikasi pengukuran data sederhana (Osciloscope), buat sebuah form baru dengan nama FOsciloscope dan simpan unit dalam UOsciloscope. Form tersebut membutuhkan 3 (tiga) buah komponen TPanel, sebuah komponen TImage, sebuah komponen TTimer, sebuah komponen TStringGrid, sebuah komponen TLabel, sebuah komponen TGroupBox, 2 (dua) buah komponen TRadioButton, dan 6 (enam) buah komponen TSpeedButton. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yang mempunyai nilai lebih dari satu, masingmasing nilai dipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutan property Name. Nama Object TForm
Nama Property AutoSize
Nilai True
233
TPanel (tab Standard)
Timage (tab Additional). Pasang pada Pgraph.
TStringGrid (tab Additional). Pasang pada Pdata.
234
BorderStyle
bsToolWindow
Caption
Osciloscope with TImage Topic
Name
FOsciloscope
Position
poScreenCenter
BevelOuter
bvNone
Color
clWhite
Height
418
Left
0; 122; 122
Name
Panel1; PGraph; PData
Top
0
Visible
True; False; False
Width
120; 705; 513
Cursor
crHourGlass
Height
418
Left
0
Name
IOsciloscope
Top
0
Width
705
ColCount
4
Color
clWhite
Ctl3D
False
DefaultColWidth
110
DefaultRowHeight
20
FixedColor
$00EBBA9C
Height
380
Left
26
Name
SGData
RowCount
701
ScrollBars
ssVertical
Top
21
Width
465
TTimer (tab System)
Enabled
False
Interval
1
TLabel (tab Standard). Pasang pada Panel1.
Caption
Channel Input
Left
8
Name
Lable1
Top
5
WordWrap
True
Caption
View
Color
clWhite
Height
68
Left
10
Name
GBView
Top
225
Width
95
Caption
Graph; Data
Checked
True; False
Color
clWhite
Left
18
TGroupBox (tab Standard). Pasang pada Panel1.
TRadioButton (Standard). Pasang pada GBView.
235
TSpeedButton (tab Additional) sebanyak 6 buah. Pasang dalam Panel1.
Name
RGraph; RData
Top
21; 41
Caption
Channel &1; Channel &2; Channel &3; Channel &4; &Run; &Save
Cursor
crHandPoint
Flat
True
Height
25; 25; 25; 25; 40; 40
Left
10
Name
BChannel1; BChannel2; BChannel3; BChannel4; BRun; BSave
Top
69; 99; 130; 161; 309; 365
Width
95
Biarkan nilai property yang lain sesuai default-nya. Untuk memanggil form Fosciloscope, tambahkan kode program prosedur BShowClick pada unit UOtherDemo 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 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;
236
if ROsciloscope.Checked then FOsciloscope.ShowModal; end; end;
Sistem pengambilan data dibuat seperti pada Sistem Akuisisi Data, yaitu dari antarmuka ADC, tetapi menggunakan ADC 12 bit. Sebagai simulasi, data berasal dari data acak dengan rentang 4.096 data. Buat prosedur ConvertData dan ReadData seperti di bawah ini. procedure ConvertData(Addres:word); begin DataADC:= Random(4096); end; procedure ReadData; var i, a: Integer; begin for i:= 1 to 4 do begin for a:= 1 to MaxData do begin DataADC:= 0; ConvertData(Addres[i]); Data[i,a]:= DataADC; end; end; end;
Variabel MaxData merupakan konstanta yang dipakai untuk menentukan banyaknya data yang diplot per scanning. Sistem hanya memakai 4 (empat) buah Channel input dan data acak DataADC disimpan sementara dalam variabel Data untuk setiap channel input berdasarkan alamatnya (nilai variabel Address). Deklarasikan konstanta MaxData dengan nilai 700 dan beberapa variabel yang diperlukan pada bagian private dan var unit sehingga kedua bagian tersebut menjadi: private { Private declarations } BufIOsciloscope: TBitmap; CBackGround,CTitle, CScaleAxis, CAxis, CGrid, CPoint, CLegend : TColor; const MaxData = 700; var FOsciloscope: TFOsciloscope; Data: array [1..4,1..700] of Cardinal; Addres: array [1..4] of word; View, DataADC: Word;
237
Variabel BufIOsciloscope yang bertipe TBitmap berfungsi sebagai buffer gambar grafik yang akan diisikan pada komponen Timage, sedangkan variabel CBackGround, CTitle, CScaleAxis, CAxis, CGrid, CPoint, dan CLegend merupakan buffer warna yang dipakai untuk menggambar grafik. Nilai variabel View menunjukkan channel input yang sedang aktif. Untuk menggambar grafik pada komponen Timage, buat sebuah prosedur private dengan nama DrawGraph. Deklarasikan prosedur tersebut pada bagian private unit dan ketikkan kode programnya. procedure TFOsciloscope. DrawGraph (Sender: TObject); var i,a : integer; BitFix,MaxScreen,Left,Bottom : Word; R : TRect; begin MaxScreen:= 660; Left:= 30; Bottom:= 350; R:= Rect(0, 0, BufIOsciloscope.Width, BufIOsciloscope.Height); BufIOsciloscope.Canvas.Brush.Color := CBackground; BufIOsciloscope.Canvas.Brush.Style := bsSolid; BufIOsciloscope.Canvas.FillRect(R); with BufIOsciloscope.Canvas do begin Font.Name:= 'Arial'; Pen.Color:= CAxis; Pen.Width:= 2; MoveTo(Left+3, Bottom); LineTo(MaxScreen+Left, Bottom); MoveTo(Left+3, Bottom); LineTo(Left+3, Bottom-255); Font.Color:= CTitle; Font.Size:= 15; TextOut(Left+260, Bottom-330, 'Osciloscope'); Font.Color:= CLegend; Font.Size:= 11; TextOut(Left+275, Bottom-305, 'for Channel '+ IntToStr(View)); Pen.Width:= 1; for i:= 1 to 10 do begin Pen.Color:= CGrid; Pen.Style:= psDot; MoveTo(Left+5, Bottom-(25*i)); LineTo(MaxScreen+Left, Bottom-(25*i)); Font.Color:= CScaleAxis; Font.Size:= 10;
238
TextOut(Left-23, Bottom-(25*i), IntToStr(i)+' v'); end; if Sender = Timer1 then begin Pen.Color:= CPoint; Pen.Style:= psSolid; BitFix:= Data[View,1] shr 4 ; MoveTo(Left+1, Bottom-BitFix); for a:= 1 to MaxScreen do begin BitFix:= Data[View,a] shr 4 ; LineTo(a+Left+6, Bottom-BitFix); MoveTo(a+Left+6, Bottom-BitFix); end; end; end; IOsciloscope.Canvas.Draw(0,0,BufIOsciloscope); end;
Konstanta MaxScreen menunjukkan lebar layar grafik dalam pixel. Variabel Left berhubungan dengan sumbu kiri grafik, sedangkan variabel Bottom berhubungan dengan sumbu bawah grafik. Untuk membuat kotak persegi empat, gunakan fungsi Rect. Hasilnya disimpan dalam variabel R. Syntax fungsi Rect adalah: function Rect(ALeft, ATop, ARight, ABottom: Integer): TRect; overload;
Titik kiri dan atas kotak persegi empat ada pada posisi 0 pixel dari kanvas. Titik kanan kotak tersebut mengambil nilai lebar buffer BufIOsciloscope dan titik bawah sama dengan nilai tinggi buffer tersebut. Property width dan height buffer BufIOsciloscope ditentukan pada event OnCreate form FOsciloscope. Warna yang disikan sebagai background grafik diambil dari nilai variabel CBackground. Pola brush yang dipakai adalah solid (penuh). Metode FillRect akan mengisi kotak persegi empat tersebut dengan warna dan pola brush yang telah ditentukan. Kode program tersebut berfungsi untuk menghapus gambar grafik yang mungkin telah ada dalam kanvas (komponen TImage) Setelah gambar grafik dibersihkan, kemudian kanvas digambar ulang. Font yang digunakan pada grafik seluruhnya berjenis Arial. Untuk menggambar garis sumbu grafik, ambil nilai variabel warna CAxis dengan ketebalan garis 2 pixel. Garis sumbu horisontal dimulai dari koordinat (33, 350) sampai koordinat (680, 350) dengan metode MoveTo dan LineTo. Garis sumbu vertikal dimulai dari koordinat (33, 350) sampai koordinat (33, 95). 239
Selanjutnya, tuliskan judul grafik dengan warna font dari nilai variabel CTitle dengan berukuran 15 pixel. Penulisan judul grafik dengan metode TextOut dimulai dari koordinat (290, 20) dengan teks Osciloscope. Legend grafik yang menginformasikan channel input yang sedang aktif menggunakan font berwarna sesuai dengan nilai variabel CLegend, berukuran 11 pixel, dan ada pada koordinat (305, 45). Ketebalan garis kisi-kisi (grid) dan garis data grafik adalah 1 pixel. Garis kisi-kisi dibuat hanya sebanyak 10 garis mendatar dengan warna garis berasal dari nilai variabel CGrid dan dilukis terputusputus, contohnya pada koordinat (35, 325) sampai koordinat (680, 325) untuk garis kisi-kisi yang petama. Untuk garis kisi-kisi yang kedua, letakkan pada koordinat (35, 300) sampai (680, 300). Demikian seterusnya untuk 8 (delapan) garis kisi-kisi yang tersisa dengan perbedaan koordinat y sebesar 25 pixel dibandingkan garis sebelumnya. Huruf skala sumbu vertikal grafik berwarna sama dengan nilai CScaleAxis dan berukuran 10 pixel. Penulisan skala sumbu tersebut dimulai pada koordinat x 7 pixel, sedangkan koordinat y sama dengan koordinat y garis kisi-kisi untuk setiap titiknya. Seperti pada garis kisi-kisi, juga dibuat 10 titik skala sumbu. Pelukisan garis data hanya dilakukan jika sender prosedur DrawGraph adalah komponen Timer1. Garis data digambar dengan pola solid tidak teputus-putus dan berwarna sesuai nilai variabel CPoint. Data yang digambar sebelumnya digeser ke kanan dengan operator shr sebanyak jumlah channel input (dalam satuan bit) untuk menghindari pertukaran pelukisan data hasil konversi ADC (data random simulasi). Pergeseran data tersebut disimpan dalam variabel BitFix yang diinisialisasikan pada nilai pertama data konversi tersebut. Inisialisasi tersebut dipakai untuk koordinat pelukisan garis data pertama, yaitu dimulai dari koordinat (32, 350-nilai BitFix) sampai koordinat (33, 350-nilai BitFix). Kemudian, titik yang kedua dimulai dari (33, 350-nilai BitFix) sampai (34, 350-nilai BitFix). Demikian seterusnya untuk 700 titik data per scanning. Pelukisan grafik tersebut dilakukan pada buffer bitmap BufIOsciloscope. Dengan metode Draw, grafik tersebut kemudian 240
digambar dalam kanvas, yaitu komponen TImage Iosciloscope, dimulai dari posisi kiri atas kanvas (0, 0).
Prosedur Event (FOsciloscope)
OnCreate
dan
OnDestroy
pada
TForm
Event OnCreate berisi kode-kode untuk menginisialisasi beberapa variabel dan komponen. Klik ganda sel di sebelah kanan event OnCreate form, kemudian ketikkan kodenya. procedure TFOsciloscope.FormCreate(Sender: TObject); var a : Integer; begin CBackground:= clWhite; CAxis:= clBlack; CGrid:= clSilver; CScaleAxis:= clMaroon; CLegend:= clFuchsia; CPoint:= clRed; CTitle:= clRed; BufIOsciloscope := TBitmap.Create; BufIOsciloscope.Width := IOsciloscope.Width; BufIOsciloscope.Height := IOsciloscope.Height; for a:= 1 to MaxData do begin SGData.Cells[0,a]:= IntToStr(a); SGData.Cells[0,0]:= ' Count Data '; SGData.Cells[1,0]:= ' Data (Decimal) '; SGData.Cells[2,0]:= ' Data (Hexadecimal)'; SGData.Cells[3,0]:= ' Data (Volt)'; end; DrawGraph (Sender); RadioButtonClick(RGraph); end;
Variabel-variabel buffer bertipe TColor diinisialisasikan dengan warna tertentu, sedangkan lebar dan tinggi variabel buffer BufIOsciloscope ditentukan sama dengan nilai property Width dan Height komponen TImage IOsciloscope. Variabel BufIOsciloscope dibangun bertipe TBitmap dengan konstruktor Create. Setiap baris pada sel pertama komponen TStringGrid SGData diisi dengan nomor data, dimulai dari 1 sampai 700 (nilai konstanta MaxData). Untuk mengisi komponen TImage dengan grafik tanpa garis data, dipanggil prosedur DrawGraph dengan sender selain komponen Timer1 (dapat diisi dengan mengetik Sender). Pemanggilan prosedur RadioButtonClick ber-sender RGraph bertujuan untuk menampilkan panel grafik (komponen TPanel PGraph). 241
Event OnDestroy form digunakan untuk membebaskan setiap object yang dibangun dalam event OnCreate form. Klik ganda event tersebut dan deklarasikan kodenya. procedure TFOsciloscope.FormDestroy(Sender: TObject); begin BufIOsciloscope.Free; end;
Metode Free akan membebaskan object bertipe TBitmap BufIOsciloscope dari memori yang dihubungkan dengannya.
Prosedur Event OnClick pada Komponen TRadioButton (RGraph, dan RData) Gambar grafik dan data teks yang ditampilkan ke layar ditentukan berdasarkan nilai property Checked komponen TRadioButton RGraph dan RData. Blok kedua komponen tersebut dan isi sel di sebelah kanan event OnClick dengan nama prosedur RadioButtonClick, kemudian tekan tombol Enter. Ketikkan kode program berikut pada prosedur yang muncul. procedure TFOsciloscope.RadioButtonClick(Sender: TObject); begin PGraph.Visible:= False; PData.Visible:= False; if Sender = RGraph then PGraph.Visible:= True else PData.Visible:= True; end;
Gambar grafik yang terletak pada komponen TPanel PGarph akan ditampilkan ketika pengguna mengklik komponen TRadioButton RGraph. Jika pengguna mengklik komponen RData maka data teks yang terpasang pada PData akan ditampilkan.
Prosedur Event OnTimer pada Komponen TTimer (Timer1) Proses pembacaan data dan pelukisan grafik serta penentuan data teks dilakukan dengan memanfaatkan komponen TTimer Timer1. Klik ganda komponen TTimer tersebut sehingga pada jendela Code Editor muncul sebuah prosedur. Ketikkan kode programnya. procedure TFOsciloscope.Timer1Timer(Sender: TObject); var a : Integer;
242
Volt : extended; begin ReadData; if (View > 0) and (PGraph.Visible) then DrawGraph (Timer1); if (View>0) and (PData.Visible) then for a:= 1 to MaxData do begin Volt:= (Data[View,a]/4096)*10; SGData.Cells[0,0]:= 'Data Channel '+IntToStr(View); SGData.Cells[1,a]:= IntToStr(Data[View,a]); SGData.Cells[2,a]:= IntToHex(Data[View,a],4); SGData.Cells[3,a]:= FloatToStrf(Volt,FFGeneral,6,5); end; end;
Jika property Enabled komponen TTimer Timer1 bernilai True maka proses pembacaan data akan segera dilakukan. Pelukisan grafik akan dilakukan dengan memanggil prosedur DrawGraph ber-sender komponen Timer1 ketika variabel View bernilai lebih dari 0 dan komponen TPanel PGraph telah ditampilkan. Variabel Volt berguna untuk menyimpan nilai hasil konversi dari bilangan desimal menjadi bersatuan Volt. Nilai variabel Volt kemudian menjadi isi sel keempat komponen TStringGrid SGData untuk setiap titik data. Sel ketiganya berisi hasil konversi dari bilangan desimal menjadi bilangan heksadesimal. Nilai aslinya (bilangan desimal) ditampilkan dalam sel kedua komponen SGData. Sel pertamanya pada event OnCreate form telah ditentukan untuk berisi nomor data. Data teks tersebut akan ditampilkan ketika variabel View bernilai lebih dari 0 dan komponen TPanel PData telah ditampilkan.
Prosedur Event OnClick pada Komponen TSpeedButton (BChannel1, BChannel2, BChannel3, BChannel4, BRun, dan BSave) Komponen TSpeedButton BChannel1, BChannel2, BChannel3, dan BChannel4 mempunyai fungsi yang sama, yaitu memberi nilai variabel View sebagai informasi channel input mana yang sedang aktif. Buat sebuah prosedur bersama dengan nama BchannelClick, kemudian ketikkan kode programnya seperti berikut. procedure TFOsciloscope.BChannelClick(Sender: TObject); begin BChannel1.Font.Color:= clRed; BChannel1.Font.Size:= 8;
243
BChannel2.Font.Color:= clRed; BChannel2.Font.Size:= 8; BChannel3.Font.Color:= clRed; BChannel3.Font.Size:= 8; BChannel4.Font.Color:= clRed; BChannel4.Font.Size:= 8; if Sender = BChannel1 then begin View:= 1; BChannel1.Font.Color:= clGreen; BChannel1.Font.Size:= 10; end else if Sender = BChannel2 then begin View:= 2; BChannel2.Font.Color:= clGreen; BChannel2.Font.Size:= 10; end else if Sender = BChannel3 then begin View:= 3; BChannel3.Font.Color:= clGreen; BChannel3.Font.Size:= 10; end else begin View:= 4; BChannel4.Font.Color:= clGreen; BChannel4.Font.Size:= 10; end end;
Nilai variabel View dan warna serta ukuran huruf komponen TSpeedButton akan berubah jika ditekan pengguna. Untuk mengontrol aktifitas komponen TTimer Timer1, digunakan event OnClick komponen TSpeedButton BRun. Klik ganda komponen TSpeedButton tersebut dan ketikkan kode program berikut. procedure TFOsciloscope.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;
Komponen TTimer Timer1 hanya akan aktif ketika pengguna menekan komponen TSpeedButton BRun dengan property Caption-nya saat itu bernilai &Run. Komponen TSpeedButton yang terakhir, yaitu BSave, berfungi untuk menyimpan file gambar grafik dalam suatu folder. Klik
244
ganda komponen TSpeedButton tersebut dan ketikkan kode programnya. procedure TFOsciloscope.BSaveClick(Sender: TObject); var a: integer; begin if not DirectoryExists('D:\Data') then if not CreateDir('D:\Data') then raise Exception.Create('Program gagal membuat direktori '+ 'kerja ''D:\Data''!'); SetCurrentDir('D:\Data'); for a:= 1 to 4 do begin view:= a; DrawGraph (Timer1); BufIOsciloscope.SaveToFile('Graph'+IntToStr(a)+'.bmp'); end; end;
Folder tempat penyimpanan file gambar dicek terlebih dahulu keberadaannya dengan fungsi DirectoryExists. Jika tidak ada maka akan dibuatkan dengan fungsi CreateDir. Folder tersebut kemudian ditentukan sebagai direktori aktif saat itu dengan fungsi SetCurrentDir. Kemudian, proses penyimpanan file gambar untuk setiap channel input tersebut dilakukan dengan memanggil metode SaveToFile. Pemanggilan prosedur DrawGraph ber-sender komponen Timer1 bertujuan untuk memastikan kanvas variabel BufIOsciloscope telah berisi gambar grafik lengkap dengan garis datanya. File gambar yang disimpan berektensi Bmp dan nama file diawali dengan string Graph, dilanjutkan dengan nilai variabel View.
3.12 Membuat File Setup Aplikasi Sistem Akuisisi Data Suatu aplikasi yang telah dikompilasi otomatis akan menghasilkan suatu file EXE. Tanpa Borland Delphi, kita masih dapat menjalankan file EXE tersebut jika file-file pendukung aplikasi tersedia dalam suatu folder atau direktori tertentu. File EXE tersebut dapat disalin ke komputer lain bersama dengan file pendukungnya dengan nama folder seperti yang telah ditentukan. Pada aplikasi Sistem Akuisisi Data, file pendukung berupa file gambar dikodekan berada dalam folder D:\Program. File database 245
bagi unit ULingked (form Flinked) ditentukan ada dalam folder D:\Program\Database. Selain dengan menyalin, file EXE beserta file pendukungnya dapat dipindahkan ke komputer lain dengan menginstal file setup (di dalamnya terdapat file .EXE dan file pendukungnya) yang dibuat melalui software InstallShield Express Borland Limited Delphi. Software tersebut tersedia dalam paket Borland Delphi. Instal dulu software tersebut jika belum ada dalam komputer Anda. Jika sudah, jalankan sehingga pada layar monitor tampil InstallShield Express seperti pada Gambar 3.3.
Gambar 3.3 Tampilan software InstallShield Express
Sebelum file Setup dibuat, klik menu Tools | Options sehingga muncul kotak dialog Options seperti Gambar 3.4. Kotak dialog ini dipakai untuk mengedit setting global file setup dan terdiri atas 4 (empat) tab: tab General, tab File Locations, tab InstallShield Updates, dan tab File Extensions. Pilih tab File Locations, lalu isi isian Project Location dengan direktori tempat file setup akan diletakkan, yaitu D:\Setup\Software, lalu tekan tombol OK. Sebuah 246
konfirmasi tentang pembuatan direktori tersebut akan muncul jika belum ada dalam harddisk. Pilih tombol Yes. Kembali ke jendela InstallShield Express (Gambar 3.3), klik menu Create a new project.... Pada kotak tengah, klik icon Blank Setup Project dan ubah path direktori dan nama file dalam isian Project Name and Location dengan D:\Setup\Software\SAD.ism. Kemudian tekan tombol Create untuk membuat file setup baru dengan nama SAD. Jika ingin mengedit atau melengkapi file setup yang telah ada, pilih menu Open a project.
Gambar 3.4 Kotak Dialog Options pada tab File Locations
Suatu file setup mempunyai 7 (tujuh) bagian. Oleh karena property setiap bagian cukup banyak maka akan dibahas property yang penting saja, yaitu:
Organize Your Setup 1.
General Information Merupakan infomasi dasar tentang file setup, perusahaan (jika ada), dan aplikasi hasil instalasi. Terdiri atas tiga property: 247
a.
Product Properties Berisi informasi tentang aplikasi hasil instalasi. 1) Product Name: menunjukkan nama aplikasi hasil instalasi. Masukkan teks SAD Program sebagai nama produk. Teks yang dimasukkan dalam property ini tidak boleh mengandung karakter: \ / : * ? " < > | . – 2) Product Version: menunjukkan nomor versi aplikasi dan harus terdiri atas angka dalam format aa.bb.cccc dengan a menggambarkan nomor versi utama, b menggambarkan nomor versi tambahan, dan c menggambarkan nomor pembuatan. Nilai aa dan bb harus kurang dari 256 dan cccc harus kurang dari 65.535. 3) Product Code: memasukkan string GUID sebagai identitas unik dari aplikasi. Untuk memudahkan pembuatan GUID, tekan tombol Generate GID di bawah kotak property. 4) Upgrade Code: memasukkan sring GUID yang dapat dipakai untuk meng-upgrade aplikasi. Seperti pada propert Product Code, untuk memudahkan pembuatan GUID maka tekan tombol Generate GID di bawah kotak property. 5) INSTALLDIR: menunjukkan lokasi folder aplikasi hasil instalasi pada komputer lain. Pada aplikasi Sistem Akusisi Data, file pendukung yang dikodekan harus berada dalam folder D:\Program, maka beri nilai property INSTALLDIR dengan path tersebut. 6) DATABASEDIR: menunjukkan lokasi folder untuk filefile database aplikasi hasil instalasi. File database untuk unit ULinked (form FLinked) diset berada dalam folder D:\Program\Database, maka isi nilai property DATABASEDIR dengan nilai [INSTALLDIR]Database. 7) Default Font: memilih font yang digunakan dalam file Setup. Pilih font arial dengan ukuran 8 pixel.
248
b.
Summary Information Stream Berisi informasi tentang perusahaan (jika ada) dan aplikasi yang akan diinstal. 1) Author: menunjukkan nama pembuat file setup. 2) Authoring Comments: memasukkan keterangan tentang file setup dari pembuatnya. Keterangan ini hanya untuk pembuatnya saja dan tidak ditampilkan ke pengguna aplikasi. 3) Subjects: memasukkan nama software di mana file setup ini dibuat. 4) Keywords: menunjukkan daftar kata kunci (dipisahkan oleh tanda koma) yang menggambarkan file setup. Informasi yang dimasukkan akan ditampilkan ketika Anda mengklik kanan mouse pada file setup (.msi), memilih Property pada menu pop-up yang muncul, kemudian menekan tab Summary. 5) Schema: berisi versi minimum installer yang dibutuhkan file setup. Sebagai contoh, jika file setup membutuhkan Installer setidaknya dengan versi 2.0 maka isi property Schema dengan nilai 200.
c.
Add/Remove Program Untuk memunculkan aplikasi hasil instalasi beserta informasinya dalam panel Add/Remove Program pada sistem Window 2000, ME, dan XP. 1)
Use Add/Remove Program: menampilkan aplikasi hasil instalalasi dalam panel Add/Remove Program jika dipilih Yes.
2)
Disable Change Button: jika diset Yes maka tombol Change dalam panel Add/Remove Program akan disembunyikan. Tombol ini berfungsi untuk mengubah option aplikasi setelah diinstal.
3)
Disable Remove Button: tombol Remove mengizinkan pengguna menghapus aplikasi hasil
249
instalasi dari komputer. Pilih No untuk menampilkan tombol ini dalam panel Add/Remove Program. 4)
Disable Repair menyembunyikan
Button: pilih Yes untuk tombol Repair dalam panel Add/Remove Program. Tombol ini mengizinkan pengguna menjalankan Installer untuk memperbaiki aplikasi jika ada file yang terhapus atau rusak.
5)
Display Icon: menampilkan icon aplikasi hasil instalasi dalam panel Add/Remove Program. Caranya, klik sekali pada sel isian di sebelahnya kemudian tekan tombol untuk mencari file .ICO atau file .EXE yang menjadi sumber icon.
6)
Readme: menunjukkan nama file Readme (.txt) untuk file setup. Nama ini akan ditampilkan dalam kotak dialog Support Information pada panel Add/Remove Program.
7)
Publisher, menunjukkan nama perusahaan atau organisasi yang membuat file setup.
8)
Publisher/Product URL: menunjukkan alamat web dari perusahaan atau file setup. Alamat ini ditampilkan dalam hyperlink kotak dialog Support Information pada panel Add/Remove Program.
9)
Product Update URL: menunjukkan link untuk mendapatkan informasi tentang update atau download versi terakhirnya, ditampilkan dalam hyperlink kotak dialog Support Information pada panel Add/Remove Program.
10) Support Contact: menunjukkan nama orang atau departemen di mana pengguna dapat menghubungi technical support. 11) Support URL: menunjukkan alamat website di mana pengguna dapat mencari informasi technical support tentang aplikasi.
250
12) Support Phone Number: menunjukkan telepon dukungan teknis aplikasi ini. 2.
nomor
Features
Feature default, yaitu Always Install, tidak dapat diubah atau dihapus dari file setup. Kita juga tidak dapat menambahkan subfeatures di dalamnya. Feature ini terdiri atas file yang harus diinstal sebagai bagian dari file setup. a.
Description: deskripsi feature yang akan ditampilkan dalam kotak dialog Custom Setup jika pengguna mengklik feature tersebut.
b.
Required: secara default bernilai Yes sehingga pada kotak dialog Custom Setup pengguna tidak mempunyai pilihan dan features akan diinstal.
c.
Remote Installation: menentukan apakah file feature akan diinstal dalam sistem (harddisk) atau dijalankan dari suatu medium, misalnya CD-ROM. Secara default bernilai Favor Local, artinya file yang dipilih dalam Features akan diinstal dalam sistem.
d.
Visible: menentukan bagaimana feature akan ditampilkan dalam kotak dialog Custom Setup. Property ini mempunyai tiga pilihan nilai, yaitu: Visible and Collapsed (feature akan ditampilkan dengan subfeatures Colllapsed sebagai default), Visible and Expanded (feature akan ditampilkan bersama subfeatures Expanded sebagai default), dan Not Visible (feature akan ditampilkan dalam kotak dialog Custom Setup).
e.
Advertised: mengizinkan atau tidak suatu feature untuk advertise.
f.
Comments: keterangan tentang feature.
g.
REG File to Merge at Build: menggabungkan file .reg dengan register feature.
Untuk menambahkan feature baru, klik kanan mouse pada bagian icon Features (di kotak tengah), kemudian klik menu New Feature Ins pada menu pop-up yang muncul. Buat 251
sebuah feature baru dengan nama BDE. Feature ini dipakai untuk tempat penggabungan modul BDE pada property Object/Merge Moduls (bagian dari property Specify Application Data). Berikan deskripsi feature pada property Description dan biarkan property yang lain sesuai default-nya. 3.
Setup Types Mengonfigurasi tipe setup yang akan ditampilkan selama instalasi. Berikut ini adalah definisi dari tipe setup: a. Typical: tipe setup yang normal, meliputi banyak atau semua feature program. b. Minimal: terdiri atas feature yang harus ada untuk menjalankan aplikasi hasil instalasi. c. Custom: mengizinkan pengguna memilih feature yang ingin diinstal. Untuk menyembunyikan suatu tipe setup dalam kotak dialog Setup Type, hilangkan tanda centang pada tipe setup tersebut (bagian Setup Types). Deskripsi setiap tipe setup diberikan pada property Description (kotak kanan atas). Pilih feature yang akan diinstal untuk setiap tipe setup dengan memberi tanda centang pada daftar feature yang ditampilkan pada bagian Features installed for ... setup type: (kotak tengah bawah). Nama tipe setup dapat diubah dengan mengklik kanan mouse pada tipe setup tersebut sehingga muncul menu pop-up. Pilih menu Rename dan ganti namanya sesuai keinginan Anda. Menu Move Up dan Move Down digunakan untuk mengubah urutan tipe setup yang dipilih.
4.
Upgrade Path Opsi ini digunakan untuk memperbarui file setup yang lama. Semua file dalam versi lama akan dihapus dan diganti dengan semua file versi baru. Nilai property Product Code dan Product Version yang baru harus berbeda dengan yang lama. Akan tetapi, nilai property Upgrade Code-nya harus sama dengan versi terdahulu.
252
Untuk menambahkan upgrade aplikasi, klik kanan mouse pada bagian Upgrade Path (di kotak tengah), kemudian klik menu New Upgrade Entry pada menu pop-up yang muncul. Pada layar monitor, muncul kotak dialog Open. Cari file .MSI atau file Setup.EXE yang terdiri atas file .MSI yang akan menjadi upgrade, kemudian tekan tombol Open. Sebuah Upgrade akan ditambahkan pada file setup.
Specify Application Data 1.
Files Menambahkan file-file aplikasi pada file setup. Tujuan utama program setup adalah mentransfer file dari medium sumber (misalnya CD) ke target tujuan (komputer lain). Property Files terbagi dalam 4 (empat) kotak: 2 (dua) kotak sebelah kiri berisi folder dan 2 (dua) kotak sebelah kanan menampilkan file yang terletak di dalam folder tersebut. Di atas keempat kotak tersebut tedapat ListBox Features:. Sebelum menambahkan file, pilih dulu feature yang akan diisi pada ListBox Features:. Secara default, ListBox Features: bernilai Always Install. a.
Kotak kiri atas Source computerÊs folders: berisi folder di mana file aplikasi dan pendukungnya yang akan ditambahkan pada file setup. Pilih folder tempat aplikasi yang akan dimasukkan dalam file setup. Sebagai contoh, pilih D:\Program.
b.
Kotak kiri bawah Destination computerÊs folders: merupakan folder sebagai tempat aplikasi hasil instalasi yang ditentukan dalam property General Information (isi property INSTALLDIR). Pilih folder Program[INSTALLDIR] untuk menampung file .EXE, file .HLP, dan file .TXT. Untuk menampung file database bagi unit ULingked, pilih folder Database[DATABASEDIR] yang terletak di folder Program[INSTALLDIR]. Klik tanda + sehingga folder yang terletak di dalamnya akan ditampilkan.
c.
Kotak kanan atas Source computerÊs files: menampilkan file yang merupakan isi folder yang dipilih dalam kotak 253
Source computerÊs folders. Untuk menambahkan file tersebut dalam file setup, pilih file dalam kotak ini, yaitu file aplikasi berektensi EXE (Demo.Exe), file Help (Help.hlp), file Readme.txt, dan file pendukung (file gambar berektensi bmp), kemudian seret file-file tersebut ke kotak Destination computerÊs files (dalam folder Program[INSTALLDIR]). Untuk mengisi folder Database[DATABASEDIR], seret semua file customer, orders, items yang berekstensi .DB, .PX, .X*, dan Y*. d.
2.
Kotak kiri bawah Destination computerÊs files: menampilkan semua file yang ditambahkan ke folder tujuan yang dipilih pada jendela Destination computerÊs folders. Klik kanan mouse pada suatu file di kotak ini untuk memperlihatkan menu pop-up untuk mengedit file aplikasi.
Files and Features Seluruh file aplikasi yang ditambahkan pada file setup akan diperlihatkan dengan jelas pada bagian ini. Jika file setup mempunyai lebih dari satu feature maka klik feature tersebut untuk melihat isinya. File-file tersebut masih dapat diedit dengan mengklik kanan file sehingga menu pop-up muncul.
3.
Object/Moduls Merge Menambahkan modul yang diperlukan bagi file yang akan diinstalasi. Modul tersebut harus diasosiasikan dengan feature yang ada. Aplikasi Sistem Akuisisi Data menggunakan file database sehingga untuk menjalankannya memerlukan Borland Database Engine (BDE) Administrator dalam sistem operasi Windows. Oleh karena itu, tambahkan modul BDE dengan memberi tanda centang pada CheckBox BDE_ENT. Modul BDE_ENT hanya diasosiasikan dengan feature BDE (beri tanda centang). Hilangkan tanda centang untuk feature Always Install pada bagian Conditional Installation (kotak kanan atas). Pada saat instalasi dan kotak dialog Setup Type telah tampil, pilih tipe setup Custom untuk menentukan apakah feature BDE akan diinstal atau tidak.
254
4.
Dependencies Mempunyai fungsi memasukkan file-file di luar file aplikasi yang diperlukan secara otomatis ketika aplikasi tersebut dijalankan jika versi program InstallShield yang Anda gunakan adalah full edition. Jika tidak, gunakan cara di atas, yaitu menggabungkan suatu modul ke dalam file setup pada suatu feature.
Configure the Target System 1.
Shortcut/Folders Membuat shortcut aplikasi pada komputer. Secara default, InstallShield Express menawarkan empat lokasi shortcut yang dapat dipilih. Menu Program dan Startup diletakkan pada Start menu. Menurut standar industri dan Microsoft, shortcut diletakkan dalam suatu folder Program. Folder Startup hanya berisi shortcut aplikasi yang akan dijalankan setiap kali menjalankan Windows. Pilihan selanjutnya, folder Send To, akan diakses ketika pengguna mengklik kanan mouse pada suatu file. Jika shortcut aplikasi dibuat pada folder Send To, pengguna dapat mengklik kanan suatu file kemudian mengirimkannya ke aplikasi tersebut untuk dibuka. Pilihan yang terakhir, yaitu shortcut diletakkan pada Dekstop komputer, ditampilkan dalam bentuk shortcut icon. Untuk membuatnya, pilih lokasi shortcut, kemudian klik kanan mouse sehingga menu pop-up muncul. Pilih menu New Shortcut untuk membuat shortcut standar. Menu New Advertised Shortcut berguna untuk membuat shortcut advertise yang akan menjalankan Windows Installer jika ada suatu file yang hilang untuk memperbaikinya. Menu yang ketiga, yaitu New Shortcut to Preexisting file, membuat shortcut suatu file yang tidak diinstal dalam file setup, misalnya membuat shortcut Internet Explorer. Menu yang terakhir, yaitu New Folder, digunakan untuk membuat folder sebagai tempat bagi suatu shortcut. Jika memilih dua menu yang pertama, sebuah kotak dialog Browse for Shortcut Target akan muncul. Cari file EXE dengan 255
menekan folder di kotak beberapa kali sehingga menjadi seperti Gambar 3.5, kemudian tekan tombol Open.
Gambar 3.5 Kotak dialog Browse for Shortcut Target
Ubah nama dan property shortcut (kotak kanan atas) sesuai keinginan. Property Target menunjukkan file yang dipanggil dengan shortcut tersebut. Property Run menunjukkan bagaimana aplikasi akan ditampilkan ketika shortcut diklik ganda. Property Working Directory menunjukkan direktori kerja dari program aplikasi. Property Hot Key mengizinkan kombinasi tombol keyboard untuk mengakses shorcut. Caranya, klik sekali sel isiannya, kemudian tekan tombol dan tekan kombinasi tombol Keyboard yang diinginkan pada kotak dialog Hot Key yang muncul, lalu tekan tombol OK. 2.
Registry Installer secara otomatis akan membuatkan suatu register berdasarkan nilai-nilai yang diberikan pada property General Information. Biarkan sesuai default-nya
3.
ODBC Resource Mencocokkan driver, sumber data, dan translator yang diinstal pada aplikasi. Jika ingin menginstal suatu ODBC Resource yang terdapat dalam daftar, beri tanda centang pada ODBC Resource yang dipilih. Jika tidak ada dalam daftar, klik kanan icon Driver and DSNs, kemudian klik menu New Driver Ins
256
pada menu pop-up yang muncul. Masukkan nama baru untuk Driver atau DSN tersebut dan ubah property-nya (kotak tengah bawah). Setelah itu, asosiasikan ODBC Resource tersebut dengan suatu feature file setup. Aplikasi Sistem Akuisisi Data tidak memerlukan ODBC Resource sehingga tidak perlu memberi tanda centang pada daftar Driver and DSNs. 4.
INI File Changes Mengedit file .INI pada suatu sistem operasi sangat beresiko, terutama jika file tersebut digunakan untuk fungsi standar seperti file Boot.INI. File setup untuk aplikasi Sistem Akuisisi Data tidak perlu mengubah property ini.
5.
File Extensions File Extension mengizinkan kita untuk menghubungkan suatu file tertentu ke aplikasi. Jika file tersebut diklik ganda maka aplikasi akan dijalankan dan file tersebut dibuka. Untuk membuatnya, klik kanan mouse pada File Extensions, kemudian pilih menu New Extension Ins yang muncul. Secara default, opsi ini bernama Ext# (# merupakan nomor urut). Masukkan nama ektensi tanpa titik (misalnya txt) dan ubah beberapa property-nya (kotak kanan atas).
Customize the Setup Appearance 1.
Dialogs Merupakan kotak dialog yang muncul pada instalasi file setup. InstallShield Express menyediakan 12 (dua belas) kotak dialog sebagai navigasi selama instalasi. Untuk membatasinya, hilangkan tanda centang pada kotak dialog yang tidak ingin ditampilkan. Gambar pada setiap kotak dialog dapat diubah dengan gambar lain bertipe Bitmap. Secara umum, gambar tersebut terbagi dalam tiga jenis,yaitu untuk Banner dengan ukuran 499x58, Image dengan ukuran 499x312, dan Splash dengan ukuran 465x281. Pengaturan gambar tersebut dapat dilakukan secara global, caranya klik icon Dialogs (kotak tengah atas), masukkan gambar Image.bmp pada property Global Dialog Image dan gambar 257
Banner.bmp pada property Global Dialog Banner. Perubahan gambar tersebut juga dapat dilakukan pada masing-masing kotak dialog. Berikut ini property masing-masing kotak dialog: a.
Splash Bitmap Kotak dialog yang muncul pertama kali ketika file setup dijalankan dan biasanya berisi gambar logo perusahaan. Terdiri atas 2 (dua) property: 1) Splash Bitmap: berisi file bitmap (bmp) yang akan ditampilkan dalam kotak dialog ini. Masukkan folder dan nama filenya atau klik sekali sel isiannya dan tombol , kemudian cari file bitmap-nya. Gambar harus berukuran 465x281. 2) Sunken: pilih Yes jika ingin menampilkan gambar splash cekung ke dalam dan pilih No untuk menampilkan gambar rata dengan permukaan kotak dialog Splash Bitmap.
b.
Install Welcome Kotak dialog ini mempunyai dua tujuan, yaitu memberitahu pengguna bahwa file setup ini sedang dijalankan dengan menampilkan nama aplikasi yang merupakan nilai property Product Name (bagian General Information) pada pesan welcome dan menampilkan informasi hak cipta file setup tersebut. Kotak dialog ini tidak dapat dihilangkan dari proses navigasi instalasi. 1) Bitmap Image: berisi gambar bitmap dengan ukuran 499x312. 2) Show Copyright: pilih Yes jika ingin menampilkan informasi hak cipta untuk file setup. 3) Copyright Text: teks informasi hak cipta akan ditampilkan jika property Show Copyright diset Yes.
258
c.
License Agreement Menampilkan End-User License Agreement (EULA). Pengguna harus setuju dengan lisensi tersebut sebelum melanjutkan instalasi. Secara default diset tidak setuju. 1) Binner Bitmap: berisi gambar binner dengan ukuran 499x58. 2) License File: isi dengan path lengkap dan nama file lisensi atau klik sekali sel isiannya kemudian tekan untuk mencari file lisensi tersebut. File tombol merupakan file dokumen dengan ektensi rtf.
d.
Readme Menampilkan file readme aplikasi. Merupakan kotak dialog pilihan dan secara default tidak dipilih. 1) Binner Bitmap: berisi gambar binner dengan ukuran 499x58. 2) Read File: isi dengan path lengkap dan nama file readme atau klik sekali sel isiannya kemudian tekan untuk mencari file tersebut. File readme tombol juga berupa file dokumen dengan ektensi rtf.
e.
Customer Information Fungsinya adalah untuk mengumpulkan informasi tentang pengguna: nama, perusahaan, dan nomor seri. Kotak dialog ini dapat dihubungkan dengan suatu DLL untuk memeriksa nomor seri untuk mencegah penggunaan program ini secara tidak sah. Sebenarnya kotak dialog ini tidak diperlukan, tetapi secara default dipilih. 1) Banner Bitmap: berisi gambar binner dengan ukuran 499x58. 2) Show Serial Number: jika dipilih Yes maka isian nomor seri akan ditampilkan. 3) Serial Number Template: memasukkan format nomor seri dari file setup dan memfilter nomor seri 259
berdasarkan format. Misalnya, nomor serinya adalah Rumono-0078-1234RS789 maka nilai property ini ditulis ????-###-####??###. Tanda tanya (?) mewakili karakter alfanumerik, sedangkan tanda pagar (#) menunjukkan angka. 4) Serial Number Validation DLL: memasukkan path lengkap dan nama file .DLL yang berisi fungsi validasi nomor seri file setup. Klik sekali sel isiannya kemudian untuk mencari file DLL tersebut. tekan tombol Contoh kode program untuk file DLL dapat dilihat pada C:\Program Files\InstallShield\Express\Samples\ ValidateSerialNumber. Kode pada file ValidateSN.cpp menunjukkan bahwa nomor seri terbagi dalam 3 (tiga) bagian yang dipisahkan oleh tanda minus (nilai variabel TOKEN_SEPARATOR dalam file ValidateSN.h). Bagian pertama harus diisi dengan nilai variabel SERIALNUM_FIELD1 dalam file ValidateSN.h, yaitu Field1. Karakter tersebut dapat ditulis dalam huruf besar atau kecil. Bagian kedua diisi dengan empat angka yang habis dibagi dengan 5 (lima), misalnya 1505. Pada bagian ketiga, tidak ada penyaringan input, artinya semua nilai akan diterima pada bagian ini. 1) Validate Function: memasukkan nama fungsi dalam file DLL yang akan memeriksa nomor seri yang diberikan oleh pengguna. Isi dengan nilai ValidateSN jika Anda menggunakan kode program seperti pada file ValidateSN.cpp. 2) Success Return Value: memasukkan nilai yang dihasilkan oleh fungsi validasi setelah berhasil. Pada contoh kode program ValidateSN.cpp, menghasilkan nilai 1 (nilai variabel VALIDATION_SUCCESS pada file ValidateSN.h) jika berhasil dan -1 jika gagal. Nilai variabel tersebut dapat diubah asal tidak 0. Oleh karena itu, masukkan nilai 1 untuk property Seccess Return Value.
260
3) Retry Limit: mengeset berapa kali pengguna diizinkan mencoba memasukkan nomor seri. Sebagai contoh, jika property ini diberi nilai 3 (tiga) maka pengguna hanya diberikan kesempatan sebanyak 3 kali untuk mencoba memasukkan nomor serinya. Jika pengisian kali ketiga tetap salah maka setup akan ditutup. 4) Show All Users Option: pilih No jika aplikasi hasil instalasi dapat dipakai untuk semua pengguna komputer sebagai default. Jika dipilih Yes maka saat instalasi pengguna dapat memilih apakah aplikasi hasil instalasi dapat dipakai untuk semua pengguna atau hanya untuk pengguna saat ini (pada Windows NT, Windows 2000, atau Windows XP). f.
Destination Folder Menampilkan folder tujuan dari file setup dan sebuah tombol untuk mengubah lokasi folder tujuan tersebut. Kotak dialog ini merupakan pilihan dan secara default tidak dipilih. 1) Banner Bitmap: berisi gambar Banner berukuran 499x58. 2) Show Change Destination: pilih Yes jika ingin menampilkan tombol Change yang mengizinkan pengguna menentukan folder tujuan yang baru.
g.
Database Folder Menampilkan lokasi tujuan dari file-file database file setup. Kotak dialog ini juga pilihan dan secara default tidak dipilih. 1) Banner Bitmap: berisi gambar Banner berukuran 499x58. 2) Show Change Destination: pilih Yes jika ingin menampilkan tombol Change yang mengizinkan pengguna menentukan folder tujuan yang baru.
261
h.
Setup Type Menampilkan variasi konfigurasi setup yang didefinisikan pada property Setup Types. Kotak dialog ini secara otomatis akan disertakan dalam file setup jika mempunyai lebih dari satu tipe setup. Jika hanya mempunyai satu pilihan tipe setup, kotak dialog ini tidak ditampilkan. 1) Banner Bitmap: berisi gambar Banner berukuran 499x58.
i.
Custom Setup Hanya akan ditampilkan ketika pengguna memilih tipe setup Custom Setup. Pada kotak dialog ini pengguna dapat memilih feature yang ingin diinstal. 1) Banner Bitmap: berisi gambar Banner berukuran 499x58. 2) Show Change Destination: pilih Yes jika ingin menampilkan tombol Change yang mengizinkan pengguna menentukan folder tujuan yang baru.
j.
Ready to Install Merupakan kotak dialog yang muncul sebelum proses pemindahan file dilakukan. Pengguna masih dapat mengubah beberapa pilihan setup sebelum menginstal aplikasi. Kotak dialog ini merupakan pilihan dan secara default dipilih. 1) Banner Bitmap: berisi gambar Banner berukuran 499x58. 2) Show Current Settings: pilih Yes jika ingin menampilkan ringkasan setting instalasi pengguna dalam suatu kotak statis (tidak dapat diedit).
k.
Setup Progress Menampilkan semua kegiatan seperti proses mentransfer file yang dilakukan selama instalasi. Kotak dialog ini tidak diperlukan.
262
1) Banner Bitmap: berisi gambar Banner berukuran 499x58. 2) Show Progress Bar: Progress bar merupakan indikasi banyaknya proses instalasi telah diselesaikan. Pilih Yes jika ingin menampilkan Progress bar. l.
Setup Complete Success Akan ditampilkan ketika proses intalasi telah berhasil dilakukan. Kotak dialog ini selain menginformasikan keberhasilan instalasi juga memberi kesempatan pengguna menjalankan aplikasi atau membaca file Readme-nya. 1) Bitmap Image: 499x312.
berisi
gambar
Image
berukuran
2) Show Launch Program: pilih Yes jika ingin memberi kesempatan pengguna menjalankan aplikasi setelah proses instalasi selesai. 3) Program File: memilih file eksekusi yang akan dijalankan jika pengguna memberi tanda centang pada CheckBox Launch the program pada kotak dialog ini. 4) Show Readme: jika ingin memberi kesempatan pengguna membaca file Readme setelah proses instalasi selesai, pilih Yes. 5) Readme File: memasukkan path lengkap dan nama file yang akan dihubungkan dengan CheckBox Show the readme file pada kotak dialog ini.
Enable Automatic Updates 1.
Update Service Menyediakan kemampuan file setup dapat meng-upgrade software secara otomatis. Property ini akan memberitahu dan menyampaikan ke pengguna tentang upgrade aplikasi. Untuk menambahkan kemampuan ini, beri nilai Yes pada property Enable Update Service dan tentukan frekuensi (dalam satuan 263
hari) pengecekan upgrade file pada property Upgrade Check Interval.
Define Setup Requirements and Actions 1.
Requirement Menetapkan target sistem yang diperlukan, baik hardware maupun software bagi file setup. Jika nilai-nilai dalam property ini tidak dipenuhi maka proses instalasi akan dibatalkan. a.
OS Version: memilih sistem operasi komputer yang diizinkan oleh file setup. Gunakan pilihan Any OS (kotak kanan bawah) jika file setup dapat dijalankan pada setiap sistem operasi.
b.
Processor: memilih frekuensi minimum prosesor yang diperlukan untuk menjalankan aplikasi.
c.
RAM: memilih jumlah RAM minimum yang diperlukan untuk menjalankan aplikasi.
d.
Screen Resolution: memilih resolusi minimum monitor yang diperlukan untuk menjalankan file setup.
e.
Color Depth: memilih warna minimum yang diperlukan untuk menjalankan aplikasi.
Prepare for Release 1.
Build Your Releas Informasi yang disusun pada setiap property akan digunakan InstallShield dalam membuat file setup. Ada beberapa tipe media (kotak tengah) yang dapat dipakai untuk membuat file setup. Pilih media SingleImage. Jika memilih media ini, file setup diletakkan pada harddisk komputer dan ukurannya tidak terbatas (hanya bergantung pada kapasitas harddisk). a.
264
Compress Media: pilih Yes jika ingin memampatkan file setup dalam file .CAB. File .MSI akan dimampatkan sebelum dimasukkan dalam file Setup.exe.
b.
Optimize for Media Size: jika dipilih Yes maka ukuran file setup menjadi lebih kecil.
c.
MSI Engine Version: memilih versi MSI Engine yang ingin dimasukkan dalam aplikasi.
d.
MSI Engine Location: menetapkan di mana instaler MSI Engine InstMsiA.exe dan InstMsiW.exe akan diletakkan.
e.
Include Setup.exe: menyertakan file Setup.exe dalam file setup.
f.
Password Protect Launcher: pilih Yes jika untuk membuka file setup penguna harus memasukkan password.
g.
Launcher Password: memasukkan password bagi file setup. Password bersifat case sensitive, jadi nilai suatu karakter dalam huruf besar tidak sama dengan dalam huruf kecil.
h.
Copy Media to Target Machine: pilih Yes untuk menyalin isi media instalasi dan mengaktifkan dukungan Window Installer seperti feature Advertisment dan perbaikkan aplikasi.
i.
Location for Copying Media: menentukan lokasi pada komputer target di mana instalasi tersebut akan disalin.
j.
Include MSI Engine(s): jika ingin menyertakan MSI Engine dalam file setup, tentukan Engine yang akan dimasukkan dari daftar. Jika tidak, pilih None.
k.
Delay MSI Engine Reboot: pilih Yes jika ingin menunda reboot sebagai hasil instalasi dari MSI Engine setelah setup selesai dilakukan. Jika dipilih No maka reboot akan dilakukan setelah selesai menginstal MSI Engine dan sebelum menginstal file setup.
l.
Suppress Launcher Warning: beberapa versi Windows hanya akan mengizinkan update dengan paket service dari Windows Installer Service dan akan membangkitkan pesan peringatan. Pada keadaan ini, pengguna harus mengklik OK untuk melanjutkan instalasi. Pilih Yes untuk menyembunyikan pesan peringatan tersebut. 265
m. Generate Autorun.inf File: pilih Yes jika ingin membuat file autorun yang akan segera menjalankan file setup ketika media (misalnya CD) dimasukkan. Buat sebuah file teks dengan aplikasi Notepad (biasanya shortcut Notepad terletak pada menu Program | Accessories). Ketikkan kode berikut: [autorun] open = filename
filename merupakan nama file yang akan dijalankan. Ganti dengan Setup.exe jika file setup menyertakan file Setup.exe. Simpan file teks tersebut dengan nama Autorun.inf, lalu salin file teks ini bersama dengan file Setup.exe yang dihasilkan dari kompilasi file setup dalam media CD sehingga saat CD tersebut dimasukkan ke CD-ROM, file Setup.exe akan segera dijalankan. Untuk membuat file Setup.exe, kompilasi file setup tersebut dengan mengklik menu Build | Build SingleImage. File Setup.exe yang terbentuk, diletakkan pada folder D:\Setup\Software\SAD\ Express\SingleImage\DiskImages\DISK1. Menu Build | Test SingleImage digunakan untuk mengetes file Setup.exe yang terbentuk tersebut, sedangkan menu Build | Run SingleImage berguna untuk menjalankan file Setup.exe melalui aplikasi InstallShield Express.
266
