Novanna RHZ - Lab1 Simple GUI

Laporan Workshop Sistem Antarmuka
Novanna Rahma Zani – 1103181047
Praktikum 1
Judul : Simple Graphical User Interface 1
Tanggal : 13 Maret 2020
Pendahuluan
Antarmuka (interface) membahas mengenai pertukaran data antar peralatan atau peralatan
dengan manusia. Antarmuka 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 Antarmuka 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. 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 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 properti
yang menarik dari Chart class adalah Series dan ChartArea.
Peralatan
- PC yang telah terinstall Visual Studio
Hasil Praktikum
Terlampir
Novanna Rahma Zani - 1103181047
1a. Membuat Satu Sinyal Sinusoid
Penjelasan Program
- Prosedur Perancangan Program
1. Membuka Aplikasi Microsoft Visual Studio

2. Memilih menu file ➔ File ➔ NEW ➔Project lalu memilih Windows Form App,
Mengatur nama dan lokasi
3. Dengan menggunakan Toolbox, menambahkan Button, Timer dan chart seperti pada
Gambar 1
Gambar 1.1 Tampilan Desain Latihan 1

4. Lalu pada button START ditambahkan program seperti :
timer1.Enabled = !(timer1.Enabled);
if (timer1.Enabled == true)
button1.Text = "STOP";
else
button1.Text = "START";
Hal ini dilakukan untuk membuat tombol start berubah text menjadi stop saat program
berjalan sehingga menjadi tombol toggle.
5. Lalu menambahkan Timer dan menambahkan code seperti :

double y = amplitude * Math.Sin(2 * Math.PI * frequency * time);
if (chart1.Series[0].Points.Count > 40)
Chart1.Series[0].Points.RemoveAt(0); //code akan dihapus,alasan di penjelasan */
{
chart1.ChartAreas[0].AxisX.Minimum = xmin;
chart1.ChartAreas[0].AxisX.Maximum = xmin + 40;
xmin++;
}
chart1.Series[0].Points.AddY(y);
time += 0.01;
Hal ini dilakukan agar saat timer itu berlangsung maka perintah berupa code tersebut
dioperasikan. Yang berarti saat timer tidak aktif maka proses tdari code tidak akan jalan.
Hal ini juga didukung dengan kondisi Enabled pada timer1 yang bernilai False. Nilai
False bermaksud agar timer pada kondisi off saat pertama kali.
6. Lalu untuk mengubah tampilan chart, maka menambahkan code sebagai berikut :
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;
Pada code ini, kita dapat melakukan perubahan tampilan chart seperti tebal garis pada
BorderWidth ; Nama Chart pada Name ; dan Warna garis di Color. Dengan aturan
penulisan seperti pada code tersebut. Pada percobaan ini chart yang digunakan hanya satu
dan nama chart adalah chart 1 dan satu garis yaitu pada series[0].
7. Didapatkan tampilan chart yang nilainya tidak tersimpan, hal ini dikarenakan oleh :
*Chart1.Series[0].Points.RemoveAt(0);
Maka code diatas dihapus agar data yang diterima grafik tersimpan.
8. Lalu simpan program dan jalankan dengan Start Debugging.

9. Berikut adalah tampilan yang dihasilkan.
(a) (b)
Gambar 1.2 Hasil Akhir Latihan Percobaan 1
(a) Tampilan Gui sebelum menekan tombol START ; (b)Tampilan Gui sebelum menekan tombol
START
Program Lengkap
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 Latihan1
{
public partial class Form1 : Form
{
public Form1()
{
//INI P1_M1
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)

{
else
}
private void timer1_Tick(object sender, EventArgs e)

{
{
xmin++;
}
time += 0.01;
}
private int xmin = 0;
private double time = 0.0;
private double amplitude = 50.0;
private double frequency = 2.0;
}
}
Tampilan Program
Dokumentasi Pengerjaan Program
Hasil Program ketika dubugging

1b. Membuat Tiga Sinyal Sinusoid
Penjelasan Program
- Prosedur Perancangan Program
1. Membuka Aplikasi Microsoft Visual Studio

2. Memilih menu file ➔ File ➔ NEW ➔Project lalu memilih Windows Form App, Mengatur nama
dan lokasi.
3. Lalu melakukan SOP Latihan Percobaan 1. Setelah itu melakukan modifiskasi pada program untuk
menghasilkan dan menampilkan 3 Sinyal.
4. Modifikasi dimulai dengan klik Chart1 pada form design, lalu perhatikan properties ➔ Chart
➔Series ➔Add➔Ok
Gambar 1.1 Tampilan Modifikasi Menambah Series Chart

