Zoom dan Scrolling Grafik dengan Keyboard

Kontrol grafik, seperti zoom (memperbesar/memperkecil) atau scrolling (menggeser), dalam suatu aplikasi biasanya dilakukan dengan tombol navigasi. Salah satu feature yang menarik dari aplikasi grafik yang dibuat dengan komponen Delphi, TChart, adalah bisa mengontrol grafik dengan menggunakan tombol-tombol Keyboard dan mudah dalam hal coding.

Lanjutkan project TChart pada tulisan terdahulu, atau download TChart Source Code ver.1.2, kemudian ekstrak dan jalankan program Delphi, buka project TChart (atau klik ganda file TChart.dpr melalui Widows Explorer). Selanjutnya download Keyboard Control Source Code, kemudian ekstrak dan tambahkan pada project TChart tersebut dengan meng-klik kanan mouse pada project TChart.exe. Pada menu yang muncul klik Add.. kemudian cari file .pas yang ingin ditambahkan seperti gambar di bawah ini

Aktifkan form fmMainTChart, kemudian klik ganda komponen popupmenu bernama pmOtherDemo.. pada popmenu yang muncul klik ganda menu Keyboard Scrolling..

Tambahkan code seperti di bawah ini untuk menampilkan aplikasi ini melalui aplikasi TChart

procedure TfmMainTChart.miKeyboardScrollingClick(Sender: TObject);
begin
  fmKeyboard.ShowModal;
end;

Tekan tombol Run untuk menjalankan aplikasi ini… jika muncul pesan Form ‘fmMainTChart ‘ references form ‘fmKeyboard’ declarated in unit ‘uKeyboard’ which is not in your USES list. Do you wish to add it? tekan tombol Yes. Tekan kembali tombol Run.. seharusnya aplikasi TChart telah berjalan dengan baik..

1. Inisialisasi aplikasi melalui prosedur event OnCreate dan OnShow form fmKeyboard

Seperti aplikasi pada umumnya, aplikasi ini juga perlu diinisialisasi melalui event OnCreate dan OnShow form ini (fmKeyboard). Klik ganda sel di sebelah kanan event OnCreate form fmKeyboard

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

prosedur di atas hanya untuk menginisialisasi grafik, yaitu nilai random dengan rentang sebanyak 500 data di-plot dalam TChartSeries melalui metode FillSampleValues.

Berikutnya klik ganda sel di sebelah kanan event OnShow form fmKeyboard

procedure TfmKeyboard.FormShow(Sender: TObject);
begin 
  ctKeyboard.SetFocus;
end;

Proses zoom dan scrolling grafik dengan menggunakan tombol Keyboard hanya dapat dilakukan jika komponen TChart yang dimaksud menjadi focus form. Sehingga setiap kali aplikasi ini ditampilkan, komponen TChart (ctKeyboard) harus di-set menjadi fokus. Prosedur event OnShow tersebut sebenarnya bisa diganti (dihapus) dengan memberi nilai ctKeyboard pada property ActiveControl form fmKeyboard. Tetapi jika aplikasi mempunyai komponen TChart yang dapat di-zoom dan scrolling lebih dari satu, pemberian nilai property ActiveControl tersebut tidak dapat dilakukan

2. Prosedur untuk mengontrol grafik dengan Keyboard

Ketika user menekan suatu tombol Keyboard (atau kombinasi beberapa tombol) dan form tersebut sedang diaktifkan, perintah-perintah dalam event OnKeyDown akan dijalankan. Event OnKeyDown akan terjadi jika property KeyPreview form bernilai True. Klik ganda sel di sebelah kanan event OnKeyDown form fmKeyboard

procedure TfmKeyboard.FormKeyDown(Sender: TObject; var Key: Word;
 Shift: TShiftState);
var
  dX, dY, dXRange, dYRange: Double;
begin
  dX:= 0;
  dY:= 0;

  with Series1.GetHorizAxis do dXRange:= Maximum - Minimum;
  with Series1.GetVertAxis do dYRange:= Maximum - Minimum;

  if ssShift in Shift then
  begin
    Case key of
      VK_LEFT, VK_UP    : ctKeyboard.ZoomPercent( 110 );
      VK_RIGHT, VK_DOWN : ctKeyboard.ZoomPercent( 90 );
    end;
    exit;
  end
  else
  Case key of
    VK_LEFT  : dX:= dXRange/100;
    VK_RIGHT : dX:= -dXRange/100;
    VK_UP    : dY:= -dYRange/100;
    VK_DOWN  : dY:= dYRange/100;
    VK_NEXT  : dY:= dYRange/10;
    VK_PRIOR : dY:= -dYRange/10;
    VK_SPACE : begin ctKeyboard.UndoZoom; Exit; end;
  end;

  if chInverted.Checked then
  begin
    dX:= -dX;
    dY:= -dY;
  end;

  with ctKeyboard do
  begin
    LeftAxis.Scroll(dY, chLimit.Checked);
    RightAxis.Scroll(dY, chLimit.Checked);
    BottomAxis.Scroll(dX, chLimit.Checked);
    TopAxis.Scroll(dX, chLimit.Checked);
    SetFocus;
  end;
