Workshop Sistem Antar Muka

Politeknik Elektronika Negeri Surabaya

Lab 1: Simple Graphical User Interface

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

II. Teori
Antar Muka (interface) membahas mengenai pertukaran data antar peralatan atau peralatan
dengan manusia. Antar Muka ini dapat berupa hardware interface, software interface, dan user
interface. Pertukaran data antara unit didalam sebuah komputer 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 Antar Muka adalah mahasiswa dapat membuat sebuah
sistem yang melibatkan sebuah komputer untuk melakukan pengendalian dan memonitor sebuah
peralatan lain seperti mikrokontroler yang terhubung dengan banyak sensor. Workshop Sistem
Antar Muka menekankan pada bagaimana merancang sebuah user interface dengan
memanfaatkan Visual Studio 2017 untuk berkomunikasi dengan peralatan menggunakan
komunikasi serial.

Pada workshop kali ini, Chart class akan digunakan sebagai visualisasi sinyal dalam 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.

III. Peralatan
Satu unit komputer dengan Visual Studio 2017

IV. Prosedur Praktikum

1. Pilih menu File → New → Project. Buatlah project baru menggunakan Windows Form App (.NET
Framework). Atur nama dan lokasi.
2. Dengan menggunakan Toolbox, tambahkan Button, Timer, dan Chart seperti pada Gambar 1.

Workshop Sistem Antarmuka

Program Studi Teknik Elektronika – Departemen Teknik Elektro
Politeknik Elektronika Negeri Surabaya
Hary Oktavianto - 2019
 Gambar 1. Tampilan form

3. Tombol Start akan difungsikan sekaligus sebagai tombol Stop. Klik ganda pada 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.

Cobalah klik tombol Start beberapa kali. Apakah anda melihat text berubah dari Start menjadi
Stop dan sebaliknya?
Tutup program dengan melakukan klik simbol 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;
}

Workshop Sistem Antarmuka

Program Studi Teknik Elektronika – Departemen Teknik Elektro
Politeknik Elektronika Negeri Surabaya
Hary Oktavianto - 2019
 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 program berikut
didalam method public Form1().
public Form1()
{
InitializeComponent();
chart1.Series[0].Name = "SIN";
chart1.Series[0].ChartType =
System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
chart1.Series[0].BorderWidth = 5;
chart1.Series[0].Color = Color.Red;
chart1.Legends[0].Docking =
System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
}

Jalankan program dan amati perubahannya.

V. Tugas
Modifikasilah agar Chart menggambarkan tiga macam grafik dengan parameter yang dapat
diubah-ubah, misalnya seperti pada Gambar 2. Series dapat ditambahkan pada jendela Properties,
atau secara program dapat ditambahkan dengan instruksi chart1.Series.Add("Nama_Series");
Buatlah laporan untuk kegiatan hari ini.

VI. Penilaian Tugas

1 – Dapat menampilkan 3 macam grafik di dalam sebuah Chart.
2 – Dapat menampilkan 3 macam grafik di dalam sebuah Chart, amplitudo dan frekuensi dapat
dimodifikasi.
3 – Dapat menampilkan 3 macam grafik di dalam sebuah Chart, amplitudo dan frekuensi dapat
dimodifikasi, time interval dapat diubah.

Workshop Sistem Antarmuka

Program Studi Teknik Elektronika – Departemen Teknik Elektro
Politeknik Elektronika Negeri Surabaya
Hary Oktavianto - 2019
 Gambar 2. Tampilan Chart dengan tiga grafik.

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

Workshop Sistem Antarmuka

Program Studi Teknik Elektronika – Departemen Teknik Elektro
Politeknik Elektronika Negeri Surabaya
Hary Oktavianto - 2019