Visual Thought User's Guide
[TOC] [Prev] [Next] [Index]

Chapter 2

Tutorial

Purpose

This tutorial will teach you how to use the basic features of Visual Thought. It should take about 20 minutes to complete.

The tutorial is composed of the following steps:

Start the tutorial
Create objects
Copy and paste objects
Add text
Connect objects
Add connections with vertices
Add arrowheads to connections
Change the shapes of objects
Change the color of objects
Format text
Create and format the title
Save your diagram In this tutorial, you will create a simple software project plan. The final diagram is shown on page 38.

Start the Tutorial

Run Visual Thought by entering vthought
at a shell window prompt.
Visual Thought will display four windows, including the Untitled-1 window. The untitled window, called the View window, is the window in which you will do your drawing.
These windows are shown in the diagram below.

Create Objects

Drag out a rectangle shape from the Basic palette at lower left and place it near the upper center of the View.

Notice that the rectangle is selected. Selected shapes in Visual Thought have 8 selection handles around them.

Resize the rectangle so it is 2 inches wide by dragging on a selection handle.

Rulers display white lines ("indicators") to help you position and resize objects. The indicators track your mouse pointer. Normally, each ruler displays a single indicator. When you move or resize objects, each ruler displays triple indicators that show the center and the extremities of the moved or resized objects.

Copy and Paste Objects

Duplicate the rectangle (which is already selected) by choosing, from the Visual Thought Main window, EditDuplicate (or by typing Ctrl-D).

Notice that you are not moving object outlines when you move objects. All objects are shown completely "live," even during dragging operations; that is, Visual Thought provides "live WYSIWYG."

Drag the new rectangle so it is aligned directly below the first one.

Visual Thought remembers the offset between the duplicated object and the duplicate object, and applies that offset to future pasting operations.

Select the EditPaste menu item (or type Ctrl-V) five more times until you have a total of seven rectangles on the screen.

You will need two more rectangles.

Select one of the existing rectangles and select EditDuplicate (Ctrl-D) two more times.
Drag these newest rectangles into the positions shown in the diagram below.

Add Text

Now you need to add text to the rectangles to give the shapes meaning.

Simply double-clicking in an object to enter text is a Visual Thought shortcut.

Double-click on the top-most rectangle to enter Edit mode.
Type: Start of project

Press Tab to move the edit focus to the next rectangle.

Tab and Ctrl-Tab move the edit focus to the next or previous object.
Continue typing and tabbing through the rectangles until they look like the figure below.

Connect Objects

Now connect up the rectangles to show how the project will progress.

Switch to Connection mode by clicking on the Connection tool icon (or by typing 3).

Connect the rectangles by clicking-and-dragging from an upper shape to the one below it. You can click and release anywhere inside the target shapes.
Also connect the "Start marketing" shape as shown. It is important that you drag the connection from "Test the program" to "Start marketing," and from "Start marketing" to "End of project." This ensures that the arrowheads added in a later step will point in the right direction.

Add Connections with Vertices

Connections to and from the shape reading "Write documentation" should have extra "vertices" or joints.

Create a connection with multiple segments by clicking on the "Design program" shape, clicking again once in free space somewhere between the shapes, then finally clicking in the "Write documentation" shape. Do the same between the "Write documentation" and the "Ship to customers" shape.

Add Arrowheads to Connections

How would you add arrowheads to indicate the project flow? With almost any other program, you would first have to select the connections individually. Visual Thought gives you a much quicker way.

Bring up the Selection dialog by clicking on the Selection dialog hot button in the Main window (Ctrl-Shift-A).

This dialog allows you to select or deselect any of the types of objects shown.

To select all connections, double-click on the Connection icon.

Switch to the Inspector Shape panel by clicking on the Shape panel selector button (Ctrl-2).

Click on the Show At End? checkbox to turn arrowheads on at the ends of all selected connections.

You can only curve connections that have at least 3 joints.

Click on the Curved Smoothness button to make all selected connections (with more than two joints) curved.