5. Setelah itu beralih ke toolbox untuk menambahkan NumericUpDown, Groupbox dan text seperti
pada Gambar 1.2
Gambar 1.2 Tampilan Modifikasi dengan menambah Tools pada tampilan GUI
6. Setelah membuat Tampilan GUI tersebut saatnya memodifikasi program, dimulai dengan
modifikasi tampilan 3 sinyal. Berdasarkan program yang dibuat pada latihan satu, terdapat
program sebagai berikut :
public Form1()
{
chart1.Legends[0].Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
}
➔Program diatas merupakan inisialisasi dan identitas pada Chart 1 Series 0 (chart1.Series[0]) yang diberi
nama SIN dengan ChartType berupa Line(Garis), BorderWidth (Lebar Border/ Ketebalan Garis) dan warna
yang didefinisikan dengan Color.Red (warna merah). Untuk sintax chart1.Legends[0].Docking merupakan
definisi untuk menampilkan dan merubah posisi nama setiap series.
➔Untuk membuat tampilan 3 Sinyal maka kita perlu membuat 3 Identitas dengan Series[0], [1] dan [2]
serta membuat perbedaan pada warna agar lebih mudah dikenali. Seperti pada Program dibawah :
{
chart1.Series[0].Name = "Series1";
chart1.Series[1].Color = Color.Yellow;
chart1.Series[2].Color = Color.Blue;
}
➔Pada Program diaatas, saya mendefinisikan ketiga Sinyal dengan tiga nama berbeda yaitu, SIN, COS dan
TAN. Yang perlu diperhatikan adalan nilai series yang buat. Jika sebelumnya saya hanya mengidentitaskan
satu series dengan Chart1.Series[0] , maka untuk memberi identitas ketiga sinyal perlu ditambahkan
Chart1.Series[1] dan Chart1.Series[2]. Lalu ketiga sinyal tersebut juga diatur berbeda warnanya supaya
lebih mudah dikenali. Untuk Program,
chart1.Legends[0].Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
Didefinisikan satu saja, tidak perlu dicopy di ketiga identitas sinyal karena program tersebut untuk
Lagends bukan Series.
7. Lalu dilanjutkan dengan timer1. Berdasarkan program yang dibuat dari latihan satu, terdapat
program sebagai berikut :

{
xmin++;
}
time += 0.01;
➔Program diatas merupakan program yang dijalankan untuk Chart 1 Series 0 (chart1.Series[0])
Dengan Operasi matematika (double y = amplitude * Math.Sin(2 * Math.PI * frequency * time);)
➔Oleh karena itu diperlukan program tambahan untuk Operasi masukan ketiga sinyal, seperti
program berikut :

{
//Series1
double s = amplitude * Math.Sin(2 * Math.PI * frequency * time);
chart1.Series[0].Points.AddY(s);
{
xmin++;
}
//Series2
double c = amplitude * Math.Sin(2 * Math.PI * frequency * time);
chart1.Series[1].Points.AddY(c);
{
xmin++;
}
//Series3
double t = amplitude * Math.Sin(2 * Math.PI * frequency * time);
chart1.Series[2].Points.AddY(t);
{
xmin++;
}
time += 0.01;
}
private double xmin = 0.0;
private double frequency = 50.0;
private double amplitude = 2.0;
➔Program tersebut menjelaskan bahwa ada tiga operasi untuk tiga sinyal. sumbu Y diarahkan
pada operasi matematika dengan masukan frekuensi serta amplitude yang sama, berasal dari
definisi Private double dibawahnya. Sehingga dihasilkan sinyal seperti pada Gambar 1.3
Gambar 1.3 Tampilan 3 Sinyal dengan masukan frekuensi dan amplitude yang sama.
8. Pada tugas ini, nilai masukan frekuensi, amplitude dan timer interval dapat diatur oleh User
dengan bantuan nilai masukan dari NumericUpDown sehingga nilai frekuensi setiap series harus
punya definisinya masing-masing. Begitupula dengan amplitude. Untuk mendapatkan nilai
masukan dari NumericUpDown tersebut maka dibuatlah program sebagai berikut :
{
//SIN
double amplitudes = (double)numericUpDown2.Value;
double frequencys = (double)numericUpDown3.Value;
double s = amplitudes * Math.Sin(2 * Math.PI * frequencys * time);
chart1.Series[0].Points.RemoveAt(0);
//COS
double amplitudec = (double)numericUpDown4.Value;
double frequencyc = (double)numericUpDown5.Value;
double c = amplitudec * Math.Sin(2 * Math.PI * frequencyc * time);
//TAN
double amplitudet = (double)numericUpDown6.Value;
double frequencyt = (double)numericUpDown7.Value;
double t = amplitudet * Math.Sin(2 * Math.PI * frequencyt * time);
time += 0.01;
}
➔ Ketiga sinyal memiliki masukan frekuensi dan amplitude yang berbeda sehingga didefinisikan dengan
nama yang berbeda pula. Setelah memberi identitas nilai masukan yang baru, nilai setiap nama frekuensi
maupun amplitude diarahkan kepada sumber NumericUpDown yang sesuai dengan program berikut :
(double)numericUpDown2.Value;
Memastikan pula, operasi yang akan dilakukan telah di program dengan nama yang sesuai seperti
frequencys, (atau dengan nama baru yang kalian buat) karena nilai masukan frekuensi serta amplitude
berbeda-beda berdasarkan nilai masukannya masing-masing.
Sehingga Tampilannya berubah menjadi :

