CE 311 K - Introduction to Computer Methods

Lab 5: Selection and Data Types in VB

Contents

• Introduction

• Concepts of Selection

• Access Visual Basic

• Prepare the Graphic User Interface

• Add VB Code to the Project

• Run the program

• Assignment

Introduction

The purpose of this assignment is to introduce you to the “If…Then” Statement.  After finishing this assignment, you should be able to write a VB program that includes selection using If...Then blocks.  We will also discuss the several data types used in VB and learn the type declaration convention in VB.

Concepts of Selection

There are several ways to make choices and selections.  Among those, the simplest way to make decision in a program is to use “If…Then” statement.  Let’s try it out in the next section.

“If …Then” Statement

The basic structure of selection can be visualized in the following flowchart: 

Flowchart of a Simple “If…Then” Statement.

As you can see, when you encounter the “condition”, the program must make a decision, and then follow the branch depending on the value of the condition ("yes" or "no"; "true" or "false"; "1" or "0").

We can write a code using the “If…Then” construction in VB as follows:

If  condition Then

                        (statement_block_1 to be executed if the condition is satisfied)

Else

                        (statement_block_2 to be executed if the condition is NOT satisfied)

End If

Flowchart of a Simple “If…Then, Else” Statement.

 The “If…Then, Else If” condition looks like:

Flowchart of a Simple “If…Then, Else If” Statement.

If there are more than two conditions, we can use

If  condition1 Then

                        (statement_block_1 to be executed if the condition1 is satisfied)

Else If condition2 Then

                                (statement_block_2 to be executed if the condition2 is satisfied)

Else If condition3 Then

                                (statement_block_3 to be executed if the condition3 is satisfied)

            ...

Else

                        (statement_block_N to be executed if the NONE of the conditions are satisfied)

End If

The flowchart of the above statement can drawn as follows.

Flowchart of a “If…Then…Else If” Statement

On some occasions, you may also use a “Select Case” statement.  See page 105-107 of Kerman and Brown for details.

Access Visual Basic

1. Open Visual Basic from the start menu of your computer, that is Start\Program\Microsoft Visual Studio 6.0\Microsoft Visual Basic 6.0
2. Select “Standard EXE” from the “New Project window” and open it.
3. Before starting the exercise, save your work by selecting the menu File\Save Project As.
4. Name the file as “yourInitialsLab5” and save it in a convenient directory (be sure to REMEMBER where you saved it!!!)

Prepare the Graphic User Interface

Develop the "form" shown in the figure above that we will use in the project.  The form should contain a label, a text box, and two command buttonswith the following properties:

Your form should look like this:

Add VB Code to the Project

Next, add the following code to the buttons: cmdTest and cmdExit.  First, double click on the cmdTest button and type in the code for cmdTest_Click( ) procedure and then double click on the cmdExit button and type in the code for cmdEdit_Click( ) procedure.

A counter variable "i" is used to count how many times the user tries to test a password.  Each time the cmdTest button is clicked (the cmdTest_Click( ) procedure is initiated), the counter is incremented and the password is tested.  The outer If-Block tests if the password is correct or incorrect.  If it is correct, then the success message is printed in the label (the "caption" is changed using the lblPrompt.Caption method).  If the counter is less than 3 (i < 3) and the password is incorrect, then the failure message is printed in the label.  If the counter reaches 3, the label message tells the user to exit the program.  The counter variable needs to have global focus in order for the counter to track how many times the button has been clicked.

The cmdExit_Click( ) procedure simply ends the program using the End command.

Run the program

Graphics in VB (pages 275 - 278 in the text)

Graphical presentation is the one of the most important components in an engineering application of computer programming.  In this section we'll explore some of the basic graphical techniques in Visual Basic.

Graphic Coordinate System in VB

First, open a new Standard EXE file and select the form “Form 1” and look at the form layout window (bottom right-hand corner) and the position properties in the property window.  If you move the position of the object (“Form1”) in the form layout window, you can see the “Left” and “Top” properties change.  If you resize the form “Form1”, you will realize the “Width” and “Height” properties change.

Position of the Objects and Position Properties

You may also realize that the origin (i.e., (Left, Top) = (0, 0)) is at the “Upper Left” corner of the screen.

Drawing Lines and Shapes

You may have noticed that there are “Line”  and “Shape”  controls in the toolbox.  You may draw them on your forms by clicking on these buttons and dragging and releasing the mouse, in the same way that we placed other objects such as command buttons and textboxes.  If you change the properties of the shape (or line), you may change the shape, size and color of the object.

An Example of Drawing Lines and Shapes in Visual Studio (Japanese National Flag)

You may also write a program to draw points, lines and circles.  First, experiment a little with this.  Create a form with a button and a picture box with the following properties:

Your form should look like this:

Add VB Code to the Project

Next, add the following code to the cmdDraw button.  Double click on the cmdDraw button and type in the code for cmdDraw_Click( ) procedure:

