Percobaan I

Visual Basic 6
Graphics User Interface

Judul :
Pengenalan Graphics User Interface

Tujuan :
Mengenalkan bahasa pemrograman komputer sebagai alat bantu untuk
membangun sistem kontrol cerdas

Materi :
Pengenalan bahasa pemrograman
Pengenalan graphics user interface
Pengenalan graphics programming
Pengenalan perangkat serial sebagai komunikasi dengan perangkat keras
sistem kontrol

Peralatan/Kebutuhan :
Komputer
Visual Basic

Langkah Percobaan
Petunjuk persiapan
Buat

Folder

misalkan

nama atau nomor kelompok pada directory tertentu,

C:\Data\Praktikum\Kontrol Cerdas . Contoh nama folder

Kelompok 1
Setiap melakukan praktikum, buat Folder nomor atau judul percobaan
pada folder tiap kelompok. Misalkan, Percobaan 2
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.

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
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
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
Contoh susunan directory,

Gambar Contoh susunan directory yang dibuat untuk menyimpan hasil

Gunakan bahasa pemrograman tertentu yang mudah untuk dipelajari dan

memiliki fasilitas grafik serta komunikasi serial, misalkan Visual Basic .
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

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 dan 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

Untuk uji coba pertama kali, dibuat program langsung bekerja saat program
dijalankan. Untuk itu dapat dilakukan pembuatan kode program pada sub program
saat event form load. Untuk itu, klik dua kali gambar form. Coba ketik program
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

Gambar Hasil uji coba

Yang perlu diperhatikan, VB menggunakan ukuran yang disebut dengan TWIP. Satu
cm sekitar 567 TWIP.

Diagram Garis
Ambil contoh, akan menampilkan data berikut ini : 12, 45, 23, 56, 13, 35, 37, dengan
asumsi, nilai sumbu x adalah 0, 1, 2, 3, 4, 5, 6. Diagram ini akan ditampilkan pada
bidang seluas Lx=4000 dan Ly=2000 dengan titik awal di sumbu 0,0 pada
OfsX=1000 dan OfsY=2500, maka parameter lainnya dapat dihitung,

SkalaX = Lx/6

SkalaY = Ly/60 (nilai data tertinggi adalah 56, dibulatkan menjadi 60)

TitikX = OfsX + x * SkalaX

TitikY = OfsY

y * SkalaY ( koordinat sumbu Y pada layar dimulai dari ujung

kiri atas)

Langkah berikutnya adalah membuat sumbu koordinat:

Picture1.Line (TitikX(0), TitikY(60))-(TitikX(0), TitikY(0))

Picture1.Line (TitikX(0), TitikY(0))-(TitikX(6), TitikY(0))

Mengambar Skala dan Angkanya:

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

Kemudian mulai mencetak gambar:

Picture1.PSet (TitikX(0), TitikY(D(0)))

For i = 1 To 6
Picture1.Line -(TitikX(i), TitikY(D(i)))
Next

Gambar Hasil penggambaran diagram garis

Program lengkapnya adalah sebagai berikut:

Option Explicit
Dim OfsX As Single
Dim OfsY As Single
Dim SkalaX As Single
Dim SkalaY 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

Picture1.Line (TitikX(0), TitikY(60))-(TitikX(0), TitikY(0))

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)))

For i = 1 To 6
Picture1.Line -(TitikX(i), TitikY(D(i)))
Next
End Sub

Jika menghendaki ditambahkan grid, maka rutin untuk membuat koordinat dapat
diubah menjadi,

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
Picture1.DrawStyle = 2
Picture1.Line (TitikX(i), TitikY(0))-(TitikX(i), TitikY(60))
Picture1.DrawStyle = 0
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
Picture1.DrawStyle = 2
Picture1.Line (TitikX(0), TitikY(i * 10))-(TitikX(6),
TitikY(i * 10))
Picture1.DrawStyle = 0
Next

Gambar Hasil jika menggunakan grid

Buat grafik untuk menampilkan gelombang sinus

y (t )

A sin(2 ft

Buat sebagai gelombang diam untuk menampilkan dua gelombang penuh

Gambar grafik lengkap beserta koordinatnya dengan penskalaan yang
tepat. Misalkan,
Frekuensi = 0,2 Hz

Amplitudo = 5 Volt
Fasa = 0

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)
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 = 10

MaxY = 10
SkalaX = Lx / MaxX
SkalaY = Ly / MaxY

Picture1.Line

(TitikX(0),

TitikY(-MaxY))-(TitikX(0),

TitikY(MaxY))
Picture1.Line (TitikX(0), TitikY(0))-(TitikX(MaxX), TitikY(0))

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
Next
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

h = 0.01

For i = 1 To MaxX / h
x = i * h
Picture1.PSet (TitikX(x), TitikY(F(x)))
Next

End Sub

Buat Program 2 dengan cara mengkopi dari Program 1 . Buat Text Box
untuk mengatur Frekuensi , Amplitudo , Fasa , dan Tombol Gambar .
Modifikasi program agar dapat menggambar saat tombol Gambar ditekan
dengan parameter sesuai dengan masukan pada text box.

Private Function F(x As Single)

F = Val(Text1) * Sin(2 * pi * Val(Text2) * x + Val(Text3))
End Function

Private Sub Command1_Click()

Dim x1 As Single
Dim x2 As Single
Dim h As Single
Dim n As Integer

End Sub

Buat Program 3 dengan mengkopi dari Program 2 . Modifikasi program

agar dapat menjalankan simulasi gambar gelombang yang terus bergerak.
Tombol Start/Stop
Tombol Cetak
Tombol Simpan
Tombol Baca

Tugas
Coba tambahi program agar dapat mengeluarkan gambar gelombang,
Kotak
Segitiga
Gigi gergaji

This document was created with Win2PDF available at http://www.win2pdf.com.

The unregistered version of Win2PDF is for evaluation or non-commercial use only.
This page will not be added after purchasing Win2PDF.