CS252. User Interface Design

Program 3 - Using Colors

Due 11:59 PM, Monday, February 7

For this and all assignments until you are told otherwise: Treat the description here as a "software specification." Make sure you include exactly the features described. Don't add any features unless you have discussed them with the TA first.

From this assignment on: Always create a new subdirectory for the files associated with a new assignment, and always use a single project group for all parts of an assignment. The project group for this assignment should be called "Program3".

Part A: project "VBcolors"

The simplest way to change the value of a color is to use VB's "color constants," but only 8 colors are available this way (see p. 58, Comment 7). As we discussed in class, Windows maintains a table of 24 "system colors" that are used throughout the Desktop for windows, menus, buttons, etc. For most applications, it's a good idea to use these colors whenever possible.

In this part of the assignment, you will assign system colors by using the appropriate SystemColorConstants in an assignment statement. Create a PictureBox approximately 2 inches wide by 1 inch tall, plus three CommandButtons.

Make each button change the color of the PictureBox. One button should change it to the Desktop, one to the ActiveTitleBar color, and one to the HighlightText color. Choose reasonable names for the objects and position them in an attractive arrangement.

Part B: project "RGBcolors"

For this part of the assignment, you will develop a simple interface for experimenting with RGB color settings.

Create a VB program that looks like the example provided. Include the following names and settings:

Object Property Setting
picColored BackColor Black
hsbRed Max 255
picRed BackColor Red
lblRed Caption 0
hsbGreen Max 255
picGreen BackColor Green
lblGreen Caption 0
hsbBlue Max 255
picBlue BackColor Blue
lblBlue Caption 0

You'll also need to declare three integer variables named Red, Green, and Blue to hold the RGB settings for the color being displayed. (Note that they are initialized automatically to the appropriate number, zero.) Use VB's RGB function to change the color of the rectangle whenever the user moves a slider (horizontal scrollbar). The label associated with that slider also changes, to show the decimal value.

As a model, here is the code for when the Red slider is moved. 

  Private Sub hsbRed_Change()
      Red = hsbRed.Value			' Change color shown in rectangle
      picColored.BackColor = RGB (Red, Green, Blue)
      lblRed.Caption = hsbRed.Value		' Update slider label
  End Sub
Note what happens when you run the program, click on the slider's "thumb" (the movable portion), then use the left-arrow or right-arrow key on your keyboard. How does VB decide how much to move the slider?

Part C: project "BarChart"

For this part of the assignment, you will add color to a simple barchart program, using the guidelines that have been discussed in class (see other areas of this Website).

Download the BarChart program ( BarChart.vbp, BarChart.vbw, and frmBarChart.frm; or as a single file in www.engr.orst.edu/classes/cs/cs252/prog3/prog3.zip) by opening the links and then saving a copy of each file in your own directory. Note that the only thing you should be changing is the use of color -- no other portions of the code should be modified.

Apply colors to improve the usability of the interface. Your selections should

The Schneider text describes how to add color to the Line method (see p. 260) using VB's color constants. To use an arbitrary color, use the RGB function instead.

To think about: Why are the bars drawn starting at an X-coordinate of 0.5 rather than 0?

Turn in the whole project group as a single unit by using WinZip (available on all the CS NT's) to package up the entire directory into a single file for submission.