Bukit Mertajam, Penang

Getting Started On Graphical User Interface GUI

Visual Basic



A graphical user interface (GUI) is one of the ways to interface between computer and human which can manipulated by a mouse or a keyboard. A combination of an input device (mouse) and visual representations of the workspace and tasks, the user able to interact with the computer or laptop in a manner similar to physical manipulations available in the real world. In robotic or aotumation field, GUI often use to interface with other external devices to communicate with computer. So that user can ease use a GUI to control some specify hardware operation and producing data. Nowadays, a lot of kinds software which can be use to design a GUI platform such as Microsoft Visual Basic, Visual Baisc C++, Labview, Matlab and etc. Here, we will share information regarding how to use Microsoft Visual Basic 2008 Express Edition to develop a simple GUI platform. Click here:http://visual-basic.en.malavida.com/download for download Visual Basic 2008 Express Edition free software.

Create a New Project

Getting start with a new project, Open FileNew project and a sub window will pop out. This sub window has shown templates of Visual Basic Express2008 which includes Windows Form Application, Class Library, WPF Application, WPF Browser Application and Console Application.

For design a GUI, you need selects Window Forms Appliaction and Create a new name for it. Then, click OK.

Here, the window show the platform Form1.vb, you can change to own GUI name XXX.vb on right handside, Solution Explorer . After that, you can start design the paltform by using ToolbarToolbar provides various component as an obeject that represents a screen element that is used to display inforamtion or allow us to interact with the program in certain way. Genarally, GUI components include Labels, Buttons, Text, Scroll bars, Menus, GroupBox, ComboBox, etc.

Drag Components and Edit Component Porperties in VB

During create a GUI platform, each GUI component must be attached to a panel or window surface, you need to decide where the position each GUI component within the window. This is called specifying the layout of the GUI components. However, you can change the specific value, size, name, text color, background color, background image, design name and others properties for each component due to own idea and creativity. The properties tool has shown on below right hand side:

 Write coding in [ ].vb page

VB2008 is an object oriented and event driver programming language. In fact, all windows are event driven. Event driven means the user will decide what to do with the program, and you only need ‘double click’ the component on the GUI platform. An event is related to an object or component, it is an incident that happens to the object due to the action of us. This procedure includes the SK18B class and the event Load, and they are bind together with an underscore, i.eSK18B_load. It does nothing other than loading an empty form. When you click on any one of components, the code window has shown as figure below. You can write statements under the Private Sub(start) and End Sub (end).

*Note: SK18B.vb just a example of project name.

Write coding in [ ].vb page

Basically, the serial COM port is one of the simplest ways to communicate between a computer and a microcontroller circuit board. So that, GUI Control Panel must has a COM port form to detect serial communication channel and connect that serial communication channel for communicate with computer. Following steps will guide you how to create and write coding for communication port.

Select components which is GroupBox, Button, ComboBox, Text, Label in ComPort section:

You can rename design name or component name for each components on properties side.

It will make you ease to recognize which component you being to use.

Double click these component and add statement under each event respectively.

A top of form, under Class Statement and create a serial port instance:

[sourcecode language=”cpp”]
‘define com port
Dim WithEvents ComPort As New IO.Ports.SerialPort
Dim transmitt As Integer

Under the SK18B_Load event add in the code for seraching serial port in computer:

[sourcecode language=”cpp”]
‘comport auto searching when panel loading
Private Sub SK18B_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
For i As Integer = 0 To _My.Computer.Ports.SerialPortNames.Count – 1
ComPortBox.Items.Add( _My.Computer.Ports.SerialPortNames(i))
Button_Cancel.Enabled = False
End Sub

Button ‘Search’ is same function prupose with Form1_load sub event:

[sourcecode language=”cpp”]
Private Sub Button_Connect_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) HandlesButton_Connect.Click
Button_Search.Enabled = False
Button_Connect.Enabled = False
Button_Cancel.Enabled = True
If ComPort.IsOpen Then
End If
With ComPort
.PortName = ComPortBox.Text
.BaudRate = 9600
.Parity = IO.Ports.Parity.None
.DataBits = 8
.StopBits = IO.Ports.StopBits.One
End With
BaudRate_msg.Text = ComPort.BaudRate
ComPortDisp.Text = ComPortBox.Text & ” connected.”
transmitt = 1
Catch ex As Exception
MsgBox(“Please select COM PORTS”)
End Try
End Sub