Gambar 1.4 Tampilan 3 Sinyal dengan masukan frekuensi dan amplitude yang bisa diatur oleh User.
9. Setelah berhasil mengkonfigurasikan NumericUpDown pada frekuensi dan Amplitudo, saatnya

membuat program untuk mengatur Timer Interval. Program tersebut dibuat agar User bisa
mengatur kecepatan pergerakan sinyal.
Masih pada private void timer1_Tick(object sender, EventArgs e)
Definisikan diatas operasi matematika SIN,COS,TAN seperti program dibawah :
timer1.Interval = (int)numericUpDown1.Value;
➔ timer1 merupakan nama dari timer yang digunakan pada program ini. Lalu diambil nilainya dari
NumericUpDown1. Nilai yang diambil berupa Interger karena pada dasarnya timer memproses dengan
data Interger.
Gambar 1.5 Mengatur nilai batasan Interval

Program Lengkap
using System;
using System.Data;
using System.Linq;
using System.Text;
namespace Percobaan1
{
{
public Form1()
{
//INI P2_M1
}

{
else
}

{
//Series1
//Series2
//Series3
time += 0.01;
Tampilan Program
1c. Membuat Sinyal lainnya dengan menggunakan tamplate projek 1b
Penjelasan Program
Pada program 1b. Kami telah merancang 3 Sinyal pada chart. Project 1c ini kami improviasi bentuk
sinyal menjadi berbeda. Sehingga program yang digunakan masih sama seperti program 1b tetapi
untuk membuatnya menjadi 3 sinyal yang berbeda maka :
{
//SIN
//COS
//TAN
time += 0.01;
}
Program yang di highlight merupakan program yang menjalankan operasi matematika pada Sinyal
1 (chart1.Series[0]) , Sinyal 2 (chart1.Series[1]) , dan Sinyal 3 (chart1.Series[2]) . Pada program
sebelumnya saya merancangnya menjadi bentuk yang sama yaitu sinyal gelombang sinus. \
Sehingga untuk membuat bentuk sinyal menjadi berbeda atau disini saya menggunakan bentuk
sinyal gelombang Sin, Cos dan Tan maka yang perlu dilakukan adalah :
double c = amplitudec * Math.Cos(2 * Math.PI * frequencyc * time);
double t = amplitudet * Math.Tan(2 * Math.PI * frequencyt * time);
Merubah operasi matematika pada sinyal 1 yaitu sinyal Sin ; sinyal 2 untuk sinyal Cos ; dan sinyal
3 menjadi sinyal Tan.
Untuk memperjelas tampilannya, kita juga perlu merubah identitas dari setiap sinyal dengan
merubah :
{
chart1.Series[0].Name = "Sin";
chart1.Series[1].Name = "Cos";
chart1.Series[2].Name = "Tan";
}
Dengan itu jadilan tampilan Simple Graphical User Interface yang menampilkan 1 Chart dengan
bentuk 3 Sinyal yang berbeda.
Program Lengkap
using System;
using System.Data;
using System.Linq;
using System.Text;
namespace Percobaan1
{
{
public Form1()
{
//INI P3_M1
chart1.Series[1].Name = "COS";
chart1.Series[2].Name = "TAN";
}

{
else
}

{
//Series1
//Series2
double c = amplitudec * Math.Cos(2 * Math.PI * frequencyc * time);
//Series3
double t = amplitudet * Math.Tan(2 * Math.PI * frequencyt * time);
time += 0.01;
Tampilan Program
Additional GUI for Demo Project
Tampilan Program
Desain GUI
Debugging Project
Penjelasan Program
Program ini dirancang untuk dapat memanggil sekaligus menampilkan project-project lain.
Tombol start pada GUI tersebut dirancang dapat mengaktifkan button pada modul 1 maupun 2.
Jika tombol start tidak diklik terlebih dahulu makan button pada modul tidak mau bekerja.
Kemudian setelah tombol start di klik, kita dapat klik setiap button dan kemudian menjalankan
project yang ingin ditampilkan. Oleh karena itu, semua button diarahkan pada file application.
GUI ini dibuat untuk memudahkan saya dalam melakukan demo project sehingga tidak perlu
membuka satu persatu file .csproj pada setiap project lalu melakukan debugging satu persatu.
- Program untuk membuat button pada modul bisa terarah ke aplikasi
Yang pertama harus dilakukan adalah double klik pada button yang ingin diatur lalu
menambahkan program seperti berikut :
{
System.Diagnostics.Process.Start("A:/Latihan2.exe");
}
Sesuaikan nama button dengan direktori file yang akan dijalankan. Program tersebut dilakukan
pada setiap button
- Program untuk membuat button mau bekerja ketika button start telah diklik
Sebelumnya kita telah membuat program sebagai berikut :

{
else
}
Button5 merupakan tombol start yang digunakan. Button5 ini dianggap aktif ketika
timer1.Enabled bernilai True sehingga teks yang ditampilkan adalah STOP.
Sehingga inisiasi program aktif berasal dari kondisi timer yang aktif atau bernilai True,
maka program pada setiap button yang diarahkan ke aplikasi bisa ditambahkan syntax
seperti ini :

{
}
Dengan begitu ketika button 2 di klik, ia akan memeriksa terlebih dahulu apan
timer1.enabled telah bernilai True atau aktif. Ketika aktif maka program akan dilanjutkab
ke pemanggilan aplikasi di direktori A:/Latihan2.exe
Program Lengkap
using System;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading;
namespace ProjectGUI
{
{
public Form1()
{
MessageBox.Show("Novanna Rahma Zani");
Thread t = new Thread(new ThreadStart(SplashStart));
t.Start();
Thread.Sleep(500);
t.Abort();
}
public void SplashStart()
{
Application.Run(new Form2());
}

{

{
}

{
}

{
}

{
}

{
else
}

Novanna RHZ - Lab1 Simple GUI

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Novanna RHZ - Lab1 Simple GUI

Diunggah oleh

Hak Cipta:

Format Tersedia

Laporan Workshop Sistem Antarmuka

Novanna Rahma Zani – 1103181047

1a. Membuat Satu Sinyal Sinusoid

- Prosedur Perancangan Program

1. Membuka Aplikasi Microsoft Visual Studio

Gambar 1.1 Tampilan Desain Latihan 1

5. Lalu menambahkan Timer dan menambahkan code seperti :

8. Lalu simpan program dan jalankan dengan Start Debugging.

private void button1_Click(object sender, EventArgs e)

private void timer1_Tick(object sender, EventArgs e)

Dokumentasi Pengerjaan Program

Hasil Program ketika dubugging

1b. Membuat Tiga Sinyal Sinusoid

- Prosedur Perancangan Program

1. Membuka Aplikasi Microsoft Visual Studio

Gambar 1.1 Tampilan Modifikasi Menambah Series Chart

double y = amplitude * Math.Sin(2 * Math.PI * frequency * time);

private void timer1_Tick(object sender, EventArgs e)

Sehingga Tampilannya berubah menjadi :

9. Setelah berhasil mengkonfigurasikan NumericUpDown pada frekuensi dan Amplitudo, saatnya

Gambar 1.5 Mengatur nilai batasan Interval

private void button1_Click(object sender, EventArgs e)

private void timer1_Tick(object sender, EventArgs e)

private double time = 0.0;

1c. Membuat Sinyal lainnya dengan menggunakan tamplate projek 1b

private void button1_Click(object sender, EventArgs e)

private void timer1_Tick(object sender, EventArgs e)

private double time = 0.0;

Additional GUI for Demo Project

private void button5_Click(object sender, EventArgs e)

private void button2_Click(object sender, EventArgs e)

private void button2_Click(object sender, EventArgs e)

private void button3_Click(object sender, EventArgs e)

private void button1_Click(object sender, EventArgs e)

private void button4_Click(object sender, EventArgs e)

private void button6_Click(object sender, EventArgs e)

private void button5_Click(object sender, EventArgs e)

Anda mungkin juga menyukai