Laporan Praktikum Sistem Antarmuka

Lab 1 – Simple Graphical User Interface

PRAKTIKUM 1
LAB-1: SIMPLE GRAPHICAL USER INTERFACE (GUI)

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

B. 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 praktikum kali ini, Chart class akan digunakan sebagai visualisasi sinyal
dalam bentuk grafikyang 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

C. KEBUTUHAN ALAT DAN BAHAN

1. Komputer yang terinstalasi Software Visual 1x
Studio

D. PROSEDUR PRAKTIKUM
a. Memilih menu File New → Project. Membuat project baru menggunakan
Windows Form App (.NET Framework). Lalu mengatur nama dan lokasi.

b. Dengan menggunakan Toolbox, menambahkan Button, Timer, dan Chart seperti

pada Gambar 1.

Program Studi D3 Teknik Elektronika 1

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

Gambar 1. Tampilan form

c. Tombol Start akan difungsikan sekaligus sebagai tombol Stop. Melakukan klik
ganda pada button1 dan mengetikkan kode program seperti berikut.
private void button1_Click(object sender, EventArgs e)

{ timer1.Enabled=!
(timer1.Enabled); if
(timer1.Enabled == true)
button1.Text = "STOP"; else
button1.Text = "START";

Menjalankan program dengan memilih menu Debug → Start Debugging lalu menutup
program dengan melakukan klik simbol Close, atau memilih menu Debug → Stop
Debugging.
d. Melakukan klik ganda pada timer1 lalu mengetikkan 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;

Program Studi D3 Teknik Elektronika 2

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

private double amplitude =

50.0; private double
frequency = 2.0;

Menjalankan program dengan memilih menu Debug → Start Debugging lalu menutup
program dengan melakukan klik symbol close, atau memilih menu Debug → Stop
Debugging.
e. Mengetikkan kode program berikut didalam method public Form1() untuk
mengubah beberapa parameter dari Chart
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;
}

Menjalankan program dan mengamati perubahannya.

E. DATA HASIL PRAKTIKUM

1. Tampilan User Interface

Gambar 1.1 Tampilan awal saat button belum ditekan

Program Studi D3 Teknik Elektronika 3

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

Gambar 1.2 Tampilan setelah button di tekan dan program bekerja

Gambar 1.3 Tampilan setelah button STOP ditekan

2. Pseudo Code
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace PSAM
{
public partial class Form1 : Form
{
public Form1()

Program Studi D3 Teknik Elektronika 4

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

{
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;
}

private void button1_Click(object sender, EventArgs e)

{
timer1.Enabled = !(timer1.Enabled);
if (timer1.Enabled == true)
button1.Text = "STOP";
else
button1.Text = "START";

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;
}
}

3. Performansi & Penggunaan Resources

Gambar 1.4 Tampilan performansi RAM dan CPU

Program Studi D3 Teknik Elektronika 5

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

F. PROJECT/TUGAS

1. Tampilan User Interface

Gambar 2.1 Tampilan awal saat button “Mulai” belum ditekan

Gambar 2.2 Tampilan saat button “Mulai” ditekan dan program bekerja

Program Studi D3 Teknik Elektronika 6

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

Gambar 2.3 Tampilan saat nilai amplitudo dan frekuensi pada setiap sinyal
diubah

Gambar 2.4 Tampilan saat button “Mandek” ditekan

2. Pseudo Code

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

Program Studi D3 Teknik Elektronika 7

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

namespace Antar_Muka
{
public partial class Form1 : Form
{
public Form1()
{

InitializeComponent();
chart1.Series[0].Name = "Series1";

chart1.Series[0].ChartType =

System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
chart1.Series[0].BorderWidth = 5;
chart1.Series[0].Color = Color.Blue;
chart1.Legends[0].Docking =
System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
chart1.Series[1].ChartType =

System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
chart1.Series[1].BorderWidth = 5;
chart1.Series[1].Color = Color.Red;
chart1.Series[2].ChartType =

System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
chart1.Series[2].BorderWidth = 5;
chart1.Series[2].Color = Color.Green;
}

private void chart1_Click(object sender, EventArgs e)

{

private void button1_Click(object sender, EventArgs e)

{
timer1.Enabled = !(timer1.Enabled);
if (timer1.Enabled == true)
button1.Text = "Mandek";
else
button1.Text = "Lanjut";
}

private void timer1_Tick(object sender, EventArgs e)

{
double timeinterval =
Convert.ToDouble(numericUpDown4.Value);
double amplitudo1 = Convert.ToDouble(numericUpDown1.Value);
double amplitudo2 = Convert.ToDouble(numericUpDown2.Value);
double amplitudo3 = Convert.ToDouble(numericUpDown6.Value);
double frekuensi1 = Convert.ToDouble(numericUpDown3.Value);
double frekuensi2 = Convert.ToDouble(numericUpDown5.Value);
double frekuensi3 = Convert.ToDouble(numericUpDown7.Value);
double y1 = amplitudo1 * Math.Sin(2 * Math.PI * frekuensi1 *
time);
double y2 = amplitudo2 * Math.Sin(2 * Math.PI * frekuensi2 *
time);
double y3 = amplitudo3 * Math.Sin(2 * Math.PI * frekuensi3*
time);
if (chart1.Series[0].Points.Count > 40)

Program Studi D3 Teknik Elektronika 8

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

{
chart1.Series[0].Points.RemoveAt(0);
chart1.Series[1].Points.RemoveAt(0);
chart1.Series[2].Points.RemoveAt(0);
}

chart1.Series[0].Points.AddY(y1);
chart1.Series[1].Points.AddY(y2);
chart1.Series[2].Points.AddY(y3);

time += (timeinterval*0.001);

private double time = 0.0;

private void timer2_Tick(object sender, EventArgs e)

{

private void timer3_Tick(object sender, EventArgs e)

{

private void textBox1_TextChanged(object sender, EventArgs e)

{

private void label1_Click(object sender, EventArgs e)

{

private void numericUpDown3_ValueChanged(object sender,

EventArgs e)
{

private void groupBox3_Enter(object sender, EventArgs e)

{

private void numericUpDown4_ValueChanged(object sender,

EventArgs e)
{

private void numericUpDown2_ValueChanged(object sender,

EventArgs e)
{

Program Studi D3 Teknik Elektronika 9

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

private void numericUpDown5_ValueChanged(object sender,

EventArgs e)
{

private void Form1_Load(object sender, EventArgs e)

{

}
}
}

3. Performansi & Penggunaan Resources

Gambar 2.4 Tampilan performansi RAM dan CPU

Program Studi D3 Teknik Elektronika 10

 Laporan Praktikum Sistem Antarmuka
Lab 1 – Simple Graphical User Interface

G. KESIMPULAN
GUI (Graphical User Interface) merupakan jenis antarmuka pengguna
yang menggunakan metode interaksi pada piranti elektronik secara grafis antara
pengguna dan komputer yang mana pada praktikum kali ini diaplikasikan
melalui software Visual Studio 2019 dengan menggunakan bahasa pemrograman
C#.

Praktikum kali ini adalah tentang membuat sebuah grafik yang

menunjukkan gelombang sinus yang dapat berjalan. Didalam grafik tersebut
terdapat unsur amplitudo, frekuensi, dan time interval yang bisa diubah-ubah
sesuai dengan keinginan pengguna.

Program Studi D3 Teknik Elektronika 11