Change the Shapes of Objects

The first and last boxes in your project chart are actually milestones, not activities. Milestones are points in a project when something significant has happened (and thus take no time), whereas activities are tasks to be accomplished (and thus do take time).

Let's denote milestones by rectangles and activities by rounded rectangles.

Bring up the Selection dialog again (Ctrl-Shift-A) and double-click on the Rectangle icon to select all rectangles.

Ctrl-click toggles a selection;
it selects whatever was not selected and deselects whatever was selected. Shift-click extends a selection; if one object is selected, hold the Shift key down and click on a second object. Both are now selected.

Move back into the View and Ctrl-click to deselect the "Start of project" and "End of project" rectangles.

Go to the Inspector Shape panel (not the Selection dialog) and click on the Rounded Rectangle shape, located in the first row of shapes, third from left.

All selected rectangles are now changed to rounded rectangles.

Change the Color of Objects

To further distinguish activities from milestones, make all activities yellow.

With the rounded rectangles still selected, go to the Inspector Style panel (Ctrl-4) and in the Fill subpanel click on the Set Color... button to bring up the color chooser.

Double-click on the yellow patch at the bottom of the color chooser (in the Saved Colors field) and click OK (or press Return) to make your change take effect.

Make all milestones aquamarine by using the Selection dialog to select all rectangles, then using the Inspector Style panel to change their color.

Format Text

You may want a legend to remind you and other readers what the box shapes and colors mean.

Drag-and-drop another rectangle from the Basic palette over to the upper right corner of the diagram, and resize it so it will fit one milestone and one activity shape.
Double-click in the rectangle and type Legend and press Esc.

Pressing the Esc key sends you from the Edit mode to the Selection mode.
Go to the Inspector Text panel (Ctrl-5) and Bold the text, change the Justification to left, and the Vertical Alignment to upper.

Duplicate one of the milestones and one of the activities, then drag them so they fit into the legend box. You may have to resize objects so they fit correctly.

Double-click on the milestone and change its text to Milestones
Since you are already in Edit mode, single-click on the activity and change its text to Activities

Press Esc when you are done typing text.

Create a Title

Finally, create a title for your diagram.

Start by clicking on the Connection icon in the View window (or type 3) to go to Connection mode.
Click once near the upper-left corner of the View window, move the mouse over to the upper-right corner, and double-click to create a single-segment line. (See drawing below.) Next create the title text.
Click on the Text tool icon (or type 2) to go to Text mode.
Click once just above the line you drew to create a text object. Enter Software Project Plan
Press Esc to return to Select mode.

Format the Title

Now you can format the title.

Click on the Text button in the Inspector panel selector to switch to the Inspector Text panel.
Keep pressing the large "A" until the size of the text is 24 points. Don't worry about whether the text fits inside the object right now; we'll correct that soon.

Press the bolded "B" to make the text bold.
Press the italicized "I" to make the text italic.
To resize the text object so that it is large enough to show all its text, choose the ArrangeSize Width to Text menu item so that it is first wide enough, then choose the ArrangeSize Height to Text menu item.
Now click on the Select tool icon in the View (or press 1) to switch to Select mode, and drag the text object until it is aligned appropriately above the line you drew.
If you wish to color the text, click on the Set Color... button in the Text Color subpanel to bring up the color chooser.
To choose a predefined color in the patches at the bottom of the color chooser, double-click on one. Try the blue one.
Click OK to make your change and dismiss the color chooser.

Save Your Diagram

The last step is to save your work.

Choose FileSave.

Visual Thought automatically adds the .vthought extension.

In the Document field, enter Tutorial

Click on a directory to select it. Double-click on a directory to open it.
Click on the OK button or just press Return.

The Final Diagram

Congratulations! You have just created your first Visual Thought diagram.

Visual Thought User's Guide
[TOC] [Prev] [Next] [Index]

webmaster@confluent.com

� 1997 Confluent, Inc. All rights reserved.