Under the ‘Connect’ button event, add the coding in this event to set up properties of serial port:

[sourcecode language=”cpp”]
Private Sub Button_Cancel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) HandlesButton_Cancel.Click
Button_Search.Enabled = True
ComPortDisp.Text = ComPort.PortName & ” disconnected.”
Button_Connect.Enabled = True
Button_Cancel.Enabled = False
transmitt = 0
Catch ex As Exception
MsgBox(“Try again”)
End Try
End Sub

Create a sub event “SK18B_FormClosed”, to close the serial port when closing GUI panel window:

[sourcecode language=”cpp”]
Private Sub SK18B_FormClosed(ByVal sender As Object, ByVal e As System.Windows.Forms.FormClosedEventArgs) Handles Me.FormClosed
transmitt = 0
Catch ex As Exception
End Try
End Sub

Build and Debug GUI design

Before Build or Debug the GUI Panel, please ensure the Error List is not any error occur. Otherwise, you must solve the error problem first beforedebugging. After that, press the icon to Start Debugging

Try to debug .vb [Design] without any technical error. The design form will pop out as a window. You can directly use the preview GUI platform window to interface with microcontroller circuit board. So that, you can ease to trouble shoot interface problem or modified the coding again and again for improve own GUI application design. The preview GUI Panel window form will pop out same as below figure:

Use USB to UART converter as ComPort Connection channel device

Without using MAX 232 and serial port cable, you have another choice of devices which is using USB to UART converter (UC00A) for serial communicate with your GUI. Before using UC00A, user should ensure to intsall USB driver first.For more detail about UC00A, link to:


After that, you need plug in the USB canble from UC00A to computer USB port then open your GUI application. Click the “ComboBox” for searching UC00A ComPort Channel. Normally, the largest number port will be the extra virtual ComPort channel which you want to use it. Click “Connect” button, the text box will show you whether your ComPort channel is connected or not. The following figure has shown each steps:


How to Publish GUI Panel application

When you finish the GUI platform design and complete the programming coding with whole GUI application without error, you should go to Build and select the Publish xxx project. Then, the GUI Platform design has been completed.

Next step, you can choice any location where you wanna to publish the application. The ‘Publish Wizard’ window will show out as below figure:

Setup and Start to Use GUI Application

When the GUI panel application have published, the ‘setup’ file and ‘application’ file will save in desktop or other local disk folder. It is depend on your specify location when you publish the application. Bear in mind, you are not allowed to use the GUI application directly without setup the application first. You just only need to double click ‘setup’, then the setup setting will auto running. Wait a moments, the application can be use after the setup process is finish.


Microsoft Visual Basic 2008 Express Edition is user friendly software to help a beginner who want to design a GUI platform. This tutorial just a guide line for a beginner and provided a ComPort example. Create a ComPort in GUI is useful and ease for us to communicate between computer and micro-controller hardware devices. For more information or other GUI application example, you can go to visit GUI Project section.

Example GUI Project 1

In this example, we are doing SK18B LED GUI Control. SK18B LED GUI Control is a simple GUI platform which can be use to control ON/OFF or blinking the LED1 and LED2 on SK18B. More…

Example GUI Project 2

In this example, we are doing SC09A Servo GUI Control Panel. SC08A Servo GUI Control Panel able to use for control independent 8-16 servo motor via SC08A Servo Motor Controller and UC00A USB to UART converter. This GUI Control panel can activate or deactivate servo motor, adjust the speed, position, and initial position of individual servo motors. More…

Example GUI Project 3

In this example, we are doing the fingerprint reader GUI. Fingerprint Reader GUI use to read and show the data attendance of human. More…


Related Posts

Comments (1)

Hi there, i want to ask….is it possible if i’m using the method here to interface the DIY project RFID door lock system….i would like to built an application using VB where i can save the detect ID from RFID system (via RFID tag). For example, once i tag the RFID card to the reader, then unlock the door. At the same time, the detection (data) will send to the computer (via uart usb converter). Then the data (detection) will be saved on the application (via excel) to save the data.

Leave a comment