The procedure will draw a line, of length 1000 units, originating at the upper left-hand corner (origin of coordinate system) and then a circle, centered at the point (1000, 1000) with radius 1000 units.  The units here are twips (1/20 of a printer point = 1/1440 in. = 1/567 cm), a pretty small unit.

Run the program

Run the program and you should see the following:

You can change the thickness of the lines that your program draws by using the ".DrawWidth" method associated with the picOutput object.  Try adding the following line before the picOutput.Line command and reruning you program:

picOutput.DrawWidth = 5

You can control the filling of your drawing objects by using the ".FillStyle" method associated with the picOutput object.  Try adding the following line before the picOutput.Line command and reruning you program:

 picOutput.FillStyle = 0

Fill styles include: 0 = solid; 1 = horizontal lines; 2 = vertical lines; 3 = diagonal lines; and 6 = hatch.

Coloring in VB

You must be a bit tired of the same old black and grey figures by now.  You can change the colors of objects in VB using the RGB( , , ) color model.  For example you can change the line and circle perimeter color to yellow and the circle fill color to green by adding the following lines to your code:

picOutput.FillColor = RGB(0, 255, 0)
picOutput.Line (0, 0)-(1000, 1000), RGB(255, 255, 0)
picOutput.Circle (1000, 1000), Radius, RGB(255, 255, 0)
 

RGB Color Model

You can change all three integers in the RGB color model from 0 to 255 resulting in 16,777,216 colors available for use.  RGB stands for Red-Green-Blue and works just like an artist mixing paints.  For example, RGB(234, 54, 109) stands for mixing 234 parts red, 54 parts green, and 109 parts blue to create a hideous pink color.  You can use up to 255 parts of each color.  To obtain yellow, mix red and green, RGB(255, 255, 0).  Different shades of gray are accomplished with equal parts of each color. The standard Windows gray color is RGB(192, 192, 192).  Below is a figure of the color picker from MS Powerpoint showing a strange blue color RGB(187, 224, 227).

Let's change the code for cmdDraw_Click( ) procedure to look like:

When you run the program, it creates an output like the following:

The program is drawing circles, beginning at the origin with radius 200 units, and moving the center outwards and increasing the radius.  The color is also changing as the circles are drawn, starting at RGB(0,0,0) = black and ending at RGB(250, 50, 50) = some kind of red color.

Points can also be drawn using the ".PSet" method.  You can try adding

 picOutput.PSet (CurrentX, CurrentY), RGB(R, G, B)

and see the result.

Plotting a Graph in VB

We can produce a graph of a function in VB.  This example is taken from Example 10_26 on pages 275 - 278 of the text.  Create a form with a button and a picture box with the following properties:

Your form should look like this:

Add VB Code to the Project

Next, add the following code to the cmdGraph button.  Double click on the cmdGraph button and type in the code for cmdGraph_Click( ) procedure:

The procedure will draw a plot of the function y = x^2.  First the coordinate system of the picOutput object is scaled to the range of interest of the function.  Then the axes are drawn as lines in the vertical and horizontal directions.  Then the line width is increased and the function is graphed in the color red. 

The Scale method takes as parameters the coordinates of two opposite corners of a region. It sets a PictureBox's Scale properties so they match that region. For example, this code:

    picOutput.Scale (x1, y1)-(x2, y2)

sets the picture box's Scale properties to these values:

The Line method takes as parameters the coordinates of the two endpoints of a line and draws a line between them.  For example this code:

    picOutput.line (x1, y1)-(x2, y2)

draws the line segment between the two points (x1, y1) and (x2, y2).  The Line method can draw straight lines, rectangles, and rectangles filled with color. Set the thickness of the line with the DrawWidth property. You can draw dashed and dotted lines by setting the DrawStyle property.

The DrawWidth method sets the width of the lines that are drawn on the object which the method is applied to.  For example, this code

    picOutput.DrawWidth = 5

sets the drawing width to 5 units in the picOutput object.

The PSet method is used to color one pixel at a time on the screen, but the size is set by the DrawWidth method or the default setting..  For example, the code

    picOutput.PSet (x, y), RGB(255,0,0)

will draw red dots on the picture box at the location (x,y).

Run the program

Run the program and you should see the following:

Assignment 

Chapter 5, problems 13 and 14 pages 119-120.  Given the function

1.  Write a program that computes the values of f(x) when x values range from -5 to +5 with an increment of 0.5.  Display x and corresponding f(x) values in a table within a picture box and an output file.  Also graph the values of the function in another picture window in the user interface.

2.  Modify your program to prompt the user for an x value and output the corresponding  f(x) value in a picture window.  The program should end when the user enters a value of 100,000 for x.

To Be Turned In

1.  The code for your program from part 1

     A screenshot from running you program in part 1.  Include the table and graph in the shot.

2.  The code for your program from part 2

     A screenshot from running you program in part 2.  Include the picture box output for 2 values of x and then the exit value.

McKinney | CE311K | Civil Engineering | UT Austin