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 nama atau nomor kelompok pada directory tertentu, misalkan 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 komponen-komponen 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

)2sin()( ftAty

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.