Percobaan I
Visual Basic 6
Graphics User Interface
I. Judul :
Pengenalan Graphics User Interface
II. Tujuan :
Mengenalkan bahasa pemrograman komputer sebagai alat bantu untuk membangun sistem kontrol cerdas
III. Materi :
o Pengenalan bahasa pemrograman
o Pengenalan graphics user interface
o Pengenalan graphics programming
o Pengenalan perangkat serial sebagai komunikasi dengan perangkat keras sistem kontrol
IV. Peralatan/Kebutuhan :
o Komputer
o Visual Basic
V. Langkah Percobaan
Petunjuk persiapan
o Buat Folder nama atau nomor kelompok pada directory tertentu, misalkan C:\Data\Praktikum\Kontrol Cerdas . Contoh nama folder ”Kelompok 1”
o Setiap melakukan praktikum, buat Folder nomor atau judul percobaan pada folder tiap kelompok. Misalkan, ”Percobaan 2 ”
o Pada setiap percobaan, terkadang dilakukan beberapa kali uji coba pembuatan program. Simpan masing-masing program pada Folder yang terpisah. Misalkan, Program 1 , Program 2 , dan seterusnya.
o Jika suatu percobaan mirip atau sama dengan percobaan lain, silakan mengkopi dari percobaan lain (pekerjaan dari kelompok sendiri, bukan dari kelompok lain) dan silakan diubah sesuai dengan keperluan.
o Jika ada tugas tertentu pada bagian akhir percobaan, tugas tersebut harus dikerjakan oleh masing-masing mahasiswa dalam kelompok tersebut. Beri nama Folder tugas tersebut sesuai dengan nama atau nrp mahasiswa.
o Mahasiswa atau kelompok yang tidak mengikuti langkah-langkah ini akan dianggap tidak mengikuti praktikum, karena penilaian akan didasarkan pada hasil yang tersimpan pada directory tersebut
o Contoh susunan directory,
Gambar Contoh susunan directory yang dibuat untuk menyimpan hasil
o Gunakan bahasa pemrograman tertentu yang mudah untuk dipelajari dan memiliki fasilitas grafik serta komunikasi serial, misalkan Visual Basic .
o Buat New Project sebagai Program 1 dan buat tampilan utama yang menarik, paling tidak terdiri atas:
Form Utama, sebagai dasar aplikasi
Picture Box, sebagai dasar menggambar grafik
VI. Dasar Teori
Operasi Grafis
Membuat grafis sebenarnya merupakan pekerjaan untuk menyusun komponenkomponen grafis ke bidang tertentu sehingga memiliki suatu tampilan yang mengandung arti tertentu. Ada dua macam dari suatu tampilan grafis, diagram dan bentuk/bayangan (image). Diagram biasanya digunakan untuk menggambarkan sesuatu yang berhubungan dengan angka-angka, sedangkan bentuk digunakan untuk menggambarkan sesuatu yang berhubungan dengan dimensi. Komponen-komponen dari gambar bisa terdiri dari titik, garis, lingkaran, persegi, kurva an text. Ada beberapa model tampilan diagram, misalkan diagram batang (histogram), diagram garis, diagram lingkaran (pie). Hal-hal yang perlu diperhatikan jika ingin menggambar suatu diagram antara lain,
- Mengetahui rentang (range) data yang akan digambar. Ini digunakan agar diagram yang dihasilkan dapat dapat memuat seluruh data yang dikehendaki.
- Menentukan ukuran dari bidang gambar yang akan digunakan.
- Menentukan penskalaan yang akan digunakan. Ini berguna untuk memastikan keseluruhan diagram yang akan dimunculkan dapat termuat pada bidang gambar yang telah ditentukan.
- Membuat suatu koordinat (sumbu) diagram. Ini biasanya digunakan pada diagram yang menggunakan sumbu lurus. Sedangkan diagram yang menggunakan sumbu berupa sudut (misalkan diagram pie), biasanya masalah ukuran tidak terlalu dihiraukan, karena yang dipentingkan adalah perbandingan antara tiap-tiap data.
- Menampilkan masing-masing data ke dalam koordinat pada posisi yang sesuai dengan nilai data dan dalam bentuk seperti yang diinginkan.
Menggunakan Komponen Picture Box
Untuk menggambar di VB dapat dilakukan di dua komponen, FORM dan PICTURE BOX, bedanya, PICTURE BOX berada di dalam FORM. Perintah-perintah yang dapat digunakan antara lain:
- Print digunakan untuk mencetak tulisan
- Line digunakan untuk membuat garis
- Circle digunakan untuk membuat lingkaran
- Cls digunakan untuk menghapus bidang gambar
- PaintPicture digunakan untuk mencat gambar
- Pset digunakan untuk membuat titik
Ambil komponen Picture Box , atur properti warna, misalkan Back Ground Color dengan warna putih. Set Auto Redraw = True.
Gambar Uji coba picture box
VII. Hasil Percobaan
Percobaan 1
Percobaan 2
Percobaan 3
Percobaan 4
Percobaan 5
VIII. Analisa Percobaan
Percobaan 1
Percobaan 1 adalah membuat garis, lingkaran, kotak dan tulisan. Untuk membuat hal tersebut maka dengan perintah Print untuk mencetak tulisan, Line untuk membuat sebuah garis dan Circle untuk membuat lingkaran. Listing programnya sebagai berikut :
Private Sub Form_Load()
Picture1.Print "Hallo"
Picture1.Print "Selamat Datang ";
Picture1.Print "di VB"
Picture1.Line (100, 200)-(1500, 1700)
Picture1.Line (2400, 500)-(700, 1900), , B
Picture1.Circle (2500, 1000), 500
End Sub
Percobaan 2
Percobaan 2 adalah membuat diagram garis. Untuk membuat itu maka dengan menggabungkan perintah line, print dan pset. Pset digunakan untuk membuat titik. Listing programnya sebagai berikut :
Option Explicit
Dim OfsX As Single
Dim OfsY As Single
Dim SkalaX As Single
Dim SkalaY As Single
Dim Lx, Ly As Single
Private Function TitikX(x) As Single
TitikX = OfsX + x * SkalaX
End Function
Private Function TitikY(y) As Single
TitikY = OfsY - y * SkalaY
End Function
Private Sub Form_Load()
Dim D(6) As Integer
D(0) = 12
D(1) = 45
D(2) = 23
D(3) = 56
D(4) = 13
D(5) = 35
D(6) = 37
Lx = 4000
Ly = 2000
OfsX = 1000
OfsY = 2500
SkalaX = Lx / 6
SkalaY = Ly / 60
'membuat garis Y
Picture1.Line (TitikX(0), TitikY(60))-(TitikX(0), TitikY(0))
'membuat garis X
Picture1.Line (TitikX(0), TitikY(0))-(TitikX(6), TitikY(0))
Dim i As Integer
For i = 0 To 6
Picture1.Line (TitikX(i), TitikY(-1))-(TitikX(i), TitikY(1))
Picture1.CurrentX = TitikX(i) - Picture1.TextWidth(i) / 2
Picture1.CurrentY = TitikY(-2)
Picture1.Print i
Next
For i = 0 To 6
Picture1.Line (TitikX(-0.05), TitikY(i * 10))-(TitikX(0.05), TitikY(i * 10))
Picture1.CurrentX = TitikX(-0.5)
Picture1.CurrentY = TitikY(i * 10) - Picture1.TextHeight(i * 10) / 2
Picture1.Print i * 10
Next
Picture1.PSet (TitikX(0), TitikY(D(0)))
'membuat Gambar
For i = 1 To 6
Picture1.Line -(TitikX(i), TitikY(D(i)))
Next
'membuat grid y
For i = 0 To 6
Picture1.Line (TitikX(i), TitikY(-1))-(TitikX(i), TitikY(1))
Picture1.CurrentX = TitikX(i) - Picture1.TextWidth(i) / 2
Picture1.CurrentY = TitikY(-2)
Picture1.Print i
Picture1.DrawStyle = 2
Picture1.Line (TitikX(i), TitikY(0))-(TitikX(i), TitikY(60))
Picture1.DrawStyle = 0
Next
'membuat grid X
For i = 0 To 6
Picture1.Line (TitikX(-0.05), TitikY(i * 10))-(TitikX(0.05), TitikY(i * 10))
Picture1.CurrentX = TitikX(-0.5)
Picture1.CurrentY = TitikY(i * 10) - Picture1.TextHeight(i * 10) / 2
Picture1.Print i * 10
Picture1.DrawStyle = 2
Picture1.Line (TitikX(0), TitikY(i * 10))-(TitikX(6), TitikY(i * 10))
Picture1.DrawStyle = 0
Next
End Sub
Percobaan 3
Percobaan 3 adalah membuat gelombang sinus. Untuk membuat gelombang sinus maka terlebih daluhu harus memasukan rumus . listing Programnya adalah sebagai berikut :
Option Explicit
Dim OfsX As Single
Dim OfsY As Single
Dim SkalaX As Single
Dim SkalaY As Single
Const pi = 3.14159265358979
Private Function TitikX(x) As Single
TitikX = OfsX + x * SkalaX
End Function
Private Function TitikY(y) As Single
TitikY = OfsY - y * SkalaY
End Function
Private Function F(x As Single)
F = 5 * Sin(2 * pi * 0.2 * x / 2.4)
End Function
Private Sub Form_Load()
Dim x1 As Single
Dim x2 As Single
Dim h As Single
Dim n As Integer
Dim i As Long
Dim x As Single
Dim MaxX As Single
Dim MaxY As Single
Dim Lx As Integer
Dim Ly As Integer
Lx = 4000
Ly = 2000
OfsX = 1000
OfsY = 2500
Picture1.Line (TitikX(0), TitikY(60))-(TitikX(0), TitikY(0))
Picture1.Line (TitikX(0), TitikY(0))-(TitikX(6), TitikY(0))
MaxX = 12
MaxY = 10
SkalaX = Lx / MaxX
SkalaY = Ly / MaxY
'membuat garis Y
Picture1.Line (TitikX(0), TitikY(-MaxY))-(TitikX(0), TitikY(MaxY))
'membuat garis X
Picture1.Line (TitikX(0), TitikY(0))-(TitikX(MaxX), TitikY(0))
‘membuat nilai di X
For i = 1 To MaxX
Picture1.Line (TitikX(i), TitikY(0) - 25)-(TitikX(i), TitikY(0) + 25)
Picture1.CurrentX = TitikX(i) - Picture1.TextWidth(i) / 2 - 50
Picture1.CurrentY = TitikY(0) + 50
Picture1.Print i * 30
Next
‘membuat nilai di Y
For i = -MaxY To MaxY
Picture1.Line (TitikX(0) - 25, TitikY(i))-(TitikX(0) + 25, TitikY(i))
Picture1.CurrentX = TitikX(0) - 400
Picture1.CurrentY = TitikY(i * 10) - Picture1.TextHeight(i * 10) / 2
Picture1.Print i * 10
Next
'membuat Sinus
h = 0.01
For i = 1 To MaxX / h
x = i * h
Picture1.PSet (TitikX(x), TitikY(F(x)))
Next
End Sub
Percobaan 4
Percobaan 4 adalah membuat sinus dengan menekan tombol gambar dan menghapus gambar dengan menekan tombol hapus. Pada percobaan ini menambahkan percobaan 3 dengan tombol Gambar dan Hapus. Listing Programnya adalah :
Option Explicit
Dim OfsX As Single
Dim OfsY As Single
Dim SkalaX As Single
Dim SkalaY As Single
Const pi = 3.14159265358979
Private Function TitikX(x) As Single
TitikX = OfsX + x * SkalaX
End Function
Private Function TitikY(y) As Single
TitikY = OfsY - y * SkalaY
End Function
Private Sub Command2_Click() 'menghapus gambar
Picture1.Cls
Text1.Text = "0"
Text2.Text = "0"
Text3.Text = "0"
Call Form_Load
End Sub
Private Sub Form_Load()
Dim x1 As Single
Dim x2 As Single
Dim h As Single
Dim n As Integer
Dim i As Long
Dim x As Single
Dim MaxX As Single
Dim MaxY As Single
Dim Lx As Integer
Dim Ly As Integer
Lx = 4000
Ly = 2000
OfsX = 1000
OfsY = 2500
MaxX = 12
MaxY = 10
SkalaX = Lx / MaxX
SkalaY = Ly / MaxY
'membuat garis Y
Picture1.Line (TitikX(0), TitikY(-MaxY))-(TitikX(0), TitikY(MaxY))
'membuat garis X
Picture1.Line (TitikX(0), TitikY(0))-(TitikX(MaxX), TitikY(0))
'membuat nilai X
For i = 1 To MaxX
Picture1.Line (TitikX(i), TitikY(0) - 25)-(TitikX(i), TitikY(0) + 25)
Picture1.CurrentX = TitikX(i) - Picture1.TextWidth(i) / 2 - 50
Picture1.CurrentY = TitikY(0) + 50
Picture1.Print i * 30
Next
'membuat Nilai Y
For i = -MaxY To MaxY
Picture1.Line (TitikX(0) - 25, TitikY(i))-(TitikX(0) + 25, TitikY(i))
Picture1.CurrentX = TitikX(0) - 400
Picture1.CurrentY = TitikY(i * 10) - Picture1.TextHeight(i * 10) / 2
Picture1.Print i * 10
Next
'menampilkan Sinus
h = 0.01
For i = 1 To MaxX / h
x = i * h
Picture1.PSet (TitikX(x), TitikY(F(x)))
Next
End Sub
Private Function F(x As Single) ' fungsi Sinus
F = Val(Text1) * Sin(2 * pi * Val(Text2) / 12 * x + Val(Text3))
End Function
Private Sub Command1_Click() 'menampilkan gambar
Dim x1 As Single
Dim x2 As Single
Dim h As Single
Dim n As Integer
Call Form_Load
End Sub
Dengan memberikan nilai pada text1,text2,text3 maka akan didapat kan gelombang sinus yang di inginkan. Text 1 untuk nilai Amplitudo, text 2 untuk nilai Frekuensi dan text 3 untuk nilai Fasa. Dengan menekan tombol gambar maka nilai-nilai tersebut akan di masukan dalam fungsin sinus dan di tampilkan gambarnya. Dengan menekan tombol hapus maka gambar akan terhapus. Sebenarnya gambar tidak di hapus tetapi dengan pemberian semua nilai 0 maka yang akan tampil hanya garis Y dan gari sX saja.
Percobaan 5
Percobaan 5 adalah membuat gelombang sinus barjalan. Untuk membuat ini di perlukan percobaan 4 yang di tambahi dengan tombol Start dan Stop. Listing programnya adalah :
Option Explicit
Dim OfsX As Single
Dim OfsY As Single
Dim SkalaX As Single
Dim SkalaY As Single
Const pi = 3.14159265358979
Dim Z As Integer
Private Function TitikX(x) As Single
TitikX = OfsX + x * SkalaX
End Function
Private Function TitikY(y) As Single
TitikY = OfsY - y * SkalaY
End Function
Private Sub Command2_Click() 'hapus
Picture1.Cls
Text1.Text = "0"
Text2.Text = "0"
Text3.Text = "0"
Call Form_Load
End Sub
Private Sub Command3_Click() ' start
Dim a, b, c As Single
Z = 1
a = Text1.Text
b = Text2.Text
c = Text3.Text
Call Command2_Click
Text1.Text = a
Text2.Text = b
Text3.Text = c + 1
Call Form_Load
End Sub
Private Sub Command4_Click() 'Stop
Z = 0
End Sub
'Private Function F(x As Single)
'F = 5 * Sin(2 * pi * 0.2 * x / 2.4)
'End Function
Private Sub Form_Load()
Dim x1 As Single
Dim x2 As Single
Dim h As Single
Dim n As Integer
Dim i As Long
Dim x As Single
Dim MaxX As Single
Dim MaxY As Single
Dim Lx As Integer
Dim Ly As Integer
Lx = 4000
Ly = 2000
OfsX = 1000
OfsY = 2500
MaxX = 12
MaxY = 10
SkalaX = Lx / MaxX
SkalaY = Ly / MaxY
'membuat garis Y
Picture1.Line (TitikX(0), TitikY(-MaxY))-(TitikX(0), TitikY(MaxY))
'membuat garis X
Picture1.Line (TitikX(0), TitikY(0))-(TitikX(MaxX), TitikY(0))
'membuat nilai X
For i = 1 To MaxX
Picture1.Line (TitikX(i), TitikY(0) - 25)-(TitikX(i), TitikY(0) + 25)
Picture1.CurrentX = TitikX(i) - Picture1.TextWidth(i) / 2 - 50
Picture1.CurrentY = TitikY(0) + 50
Picture1.Print i * 30
Next
'membuat nilai Y
For i = -MaxY To MaxY
Picture1.Line (TitikX(0) - 25, TitikY(i))-(TitikX(0) + 25, TitikY(i))
Picture1.CurrentX = TitikX(0) - 400
Picture1.CurrentY = TitikY(i * 10) - Picture1.TextHeight(i * 10) / 2
Picture1.Print i * 10
Next
'membuat Sinus
h = 0.01
For i = 1 To MaxX / h
x = i * h
Picture1.PSet (TitikX(x), TitikY(F(x)))
Next
End Sub
Private Function F(x As Single) 'FUngsi Sinus
F = Val(Text1) * Sin(2 * pi * Val(Text2) / 12 * x + Val(Text3))
End Function
Private Sub Command1_Click() 'Gambar
Dim x1 As Single
Dim x2 As Single
Dim h As Single
Dim n As Integer
Call Form_Load
End Sub
Private Sub Timer1_Timer() 'timer start
If Z = 1 Then
Command3_Click
End If
End Sub
Dengan Menekan tombol start maka gambar Sinus akan berjalan. Sinus terlihat berjalan di karenakan ada timer yang mengaturnya. Dengan pergeseran fasa = fasa+10. Dengan menekan tombol stop maka timer akan berhenti dan gambar juga ikut berhenti. Logka membuat program ini adalah dengan menyimpan nilai-nilai semua di sebuah variable dan setelah itu menghapus gambar dan memunculkan lagi dengan nilai-nilai yang telah di tambahkan..
IX. Kesimpulan
1. Denga menggabungkan perintah print,line,Circle,Cls,PaintPicture,dan pset dapat menghasilkan sebuah gambar.
2. Dengan memasukan maka gambar sinus akan di dapatkan.
3. Dengan memasukan nilai-nilai Amplitudo, Frekuensi, Fasa pada persamaan di atas maka gambar sinus yang kita inginkan akan didapatkan.
4. Dengan memberika nilai semaunya ”0 ” maka gambar Sinus akan hilang.
5. Dengan menambahkan Timer maka gelombang sinus bisa berjalan bergeser ke kanan atau keriki.
Gambar konfigurasi sistem jaringanPada gambar tersebut di gambarkan sistem dari plant paling bawah seperti valve, flowmater sampai tingkat paling atas yaitu sistem yang terhubung di internet. Dengan sistem diatas pemilik perusahaan dapat melihat kondisi usahanya dengan sangat lengkat seperti pada kondisi masing-masing alat, berbagai laporan-laporan misalnya laporan hasil pemakaian air dan lain sebagainya. Gambar dibawah ini gambar yang terdapat di dalam sistem kendali pada perusahaan air minum dan juga tampilan dari ruang monitor yang digunakan di ruang operator pusat.
Gambar tampilan HMI
Gambar konfigurasi scada (kendali terdistribusi)
