Interface System Project Workhop 2018

I. Simple Graphical User Interface

TUJUAN

 Mahasiswa dapat menggunakan Chart class sebagai visualisasi grafis dari sebuah
sinyal.

TEORI

Antarmuka (interface) membahas mengenai pertukaran data antar peralatan

atau peralatan dengan manusia. Antarmuka ini dapat berupa hardware interface, soft-
ware interface, dan user interface. Pertukaran data antara unit didalam sebuah komput-
er seperti pertukaran data dari memori ke CPU adalah salah satu contoh dari hardware
interface. Sedangkan software interface dapat dicontohkan pada pertukaran data antara
prosedur program. User interface melibatkan manusia untuk melakukan pengendalian
atau memonitor apa yang sedang terjadi menggunakan tampilan pada layar.

Target dari mata kuliah Workshop Sistem Antarmuka adalah mahasiswa dapat
membuat sebuah sistem yang melibatkan sebuah komputer untuk melakukan pengen-
dalian dan memonitor sebuah peralatan lain seperti mikrokontroler yang terhubung
dengan banyak sensor. Praktikum Workshop Sistem Antarmuka menekankan pada
bagaimana merancang sebuah user interface dengan memanfaatkan Visual Studio 2017
untuk berkomunikasi dengan peralatan menggunakan komunikasi serial.

Pada praktikum kali ini, Chart class akan digunakan sebagai visualisasi sinyal da-
lam bentuk grafik yang berguna untuk melakukan monitoring sebuah nilai dalam
rentang waktu tertentu. Anda dapat merujuk pada referensi [1] untuk melihat isi dari
Chart class. Dua property yang menarik dari Chart class adalah Series dan ChartArea.

Industrial Electronics Laboratory – D206 Page 7

 Interface System Project Workhop 2018

PROSEDUR

Untuk prosedur umum, pastikan komputer masing-masing praktikan sudah ter-

install program :

1. Unit komputer dengan Visual Studio

Tahapan yang harus dilakukan oleh praktikan dalam mengimplementasikan con-

toh-contoh program tersebut adalah sebagai berikut :

1. Pilih menu File  New  Project. Buatlah project baru menggunakan Win-
dows Form App. Atur nama dan lokasi.
2. Dengan menggunakan Toolbox, tambahkan Button, Timer, dan Chart seperti
pada Gambar 1.

Gambar 1, Tampilan form (Timer tidak tampak pada gambar ini)

3. Tombol Start akan difungsikan sekaligus sebagai tombol Stop. Klik ganda pa-
da button1 dan ketikkan kode program berikut.

private void button1_Click(object sender, EventArgs e)

{
timer1.Enabled = !(timer1.Enabled);
if (timer1.Enabled == true)
button1.Text = "STOP";
else
button1.Text = "START";
}
Jalankan program dengan memilih menu Debug  Start Debugging.

Industrial Electronics Laboratory – D206 Page 8

 Interface System Project Workhop 2018

Cobalah klik tombol Start beberapa kali. Apakah anda melihat text berubah dari
Start menjadi Stop dan sebaliknya?
Tutup program dengan melakukan klik symbol close, atau memilih menu Debug
 Stop Debugging.

4. Klik ganda pada timer1. Ketikkan kode program berikut.

private void timer1_Tick(object sender, EventArgs e)

{
double y = amplitude * Math.Sin(2 * Math.PI * frequency * time);
if (chart1.Series[0].Points.Count > 40)
chart1.Series[0].Points.RemoveAt(0);

chart1.Series[0].Points.AddY(y);
time += 0.01;
}

private double time = 0.0;

private double amplitude = 50.0;
private double frequency = 2.0;

Jalankan program dengan memilih menu Debug  Start Debugging.

Cobalah klik tombol Start. Apakah anda melihat sebuah gelombang sinusoida
yang bergerak kekiri?

Tutup program dengan melakukan klik symbol close, atau memilih menu Debug
 Stop Debugging.

5. Untuk mengubah beberapa parameter dari Chart, cobalah ketikkan kode pro-
gram berikut didalam method public Form1().

public Form1()
{
InitializeComponent();
chart1.Series[0].Name = "SIN";
chart1.Series[0].ChartType = Sys-
tem.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
chart1.Series[0].BorderWidth = 5;
chart1.Series[0].Color = Color.Red;
chart1.Legends[0].Docking = Sys-
tem.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
}

Jalankan program dan amati perubahannya.

Industrial Electronics Laboratory – D206 Page 9

 Interface System Project Workhop 2018

6. Perhatikan bahwa pada langkah nomor 4, method RemoveAt(0) akan

menghasilkan efek grafik yang bergerak. Kenyataannya, data yang terdapat
didalam Chart akan terhapus. Untuk menggerakkan grafik tanpa menghapus
data, anda dapat menggerakkan batas dari sumbu X. Gantilah kode program
pada langkah nomor 4 dengan kode berikut. Jalankan program dan amati
hasilnya.

private void timer1_Tick(object sender, EventArgs e)

{
double y = amplitude * Math.Sin(2 * Math.PI * frequency * time);
if (chart1.Series[0].Points.Count > 40)
{
chart1.ChartAreas[0].AxisX.Minimum = xmin;
chart1.ChartAreas[0].AxisX.Maximum = xmin + 40;
xmin++;
}

chart1.Series[0].Points.AddY(y);
time += 0.01;
}

private int xmin = 0;

private double time = 0.0;
private double amplitude = 50.0;
private double frequency = 2.0;

Industrial Electronics Laboratory – D206 Page 10

 Interface System Project Workhop 2018

TUGAS

 Modifikasilah agar Chart menggambarkan tiga macam grafik dengan parame-

ter yang dapat diubah-ubah, misalnya seperti pada Gambar 2. Series dapat
ditambahkan pada jendela Properties, atau secara program dapat dit-
ambahkan dengan instruksi chart1.Series.Add("Nama_Series");

Gambar 2. Tampilan Chart dengan tiga grafik.

 Laporan Resmi : Buat SOP proses pembuatan project beserta analisa.

REFERENSI

https://msdn.microsoft.com/en-
us/library/system.windows.forms.datavisualization.charting.chart(v=vs.110).aspx

Industrial Electronics Laboratory – D206 Page 11