Lab 8

Lab #8 - The Visualization Program (Part II)

Introduction

This lab is a follow-up to Lab 7. In this lab, you will learn how to add color to the bar chart visualization program.

The visualization program we will use here is a bit different than the one used in the previous lab. Download and file in Visualization.st, then execute:

        Visualization demo.

You should get a window that looks like this:

The most important difference between the new version and the old in terms of OOP is the way they create the graphics. The old program uses GraphicsContext objects to draw things; when the scratch window gets obscured by other windows, the graphics information is lost; when the scratch window is exposed again, it needs some special mechanism in the program to get the image redrawn. The new program uses the VisualWorks user interface framework (see chapter 30 of the VisualWorks book); the line, rectangle, and text string objects it creates are managed by the UI framework and redrawn when necessary; there is no special mechanism needed to handle redrawing the graphics in case of exposure.

Program Structure

The structure of the new visualization is quite similar to that of the previous one:

The Visualization class:

Creates bindings of data and visual parameters; handles the creation of the visualization.

• instance method data: binds a dictionary database with the visualization.

• instance method forHeight: binds an array of values in the dictionary with the height attributes of the bars.

• instance method setName: binds an array of strings in the dictionary with the name label attributes of the bars.

• instance method show: creates the bars and tell the bars to show themselves.

• class method demo: creates an example dictionary and an example visualization.

The Bar class:

Creates visual components based on specified values.

• instance method showOn: creates a graphical representation of the bar.

• class method showAxes: draws the background graphics (the zero line in this implementation).

The User Interface Component Framework

The class method show in the Visualization class creates an instance of ScheduledWindow and an instance of CompositePart to be the content of the window. The latter object then manages the rectangle and text objects created by the bars.

The Rectangle objects can not be managed by the CompositePart directly. They have to be converted to VisualComponent objects. The asFiller message sent to a Rectangle object in the following code segment will do just that, and also makes the rectangle to be drawn as filled as opposed to outlined:

        composite add: aBarShape asFiller at: boundX @ boundY.

You will find this code segment in the showOn method of the Bar class.

You can create VisualComponent objects as wrappers of other VisualComponent objects. Using wrappers, you can change the colors, fonts, and other properties of the original, otherwise dull, visual objects. Try the following code in VisualWorks:

        Geometric circles.

In the circles class method of Geometric,

        (GraphicsAttributesWrapper on: aVisualComponent)
                attributes: (GraphicsAttributes new paint: aColorValue)

creates a wrapper object for a visual component and tells the wrapper to change the color of the visual component to the new color.

(For a detailed discussion of the UI framework, consult your text book.)

The Basics of Color

In the commonly used RGB color space, every color can be composed from three basic color components: red, green, and blue. For example,

Using Color in SmallTalk

A ColorValue object represents a specific color. The following creates the purple color:

        ColorValue red:1 green: 0 blue: 1.

Now take a close look at the example code circles of Geometric, and map population values to the color of the bars in the visualization. The bar of the country with the most population should be colored medium-red, and the bar of the country with the least population should be colored medium-blue:

Hints:

These should help you code up the visualization:

• Create a set of color-related methods and variables (similar to the height-related methods and variables) such as a forColor method and instance variables colors and colorsMax in the Visualization class, plus something in the Bar class, etc.
• Assume that for a specific bar, the ratio of its color parameter value and the maximum color parameter value of all bars is r, then the screen color of this bar should be (r, 1/2, 1-r).
• If you have the Netscape Web browser running when you execute your program, your screen may not have enough color left for the visualization program to use, and your bar chart may not show the correct colors. If this happens, just file-out your visualization program, quit from Netscape and VisualWorks, then restart VisualWorks, reload your program, and execute it.

Turning in the Code

File-out your visualization category and mail it

        cat Visualization.st | elm -s "TI,Lab8,0123456789" cs2390@prism

Please quit from VisualWorks before you logout.