• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Membangun sistem akuisisi data berbasis database dengan delphi
 

Membangun sistem akuisisi data berbasis database dengan delphi

on

  • 1,862 views

 

Statistics

Views

Total Views
1,862
Views on SlideShare
1,862
Embed Views
0

Actions

Likes
0
Downloads
37
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Membangun sistem akuisisi data berbasis database dengan delphi Membangun sistem akuisisi data berbasis database dengan delphi Document Transcript

    • 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) yangkhusus 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 3BEBERAPA TOPIK TAMBAHANUNTUK SUATU APLIKASITopik-topik tambahan yang akan dipaparkan berikut ini adalahuntuk suatu aplikasi akuisisi data dengan komponen TChart.Beberapa topik dapat ditambahkan dalam setting program aplikasiSistem Akuisisi Data pada Bab 2 dan sebagian yang lainmerupakan aplikasi tambahan yang dapat diterapkan padaaplikasi yang lain. Manfaatkan form FOtherDemo (tersimpandalam unit UOtherDemo) yang telah dibuat pada Bab 1 untukmenampung topik-topik tersebut. Untuk membuat suatu topik,dibuat form baru.3.1 Mendesain Form FOtherDemoPada form FOtherDemo, letakkan sebuah komponen TImage, 2(dua) buah komponen TGroupBox, 2 (dua) buah komponenTLabel, 4 (empat) buah komponen TSpeedButton, dan 10(sepuluh) buah komponen TRadioButton. Kemudian, ubahlahproperty komponen-komponen tersebut seperti tabel berikut ini(untuk property yang mempunyai nilai lebih dari satu, masing- 169
    • masing dipisahkan oleh tanda titik koma Sesuaikan berdasarkanurutan property Name): Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsNone Name FOtherDemo Position poScreenCenter Timage (tab AutoSize True Additional) Name IOtherDemo Picture Klik ganda sel disebelah kanan property ini, load gambar IOtherDemo.jpg TgroupBox Caption Expand; Features (tab Standard) Color clWhite sebanyak 2 buah Font.Color clRed Font.Name Arial Font.Size 9 Font.Style.fsBold True Height 91; 154 Name GBExpand; GBFeatures Visible False Width 190 Tlabel (tab AutoSize True; False Standard) Caption Read this : ; (bebas) sebanyak 2 buah. Pasang Font.Color clRed; clBlack pada form Font.Name Arial170
    • 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; TrueTSpeedButton Caption (kosongkan); Expand...(tab Form; Features...; Show meAdditional) The Demo !sebanyak 4 Cursor crHandPointbuah. Pasangdalam form 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
    • Name BClose; BExpand; BFeatures; Bshow Top 1; 27; 47; (bebas) Width 12; 127; 127; 129 TradioButton Caption Cross Hair; Keyboard (tab Standard) Scrolling; Property sebanyak 3 BackImage buah. Pasang Checked True; False; False pada GBExpand Color clWhite Left 18 Name RCrossHair; RKeyboard; RBackImage Top 24 TradioButton Caption Digital Chart; Fast Line (tab Standard) Series; Linked Tables; Mini sebanyak 7 Small Charts; Property buah. Paging; Statistical Bar Series; Osiloscope with Pasang pada TImage GBFeatures Checked False untuk selain RDigital Color clWhite Left 18 Name RDigital; RFastLine; RLinked; RMini; RPaging; RStatistic; ROsciloscope Top 24; 41; 58; 75; 92; 110; 128Biarkan nilai-nilai property yang lain sesuai nilai default-nya.172
    • Prosedur Event OnMouseDown pada TImage (IOtherDemo)Form FOtherDemo tidak dapat digeser karena propertyBorderStyle bernilai bsNone. Untuk mengatasinya, buat eventOnMouseDown pada komponen TImage. Klik ganda sel di sebelahkanan event OnMouseDown komponen tersebut dan ketikkankode 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 padasaat form ditutup, yaitu menampilkan kembali form FMainDemoyang telah disembunyikan saat form ini dibangkitkan. Pada tabevent TForm, klik ganda sel di sebelah kanan OnClose dan ketikkode 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 formFOtherDemo kemudian menampilkan kembali form FMainDemo(yaitu memanggil prosedur event OnClose yang telah dibuat). Klikganda sel di sebelah kanan event OnClick komponen tersebutkemudian 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 formFOtherDemo dapat ditentukan dalam prosedur event OnCreate. 173
    • Pada tab event TForm, klik ganda sel di sebelah kanan OnCreatedan 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 penulisanposisi kiri dan atas beberapa komponen dan prosedur ButtonClickdengan sender BExpand menyebabkan komponen TGroupBoxGBExpand beserta komponen yang terpasang di dalamnyaditampilkan ketika form pertama kali dibangkitkan. Jikamenginginkan keadaan tersebut terjadi setiap kali form dipanggil,deklarasikan dalam event OnShow form.Prosedur Event OnClick pada Komponen TSpeedButton (BExpanddan BFeatures)Menu-menu yang ada dalam form FOtherDemo terbagi dalamkelompok Expand dan Features. Kelompok pertama berisi menuyang dapat ditambahkan dalam setting program aplikasi SistemAkuisisi Data yang telah dibuat dan menu yang kedua berisi topikuntuk membuat aplikasi lain. Manfaatkan komponenTSpeedButton BExpand dan BFeatures untuk menampilkan menu-menu dalam komponen TGroupBox. Blok kedua komponenTSpeedButton tersebut, isi sel di sebelah kanan event OnClickdengan 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 ditampilkanberdasarkan sender prosedur ButtonClick, termasuk posisi ataskomponen TSpeedButton BShow.Prosedur Event OnMouseMove pada Semua KomponenKomponen TLabel LNotes berfungsi untuk menginformasikanketerangan suatu komponen ketika mouse bergerak di ataskomponen tersebut melalui event OnMouseMove. Blok semuakomponen yang tertampung dalam form FOtherDemo, isi pada selsebelah kanan tab event OnMouseMove dengan nama prosedurNotes, 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 padaTChartSeries 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 senderprosedur Notes, property Caption komponen LNotes akanmenampilkan keterangan untuk setiap komponen tersebut. Jikaberada di luar komponen-komponen tersebut, tidak ada teks yangditampilkan.3.2 Membuat Garis Cross-HairGaris Cross-Hair merupakan garis silang pada „kotak‰ grafikketika mouse berada di atas grafik tersebut dan posisinya akanberubah mengikuti perubahan posisi mouse. Garis Cross-Hairdapat dipakai untuk mengetahui nilai suatu titik dalam grafik.Buatlah sebuah form baru dengan nama FCrossHair dan simpannama unit dalam UCrossHair. Pada form tersebut, pasang sebuahkomponen TChart, komponen TLabel, komponen TPanel,komponen TCheckBox, dan sebuah komponen TspeedButton,kemudian ubah property-nya seperti tabel berikut ini. Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsToolWindow Name FCrossHair Position poScreenCenter TLabel (tab Left 205 Standard). Name LValues Pasang pada komponen Top 36176
    • TChart Transparent True TPanel (tab BevelOuter bvNone Standard) Color clWhite Height 40 Left 0 Name Panel1 Top 407 Width 540 TCheckBox Caption &Cross Cursor (tab Standard). Checked True Pasang dalam Left 15 Panel1 Name CCross Top 15 TSpeedButton Caption Cross-Hair Color (tab Cursor crHandPoint Additional). Flat True Pasang dalam Panel1 Height 22 Left 200 Name BColor Top 10 Width 135Biarkan property yang lain sesuai nilai default-nya. Untukmengedit property komponen TChart, klik ganda komponentersebut sehingga muncul kotak dialog seperti Gambar 1.1. Buat 177
    • sebuah TChartSeries bertipe Line dua dimensi (tanda centangpada parameter 3D dihilangkan) dengan nama Series1 dan ubahnilai beberapa property lain sesuai kebutuhan.Deklarasikan beberapa variabel pada bagian public unit dengantipe 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 CrossHairColorbertipe TColor digunakan untuk mengisi warna pena (propertyColor) yang akan dipakai saat melukis garis Cross-Hair padakomponen TChart. Property Style pena tersebut berasal dari nilaivariabel CrossHairStyle.Prosedur Event OnCreate pada TForm (FCrossHair)Kode program yang dideklarasikan dalam prosedur eventOnCreate hanya dijalankan sekali, yaitu saat form dibangun. Klikganda sel di sebelah kanan event OnCreate form sehingga munculsebuah prosedur pada jendela Code Editor.procedure TFCrossHair.FormCreate(Sender: TObject);begin Series1.FillSampleValues(30); OldX:= -1; CrossHairColor:= clAqua; CrossHairStyle:= psSolid; CCrossClick(Sender);end;Metode FillSampleValues akan memplot nilai acak padaTChartSeries dengan rentang data sebanyak angka dalam tandakurung. Posisi horisontal mouse yang lama di-reset denganmemberi nilai -1 pada variabel OldX. Warna pertemuan keduagaris Cross-Hair ketika form FCrossHair pertama kali ditampilkanbernilai clAqua dan disimpan dalam variabel CrossHairColor. GarisCross-Hair ditampilkan solid (tidak terputus-putus) denganmemberi nilai psSolid pada property Style pena (menjadi nilai178
    • variabel CrossHairStyle). Prosedur CCrossClick untuk menjalankanperintah event OnClick komponen TCheckBox CCross.Prosedur Event OnClick pada Komponen TCheckBox (CCross)Komponen TCheckBox CCross berfungsi untuk mengubah kursorketika mouse berada di daerah komponen TChart. Kursorditampilkan Cross (crCross) jika property Checked komponenTCheckBox CCross bernilai True (dicentang) dan jika sebaliknyakursor berbentuk Default (crDefault). Klik ganda sel di sebelahkanan event OnClick komponen TCheckBox tersebut, kemudiandeklarasikan 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 ketikamouse bergerak melewati TChartSeries yang terdapat didalamnya.Prosedur Event OnMouseMove pada Komponen TChart (Chart1)Prosedur event OnMouseMove berguna untuk menangani kejadianketika mouse digerakan di atas komponen TChart Chart1. Buatlahprosedur lokal DrawCross pada prosedur event OnMouseMoveyang berisi perintah-perintah untuk melukis garis Cross-Hairdengan 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 untukmenggambar garis dalam kanvas (komponen TChart Chart1).Property Style TPen menentukan style pena, property Widthmenentukan ketebalan garis tersebut, dan property Mode TPenmenentukan bagaimana warna pena tersebut berinteraksi denganwarna kanvas. Tabel berikut ini menjelaskan arti nilai propertyStyle dan Mode. Property Nilai Arti Style 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 lebih180
    • 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 pmXorKembali ke prosedur lokal DrawCross, metode Move To akanmengubah posisi mouse ke suatu koordinat. Pemanggilan metode 181
    • Move To sama dengan menentukan property PenPos TPen, sertadilakukan sebelum memanggil metode Line To. Metode Line Tomenggambar garis pada kanvas dari koordinat yang ditentukandalam metode Move To sampai koordinat baru (x, y) yangditentukan oleh mouse dan menetapkan posisi pena padakoordinat baru tersebut.Pada prosedur lokal DrawCross, kombinasi metode MoveTo danLineTo yang pertama untuk menggambar garis Cross-Hair vertikaldimulai dari koordinat (nilai variabel ax (posisi x Mouse), posisiatas kotak grafik (property ChartRect), tinggi dinding grafik akibatefek 3D (property Heigh3D)), sampai koordinat (nilai variabel ax,posisi bawah kotak grafik-tinggi dinding 3D). Pengurangankoordinat y dengan nilai property Height3D berguna untukmengantisifasi tampilan grafik 3D (tiga dimensi), yaitu jikaparameter CheckBox 3D pada subtab 3D (Gambar 1.10) diberitanda centang. Property Height3D bernilai 0 jika grafik ditampilkan2 dimensi sehingga garis Cross-Hair vertikal menempel padadinding grafik.Kombinasi yang kedua berguna untuk menggambar garis Cross-Hair horisontal dengan batas kiri garis pada koordinat (posisi kirikotak grafik (property ChartRect) ditambah lebar dinding grafikakibat efek 3D (property Width3D), nilai variabel ay (posisi yMouse)) dan batas kanan grafik pada koordinat (posisi kanankotak grafik+lebar dinding 3D), nilai variabel ay). PropertyWidth3D bernilai 0 jika grafik ditampilkan 2 dimensi. Nilai propertyHeight3D dan Width3D berdasarkan nilai SpinEdit 3D% padasubtab 3D.Pada prosedur event OnMouseMove di atas, jika posisi mousetidak sedang di-reset (tidak sama dengan -1) maka prosedur lokalDrawCross dipanggil untuk membuat garis Cross-Hair. Nilaivariabel ax dan ay berasal dari posisi (x, y) mouse sebelum posisitersebut berubah menjadi yang tersimpan sementara dalamvariabel OldX dan OldY. Posisi (x, y) mouse tersebut kemudian di-reset dengan memberi nilai -1 pada variabel OldX sehingga garisCross-Hair yang telah terbentuk akan dihapus sebelum membuatgaris Cross-Hair baru.182
    • Fungsi PtInRect mengecek posisi (x, y) mouse ketika berada didalam 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 didalam kotak Rect. Jika posisi x mouse (dikurangi nilai propertyHeight3D komponen TChart) dan posisi y mouse (ditambah nilaiproperty Width3D komponen TChart) berada dalam kotak grafik(property ChartRect komponen TChart) maka garis Cross-Hairbaru 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 dalamvariabel OldX (posisi x) dan OldY (posisi y).Metode GetCursorValues berguna untuk mendapatkan nilai posisi(x, y) mouse pada TChartSeries yang ditentukan. Nilai-nilaitersebut disimpan sementara dalam variabel ValueX dan ValueY,kemudian ditampilkan dalam property Caption komponen TLabelLValue menggunakan metode LabelValue pada masing-masingsumbu grafik. Metode GetHorizAxis menghubungkan TChartSeriesSeries1 dengan sumbu horisontal grafik. Untukmenghubungkannya dengan sumbu vertikal grafik, gunakanmetode GetVertAxis.Jika mouse tidak berada dalam kotak grafik (fungsi PtInRectbernilai False) maka garis Cross-Hair tidak digambar dan tidakada teks yang ditampilkan dalam property Caption komponenTLabel LValue.Prosedur Event OnAfterDrawValue pada TChartSeries (Series1)Event OnAfterDrawValue terjadi setelah data diplot dalamTChartSeries, yaitu me-reset posisi (x, y) mouse. Perintah iniberguna ketika plot data dilakukan secara on-line. Caramembuatnya, aktifkan jendela Object TreeView, cari objectbernama Series1 (terletak pada komponen TChart), kemudianaktifkan jendela Object Inspector dan klik ganda sel di sebelahkanan 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 variabelCrossHairColor. Perubahan warna dapat dilakukan denganmemanggil kotak dialog Color dan dieksekusi dengan tombol OK.Oleh karena komponen TColorDialog tidak dipasang dalam form,deklarasikan function bernama EditColor pada bagian private unitdan ketikkan kode program untuk function tersebut untukmemanggil 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 untukmembangkitkan kotak dialog Color dan menginisialisasi warnayang terpilih berdasarkan nilai variabel AColor. Metode Executedigunakan untuk menampilkan kotak dialog Color. Jika kotakdialog Color tersebut dieksekusi, nilai variabel AColor akan samadengan warna yang dipilih dari daftar warna pada kotak dialogColor. Hasil dari function EditColor adalah variabel AColor.Komponen TSpeedButton BColor dipakai untuk menampilkankotak dialog Color kemudian mengeksekusinya. Klik ganda sel disebelah 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 samadengan nilai variabel CrossHairColor saat itu dan pada saat kotakdialog Color dieksekusi, hasilnya (nilai variabel AColor) menjadinilai variabel CrossHairColor yang baru. Perubahan nilai variabeltersebut akan mengubah warna kursor Cross, sedangkan warnagaris Cross-Hair merupakan kombinasi warna (dua warna yangsama) yang pertemuannya menghasilkan warna kursor Cross.Untuk menampilkan form FcrossHair, buat sebuah prosedur eventOnClick pada komponen TSpeedButton BShow yang terpasangdalam form FOtherDemo. Klik ganda komponen TSpeedButtontersebut 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 komponenTGroupBox GBExpand telah ditampilkan dan komponenTRadioButton RCrossHair dipilih, kemudian pengguna menekankomponen TSpeedButton BShow.3.3 Zoom dan Scrolling Grafik dengan Tombol KeyboardPada aplikasi Sistem Akuisi Data, proses zoom grafikmenggunakan komponen TSpeedButton dan scrolling grafikdengan komponen TScrollBar. Kedua proses tersebut dapatdilakukan dengan keyboard, untuk itu buat sebuah form baru, berinama Fkeyboard, dan simpan unit dalam UKeyboard. Letakkansebuah komponen TChart, sebuah komponen TPanel, 2 (dua)buah komponen TCheckBox, dan 2 (dua) buah komponen TLabelpada form FKeyboard. Ubah property komponen-komponentersebut seperti tabel berikut ini. Untuk property yang mempunyainilai lebih dari satu, nilai masing-masing dipisahkan oleh tandatitik koma. Sesuaikan berdasarkan urutan property Name. 185
    • Nama Nama Object Nilai PropertyTForm AutoSize True BorderStyle bsToolWindow Caption Zoom-Scrolling with Keyboard Topic KeyPreview True Name FKeyboard Position poScreenCenterTPanel BevelOuter bvNone(tab Standard) Color clWhite Height 62 Left 0 Name Panel1 Top 384 Width 540TCheckBox Caption &Inverted Scrolling; Scrolling(tab Standard) &Limitedsebanyak 2 Left 15buah. Pasangdalam Panel1 Name CInverted; CLimit Top 15; 40Tlabel AutoSize True; False186
    • (tab Standard) Caption Read This :; Gunakan tombol panah dan Page Up/Page sebanyak 2 Bottom untuk scrolling grafik. buah pasang Tekan SPACE untuk me-reset dalam Panel1 zoom dan kombinasi tombol SHIFT + tombol panah untuk zoom grafik Height 13; 40 Left 241; 247 Name Label1; Label2 Top 1; 18 Transparent TrueProperty yang lain biarkan sesuai dengan nilai default-nya. Padakomponen TChart, buat sebuah TChartSeries bertipe Line duadimensi dengan nama Series1 dan ubah nilai beberapa propertylain sesuai kebutuhan.Untuk menampilkan form FKeyboard, buka kembali prosedurevent OnClick BShowClick pada unit UOtherDemo (formFOtherDemo), kemudian tambahkan kode programnya sehinggaprosedur 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 menginisialisasiTChartSeries, yaitu nilai acak dengan rentang sebanyak 500 datayang diplot dalam TChartSeries melalui metode FillSampleValues.Klik ganda sel di sebelah kanan event OnCreate form, kemudianketikkan 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 dapatdilakukan jika komponen TChart yang dimaksud menjadi focusform sehingga setiap kali form ditampilkan, komponen TChartChart1 harus diset menjadi focus form seperti pada prosedur eventOnShow berikut ini.procedure TFKeyboard.FormShow(Sender: TObject);begin Chart1.SetFocus;end;Prosedur event OnShow tersebut dapat diganti (dihapus) denganmemberi nilai Chart1 pada property ActiveControl formFKeyboard. Akan tetapi jika aplikasi mempunyai komponenTChart yang dapat di-zoom dan scrolling lebih dari satu,pemberian nilai property ActiveControl tersebut tidak dapatdilakukan.Prosedur Event OnKeyDown pada TForm (FKeyboard)Event OnKeyDown akan terjadi jika property KeyPreview formbernilai True. Ketika pengguna menekan suatu atau kombinasitombol keyboard dan form tersebut diaktifkan, perintah-perintahdalam event ini akan dijalankan. Klik ganda sel di sebelah kananevent OnKeyDown form Fkeyboard, kemudian ketikkan kodeprogram 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 menggeserrange skala sumbu horisontal atau skala sumbu vertikal (nilaiproperty Maximum dikurangi dengan property Minimum). Nilaiskala maksimum dan minimum sumbu horisontal grafik diperolehsetelah dihubungkan dengan metode GetHorizAxis dan denganmetode GetVertAxis untuk sumbu vertikal. Range skala sumbuhorisontal grafik disimpan dalam variabel XRange, sedangkanvariabel YRange untuk menyimpan range skala sumbu vertikalgrafik.Flag ssShift merupakan salah satu nilai kelas bertipe TShiftStateyang digunakan untuk menentukan keadaan tombol Alt, Ctrl, Shift,dan tombol mouse. Tabel berikut ini menjelaskan masing-masingarti 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 gandaPada prosedur event KeyDown di atas, jika tombol Shift ditekanbersama 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 prosedurExit adalah untuk mengeluarkannya dari prosedur yang sekarangsedang dijalankan.Jika tombol Shift tidak ditekan, kemudian pengguna menekansalah satu tombol panah atau Page Up atau Page Down makaproses scrolling grafik akan dilakukan dengan metode Scroll padamasing-masing sumbu grafik. Metode Scroll mempunyai syntax:procedure Scroll(Const Offset: Double; InsideLimits: Boolean);Metode ini akan mengeser nilai skala maksimum dan minimumsuatu sumbu grafik berdasarkan konstanta Offset. Jika inginmenggeser grafik secara tidak terbatas maka variabel InsideLimitsharus bernilai False. Nilai variabel InsideLimits tergantung padanilai 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 0untuk menghapus nilai sebelumnya. Jika penguna menekan salahsatu tombol panah maka grafik akan digeser searah tanda panahtersebut sebesar nilai range sumbu grafik dibagi dengan 100. Padasumbu horisontal, nilai range sumbu horisontal (variabel XRange)adalah 500 data (angka dalam tanda kurung metodeFillSampleValues) sehingga jika pengguna menekan tombol panahkiri maka grafik akan digeser ke kiri sebesar 5 titik. Jika penggunamenekan tombol Page Up (VK_PRIOR) atau Page Down(VK_NEXT), grafik akan digeser secara vertikal sebesar nilai range190
    • sumbu vertikal (variabel YRange) dibagi 10. Nilai range sumbuvertikal tergantung pada data random yang di-plot dalamTChartSeries.Untuk me-reset zoom grafik, digunakan tombol SPACE(VK_SPACE) dengan memanggil metode UndoZoom. Arah prosesscrolling akan terbalik dengan arah tombol panah jika komponenTCheckBox CInverted dicentang, yaitu hanya dengan memberinilai minus pada variabel aX dan aY.Prosedur Event OnClick pada TCheckBox (CInverted dan CLimits)Pemberian/penghilangan tanda centang pada komponenTCheckBox akan membangkitkan event OnClick dan fokus formberada pada komponen tersebut. Proses scrolling dan zoom grafikdengan tombol keyboard hanya akan terjadi jika komponenTChart yang dimaksud menjadi focus form sehingga prosedurevent OnClick pada kedua komponen tersebut hanya bergunauntuk mengembalikan focus form pada komponen TChart denganmemanggil metode SetFocus. Klik ganda masing-masingkomponen TCheckBox sehingga pada jendela Code Editor akanmuncul dua buah prosedur bernama CInvertedClick danClimitsClick. Ketikkan kode program berikut untuk masing-masingprosedur.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 digunakanuntuk menampilkan sebuah pesan ketika komponen TCheckBoxClimits diberi tanda centang (property Checked bernilai True). 191
    • Pesan tersebut tidak akan muncul ketika penggunamenghilangkan tanda centang pada komponen TCheckBoxClimits.3.4 Mengubah Property BackImage Komponen TChart Secara Run-timeProperty BackImage komponen TChart berguna untuk memberilatar belakang grafik dengan gambar. Saat desain form, gambartersebut dicari dengan tombol Browse pada GroupBox BackImagesubtab Panel (lihat kembali Gambar 1.7). Buat sebuah formdengan nama FBackImage dan simpan unit dalam UBackImage.Kemudian tambahkan sebuah komponen TOpenDialog, sebuahkomponen TChart, sebuah komponen TPanel, sebuah komponenTGroupBox, 3 (tiga) buah komponen TRadioButton, dan 2 (dua)buah komponen TSpeedButton. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yangmempunyai nilai lebih dari satu, nilai masing-masing dipisahkanoleh tanda titik koma. Sesuaikan berdasarkan urutan propertyName. Nama Nama Object Nilai Property TForm AutoSize True BorderStyle bsToolWindow Caption Property BackImage Topic Name FBackImage Position poScreenCenter TPanel (tab BevelOuter bvNone Standard) Color clWhite Height 54 Left 0 Name Panel1192
    • Top 407 Width 540 TGroupBox Caption Style (tab Standard). Color clWhite Pasang pada Panel1 Height 43 Left 8 Name GBStyle Top 7 Width 212 TRadioButton Caption Stretch; Tile; Center (tab Standard) Checked True; False; False sebanyak 3 buah. Pasang Left 17; 81; 137 dalam GBStyle Name RStretch; RTile; RCenter Top 20 TSpeedButton Caption Browse...; Clear Bitmap (tab Additional) Cursor crHandPoint sebanyak 2 buah. Pasang Flat True dalam Panel1 Height 22 Left 349; 447 Name BBrowse; BClear Top 20 Width 80Biarkan Property yang lain sesuai nilai default-nya. KomponenTOpenDialog berfungsi untuk membuka folder tempat file gambar.Jika ingin menyaring file gambar dengan eketensi tertentu ketikakotak dialog Open ditampilkan, misalnya hanya file gambar 193
    • bertipe Bitmap (bmp), ubah property Filter-nya. Caranya, aktifkanjendela Object Inspector dan klik ganda sel di sebelah kananproperty Filter sehingga muncul kotak dialog Filter Editor. Isikansel pertama sebelah kiri dengan File Bitmap dan sel di sebelahkanannya dengan *.bmp, kemudian tekan tombol OK.Untuk mengedit komponen TChart, klik ganda komponen tersebutsehingga muncul Gambar 1.1. Buat sebuah TChartSeries bertipeLine dua dimensi dengan nama Series1. Klik subtab Panel danberikan gambar background Chart1 dengan menekan tombolBrowse.... Pilih RadioButton Stretch pada GroupBox Style dantandai CheckBox Inside. Ubah nilai beberapa property lain sesuaikebutuhan.Buka kembali prosedur BShowClick pada unit UotherDemo,kemudian tambahkan kode program untuk menampilkan formFBackImage 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 hanyadigunakan untuk menambahkan data pada TChartSeries Series1sebanyak 100 data dengan memanggil metode FillSampleValues.Klik ganda sel di sebelah kanan event OnCreate, kemudianketikkan perintahnya.procedure TFBackImage.FormCreate(Sender: TObject);begin Series1.FillSampleValues(100);end;194
    • Prosedur Event OnClick pada Komponen TSpeedButton (BBrowsedan BClear)Komponen TSpeedButton BBrowse berfungsi untuk mencarigambar yang akan mengisi background komponen TChart Chart1,sedangkan komponen BClear berfungsi untuk menghapus gambarbackground tersebut. Klik ganda pada masing-masing komponenTSpeedButton tersebut sehingga pada jendela Code Editor munculdua 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 dihapusdengan memberi nilai nil pada property BackImage komponenTChart Chart1.Sebuah kotak dialog Open akan muncul ketika penggunamenekan komponen BBrowse, kemudian jika kotak dialog tersebutdieksekusi (tombol Open ditekan) maka dengan metodeLoadFromFile, background grafik akan diisi dengan file gambaryang telah dipilih. Property Enabled komponen TGroupBoxGBStyle dan komponen TCheckBox CInside diberi nilai Truesehingga dapat diakses kembali setelah pada prosedurBClearClick 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 danbentuk komponen TChart, artinya jika ukuran dan bentukkomponen TChart diubah maka gambar akan ikut berubah. 195
    • Seluruh gambar background akan ditampilkan seukurankomponen TChart meskipun ukuran gambar tersebut terlalu besar.Dalam mode Tile, jika gambar background terlalu besar makagambar tersebut tidak seluruhnya mengisi komponen TChart,tetapi ditampilkan apa adanya dimulai dari posisi kiri atas gambarkemudian terpotong sampai pada batas bawah dan kanan grafik.Pada mode Center, hanya posisi tengah gambar yang akanmemenuhi background grafik jika ukuran gambar tersebut terlalubesar. Blok ketiga komponen tersebut, isi sel di sebelah kananevent OnClick dengan nama prosedur RadioButtonClick, kemudiantekan 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 makagambar background grafik ada dalam mode Stretch, demikianseterusnya untuk komponen TRadioButton yang lain.Prosedur Event OnClick pada Komponen TCheckBox (CInside)Gambar background grafik dapat dibuat memenuhi seluruhdinding komponen TChart atau hanya dalam kotak grafiknya saja,bergantung pada nilai property BackImageInside-nya. Untukmengendalikan nilai property tersebut, gunakan nilai propertyChecked komponen TCheckBox CInside. Klik ganda komponenTCheckBox tersebut kemudian ketik kode programnya.procedure TFBackImage.CInsideClick(Sender: TObject);begin Chart1.BackImageInside:= CInside.Checked;end;Property BackImageInside komponen TChart akan bernilai Truejika komponen TCheckBox CInside diberi tanda centang.196
    • 3.5 Digital SeriesSeluruh sistem operasi dalam komputer sebenarnya menggunakankombinasi bilangan biner, yaitu 0 (nol) dan 1 (satu). Prosestersebut kemudian dinamakan proses digital. Buat sebuah formbaru bernama FDigital dan simpan unitnya dengan nama UDigital.Pada form tersebut, letakkan sebuah komponen TChart, sebuahkomponen TPanel, sebuah komponen TTimer, sebuah komponenTspeedButton, dan 3 (tiga) buah komponen TCheckBox. Ubahproperty komponen-komponen tersebut seperti tabel berikut ini. Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsToolWindow Caption Digital Series Topic Name FDigital Position poScreenCenter TPanel (tab BevelOuter bvNone Standard) Color clWhite Height 72 Left 0 Name Panel1 Top 407 Width 540 TTimer (tab Enabled False System) Interval 1 Name Timer1 TSpeedButton Caption &Run 197
    • (tab Cursor crHandPoint Additional). Flat True Pasang dalam Panel1 Height 54 Left 424 Name BRun Top 10 Width 102 TCheckBox Caption Last Values in Legend; View (tab Standard) 3D; Z Order sebanyak 3 Cheked True buah. Pasang dalam Panel Left 15 Name CLastValues; CView; COrder Top 10; 30; 50Biarkan nilai property yang lain sesuai default-nya. Padakomponen Tchart, buat empat buah TChartSeries bertipe line tigadimensi, kemudian beri judul yang berbeda sebagai nama masing-masing TChartSeries, dengan menekan tombol Title... pada subtabSeries (Gambar 1.1). Klik tab Series, kemudian pilih subtabFormat seperti Gambar 2.3. Pada GroupBox Line Mode, beri tandacentang pada CheckBox Stairs untuk mengubah TChartSeriesdalam bentuk seperti „tangga‰ (umumnya grafik digital). Ubahproperty komponen TChart yang lain sesuai kebutuhan.Untuk memanggil form FDigital, tambahkan beberapa kode padaprosedur 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 begin198
    • if RDigital.Checked then FDigital.ShowModal; end;end;Prosedur Event OnCreate pada TForm (FDigital)Prosedur event OnCreate form hanya berisi inisialisasi beberapaproperty. Klik ganda sel di sebelah kanan event OnCreate form,kemudian ketikkan kode program berikut pada prosedur yangmuncul.procedure TFDigital.FormCreate(Sender: TObject);begin Chart1.ApplyZOrder:= COrder.Checked; Chart1.Legend.Inverted:= True;end;Property ApplyZOrder digunakan untuk mengontrol ketikabeberapa TChartSeries pada komponen TChart yang sama harusditampilkan independen dalam ruang Z yang berbeda. Propertytersebut valid jika grafik ditampilkan 3D dan mempunyai lebih darisatu TChartSeries. Pemberian nilai True pada property Invertedsubtab Legend untuk membalikkan urutan legend grafik dariTChartSeries berindeks terbesar.Prosedur Event OnTimer pada Komponen TTimer (Timer1)Untuk simulasi operasi, data sinyal digital berupa data acakdengan range 2 data (0 dan 1) diplot pada keempat TChartSeriesdengan menggunakan komponen TTimer Timer1. Klik gandakomponen tersebut sehingga pada jendela Code Editor munculsebuah 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 padasuatu posisi sehingga keempat TChartSeries tersebut tidak salingtumpang tindih. Plot data pada masing-masing TChartSeriesmenggunakan metode Add dengan syntax:function Add(Const AValue:Double; Const ALabel:String; AColor:TColor):Longint; virtual;Metode Add digunakan untuk menambahkan data padaTChartSeries jika nilai sumbu horisontal grafik (x) secara otomatisditentukan ketika nilai sumbu vertikal (y) akan diplot. VaribelALabel dan AColor merupakan parameter pilihan seperti padametode AddXY. Nilai Y grafik untuk TChartSeries kedua bergesersecara vertikal sebanyak 2 (dua) kalinya, sedangkan yang ketigabergeser 4 (empat) kalinya dan yang keempat bergeser sebanyak6 (enam) kalinya.Kode program selanjutnya adalah untuk menggeser grafik ke kirisetiap kali ada data yang diplot dalam TChartSeries. Nilai skalamaksimum sumbu bawah grafik mengambil nilai terakhir yangtelah diplot dalam TChartSeries. Range sumbu horisontal grafikyang ingin ditampilkan setiap kali ada plot data adalah 100 data.Kode program ini dapat ditulis dalam event OnAfterAdd padakeempat TChartSeries seperti pada pembuatan aplikasi SistemAkuisisi Data.Prosedur Event OnClick pada Komponen TSpeedButton (BRun)Pada saat desain form, property Enabled komponen TTimerTimer1 bernilai False sehingga untuk mengendalikannyadimanfaatkanlah komponen TSpeedButton BRun. Klik ganda sel disebelah kanan event OnClick komponen tersebut, kemudian ketikkode 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; endend;200
    • Selain untuk mengaktifkan komponen TTimer Timer1, komponenTSpeedButton BRun juga digunakan untuk menonaktifkannberdasarkan nilai property Caption komponen TSpeedButtontersebut.Prosedur Event OnClick pada Komponen TCheckBox(CLastValues, CView, dan COrder)Ketiga komponen TCheckBox tersebut berfungsi untuk mengubahbeberapa property komponen TChart, yaitu property LegendStylepada subtab Legend, property 3D pada subtab 3D, dan propertyApplyZOrder. Klik ganda masing-masing komponen TCheckBox,sehingga muncul tiga buah prosedur. Lengkapi ketiga prosedurtersebut sehingga menjadi seperti berikut iniprocedure 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 manayang akan ditampilkan dalam legend grafik. Jika diberi nilai LastValues maka akan ditampilkan nilai terakhir dari semuaTChartSeries yang aktif. Jika diberi nilai Automatic maka secaraotomatis nilai property Title TChartSeries akan ditampilkan dalamlegend grafik. Metode Repaint menyebabkan Chart induk di-repaint(digambar ulang). 201
    • Prosedur Event OnGetLegendTex pada Komponen TChart(Chart1)Event OnGetLegendText digunakan untuk mengganti penulisanteks pada legend grafik. Klik ganda sel di sebelah kanan eventOnGetLegendText komponen TChart Chart1, kemudian ketikkankodenya.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 CLastValuesdiberi tanda centang (atau property LegendStyle komponenTChart bernilai lsLastValues).3.6 Mengukur Kecepatan Plot Data pada TChartSeries Bertipe Fast LinePlot data pada TChartSeries bertipe Fast Line lebih cepatdibandingkan dengan tipe Line. Untuk mnegukur kecepatannya,buat sebuah form baru dan simpan dalam unit UFastLine.Selanjutnya, pasang sebuah komponen TChart, sebuah komponenTPanel, sebuah komponen TSpeedButton, dan 3 (tiga) buahkomponen TCheckBox. Ubah property komponen-komponentersebut seperti tabel berikut ini. Nama Nama Object Nilai Property TForm AutoSize True BorderStyle bsToolWindow Caption Fast Line Series Topic Name FFastLine Position poScreenCenter202
    • TPanel (tab BevelOuter bvNone Standard) Color clWhite Height 40 Left 0 Name Panel1 Top 407 Width 540 TSpeedButton Caption Speed Test (tab Additional). Cursor crHandPoint Pasang dalam Flat True Panel1 Height 22 Left 392 Name BSpeed Top 10 Width 134 TCheckBox Caption &Buffered Display; Draw (tab Standard) &Axis; &Clip Points sebanyak 3 Left 15; 150; 250 buah. Pasang dalam Panel Name CBuffered; CDraw; CClip Top 15Biarkan nilai property yang lain sesuai default-nya. Klik gandakomponen TChart untuk mengedit property-nya. Klik tab Chartdan pilih subtab Series, lalu buat dua buah TChartSeries bertipeFast Line dua dimensi dengan menekan tombol Add....Selanjutnya, pilih subtab General, hilangkan tanda centang padaCheckBox Clip Points. Pada subtab Axis, hilangkan tanda centangpada CheckBox Show Axis sehingga sumbu grafik tidak 203
    • ditampilkan. Property yang lain dapat diubah sesuai kebutuhanAnda.Form FFastLine ditampilkan melalui form FOtherDemo denganmenekan komponen TSpeedButton BShow di mana komponenTGroupBox GBFeatures telah ditampilkan dan komponenTRadioButton RFastLine dipilih. Buka kembali prosedurBShowClick pada unit UOtherDemo untuk menambahkanbeberapa 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)Inisialiasasibeberapa variabel, plot data random dalamTChartSeries dilakukan ketika form dibangun melalui prosedurevent OnCreate. Klik ganda sel di sebelah event tersebut,kemudian ketik perintah-perintahnya.procedure TFFastLine.FormCreate(Sender: TObject);var DataX, DataRandom: Longint;begin TeeEraseBack:= False; Chart1.BufferedDisplay:= False; TeeDefaultCapacity:= 2000;for DataX:= 1 to 1000 do begin DataRandom:= Random(Abs(500-DataX))-(Abs(500-DataX) div 2); Series1.Add(DataX+DataRandom, , clTeeColor); Series2.Add(1000-DataX+DataRandom, , clTeeColor); end;end;Variabel global TeeEraseBack berfungsi untuk menangani pesan(message) WM_ERASEBACK. Jika bernilai False, akan mencegah204
    • TeeChart menghapus latar belakang panel ketika ada perubahanukuran grafik. Property BufferedDisplay secara default bernilaiTrue untuk mencegah kelap-kelip ketika grafik yang mempunyaibanyak titik diplot kembali sehingga kedipan tersebut hanya terjadipada daerah kotak grafik. Variabel global TeeDefaultCapacitymerupakan kapasitas default untuk object Tlist. Komponen TChartselalu menggunakan variabel ini untuk menginisialisasi kapasitasTList. Secara default, ia bernilai 0 dan jika diset lebih besar lagidapat meningkatkan kecepatan ketika memplot data padaTChartSeries.Data yang akan diplot pada masing-masing TChartSeries adalahsebanyak 1000 data. Agar data random yang diplot tersebutterlihat menyempit ke tengah dan melebar ke kedua sisinya, buatsuatu fungsi pada variabel DataRandom. Penambahan variabelDataRandom dengan nilai DataX dalam fungsi Add padaTChartSeries Series1 menyebabkan TChartSeries tersebut diplotdiagonal dalam kotak grafik. TChartSeries Series2 diplot terbalikdari Series2 sehingga pada posisi tengah (titik 500) keduanyasaling berpotongan.Prosedur Event OnClick pada Komponen TSpeedButton (BSpeed)Untuk mengukur kecepatan plot data pada TChartSeries,dilakukan proses pembesaran dan pengecilan grafik. Klik gandasel di sebelah kanan event OnClick komponen TSpeedButtonBSpeed sehingga muncul suatu prosedur pada jendela CodeEditor.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 Time1dengan memanggil metode GetTickCount, kemudian prosespembesaran grafik dilakukan sebanyak 30 kali yang disusuldengan proses pengecilan grafik sebanyak 30 kali. Waktu setelahproses zoom tersebut disimpan dalam variabel Time2. Selanjutnyagrafik dikembalikan pada keadaan awal dengan memanggilUndoZoom. Jadi, proses plot ulang data dilakukan sebanyak 61kali, yaitu 60 kali untuk proses zoom dan sekali proses UndoZoom.Oleh karena masing-masing TChartSeries mempunyai 1.000 datamaka data yang diplot pada keduanya adalah 2.000 data. Waktuseluruh proses (dalam milidetik) kemudian ditampilkan pada suatupesan yang segera muncul ketika proses tersebut berakhir. Selamaproses plot data berlangsung, kursor berbentuk Hour-Glass danjika telah selesai bentuknya kembali pada Default.Prosedur Event OnClick pada Komponen TCheckBox (CBuffered,CDraw, dan CClip)Kecepatan plot data dalam TChartSeries juga bergantung padanilai property BufferedDisplay, ada/tidaknya skala sumbu grafik(property AxisVisible), dan nilai property ClipPoints komponenTChart. Gunakan ketiga komponen TCheckBox yang terpasangdalam form untuk mengendalikan nilai property komponen TCharttersebut. Klik ganda masing-masing komponen TCheckBoxsehingga 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-komponenTCheckBox tersebut dicentang.3.7 Menghubungkan Komponen TDBChart dengan Komponen TTableSuatu aplikasi grafik berbasis database sebenarnya lebih mudahdibuat dengan komponen TDBChart. Data yang diplot padaTChartSeries dapat diset melalui property DataSource-nya.Dataset dapat berupa komponen TQuery maupun komponenTTable. Pada bagian ini TChartSeries komponen TDBChart akandihubungkan dengan komponen TTable. Buat sebuah form dengannama FLingked dan simpan unit-nya dengan nama ULingked.Pada form tersebut, letakkan sebuah komponen TDBChart, sebuahkomponen TPanel, sebuah komponen TDBNavigator, 2 (dua) buahkomponen TTable, 2 (dua) buah komponen TDataSource, dan 2(dua) buah komponen TDBGrid. Ubah property komponen-komponen tersebut seperti tabel berikut ini. Untuk property yangmempunyai nilai lebih dari satu, masing-masing nilainyadipisahkan oleh tanda titik koma. Sesuaikan berdasarkan urutanproperty Name. Nama Object Nama Property Nilai TForm 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 540Ttable (tab BDE) Active Truesebanyak 2 buah DatabaseName D:ProgramDatabase IndexName (dikosongkan); CusNo MasterFields (dikosongkan); CusNo MasterSource (dikosongkan); DataSource1 Name Table1; Table2 TableName customer.db; orders.dbTdataSource (tab DataSet Table1; Table2Data Access) Name DataSource1;sebanyak 2 buah DataSource2TDBNavigator (tab DataSource DataSource1Data Controls). Flat TruePasang dalamPanel1 Height 25 Left 8 Top 8 VisibleButton hanya nbFirst; nbPrior; nbNext; nbLast yang bernilai TrueTDBGrid Ctl3D False;(tab Data Controls) DataSource DataSource1;sebanyak 2 buah DataSource2pasang dalam Height 120Panel1 Left 8 Name DBGrid1; DBGrid2 Options.dgEditing False; True208
    • Options.dgIndicator False Options.dgRowLine False Options.dgRowSelect True; False Top 41; 172 Width 521Biarkan property yang lain sesuai dengan nilai default-nya. Padakomponen TDBChart, buat sebuah TChartSeries bertipe Bar tigadimensi. Klik tab Series, kemudian pilih subtab Format sepertiterlihat pada Gambar 3.1.Gambar 3.1 Kotak dialog Editing Chart untuk subtab Format bertipe BarParameter-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 datasetyang akan digunakan TChartSeries. Pilih Data Set, kemudian pilihTabel2 pada ComboBox Dataset. ComboBox Labels digunakanuntuk mengeset nilai x grafik. Pilih field SaleDate dari daftar fields210
    • komponen Table2 dan pilih field AmountPaid sebagai nilai y grafikpada ComboBox Bar sehingga sekarang subtab Data Sourcemenjadi seperti Gambar 3.2. Gambar 3.2 Kotak dialog Editing Chart untuk subtab Data SourceForm FLinked ditampilkan dengan menekan komponenTSpeedButton BShow yang terpasang pada form FOtherDemo dimana komponen TGroupBox GBFeatures telah ditampilkan dankomponen TRadioButton RLingked dipilih. Buka kembali prosedurBShowClick pada unit UotherDemo, kemudian tambahkan kodeprogram 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:ProgramDatabase telah ada filedatabase bernama customer.db, order.db, dan items.db. Filedatabase tersebut disertakan dalam CD.Prosedur Event OnDataChange pada Komponen TDataSource(DataSource1)Event ini terjadi ketika ada perubahan data pada dataset karenaproses scrolling data atau edit data. Klik ganda sel di sebelahkanan event OnDataChange pada komponen TDataSourceDataSource1.procedure TFLinked.DataSource1DataChange(Sender: TObject; Field: TField);begin DBChart1.CheckDataSource(Series1);end;Metode CheckDataSource akan me-refresh semua data padaTchartSeries, baik dari database Query, Table, atau sumber dataTChartSeries lain. Metode ini dapat dipanggil secara rutin jika kitaingin menambahkan atau memodifikasi data yang ditampilkansecara realtime pada TChartSeries. Jadi, data yang diplot padaTChartSeries Series1 akan berubah ketika ada perubahan datapada dataset Tabel2.3.8 Membuat Grafik Mini yang Resizeable dan Garis DividerUkuran komponen TChart dapat diubah sesuai perubahan ukuranform induknya. Garis divider merupakan garis pembatas antaratitik baru dan titik lama yang diplot dalam TChartSeries. Buatsebuah form baru dengan nama FMini dan simpan dalam unitUMini. 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 yangmempunyai nilai lebih dari satu, nilai masing-masing dipisahkan212
    • oleh tanda titik koma. Sesuaikan berdasarkan urutan propertyName. Nama Object Nama Property Nilai TForm BorderStyle bsSizeToolWin Caption Mini Small Chart Topic Height 148 Name FMini Position poScreenCenter Width 202 TTimer (tab Enabled False System) Interval 1 Name Timer1 TPanel (tab Align alLeft; alClient Standard) Color clWhite sebanyak 2 buah Name Panel1; Panel2 Width 97 TChart (tab Align alTop; alClient; alTop; Additional) alClient sebanyak 2 Height 56 buah. Pasang pada Panel1, Name Chart1; Chart2; Chart3; sisanya pada Chart4 Panel2Untuk mengedit komponen TChart, klik ganda komponen tersebutkemudian buat sebuah TChartSeries bertipe Bar 2 Dimensi dengannama BarSeries1 pada Chart1, dua buah TChartSeries bertipe Line3 Dimensi dengan nama LineSeries1, dan LineSeries2 padaChart2. Kedua komponen TChart tersebut terpasang pada Panel1.Pada Chart3, buat sebuah TChartSeries bertipe Pie 3 Dimensi 213
    • dengan nama PieSeries1, sedangkan untuk Chart4, buat sebuahTChartSeries bertipe Line 2 Dimensi dengan nama LineSeries3 dansebuah TChartSeries bertipe Area 2 Dimensi dengan namaAreaSeries1.Klik subtab Axis dan hilangkan tanda centang pada CheckBoxShow Axis untuk semua komponen TChart. Property yang laindapat diubah sesuai kebutuhan.Sebelum membuat prosedur dalam unit ini, buka kembali unitUotherDemo, kemudian tambahkan beberapa kode pada prosedurBShowClick untuk menampilkan form FMini melalui formFOtherDemo.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 dilakukandalam prosedur event OnCreate. Deklarasikan variabelValueXChart2 dan ValueXChart4 bertipe Longint pada bagianPublic unit. Variabel pertama digunakan untuk menggambar garisdivider vertikal pada komponen TChart Chart2 dan variabel yangkedua pada Chart4. Banyaknya data yang akan diplot padabeberapa TChartSeries berdasarkan konstanta NumData. Beri nilai30 pada konstanta tersebut dan ketikkan tepat di bawah kompilerseperti berikut ini.implementation{$R *.dfm}214
    • Const NumData = 30;Kemudian klik ganda sel di sebelah kanan event OnCreate formFMini 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 Chart2berada di luar kotak grafik, sedangkan pada Chart4 berada tepat ditengah karena banyaknya data yang diplot pada TChartSeriesAreaSeries1 dan LineSeries3 berdasarkan nilai konstantaNumData (30 data). Metode FillSampleValues akan memplot nilaiacak pada suatu TChartSeries dengan rentang data sebanyakangka dalam tanda kurung.Prosedur Event OnResize pada TForm (FMini)Kode program yang dideklarasikan pada event OnResize akansegera dijalankan ketika ukuran form diubah. Klik ganda sel disebelah 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 sehinggajika form di-resize maka property Height akan mengikutiperubahan ukuran form. Property Width-nya ditentukan sebagaisetengah dari perubahan nilai property ClientWidth form. Ukurankomponen TPanel Panel2 secara otomatis akan mengikutiperubahan ukuran form dan komponen Panel1 karena propertyAlign-nya bernilai alClient, begitu juga dengan ukuran komponenTChart Chart2 yang akan mengikuti perubahan ukuran Panel1 dankomponen Chart1. Ukuran Chart4 juga akan mengikuti perubahan 215
    • ukuran Panel2 dan komponen Chart3 karena property Align keduakomponen TChart tersebut (Chart2 dan Chart4) bernilai alClient.Pada komponen TChart Chart1 dan Chart3, nilai property Align-nya adalah alTop dan perubahan ukuran Panel1 dan Panel2 hanyaakan mengubah lebar (property Width) kedua komponen TCharttersebut sementara tingginya (property Height) tetap. Untukmenyesuaikan ukurannya, property Height komponen TChartChart1 ditentukan sebagai setengah dari nilai property ClientHeightkomponen TPanel Panel1 dan property Height komponen Chart3juga ditentukan sebagai setengah dari nilai property ClientHeightkomponen Panel2.Prosedur Event OnClose dan OnShow pada TForm (FMini)Event OnClose terjadi ketika form FMini ditutup, sedangkan eventOnShow akan dijalankan setiap kali form ditampilkan. Klik gandasel di sebelah kanan masing-masing event sehingga pada jendelaCode 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 bernilaiFalse, komponen TTimer tersebut akan diaktifkan setiap kali formditampilkan dan dinonaktifkan kembali jika form ditutup.Prosedur Event OnTimer pada Komponen TTimer (Timer1)Animasi plot data pada TChartSeries dilakukan dalam eventOnTimer komponen TTimer Timer1. Klik ganda komponen TTimertersebut, kemudian buat sebuah prosedur lokal RefreshChart padaprosedur 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 suatuTChartSeries setiap detik berdasarkan posisi nilai x-nya (variabelValueXChart). Setiap detik nilai variabel ValueXChart akanbertambah 1 (satu) melalui prosedur Inc. Nilai variabel tersebutdikembalikan pada nilai 0 (nol) jika telah sama dengan banyaknyadata (konstanta NumData). Jika posisi x grafik kembali ke awal(bernilai 0) maka dengan metode SetMinMax, nilai skala minimumdan maksimum sumbu kiri grafik diisi dengan nilai minimum danmaksimum sumbu kiri grafik tersebut. Nilai y yang terakhirdisimpan 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 dengansuatu nilai acak menjadi nilai y grafik pada posisi x yang sekarang.Seluruh TChartSeries yang terdapat pada komponen TChartChart2 dan Chart4 akan diplot dengan prosedur lokal tersebut, dimana nilai x untuk TChartSeries pada Chart2 berasal dari nilaivariabel ValueXChart2 sedangkan pada Chart4 berasal dari nilaivariabel ValueXChart4. Dengan kata lain, variabel ValueXChartpada prosedur lokal RefreshChart diganti dengan ValueXChart2atau ValueXChart4, bergantung pada nilai variabel AOwner-nya.TChartSeries bertipe Pie yang terdapat dalam Chart1 akan terusberputar dengan sudut putar sama dengan nilai sisa pembagiansudut putar saat itu (setelah ditambah 1 derajat) terhadap 359derajat. Nilai y yang diplot pada TChartSeries bertipe bar danberasal dari nilai y saat itu dikalikan dengan 80% nilai acak antara0 sampai 39.Prosedur Event OnAfterDrawValue pada TChartSeries KomponenTChart (LineSeries2 dan LineSeries3)Setelah data diplot pada TChartSeries LineSeries2 danLineSeries3, sebuah garis divider vertikal segera digambar padakomponen TChart di mana kedua TChartSeries tersebut berada(Chart2 dan Chart4). Klik ganda sel di sebelah kanan eventOnAfterDrawValue 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 TChartSeriesLineSeries2 dan berwarna biru pada TChartSeries LineSeries3dengan metode DoVertLine. Metode DoVertLine ditulis dengansyntax:procedure DoVertLine (X,Y0,Y1:Integer); virtual; abstract;Metode ini akan menggambar garis vertikal dari Y0 sampai Y1pada posisi horisontal X. Variabel Y0 merupakan posisi atas kotakgrafik ditambah 1 pixel; variabel Y1 diisi dari nilai posisi bawahkotak grafik setelah dikurangi 1 pixel; dan posisi horisontal Xdiperoleh menggunakan metode CalXPos berdasarkan nilai xmasing-masing TChartSeries.3.9 Membuat Halaman GrafikTChartSeries yang telah diplot dapat dibagi dalam beberapahalaman bergantung jumlah total data dan jumlah data perhalaman. Halaman-halaman tersebut kemudian dapat ditelusuridengan metode-metode scroll grafik. Buat sebuah form barudengan nama FPaging dan simpan dalam unit UPaging. Pada formtersebut, letakkan sebuah komponen TChart, sebuah komponenTPanel, sebuah komponen TSpinEdit, sebuah komponenTCheckBox, 2 (dua) buah komponen TLabel, dan 4 (empat) buahkomponen TSpeedButton. Ubah property komponen-komponentersebut seperti tabel berikut ini. Untuk property yang mempunyainilai lebih dari satu, masing-masing nilai dipisahkan oleh tandatitik koma. Sesuaikan berdasarkan urutan property Name. Nama Object Nama Property Nilai TForm AutoSize True BorderStyle bsToolWindow Caption Linked Table Topic Name FLinked Position poScreenCenter 219
    • TPanel (tab BevelOuter bvNoneStandard) Color clWhite Height 90 Left 0 Name Panel1 Top 407 Width 540TSpinEdit (tab Left 235Samples). MaxValue 100000Pasang padaPanel1 MinValue 0 Name SEPaging Top 8TCheckBox Caption Scale Last Page(tab Standard). Left 290Pasang dalamPanel1 Name CScale Top 10Tlabel (tab Caption Points Per Page :; (bebas)Standard)sebanyak 2 Left 131; 181buah. Pasang Name Label1; LCurrentdalam Panel1 Top 11; 38 Transparent TrueTSpeedButton Caption &First; &Previous; &Next; &Last(tab Additional)sebanyak 4 Flat Truebuah. Pasang Glyph Klik ganda sel di sebelah kanandalam Panel1 property ini, load gambar BFirst.bmp; BPrevious.bmp; BNext.bmp; BLast.bmp220
    • Height 22 Left 69; 165; 261; 357 Name BFirst; BPrevious; BNext; BLast Top 58 Width 88Biarkan nilai property yang lain sesuai default-nya. Untukkomponen TChart, klik ganda komponen tersebut kemudian pilihsubtab Series pada tab Chart. Tekan tombol Add... untukmenambahkan sebuah TChartSeries bertipe Line 2 Dimensi danberi nama Series1. Ubah property yang lain sesuai dengankebutuhan.Form FPaging akan ditampilkan melalui form FOtherDemo ketikapengguna menekan komponen TSpeedButton BShow di manakomponen TGroupBox GBFeatures telah ditampilkan dankomponen TRadioButton RPaging dipilih. Klik ganda komponenTSpeedButton tersebut dan tambahkan kode untuk menampilkanform 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 formdibangun. 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 metodeFillSampleValues. Property Value komponen TSpinEdit SEPagingdiinisialisasi dengan nilai 18. Nilai property tersebut menunjukkanbanyaknya data per halaman sebagai pengganti SpinEdit Pointsper Page pada subtab Paging (property MaxPointsPerPage) yangnilainya dapat diubah secara run-time. ProsedurChart1PageChange merupakan prosedur event OnPageChangepada komponen TChart Chart1.Prosedur Event OnPageChange pada Komponen TChart (Chart1)Event OnPageChange terjadi ketika property Page komponenTChart telah diubah dan sebelum halaman grafik tersebut berubah.Property MaxPointsPerPage (SpinEdit Points per Page pada subtabPaging) harus lebih besar dari 0 (nol) untuk mengaktifkanmekanisme pemberian nomor halaman secara otomatis. Klikganda 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 keadaandiperbesar/diperkecil, jadi coba panggil metode UndoZoom.222
    • Informasi suatu halaman terhadap total halaman grafikditampilkan melalui property Caption komponen TLabel. PropertyPage komponen TChart mengeset halaman grafik saat ini,sedangkan property NumPages menunjukkan total halaman grafik.Untuk grafik yang mempunyai halaman lebih dari satu, komponenTSpeedButton BFirst dapat diakses tergantung aktif/tidaknyakomponen BPrevious. Komponen BPrevious akan aktif jikahalaman grafik yang sekarang ditampilkan bukan halamanpertama. Dan komponen BNext akan aktif jika halaman grafikyang sekarang ditampilkan bukan halaman terakhirnya, sedangaktif/tidaknya komponen BLast tergantung pada aktif/tidaknyakomponen BNext. Jika grafik hanya terdiri atas satu halamanmaka keempat komponen TSpeedButton tersebut tidak aktif.Prosedur Event OnChange pada Komponen TSpinEdit (SEPaging) Komponen TSpinEdit SEPaging merupakan penggantiSpinEdit Points per Page pada subtab Paging, perubahan nilainyaakan mempengaruhi banyaknya data per halaman (nilai propertyMaxPointsPerPage komponen TChart). Klik ganda sel di sebelahkanan event OnChange komponen TSpinEdit tersebut kemudianketikkan kode programnya pada prosedur SEPagingChange yangmuncul.procedure TFPaging.SEPagingChange(Sender: TObject);begin Chart1.MaxPointsPerPage:= SEPaging.Value; Chart1PageChange(Chart1);end;Halaman grafik mungkin akan berubah setiap kali ada perubahannilai property Value komponen TSpinEdit SEPaging sehinggaprosedur Chart1PageChange perlu dipanggil kembali untukmenyesuaikan keadaan beberapa komponen. 223
    • Prosedur Event OnClick pada Komponen TCheckBox (CScale)Jika saat mengedit komponen TChart Anda tidak menandaiCheckBox Scale Last Page pada subtab Paging maka halamanterakhir akan ditampilkan dengan range sumbu horisontal grafiksama dengan halaman yang lain. Jika sebaliknya maka skalahalaman terakhir grafik akan diatur berdasarkan banyaknya titikyang tampak pada halaman terakhir tersebut. KomponenTCheckBox CScale berfungsi untuk mengontrol propertyScaleLastPage komponen TChart Chart1. Klik ganda komponenTCheckBox 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, manfaatkankeempat komponen TSpeedButton tersebut. Blok keempatkomponen tersebut dan isi sel di sebelah kanan event OnClickdengan 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 halamanpertama grafik akan ditampikan. Jika BPrevious ditekan makametode PreviousPage akan membawa ke halaman sebelumnya,sedangkan untuk menampilkan halaman selanjutnya, panggilmetode NextPage, yaitu ketika pengguna menekan komponenBNext. Halaman yang terakhir akan ditampilkan ketika penggunamenekan komponen BLast.224
    • 3.10 Menampilkan Nilai Statistik dalam TChartSeries Bertipe LineNilai statistik data dapat dibuat dengan mengeset property DataSource suatu TChartSeries dengan suatu fungsi statistik sepertiAverage, High, dan Low. Buat sebuah form baru lagi, beri namaFstatisticBar, dan simpan dalam unit UStatisticBar. Kemudian,tambahkan sebuah komponen TChart, sebuah komponen TPanel,sebuah komponen TTimer, 3 (tiga) buah komponenTSpeedButton, dan 3 (tiga) komponen TCheckBox. Ubah propertykomponen-komponen tersebut seperti tabel berikut ini. Untukproperty yang mempunyai nilai lebih dari satu, masing-masingnilai dipisahkan oleh tanda titik koma. Sesuaikan berdasarkanurutan property Name. Nama Nama Object Nilai Property TForm AutoSize True BorderStyle bsToolWindow Caption Statistic Bar Series Topic Name FStatisticBar Position poScreenCenter TPanel (tab BevelOuter bvNone Standard) Color clWhite Height 72 Left 0 Name Panel1 Top 407 Width 540 TTimer (tab Enabled False System) Interval 100 225
    • Name Timer1 TSpeedButton Caption &Print Graph; Copy to (tab Additional) Clipboard; &Run sebanyak 3 Cursor crHandPoint buah. Pasang dalam Panel1. Flat True Height 22; 22; 54 Left 280; 280; 427 Name BPrint; BCopy; BRun Top 10; 10; 42 Width 113; 113; 102 TCheckBox Caption View 3D; Two Bar Series; Bar (tab Standard) Visible sebanyak 3 Checked False; False; True buah. Pasang dalam Panel1. Left 15 Name CView; CTwoBar; CBarVisible Top 10; 30; 50Biarkan nilai property yang lain sesuai default-nya. Untukkomponen TChart, tambahkan sebuah TChartSeries bertipe Bar 3Dimensi, lalu beri nama Series1. Tambahkan juga 3 (tiga) buahTChartSeries bertipe Line 3 dimensi dengan nama BiggestSeries,AverageSeries, dan SmallestSeries. Ubah judul keempatTChartSeries tersebut dengan menekan tombol Title pada subtabSeries (Series, Biggest, Average, dan Smallest). Tampilkan legendgrafik dengan memberi tanda centang pada CheckBox Visiblepada subtab Legend. Sesuaikan property yang lain dengankebutuhan.Untuk menampilkan form FstatisticBar, tambahkan perintah padaprosedur BShowClick. Buka kembali unit UOtherDemo dan klikganda komponen TSpeedButton BShow sehingga kursor jendela226
    • Code Editor akan berada pada prosedur tersebut. Sekarangprosedur 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 formpertama kali dibangun. Klik ganda sel di sebelah kanan eventOnCreate, 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 TBarSeriesdalam bagian public unit. Variabel ini dipakai untuk membuatsebuah TChartSeries bertipe Bar secara run-time sehingga padaevent OnCreate diberi nilai nil. Tampilan grafik dalam 3Dbergantung pada nilai property Checked komponen TCheckBoxCview. Property Chart3DPercent ditentukan bernilai 35%. Datasebanyak 6 (enam) titik diplot pada TChartSeries Series1 denganmetode FillSampleValues. Property Dark3D Series1 (CheckBox 227
    • Dark Bar 3D Sides pada subtab Format) nilainya ditentukanberdasarkan mode warna grafik yang dipakai dan bernilai True jikadipakai mode lebih dari 256 warna dengan metodeIsScreenHighColor.Prosedur Event OnAfterDraw pada Komponen TChart (Chart1)Event OnAfterDraw hanya akan dipanggil setelah komponenTChart tersebut telah menggambar semua TChartSeries yangterdapat di dalamnya. Event ini berisi kode untuk menampilkanteks pada masing-masing TChartSeries statistik yangmenginformasikan nilai statistik data. Klik ganda sel di sebelahevent OnAfterDraw komponen TChart tersebut, kemudian ketikkankode 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 tidakdicentang. Pola TBrush ditentukan bernilai bsClear untukmembersihkan pola sebelumnya. Property PixelsPerInch digunakanuntuk memastikan bahwa font yang disalin dari kanvas ke printermempunyai ukuran yang sama. Faktor konversi antara pixel dan228
    • inci untuk font tersebut mengambil nilai yang sama dengan nilaipada layar monitor. Huruf yang dipakai untuk menginformasikannilai statistik dalam TChartSeries statistik berukuran 10 pixeldalam huruf tebal dan miring. Warna huruf diambil dari warnamasing-masing TChartSeries tersebut. Untuk menuliskan teksdalam kanvas (komponen TChart Chart1), digunakan metodeTextOut yang mempunyai syntax:procedure TextOut(X, Y: Integer; const Text: string);Penulisan teks tersebut (isi variabel Text) dilakukan padakoordinat (X, Y). Koordinat X untuk semua teks ditentukan darinilai tengah koordinat horisontal grafik yang diperoleh denganmetode ChartXCenter. Nilai yang dihasilkan metode ini tidak samadengan property Width dibagi dua karena margin grafik, marginsumbu, lebar legend grafik, dan sebagainya bukan bagian dariukuran horisontal grafik. Nilai Y berasal dari koordinat vertikalyang merupakan hasil pemanggilan metode CalYPos pada masing-masing TChartSeries statistik. Teks yang ditampilkan terdiri atasjudul masing-masing TChartSeries tersebut (property TitleTChartSeries) dan nilai Mark-nya (property ValueMarkTextTChartSeries).Prosedur Event OnGetLegendText pada Komponen TChart(Chart1)Teks informasi nilai statistik pada prosedur event OnAfterDraw diatas hanya ditampilkan ketika komponen TCheckBox CTwoBartidak dicentang. Untuk menginformasikan nilai statistik jikakomponen TCheckBox tersebut dicentang, gunakan legend grafikdengan mengganti nilai property LegendText melalui eventOnGetLegendText. Klik ganda sel di sebelah kanan eventOnGetLegendText 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 bernilaiTrue, teks yang ditampilkan pada legend grafik terdiri atas judulsetiap TChartSeries ditambah nilai property LegendText-nya. Jikasebaliknya, legend grafik hanya menampilkan judul masing-masing TChartSeries.Prosedur Event OnTimer pada Komponen TTimer (Timer1)Simulasi plot data pada TChartSeries Series1 dilakukanmenggunakan komponen TTimer Timer1. Klik ganda komponenTTimer tersebut sehingga pada event OnTimer muncul sebuahnama 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 tersebutditambah dengan suatu fungsi nilai acak. Variabel t berasal darinilai acak banyaknya data dalam TChartSeries Series1, yaitu 6data. Style TChartSeries Series1 akan berubah jika jumlah nilaiacak dengan rentang data 100 kurang dari nilai 8. Fungsi Ordakan menghasilkan posisi ordinal dari suatu eksepsi Ordinal-type(dalam tanda kurung). Fungsi High menghasilkan nilai tertinggidari range bertipe TBarStyle.Jika nilai acak hasil deklarasi fungsi nilai Y tersebut kurang darinilai 2 maka secara otomatis tanda centang pada komponenTCheckBox akan dihilangkan kembali.230
    • Prosedur Event OnClick pada Komponen TSpeedButton (BRun,BPrint, dan BCopy)Event OnClick komponen TSpeedButton BRun berisi kode untukmengaktifkan dan menonaktifkan komponen TTimer, sedangkankomponen BPrint digunakan untuk mencetak grafik. KomponenBCopy berguna untuk menyalin gambar grafik dalam clipboardWindows. Klik ganda masing-masing komponen TSpeedButtontersebut sehingga muncul tiga buah prosedur dan ketikkan kodeprogramnya.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; endend;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 ketikaproperty Caption komponen TSpeedButton BRun bernilai &Run.Property Caption tersebut akan berubah ketika pengguna menekankomponen BRun sekaligus mengaktifkan/menonaktifkankomponen TTimer Timer1.Metode PrintLandscape akan dipanggil ketika pengguna menekankomponen TSpeedButton BPrint. Metode tersebut akan mengesetprinter pada orientasi Landscape (posisi kertas horisontal),kemudian metode Print akan dipanggil untuk mencetak gambargrafik.Metode CopyToClipboardMetafile akan menyalin seluruh daerahgrafik ke clipboard dalam format metafile. Gambar grafik tersebutkemudian 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 akanmengontrol property View3D (CheckBox 3D pada subtab 3D)komponen TChart, membuat/menghapus TChartSeries barubertipe Bar, dan menampilkan/menyembunyikan TChartSeriesSeries1. Klik ganda masing-masing komponen TCheckBoxsehingga 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 propertyChecked komponen TCheckBox CView bernilai True.Pada prosedur CTwoBarClick, sebuah TChartSeries baru bertipeBar bernama NewBar akan dibuat jika pengguna memberi tanda232
    • centang pada komponen CTwoBar dengan memanggil konstruktorCreate. TChartSeries baru tersebut dapat menjadi bagian darikomponen Chart1 dengan mengeset Chart1 pada propertyParentChart-nya. Property Title-nya bernilai New Series danmempunyai style bar berbentuk piramid. Banyaknya data yangdiplot pada TChartSeries tersebut sama dengan jumlah data padaTChartSeries Series1. Untuk menghitung kembali nilai statistik,tambahkan TChartSeries NewBar tersebut pada propertyDataSource masing-masing TChartSeries statistik. Jika komponenTCheckBox CTwoBar tidak dicentang maka TChartSeries NewBardihapus kembali dengan metode Free. Kemudian, metodeRefreshSeries akan me-refresh TChartSeries Series1.Pada prosedur CBarVisibleClick, fungsi Assigned mengecek nilaipointer nil pada variabel NewBar. Jika nilainya tidak nil makaditampilkan/tidaknya TChartSeries NewBar bergantung pada nilaiproperty Checked komponen TCheckBox CbarVisible. Hal iniberlaku juga untuk TChartSeries Series1.3.11 Membuat Osiloskop dengan Komponen TImageSelain dengan komponen TChart atau TDBChart, grafik juga dapatdibuat dengan komponen TImage. Untuk membangun sebuahaplikasi pengukuran data sederhana (Osciloscope), buat sebuahform baru dengan nama FOsciloscope dan simpan unit dalamUOsciloscope. Form tersebut membutuhkan 3 (tiga) buahkomponen TPanel, sebuah komponen TImage, sebuah komponenTTimer, sebuah komponen TStringGrid, sebuah komponen TLabel,sebuah komponen TGroupBox, 2 (dua) buah komponenTRadioButton, dan 6 (enam) buah komponen TSpeedButton. Ubahproperty komponen-komponen tersebut seperti tabel berikut ini.Untuk property yang mempunyai nilai lebih dari satu, masing-masing nilai dipisahkan oleh tanda titik koma. Sesuaikanberdasarkan urutan property Name. Nama Object Nama Property Nilai TForm AutoSize True 233
    • BorderStyle bsToolWindow Caption Osciloscope with TImage Topic Name FOsciloscope Position poScreenCenterTPanel (tab BevelOuter bvNoneStandard) Color clWhite Height 418 Left 0; 122; 122 Name Panel1; PGraph; PData Top 0 Visible True; False; False Width 120; 705; 513Timage (tab Cursor crHourGlassAdditional). Height 418Pasang padaPgraph. Left 0 Name IOsciloscope Top 0 Width 705TStringGrid ColCount 4(tab Color clWhiteAdditional).Pasang pada Ctl3D FalsePdata. DefaultColWidth 110 DefaultRowHeight 20 FixedColor $00EBBA9C234
    • Height 380 Left 26 Name SGData RowCount 701 ScrollBars ssVertical Top 21 Width 465TTimer (tab Enabled FalseSystem) Interval 1TLabel (tab Caption Channel InputStandard). Left 8Pasang padaPanel1. Name Lable1 Top 5 WordWrap TrueTGroupBox Caption View(tab Color clWhiteStandard).Pasang pada Height 68Panel1. Left 10 Name GBView Top 225 Width 95TRadioButton Caption Graph; Data(Standard). Checked True; FalsePasang padaGBView. Color clWhite Left 18 235
    • Name RGraph; RData Top 21; 41 TSpeedButton Caption Channel &1; Channel &2; (tab Channel &3; Channel &4; Additional) &Run; &Save sebanyak 6 Cursor crHandPoint buah. Pasang dalam Panel1. 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 95Biarkan nilai property yang lain sesuai default-nya.Untuk memanggil form Fosciloscope, tambahkan kode programprosedur BShowClick pada unit UOtherDemo sehingga prosedurtersebut 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 rentang4.096 data. Buat prosedur ConvertData dan ReadData seperti dibawah 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 untukmenentukan banyaknya data yang diplot per scanning. Sistemhanya memakai 4 (empat) buah Channel input dan data acakDataADC disimpan sementara dalam variabel Data untuk setiapchannel input berdasarkan alamatnya (nilai variabel Address).Deklarasikan konstanta MaxData dengan nilai 700 dan beberapavariabel yang diperlukan pada bagian private dan var unitsehingga 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 sebagaibuffer gambar grafik yang akan diisikan pada komponen Timage,sedangkan variabel CBackGround, CTitle, CScaleAxis, CAxis,CGrid, CPoint, dan CLegend merupakan buffer warna yang dipakaiuntuk menggambar grafik. Nilai variabel View menunjukkanchannel input yang sedang aktif.Untuk menggambar grafik pada komponen Timage, buat sebuahprosedur private dengan nama DrawGraph. Deklarasikan prosedurtersebut 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, sedangkanvariabel Bottom berhubungan dengan sumbu bawah grafik. Untukmembuat kotak persegi empat, gunakan fungsi Rect. Hasilnyadisimpan 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 darikanvas. Titik kanan kotak tersebut mengambil nilai lebar bufferBufIOsciloscope dan titik bawah sama dengan nilai tinggi buffertersebut. Property width dan height buffer BufIOsciloscopeditentukan pada event OnCreate form FOsciloscope.Warna yang disikan sebagai background grafik diambil dari nilaivariabel CBackground. Pola brush yang dipakai adalah solid(penuh). Metode FillRect akan mengisi kotak persegi empattersebut dengan warna dan pola brush yang telah ditentukan. Kodeprogram tersebut berfungsi untuk menghapus gambar grafik yangmungkin telah ada dalam kanvas (komponen TImage)Setelah gambar grafik dibersihkan, kemudian kanvas digambarulang. Font yang digunakan pada grafik seluruhnya berjenis Arial.Untuk menggambar garis sumbu grafik, ambil nilai variabel warnaCAxis dengan ketebalan garis 2 pixel. Garis sumbu horisontaldimulai dari koordinat (33, 350) sampai koordinat (680, 350)dengan metode MoveTo dan LineTo. Garis sumbu vertikal dimulaidari koordinat (33, 350) sampai koordinat (33, 95). 239
    • Selanjutnya, tuliskan judul grafik dengan warna font dari nilaivariabel CTitle dengan berukuran 15 pixel. Penulisan judul grafikdengan metode TextOut dimulai dari koordinat (290, 20) denganteks Osciloscope. Legend grafik yang menginformasikan channelinput yang sedang aktif menggunakan font berwarna sesuaidengan nilai variabel CLegend, berukuran 11 pixel, dan ada padakoordinat (305, 45).Ketebalan garis kisi-kisi (grid) dan garis data grafik adalah 1 pixel.Garis kisi-kisi dibuat hanya sebanyak 10 garis mendatar denganwarna garis berasal dari nilai variabel CGrid dan dilukis terputus-putus, contohnya pada koordinat (35, 325) sampai koordinat(680, 325) untuk garis kisi-kisi yang petama. Untuk garis kisi-kisiyang kedua, letakkan pada koordinat (35, 300) sampai (680,300). Demikian seterusnya untuk 8 (delapan) garis kisi-kisi yangtersisa dengan perbedaan koordinat y sebesar 25 pixeldibandingkan garis sebelumnya.Huruf skala sumbu vertikal grafik berwarna sama dengan nilaiCScaleAxis dan berukuran 10 pixel. Penulisan skala sumbutersebut dimulai pada koordinat x 7 pixel, sedangkan koordinat ysama 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 prosedurDrawGraph adalah komponen Timer1. Garis data digambardengan pola solid tidak teputus-putus dan berwarna sesuai nilaivariabel CPoint. Data yang digambar sebelumnya digeser kekanan dengan operator shr sebanyak jumlah channel input (dalamsatuan bit) untuk menghindari pertukaran pelukisan data hasilkonversi ADC (data random simulasi). Pergeseran data tersebutdisimpan dalam variabel BitFix yang diinisialisasikan pada nilaipertama data konversi tersebut. Inisialisasi tersebut dipakai untukkoordinat pelukisan garis data pertama, yaitu dimulai darikoordinat (32, 350-nilai BitFix) sampai koordinat (33, 350-nilaiBitFix). Kemudian, titik yang kedua dimulai dari (33, 350-nilaiBitFix) sampai (34, 350-nilai BitFix). Demikian seterusnya untuk700 titik data per scanning.Pelukisan grafik tersebut dilakukan pada buffer bitmapBufIOsciloscope. Dengan metode Draw, grafik tersebut kemudian240
    • digambar dalam kanvas, yaitu komponen TImage Iosciloscope,dimulai dari posisi kiri atas kanvas (0, 0).Prosedur Event OnCreate dan OnDestroy pada TForm(FOsciloscope)Event OnCreate berisi kode-kode untuk menginisialisasi beberapavariabel dan komponen. Klik ganda sel di sebelah kanan eventOnCreate 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 denganwarna tertentu, sedangkan lebar dan tinggi variabel bufferBufIOsciloscope ditentukan sama dengan nilai property Width danHeight komponen TImage IOsciloscope. Variabel BufIOsciloscopedibangun bertipe TBitmap dengan konstruktor Create. Setiap barispada sel pertama komponen TStringGrid SGData diisi dengannomor data, dimulai dari 1 sampai 700 (nilai konstanta MaxData).Untuk mengisi komponen TImage dengan grafik tanpa garis data,dipanggil prosedur DrawGraph dengan sender selain komponenTimer1 (dapat diisi dengan mengetik Sender). Pemanggilanprosedur RadioButtonClick ber-sender RGraph bertujuan untukmenampilkan panel grafik (komponen TPanel PGraph). 241
    • Event OnDestroy form digunakan untuk membebaskan setiapobject yang dibangun dalam event OnCreate form. Klik gandaevent tersebut dan deklarasikan kodenya.procedure TFOsciloscope.FormDestroy(Sender: TObject);begin BufIOsciloscope.Free;end;Metode Free akan membebaskan object bertipe TBitmapBufIOsciloscope dari memori yang dihubungkan dengannya.Prosedur Event OnClick pada Komponen TRadioButton (RGraph,dan RData)Gambar grafik dan data teks yang ditampilkan ke layar ditentukanberdasarkan nilai property Checked komponen TRadioButtonRGraph dan RData. Blok kedua komponen tersebut dan isi sel disebelah kanan event OnClick dengan nama prosedurRadioButtonClick, kemudian tekan tombol Enter. Ketikkan kodeprogram 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 akanditampilkan ketika pengguna mengklik komponen TRadioButtonRGraph. Jika pengguna mengklik komponen RData maka datateks yang terpasang pada PData akan ditampilkan.Prosedur Event OnTimer pada Komponen TTimer (Timer1)Proses pembacaan data dan pelukisan grafik serta penentuan datateks dilakukan dengan memanfaatkan komponen TTimer Timer1.Klik ganda komponen TTimer tersebut sehingga pada jendelaCode 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 Truemaka proses pembacaan data akan segera dilakukan. Pelukisangrafik akan dilakukan dengan memanggil prosedur DrawGraphber-sender komponen Timer1 ketika variabel View bernilai lebihdari 0 dan komponen TPanel PGraph telah ditampilkan.Variabel Volt berguna untuk menyimpan nilai hasil konversi daribilangan desimal menjadi bersatuan Volt. Nilai variabel Voltkemudian menjadi isi sel keempat komponen TStringGrid SGDatauntuk setiap titik data. Sel ketiganya berisi hasil konversi daribilangan desimal menjadi bilangan heksadesimal. Nilai aslinya(bilangan desimal) ditampilkan dalam sel kedua komponenSGData. Sel pertamanya pada event OnCreate form telahditentukan untuk berisi nomor data. Data teks tersebut akanditampilkan ketika variabel View bernilai lebih dari 0 dankomponen TPanel PData telah ditampilkan.Prosedur Event OnClick pada Komponen TSpeedButton(BChannel1, BChannel2, BChannel3, BChannel4, BRun, danBSave)Komponen TSpeedButton BChannel1, BChannel2, BChannel3,dan BChannel4 mempunyai fungsi yang sama, yaitu memberi nilaivariabel View sebagai informasi channel input mana yang sedangaktif. 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; endend;Nilai variabel View dan warna serta ukuran huruf komponenTSpeedButton akan berubah jika ditekan pengguna.Untuk mengontrol aktifitas komponen TTimer Timer1, digunakanevent OnClick komponen TSpeedButton BRun. Klik gandakomponen TSpeedButton tersebut dan ketikkan kode programberikut.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; endend;Komponen TTimer Timer1 hanya akan aktif ketika penggunamenekan komponen TSpeedButton BRun dengan propertyCaption-nya saat itu bernilai &Run.Komponen TSpeedButton yang terakhir, yaitu BSave, berfungiuntuk menyimpan file gambar grafik dalam suatu folder. Klik244
    • ganda komponen TSpeedButton tersebut dan ketikkan kodeprogramnya.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 dahulukeberadaannya dengan fungsi DirectoryExists. Jika tidak adamaka akan dibuatkan dengan fungsi CreateDir. Folder tersebutkemudian ditentukan sebagai direktori aktif saat itu dengan fungsiSetCurrentDir. Kemudian, proses penyimpanan file gambar untuksetiap channel input tersebut dilakukan dengan memanggilmetode SaveToFile. Pemanggilan prosedur DrawGraph ber-senderkomponen Timer1 bertujuan untuk memastikan kanvas variabelBufIOsciloscope telah berisi gambar grafik lengkap dengan garisdatanya. File gambar yang disimpan berektensi Bmp dan namafile diawali dengan string Graph, dilanjutkan dengan nilai variabelView.3.12 Membuat File Setup Aplikasi Sistem Akuisisi DataSuatu aplikasi yang telah dikompilasi otomatis akan menghasilkansuatu file EXE. Tanpa Borland Delphi, kita masih dapatmenjalankan file EXE tersebut jika file-file pendukung aplikasitersedia dalam suatu folder atau direktori tertentu. File EXEtersebut dapat disalin ke komputer lain bersama dengan filependukungnya dengan nama folder seperti yang telah ditentukan.Pada aplikasi Sistem Akuisisi Data, file pendukung berupa filegambar dikodekan berada dalam folder D:Program. File database 245
    • bagi unit ULingked (form Flinked) ditentukan ada dalam folderD:ProgramDatabase.Selain dengan menyalin, file EXE beserta file pendukungnya dapatdipindahkan ke komputer lain dengan menginstal file setup (didalamnya terdapat file .EXE dan file pendukungnya) yang dibuatmelalui software InstallShield Express Borland Limited Delphi.Software tersebut tersedia dalam paket Borland Delphi. Instal dulusoftware tersebut jika belum ada dalam komputer Anda. Jikasudah, jalankan sehingga pada layar monitor tampil InstallShieldExpress seperti pada Gambar 3.3. Gambar 3.3 Tampilan software InstallShield ExpressSebelum file Setup dibuat, klik menu Tools | Options sehinggamuncul kotak dialog Options seperti Gambar 3.4. Kotak dialog inidipakai untuk mengedit setting global file setup dan terdiri atas 4(empat) tab: tab General, tab File Locations, tab InstallShieldUpdates, dan tab File Extensions. Pilih tab File Locations, lalu isiisian Project Location dengan direktori tempat file setup akandiletakkan, yaitu D:SetupSoftware, lalu tekan tombol OK. Sebuah246
    • konfirmasi tentang pembuatan direktori tersebut akan muncul jikabelum ada dalam harddisk. Pilih tombol Yes.Kembali ke jendela InstallShield Express (Gambar 3.3), klik menuCreate a new project.... Pada kotak tengah, klik icon Blank SetupProject dan ubah path direktori dan nama file dalam isian ProjectName and Location dengan D:SetupSoftwareSAD.ism.Kemudian tekan tombol Create untuk membuat file setup barudengan nama SAD. Jika ingin mengedit atau melengkapi file setupyang telah ada, pilih menu Open a project. Gambar 3.4 Kotak Dialog Options pada tab File LocationsSuatu file setup mempunyai 7 (tujuh) bagian. Oleh karenaproperty setiap bagian cukup banyak maka akan dibahas propertyyang penting saja, yaitu:Organize Your Setup1. 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 file- file database aplikasi hasil instalasi. File database untuk unit ULinked (form FLinked) diset berada dalam folder D:ProgramDatabase, 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 Button: pilih Yes untuk menyembunyikan 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 nomor telepon dukungan teknis aplikasi ini.2. 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 Data1. 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. 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.2. 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 System1. 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-nya3. 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 Ins256
    • 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 Appearance1. 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 tombol untuk mencari file lisensi tersebut. File 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 tombol untuk mencari file tersebut. File readme 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 tekan tombol untuk mencari file DLL tersebut. Contoh kode program untuk file DLL dapat dilihat pada C:Program FilesInstallShieldExpressSamples 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: berisi gambar Image berukuran 499x312. 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 Updates1. 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 Actions1. 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 Release1. 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. Compress Media: pilih Yes jika ingin memampatkan file setup dalam file .CAB. File .MSI akan dimampatkan sebelum dimasukkan dalam file Setup.exe.264
    • 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 tersebutdengan mengklik menu Build | Build SingleImage. File Setup.exeyang terbentuk, diletakkan pada folder D:SetupSoftwareSADExpressSingleImageDiskImagesDISK1. Menu Build | TestSingleImage digunakan untuk mengetes file Setup.exe yangterbentuk tersebut, sedangkan menu Build | Run SingleImageberguna untuk menjalankan file Setup.exe melalui aplikasiInstallShield Express.266