Interface System - Novanna Rahma Zani - Lab7. Parsing, The Project

LAPORAN WORKSHOP SISTEM ANTARMUKA
Novanna Rahma Zani – 1103181047

PRAKTIKUM 6
Judul : Lab7 – Parsing, The Project
Tanggal : 17 Mei 2020
TUJUAN
Mahasiswa dapat melakukan data parsing dan menampilkan masing-masing komponen dalam
bentuk grafik.
PENDAHULUAN
Setelah anda dapat memisahkan paket data menjadi nilai bacaan masing-masing sensor pada
percobaan sebelumnya, berikutnya masing-masing nilai bacaan sensor tersebut akan ditampilkan
dalam bentuk grafik.
Gambar 1. Menampilkan data sensor dalam bentuk grafik

Perangkat mikrokontroler mengirimkan keempat data sensor secara terus-menerus (broadcast)
menggunakan format data seperti ditunjukkan oleh Gambar 2.
Gambar 2. Format data dari mikrokotroler

dimana @ adalah karakter pembuka, T adalah data suhu, H adalah data kelembaban udara, P
adalah data tekanan udara, U adalah data UV index, tanda koma adalah pemisah antar data, CR
adalah karakter kontrol Carriage Return, dan LF adalah karakter kontrol Line Feed.
Setelah data seperti pada Gambar 2 diterima oleh PC, untuk memisahkan empat data tersebut
digunakan instruksi Split yang telah disediakan oleh Visual Studio. Instruksi Split membutuhkan
parameter pemisah, dalah kasus ini adalah tanda koma.
PERALATAN
1. Satu unit komputer dengan Visual Studio 2012 dan aplikasi com0com
2. Aplikasi simulator sebagai pengganti mikrokontroler
Novanna Rahma Zani - 1103181047
TUGAS
Dengan menggunakan simulator mikrokontroler yang mengirimkan paket data berisi nilai
4 sensor secara terus menerus, pada tugas ini merancang sebuah GUI yang menampilkan data 4
sensor tersebut dalam bentuk grafik. Membuat laporan dan menjelaskan tiap kode program yang
telah dibuat.
Jawab :
Perancangan GUI
Pada bagian ini, akan dijelaskan prosedur perancangan serta penjelasan program pada
GUI.
1. Membuka Visual Studio 2012 lalu membuat project baru yaitu Windows Form
Application dan menambahkan komponen seperti Gambar 2.
Gambar 2. Desain Tampilan Tugas Lab 7

Komponen didapatkan dari toolbox, aplikasi ini membutuhkan Serial Port, timer, dan
StatusStrip. Terdapat pula Button untuk Connect, Start, Reset dan Close. Combo Box
untuk COMM Port dan Baudrate. List Box untuk menampilkan paket data serta 4 grafik
untuk visualisasi sensor suhu, tekanan udara, kelembaban dan indeks uv.
2. Setelah tampilannya selesai, saatnya menambahkan program pada aplikasi. Pada
tombol Connect diberikan program sebagai berikut :
private void button1_Click(object sender, EventArgs e)
{
button1.Text = "Connect";
if (serialPort1.IsOpen == true)
{
serialPort1.Close();
toolStripStatusLabel1.Text = serialPort1.PortName + " is closed.";
}
else
{
serialPort1.PortName = comboBox1.Text;
serialPort1.BaudRate = Int32.Parse(comboBox2.Text);
serialPort1.NewLine = "\r\n";
serialPort1.Open();
toolStripStatusLabel1.Text = serialPort1.PortName + " is connected.";
button1.Text = "Disconnect";
}
}
Kondisi awal button ini diberi text “Connect”, lalu setelah user klik tombol tersebut
program akan memeriksa apakah serial port pada aplikasi sudah terbuka. Jika serial port
dalam posisi terbuka atau serialPort1.IsOpen == true maka perintah yang akan
dijalankan adalah serialPort1.Close(); yaitu perintah menutup koneksi serial port. Tetapi
default aplikasi ini jelas pada awalnya serial port belum terbuka atau serialPort1.IsOpen
== false, sehingga pada kondisi awal program akan langsung diarahkan ke perintah
dalam kurung kurawa else. Perintah itu akan mengarahkan program ke identitas serial
port seperti Port Name, Baudrate lalu membuka serialPort. Setelah serial port1 terbuka
maka text pda button ini akan berubah menjadi Disconnect.
3. Untuk Combobox COMM Port dan Baudrate seperti percobaan sebelumnya, yaitu
pada form1_load ditambahkan program :
String[] portList = System.IO.Ports.SerialPort.GetPortNames();
foreach (String portName in portList)
comboBox1.Items.Add(portName);
comboBox1.Text = comboBox1.Items[comboBox1.Items.Count - 1].ToString();
Program diatas merupakan program yang berapa di private form1_load, form1 membuat
combobox1 diisi oleh nama serial port yang diambil dari
System.IO.Ports.SerialPort.GetPortNames(); Lalu serial port yang dikenali
ditampilkan di comboBox1.
public Form1()
{
InitializeComponent();
//baudrate
comboBox2.Items.Add("9600");
comboBox2.Items.Add("14400");....
}
Tidak seperti COMM Port yang nama serial portnya diambil dari system.IO, nilai
baudrate diatur manual dengan menambahkan items pada comboBox2 seperti program
diatas.
4. Tombol start digunakan untuk memberikan perintah seperti program berikut :
{
{
timer1.Enabled = !(timer1.Enabled);
if (timer1.Enabled == true)
button3.Text = "Stop";
else
button3.Text = "Start";
}
else
{
toolStripStatusLabel1.Text = "Connect your serial port first!";
}
}
Ketika user klik tombol Start, program akan memeriksa apakah user telah
mengkoneksikan aplikasi dengan serial port, kondisi ini dianggap program sebagai
serialPort1.IsOpen == true. Button3.Text akan menjadi Stop ketika timer aktif dan Start
ketika timer tidak aktif.
Ketika user klik tombol start dan sebelumnya ia belum mengkoneksikan aplikasi dengan
serial port, program akan mengingatkan user pada toolStripStatus seperti pada program
5. Pada tombol reset, ditambahkan program sebagai berikut :
{
label13.ResetText();
chart1.Series.Clear();
}
Tombol ini akan mereset data pada label maupun chart sehingga ketika program bisa di
Start kembali tanpa ada data yang tertinggal.
Sebelum User klik Reset

