GUI Programming Project 2 - Pixel-Based Painter

CMSC 437
Graphical User Interface Programming

TUE,THU 5:30-6:45 PM ACIV 015
Spring 1997

Project 2: A Pixel-Based Paint Program

Date Due: Tuesday, March 18, 1997, before midnight.

Purpose

To familiarize you with basic low-level drawing operations, interactive mouse input, event handling, and hierarchical widget layouts.

Assignment

For this project, you must write a pixel-based paint program. In a paint program, the user can "paint" on a canvas using various tools for shapes such as lines, rectangles, and circles. Once something is painted on the canvas, the user cannot manipulate it except by drawing over it.

Commands to the program will be given using buttons and toggles, which will set the various drawing modes, and direct interaction with the mouse in a drawing area. No menus, pop-up dialog boxes, etc. are required.

The paint application project should take the form of a large rectangular area for drawing flanked by a vertical tool bar on the left and a horizontal color bar on the top. The tool bar should consist of icons which can be selected to set the type of shape to be drawn, the fill mode and the color mode. The color bar should contain buttons for selecting the current color. The drawing area should allow interactive drawing of the selected shapes in the current drawing color. Two push buttons, in the upper-left, should allow the drawing area to be cleared to the clear color and the program to quit.

The final program should have the following functionality:

Set current drawing mode for interactively drawing points, lines, rectangles, ellipses and free-form drawing.
Set modes to control whether the rectangles and ellipses are filled or hollow.
Toggle between setting the line color, fill color, and clear color. The application should indicate the current color setting for each mode, and selecting a color should change the color for the selected mode. There should be a dozen or so colors to choose from.
"Clear" screen (to current clear color) and "Quit" program buttons.
Interactive drawing should be performed by selecting a starting point, dragging to the final point, and releasing using the pointer. For rectangles and ellipses, these should be opposite corners of the enclosing rectangle. While dragging is taking place, a rubber-band version of the geometry to be drawn should be displayed, using the XOR technique. The user should be able to draw in any direction.

The following may be done for extra credit (See the policy on extra credit):

(10 pts) An "Undo" button. After a drawing operation, the user should be able to click the Undo button, which should remove the last-drawn object. The Undo should only be one "level", i.e., the user can only go one step backwards.

Implementation Details

For this project, you may choose to use X/Motif or the Java AWT. However, the following constraints must be observed:

X/Motif

Your program design must exhibit a structured approach, that is, I expect to see data organized into structures of some sort which support your application. Global variables and unorganized state variables are not an acceptable approach. You are encouraged to use C++ and an object-oriented organization to structure the project; an example of this will be presented in class.

Java/AWT

Obviously, data structuring is a given here, and you are encouraged to exploit the object-oriented features of Java in your project.
You must write all user interface components. In particular, you should not use the specialized components given in the Graphic Java text. I want to see your design, not theirs!
Your project should be submitted as a stand-alone application, rather than as an applet. You will need to write a Makefile to build the project, just as when using X/Motif.

Hints

As before, you are encouraged to reuse code from a prototype. Also as before, please indicate in your code which prototype you are working from, even if your final result bears little resemblance to the original.

One place to start is the "draw" program in Chapter 13 of the Young textbook. However, since that program is more sophisticated than this assignment in its use of widgets, I suggest that you start with your Project 1 code and add in portions from the "draw" program, rather than starting with the "draw" program itself.

Another prototype is called 'draw2', which comes from O'Reilly volume 6A, and will be available in ~ian/pub/guip/oreilly/ch10/draw2.c. It is a very simple example illustrating the DrawingArea, pixmap-storage, and handling input with callbacks (rather than the event handlers used in Young).

There is an example "scribble applet" given in Java in a Nutshell, published by O'Reilly and Associates. The source code can be found here. I do not personally think this is a very well-written example; in particular, I don't think the button behavior should be handled by the applet... however, it may be useful as a sample.

Demo Example

I have installed an example of the second project in ~ian/pub/guip/proj-ex/proj2/color_draw. As with the demos for Project 1, this example does not necessarily have all the features or look-and-feel of what you are required to do! For example, your project requires a different widget layout. However, it does have colors, rubberbanding, and all the tools, and the behavior of the tools is as described above.

I will try to have a Java example containing more features than the O'Reilly scribble applet as soon as possible.

Ian Soboroff -- ian@cs.umbc.edu