end;

Proses scrolling komponen TChart sebenarnya hanya menggeser range skala sumbu horisontal atau skala sumbu vertikal (nilai property Maximum dikurangi dengan property Minimum). Nilai skala maksimum dan minimum sumbu horisontal grafik diperoleh setelah dihubungkan dengan menggunakan metode GetHorizAxis dan untuk sumbu vertikal dengan metode GetVertAxis. Range skala sumbu horisontal grafik disimpan dalam variabel dXRange, sedang variabel dYRange untuk menyimpan range skala sumbu vertikal grafik. Flag ssShift merupakan salah satu nilai klas bertipe TShiftState yang digunakan untuk menentukan keadaan tombol Keyboard Alt, Ctrl, Shift dan tombol Mouse. Tabel berikut ini menjelaskan masing-masing arti nilai flag :

Pada prosedur event OnKeyDown di atas, jika tombol Shift ditekan bersamaan dengan tombol panah kiri atau atas (VK_LEFT, VK_UP) maka grafik diperbesar 1,1 kalinya (110 %). Dan grafik diperkecil 90 % jika kombinasi tombol Shift dan tombol panah kanan atau bawah (VK_RIGHT, VK_DOWN) ditekan user. Penggunaan prosedur Exit untuk mengeluarkannya dari prosedur yang sekarang sedang dijalankan. Jika tombol Keyboard Shift tidak ditekan, kemudian user menekan salah satu tombol panah atau Page Up atau Page Down maka proses scrolling grafik akan dilakukan dengan menggunakan metode Scroll pada masing-masing sumbu grafik. Metode Scroll mempunyai sintax :

procedure Scroll(Const Offset: Double; InsideLimits: Boolean);

metode ini akan mengeser nilai skala maksimum dan minimum suatu sumbu grafik berdasarkan konstanta Offset, dan jika ingin menggeser grafik secara tidak terbatas maka variabel InsideLimits harus bernilai False. Pada prosedur event OnKeyDown di atas, nilai variabel InsideLimits tergantung pada nilai property Checked komponen TCheckBox chLimit atau sederhananya di-centang atau tidak pada checkbox Scrolling Limited.

Nilai variabel dX menentukan scrolling sumbu horisontal sedang variabel dY untuk scrolling sumbu vertikal grafik. Kedua variabel tersebut pertama kali diinisialisasi dengan nilai 0 untuk menghapus nilai sebelumnya. Jika user menekan salah satu tombol panah maka grafik akan digeser searah tanda panah tersebut, sebesar nilai range sumbu grafik dibagi dengan 100.

Pada sumbu horisontal, nilai range sumbu horisontal (variabel dXRange) adalah 500 data sehingga jika pengguna menekan tombol panah kiri maka grafik akan digeser ke kiri sebesar 5 titik (= 500/100).

Sedang jika pengguna menekan tombol Page Up (VK_PRIOR) atau Page Down (VK_NEXT), grafik akan digeser secara vertikal sebesar nilai range sumbu vertikal (variabel dYRange) dibagi 10. Nilai range sumbu vertikal tergantung pada data random yang di-plot dalam TChartSeries.

Untuk me-reset zoom grafik digunakan tombol SPACE (VK_SPACE) dengan memanggil metode UndoZoom. Dan arah proses scrolling akan terbalik dengan arah tombol panah jika checkbox Inverted Scrolling di-centang, yaitu hanya dengan memberi nilai minus pada variabel dX dan dY.

3. Mengembalikan fokus pada grafik setelah mouse dialihkan ke area di luar grafik

Zoom dan Scrolling dengan Keyboard hanya dapat terjadi jika fokus aplikasi ada pada komponen TChart yang dimaksud. Makanya setelah mengklik dua buah checkbox, Inverted Scrolling dan Scrolling Limited, fokus perlu dikembalikan ke grafik (komponen TChart ctKeyboard). Klik ganda masing masing komponen TCheckBox, sehingga pada jendela Code Editor akan muncul dua buah prosedur bernama chInvertedClick dan chLimitClick.

procedure TfmKeyboard.chInvertedClick(Sender: TObject);
begin
  ctKeyboard.SetFocus;
end;

procedure TfmKeyboard.chLimitClick(Sender: TObject);
begin
  ctKeyboard.SetFocus;
  if chLimit.Checked then 
    ShowMessage('Scrolling grafik terbatas hanya pada data yang telah di-plot.'+#13+
                'Lakukan zoom terlebih dahulu sebelum scrolling grafik.');
end;

Tambahan kode program pada prosedur chlimitsClick, untuk menampilkan sebuah pesan ketika checkbox Scrolling Limited di-centang.

Nuwun..

Daftar download untuk artikel ini:
1. TChart Source Code ver.1.2 - 6.44 kB
2. Keyboard Control Source Code - 2.18 kB
3. TChart Application ver.1.2 - 297.07 kB

Related Posts

1. Membuat Cross-hair pada Grafik dengan Komponen TChart
2. TChart Component
3. Upload Installer WordPress dengan File Manager
4. Upload Installer WordPress dengan FileZilla
5. Merancang Antarmuka ADC 8 bit dengan PPI 8255