Instructions for the Constraint-Based Drawing Applet

Click here to view the applet's page

The Constraint-Based Drawing Applet (or CDA) is a drawing application implemented in Java 1.1. It allows for the creation of lines, ovals, and rectangles, and provides a palette of constraints that can be imposed on them to provide for collocation and anchoring of points, alignment of objects, and relative location (above, below, left of, right of) of objects. It uses the Java implementation of the Cassowary constraint solver.

This code is no longer being maintained. The applet needs Java 1.1 support to run -- for Netscape 4.04 you'll need the "Java Enhancement Pack", or for Internet Explorer a version that supports Java 1.1. It runs OK in Netscape 4.08.

The application consists of two groups of buttons and a main drawing area. Upon startup as an imbedded application, the CDA appears as:

The two groups of buttons and their purposes are as follows:

Object Creation Buttons

To create an object, click on the iconic button. Then move the cursor into the main drawing area (the cursor will change into crosshairs). Click to start placing the component and drag the cursor with the mouse button held down to shape the object while placing it. Release the button to finish placement.

Note that while placing an object, the initial placement point and the point being dragged during placement will "snap" to the points of objects that have already been placed, and will automatically form a collocation constraint between those points. This makes it easier to construct a figure of connected parts.

Constraint Imposition Buttons

The four categories of constraints that can be imposed are anchor constraints, collocation constraints, adjacency constraints, and alignment constraints.

Anchor constraints

Collocation constraints

Adjacency constraints

Alignment constraints

Selecting points and objects

To select a point, move the cursor inside the point's box and click the mouse. When the cursor is over a point, it will be outlined in green. Clicking will select the point and show it as a solid green box. Multiple points can be selected by clicking anywhere and dragging to form a gray selection box, or holding down the control key and clicking on each point.

To select an entire object, select all of its points, or click inside its bounding box while holding down the shift key.

To select a constraint object, click on it while holding down the shift key. Note that while the shift key is held down, a blue box will be drawn around any object or constraint object the mouse cursor is over.

Keyboard Commands and Shortcuts

The following keyboard commands and shortcut keys are available: This page and the CDA by Michael Noth