Setelah User klik Reset
6. Pada tombol Close diberikan program sebagai berikut :

{
this.Close();
}
private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
DialogResult confirm = MessageBox.Show("Are you sure to close the app?",
"Close Application", MessageBoxButtons.YesNo);
if (confirm == DialogResult.No) e.Cancel = true;
}
Tombol ini memberikan perintah menutup form1 dengan program this.Close(); lalu
dilanjutkan dengan MessageBox berupa konfirmasi apakah user benar benar ingin keluar
dari aplikasi. Hal ini dilakukan untuk menghindari aplikasi yang langsung tertutup secara
tidak sengaja.
7. Selanjutnya setelah Aplikasi terhubung dengan serial port dan timer aktif dengan
tombol start maka User bisa menjalankan simulator mikro kemudian menghubungkan
dengan serial port lalu start streaming.
8. Serial port pada aplikasi akan mulai menerima data program akan menjalankan
perintah,
private void serialPort1_DataReceived(object sender,
System.IO.Ports.SerialDataReceivedEventArgs e)
{
String receivedMsg = serialPort1.ReadLine();
Tampilkan(receivedMsg);
//Data serial yang diterima didefinisikan sebagai receivedMsg yang didelegate
oleh object tambahan yaitu Tampilkan
}
private delegate void TampilkanDelegate(object item);
private void Tampilkan(object item)
{
if (InvokeRequired)
listBox1.Invoke(new TampilkanDelegate(Tampilkan), item);
else
{
// This is the UI thread so perform the task.
listBox1.Items.Add(item);
listBox1.SelectedIndex = listBox1.Items.Count - 1;
splitData(item);
}
}
Kemudian Object tambahan tersebut diidentifikasi sebagai private delegate void,
yaitu object tambahan yang diinisiasi agar bisa dipanggil di proses-proses selanjutnya.
Dalam object Tampilkan ini, ListBox1 akan mulai menampilkan paket data yang diterima
serial port, kemudian dengan data data selanjutnya.
Data yang diterima merupakan paket data yang terdiri dari 4 items. ListBox1
hanya akan menampilkan data sesuai data yang dikirim mikrokontroller. Data ini akan
diarahkan ke splitdata(item) untuk dipisahkan antar data.
private void splitData(object item)
{
{
//Parsing data
String[] data = item.ToString().Split(',');
time += 0.01;
string temp = data[1];

label13.Text = temp + "°C";
double Temp = Convert.ToDouble(temp);
chart1.Series[0].Points.AddXY(time, Temp);
string hum = data[2];

label14.Text = hum + "%RH";
double Hum = Convert.ToDouble(hum);
chart2.Series[0].Points.AddXY(time, Hum);
string pres = data[3];

label15.Text = pres + "mb";
double Pres = Convert.ToDouble(pres);
chart3.Series[0].Points.AddXY(time, Pres);
string uv = data[4];
label16.Text = uv;
double Uv = Convert.ToDouble(uv);
chart4.Series[0].Points.AddXY(time, Uv);
}
else
toolStripStatusLabel1.Text = "Start your application!";
}
private double time = 0.0;
Parsing data akan dilakukan di private void Splitdata ini, jika pada percobaan sebelumnya
4 data sensor yang dibaca mikro hanya ditamplikan pada textbox, percobaan ini data
tersebut akan diarahkan pada grafik. Dapat dilihat dari program diatas, data [1]
didefinisikan sebagai string temp ,data [2] untuk string hum, data [3] untuk string
press dan data [4] untuk string uv. Setelah itu variablenya ditampilkan ke label [
label13.Text = temp + "°C"; ] dan grafik seperti program,
chart1.Series[0].Points.AddXY(time, Temp); dengan variable yang telah dikonversi
dari string menjadi double. Variable dijadikan tipe data double agar bisa tampil teratur
nilainya pada grafik. Begitupun dengan variable hum, press dan uv.
Parsing data divisualisasikan dengam grafik dan label yang sesuai.

