Chapter 10

Visual Programming

Objectives: To learn how to create a windows application using Visual Basic.

Topics covered:


Graphical User Interface

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 Version 3.0

Introduction

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

Basics

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. An application consists of forms (.FRM), modules(.BAS) and a project file (.MAK). Modules contain BASIC code only. The form contains the visual objects that make up the graphical interface, i.e., windows, menus, buttons, controls, icons, labels, text boxes, etc. The module is used to declare all globally used constants, variables and subroutines. The project file lists all the files that will be used in the project.
  2. Visual Basic uses the concept of objects. Objects can be created, copied and given a name. An object (like a C or Pascal structure) has properties that define its position, appearance, behaviour, etc., for example, myButton.Caption = "Help". An object also has methods (procedures) that can be applied to the object, e.g. myForm.Show.
  3. Visual Basic is event driven. A procedure is created to handle every action or event. For example, the subroutine called myButton_Click( ) will be executed when the user clicks the mouse pointer on the object myButton.


The Toolbar


The ToolBox


Getting Started

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.


Problem 1 - Creating Command Buttons


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.

Adding Button Events

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.

Running your application

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!



Problem 2 - BASIC Programming

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


Problem 3 - Adding Labels and an Idle Loop

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.


Problem 4 - Testing the Communications Control

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


Problem 5 - Testing the 8255 Input/Output Interface

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.



Problem 6 - Testing the 8255 Interface for input

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.



Problem 7 - Timer Control

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?


Problem 8 - Idle Loop, A General Case

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.


Gauge and Graph Controls

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.


Problem 9 -Gauge Control

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


Problem 10 - Graph Control

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.


Home Next Chapter