| Objectives: To learn how to create a windows application using Visual Basic. |
Topics covered:
Interfacing to a computer refers to two things, (a) hardware interfaces and (b) the user interface. The user interface includes the keyboard, video screen, mouse, sound, etc. The visual presentation of information on the screen and how the user interacts with the images is called the Graphical User Interface (GUI). From the user perspective, the GUI is the most important aspect of any computer system design.
Top-down design suggests that one should begin any design with the GUI. Ask yourself the following questions. What information do you wish to present to the user? How does the user interact with the screen and keyboard? In essence, what would you put in the User's Manual?
Visual Basic (VB) is a simple, fast and effective way of creating a full function Windows application. This programming environment uses the simplicity of the BASIC programming language and the convenience of a graphics application framework for quick creation of the graphical user interface. VB allows the designer to quickly and easily try out different schemes and styles of the GUI.
(The only reason we are using VB Version 3.0 instead of the current Version 6.0 is because there is not enough memory on our systems.)
It would take a book or course to fully describe how to create an application in VB. In order to short circuit the processs, only the very basics are covered. At the very least, one should be aware of the following three concepts.
1. From the desktop, double-click on the Microsoft Visual Basic
icon 
2. Select the Options, Environment... from the menu bar. Set "Require Variable Declaration" to Yes. (Double click on the item to toggle the setting.)
In the same dialog box, set "Default Save As Format" to Text.
Click 
to accept these changes.
(The first setting is made so that spelling mistakes are trapped and you are forced to think about the usage of your variables. The second setting saves your program as text files which can easily be transported, read or printed).
3. Select the Options, Project... menu item. Set "Start Up Form" to Form1. Click OK. (This may have been altered by the previous user. See Exercise 8 below).
4. Select the File, New Project menu item.
5. Select the File, Save Project As menu item. Save your forms, modules and projects in the C:\4D6\ directory using unique names, for example, C:\4D6\CHIN1.FRM, or create a unique directory for your own work.
On subsequent lab sessions, select the File menu and click on your project shown at the bottom of the menu listing in order to open your project.
Resize your Form1 window so that it occupies a small part of the centre
of the screen.
Click on the Command button icon 
.
Position, click and drag on your Form1 window in order to place a button
on the form. Type a caption for your button, e.g. Test.
Go to the Properties window (F4) and scroll down to and click on Name. Rename your Command button to TestButton.
Create a second Command button as before. Go to the Properties window (F4) and change the Name property to QuitButton. Change the Caption property to Quit.
Double click on your test button 
. A window will appear showing the procedure
for TestButton_Click(). Type in the word Beep.
Close this window.
Double click on your button labelled
Quit. A window will appear showing the procedure for QuitButton_Click().
Type in the word End. Close this window.
Start your program by choosing the Run,
Start menu item or clicking on the Run button 
from the toolbar. Pressing the F5 key also starts your program.
Test your program by clicking your Test button and then the Quit button.
You have now successfully created your first VB application!
1. Double click on the Test button and add the following BASIC statements.
For I = 1 To 10
Print I
Next I
2. Run your program (F5). You should get an error message: Variable not defined.
3. Add after the Sub TestButton_Click() heading,
Dim I as integer
4. Run your program.
This exercise demonstrates how to declare local variables. The VB fundamental data types are
Integer, Long, Single, Double, Currency, String and Variant. The default data type is Variant.
| Make sure you declare each variable on a separate DIM statement. |
| Visual Basic is not case sensitive. Comments begin with a single quote character (or the keyword REM). |
This exercise demonstrates how to create and use Labels for displaying a static label as well as for showing changing information. It also demonstrates how to create an infinite loop. Calling DoEvents allows the system to respond to any other events in the background.
1. Click on the Label icon 
and add a
Label to your form. Change the Caption to Result.
Add a second Label and change its Name to MyResult.
2. Go to the Form1 window, double click on the Test button and edit the TestButton_Click() procedure as follows. Remove the For-Next loop. Replace it with the following:
Do
I = I + 1
MyResult.Caption = I
DoEvents
Loop
3. Run your program until a overflow message appears on the screen. What is the value of I when an overflow occurs? Explain.
| A properly written program should avoid pop-up error messages caused by overflow, divide by zero, subscript out-of-range etc. For example, imagine you are writing a program that calculates the average weight of animals as they enter Noah's ark. Discuss how a program would fail if the value of the animal counter I exceeds the capacity of a 16-bit signed integer and 16-bit unsigned integer. |
Note that the default value of a Label is its Caption property. This could have been written as:
MyResult = I
Note also that the Name of an object and its Caption property are two different things. Do not confuse the two. For example,
MyResult = "Has a new caption"
MyResult is the name. "Has a new caption" is the caption.
1. Click on the Communications icon 
and add an MSComm control named Comm1
to your form. Observe the default settings in the Properties window (F4).
2. After the Sub TestButton_Click() heading, add:
Comm1.PortOpen = True
Add the following statement within the DO-LOOP
Comm1.Output = "A"
3. Run your program and observe the transmitted data (TD) on the COM1 port using the oscilloscope. Draw the waveform of the transmitted character. What is the baud?
(You may have to insert a delay loop such as FOR I = 1 to 1000 : NEXT, in order to allow the scope to trigger properly)
4. Change the transmitted character to a different character and draw the waveforms. Try the following: "B", "C", "U", "1", "2", "3", "0", 0, 01, 10, Chr$(0), Chr$(1), Chr$(&H55).
This example demonstrates how to create global constants and variables, and how to setup the input/output interface for output.
1. Choose the File, New Module menu item and add the following statements
after the statement Option Explicit in Module1.bas:
Declare Sub OUT Lib "PORTIO.DLL" (ByVal PortAddress as Integer, ByVal OutVal as Integer)
Declare Function INP Lib "PORTIO.DLL" (ByVal PortAddress as Integer) as Integer
Global Const PORTA = &H344
Global Const PORTB = &H345
Global Const PORTC = &H346
Global Const CONTROL = &H347
Global Const AINP = 16
Global Const UPPERCINP = 8
Global Const BINP = 2
Global Const LOWERCINP = 1
2. Go to the TestButton_Click() procedure.
Add before the DO-LOOP,
Out CONTROL,128
3. Add the following statements within the DO-LOOP
Out PORTA,255
Out PORTA,0
4. Run your program and observe the waveform at the PORTA pins. What is the duration of the high pulse? What is the execution time for one loop? What parts of the program are responsible for generating the time intervals of the waveform?
5. How do your results compare with those measured for the Motorola HC11 microcontroller unit? Explain why the
program written in Visual Basic appears to take longer to execute than the machine code for the HC11 even though
the clock speed of the CPU in the PC is orders of magnitude greater than that of the HC11.
6. Move the mouse around and observe what happens to the waveform. Explain what you observe.
7. Simplify the Visual Basic code by removing all unnecessary statement including DoEvents.
Measure the output waveform and explain.
| DoEvents is called inorder to handle mouse button actions and screen updates. To stop your program press Ctrl-Break. |
This example shows how to setup the input/output interface for input.
1. Go to the TestButton_Click() procedure.
Change the 8255 control word as follows
Out CONTROL,128 + BINP
2. Add the following statements within the DO-LOOP
MyResult = INP(PORTB)
3. Run your program and input various binary data to PORTB. Observe the result displayed.
The previous examples demonstrate how to enter into an idle loop after a button is clicked. This is not the usual case and in general it would be desirable to have an idle loop executed after the program is started. One way to implement this is with use of the Timer Control. One of the properties of the timer is its Interval. This value in ms is decremented by VB until it reaches zero. At this point a timer event is generated and the Timer1_Timer() procedure is executed. The interval property is reset to its initial value and the process is repeated.
1. Click on the Timer icon 
and add
a Timer control named Timer1 to your form. Go to the Properties window
(F4) and set the Interval property to 100ms.
2. Double click on the Timer icon on your form and enter your test code into the procedure called Timer1_Timer():
Out PORTA,255
Out PORTA,0
3. Before you can run this program, you need to set the 8255 ports for output. One place to do this is when the form is loaded. Double click in a blank area of the form. In the procedure Form_Load() enter the following:
Out CONTROL,128
4. Run your program and measure the cycle-period of the high pulse appearing on PORTA. Change the Timer1.Interval property and observe the effect. What is the minimum Interval value that gives reproducible results?
Normally when your application is started, the startup form is loaded by default and the procedure Form_Load() is executed. We can change this so that instead of a form being loaded, a Subroutine called Main() is executed.
1. Select the Options, Project... menu item. Set "Start Up Form" to Sub Main. Click OK. (Remember that this may have been altered by the previous user).
2. Open the Module1.BAS code window. There are a few different ways
to do this such as:
(a) Go to the project window (Window, Project menu item). Select Module1.BAS and click on View Code.
(b) If a code window is already open, select Window, Procedures menu item (F2). In View Procedures, select MODULE1.BAS, (declarations) and click OK.
(c) With Windows 95, click on the Module1 button on the task-bar at the bottom of the screen.
3. Anywhere in the MODULE1.BAS code window, enter:
SUB MAIN
4. Now enter the desired code for your Main() procedure, for example:
Sub Main()
Form1.Show
Do
DoEvents
Out PORTA, 255
Out PORTA, 0
Loop
End Sub
5. Run your program and test the output signals at PORTA.
With extended features of Visual Basic Version 3.0 in the form of Custom Controls you can quickly add graphics to your forms. The Gauge control enables you to create gauges or dials such as an automobile speedometer or a glass thermometer. The Graph control provides graphs and charts.
Step 1
Click on the Gauge Control Icon 
in the Toolbox window. Go to your form, click
and drag the mouse in order to place a Gauge picture box on your form. At this point you will only see a white-out
rectangular shape with eight resize handles (black squares). Resize and position the gauge as desired.
Step 2
Select the properties window (F4) and change the Name property to a relevant name, for example, Thermometer. Change the Style property to 1-Vertical Bar. Change the Value to 50. Change the BackColor and ForeColor as desired.
Step 3
To use the gauge, assign a value in your program, for example:
Thermometer = Temperature
Step 1
Click on the Graph Control Icon 
in the Toolbox
window. Go to your form, click and drag the mouse in order to place a Graph picture box on your form. Resize and
position the graph as desired.
Step 2
Select the properties window (F4) and change the Name property to a relevant name, for example, TempGraph. Change the following properties as shown:
Name = TempGraph
GraphTitle = Temperature
BottomTitle = Time
GraphType =6 - Line
GraphStyle = 0 - (default, same as 4 - Lines)
NumPoints = 10 or as desired
RandomData = 0 - Off
YAxisMax = 50 or as desired
YAxisMin = 0
YAxisStyle = 2 - User-defined
YAxisTicks = 5
Step 3
During runtime (i.e. via your program), Y-values for the graph are set as follows:
TempGraph.GraphData = (your value)
(When the AutoInc property is set to 1 (default), the property ThisPoint is automatically incremented when a data value is set. If you need to set an independent X-value for each data point, set AutoInc to 0 and increment ThisPoint after setting each pair of X,Y-data. The X-value is set into the property XPosData and the Y-value is GraphData.)
The graph is drawn when the DrawMode property is set to 2
or 3 at runtime. Use Drawmode = 3
for a smoother screen update, e.g.,
TempGraph.DrawMode = 3
This statement must be executed everytime you wish your graph to be updated.