b. Hasil Simulasi GUI
c. 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.Windows.Forms;
namespace GUI_Lab6
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
//baudrate
//chart
chart1.Series[0].Name = "Temp";
chart1.Series[0].ChartType =
System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
chart1.Series[0].BorderWidth = 2;
chart1.Series[0].Color = Color.Red;
chart1.Legends[0].Docking =
System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
chart1.ChartAreas[0].AxisX.LabelStyle.Format = "0.00";
chart2.Series[0].Name = "Hum";
chart2.Series[0].Color = Color.Aqua;
chart3.Series[0].Name = "Press";
chart3.Series[0].Color = Color.Purple;
chart4.Series[0].Name = "Uv";
chart4.Series[0].Color = Color.Orange;
}
private void Form1_Load(object sender, EventArgs e)

{
String[] portList = System.IO.Ports.SerialPort.GetPortNames();
foreach (String portName in portList)
comboBox1.Items.Add(portName);
comboBox1.Text = comboBox1.Items[comboBox1.Items.Count - 1].ToString();
}

{
{
serialPort1.Close();
toolStripStatusLabel1.Text = serialPort1.PortName + " is closed.";
}
else
{
serialPort1.PortName = comboBox1.Text;
serialPort1.BaudRate = Int32.Parse(comboBox2.Text);
serialPort1.NewLine = "\r\n";
serialPort1.Open();
toolStripStatusLabel1.Text = serialPort1.PortName + " is connected.";
button1.Text = "Disconnect";
}
}

{
this.Close();
}
private void serialPort1_DataReceived(object sender,

System.IO.Ports.SerialDataReceivedEventArgs e)
{
String receivedMsg = serialPort1.ReadLine();
Tampilkan(receivedMsg);
}
private delegate void TampilkanDelegate(object item);

private void Tampilkan(object item)
{
if (InvokeRequired)
listBox1.Invoke(new TampilkanDelegate(Tampilkan), item);
else
{
// This is the UI thread so perform the task.
listBox1.Items.Add(item);
listBox1.SelectedIndex = listBox1.Items.Count - 1;
splitData(item);
}
}
private void splitData(object item)

{
{
String[] data = item.ToString().Split(',');
time += 0.001;
string temp = data[1];

label13.Text = temp + "°C";
double Temp = Convert.ToDouble(temp);
chart1.Series[0].Points.AddXY(time, Temp);
string hum = data[2];

label14.Text = hum + "%RH";
double Hum = Convert.ToDouble(hum);
chart2.Series[0].Points.AddXY(time, Hum);
string pres = data[3];

label15.Text = pres + "mb";
double Pres = Convert.ToDouble(pres);
chart3.Series[0].Points.AddXY(time, Pres);
string uv = data[4];
label16.Text = uv;
double Uv = Convert.ToDouble(uv);
chart4.Series[0].Points.AddXY(time, Uv);
}
else
toolStripStatusLabel1.Text = "Start your application!";
}
private double time = 0.0;

{
{
timer1.Enabled = !(timer1.Enabled);
button3.Text = "Stop";
else
button3.Text = "Start";
}
else
{
}
}

{
}
private void Form1_FormClosing(object sender, FormClosingEventArgs e)

{
DialogResult confirm = MessageBox.Show("Are you sure to close the app?", "Close
Application", MessageBoxButtons.YesNo);
if (confirm == DialogResult.No) e.Cancel = true;
}
}
}

Interface System - Novanna Rahma Zani - Lab7. Parsing, The Project

Diunggah oleh

Informasi Dokumen

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

Interface System - Novanna Rahma Zani - Lab7. Parsing, The Project

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN WORKSHOP SISTEM ANTARMUKA

Novanna Rahma Zani – 1103181047

Gambar 1. Menampilkan data sensor dalam bentuk grafik

Gambar 2. Format data dari mikrokotroler

Gambar 2. Desain Tampilan Tugas Lab 7

Sebelum User klik Reset

Setelah User klik Reset

6. Pada tombol Close diberikan program sebagai berikut :

string temp = data[1];

string hum = data[2];

string pres = data[3];

Parsing data divisualisasikan dengam grafik dan label yang sesuai.

private void Form1_Load(object sender, EventArgs e)

private void button1_Click(object sender, EventArgs e)

private void button2_Click(object sender, EventArgs e)

private void serialPort1_DataReceived(object sender,

private delegate void TampilkanDelegate(object item);

private void splitData(object item)

string temp = data[1];

string hum = data[2];

string pres = data[3];

private void button3_Click(object sender, EventArgs e)

private void button4_Click(object sender, EventArgs e)

private void Form1_FormClosing(object sender, FormClosingEventArgs e)

Anda mungkin juga menyukai