[Joel]

[continued...]

Shapes Example:

So now that we've seen how to make shapes let run through an example. In
this example we will create a triangle with its point upward and a shape
that looks somewhat like a baseball infield but with on line at the
outfield.

Lets start off with by saying we want to make some shapes. Then we start
an new shape with a curly brace.

shapes = (
{

Next we start by defining whether it can export or not, the shapes
inspector position and the name. In this case will make it exportable,
object 40 in the inspector, and named TrianglePointUp

ShouldExport = YES;
InspectorGroup = 40;
ShapeName = TrianglePointUp;

We will then define the stroke path of our triangle by first picking a
starting point which will be the point, x = 0, y = 0.5.

StrokePath = {
elements = (
{element = MOVETO; point = "{0, -0.5}"; },

Note that since we will be adding more elements, we have a comma after the
MOVETO element. Now lets draw the three sides of the triangle and close
up the stroke path.

{element = LINETO; point = "{0.5, 0.5}"; },
{element = LINETO; point = "{-0.5, 0.5}"; },
{element = LINETO; point = "{0, -0.5}"; }
);
};

Finally we will define the boundary of the text box and end the creation
of our first shape. For this shape the text box will start at x = 0.25, y
= 0.5 and it will have a height and width of 0.5.

TextBounds = "{{0.25, 0.5}, {0.5, 0.5}}";
},

Since we will be adding another shape we add a comma after we close off
our triangle shape. If we weren't adding another shape we would omit this
comma. We'll now start off on our baseball diamond and set all the basic
values.

{
ShouldExport = YES;
InspectorGroup = 41;
ShapeName = BaseballDiamond;

Now we will create the StrokePath, remembering that we won't be closing it
off.

StrokePath = {
elements = (
{element = MOVETO; point = "{0.353553, 0.353553}"; },
{element = LINETO; point = "{-0.353553, 0.353553}"; },
{element = LINETO; point = "{-0.353553, -0.353553}"; }
);
};

After we do this we will then define our FillPath which includes the curves

FillPath = {
elements = (
{element = MOVETO; point = "{0.353553, -0.353553}"; },
{
control1 = "{0.548816, -0.158291}";
control2 = "{0.548816, 0.158291}";
element = CURVETO; point = "{0.353553, 0.353553}";
},
{element = LINETO; point = "{-0.353553, 0.353553}"; },
{element = LINETO; point = "{-0.353553, -0.353553}"; },
{
control1 = "{-0.158291, -0.548816}";
control2 = "{0.158291, -0.548816}";
element = CURVETO; point = "{0.353553, -0.353553}";
}
);
};

And we will conclude our shapes with the text bounds for the baseball
diamond.

TextBounds = "{{0.25, 0.5}, {0.5, 0.5}}";
}
);

One thing to note, this I have not had time to work out is that the
boundary point of the shape are incorrect for this baseball diamond. There
is a large chunk of empty space on the bottom and the left side that
should be removed. This is because my values that I used did not extend
all the way out to 0.5 in the left and downward directions. A
recalculation of values is necessary to correct this issue.


Now that we've take a look at shape creation, lets move on to creating
arrowheads. Like creating shapes we start a new arrowhead with a curly
brace inside of the arrowheads declaration. Like with shapes we have a
number of options that can be set for each arrowhead which will now be
discussed.

Filled: This option can be set as either YES or NO, with NO being the
default option is if this option is not set. The syntax for Filled is as
follows:

Filled = YES;

Gap and LineGap: These options are used to control the offset of the
arrowhead from its connecting object when the line size is to be scaled.
This offset is calculated by the following equation:

Offset = Gap + LineGap · LineThickness

Pointier arrowheads need larger LineGap values to keep them from
overlapping with the graphics as the thickness is increased. The syntax
for Gap and Line values is as follows.

Gap = 0.5;
LineGap = 1;

To set these values, it is best to first set the LineGap value. The best
way to do this is to begin with your Gap and LineGap values set to zero.
In OmniGraffle, draw a completely horizontal line and place your new
arrowheads on both ends. Zoom in on the line to 800% and make sure the
line is selected. In the style inspector, increase the line size from 1
to 8 an observe the tips of your arrowhead.

If the tips remain at the same horizontal position for all sizes from 1 to
8, your LineGap value is properly set. If the tips move outward as you
increase the size, you need to increase the value of LineGap and
conversely if the tips move inward you need to decrease LineGap.

I recommend that you don't try for accuracy above the tenthes digit,
meaning don't try and set a value such as 1.43, since 1.4 is more than
acceptable. Once you have the LineGap set, you may still have some offset
that needs to be adjusted for. Draw two identical squares on the same
horizontal level with so gap between them. Then draw a single line that
connects the two shapes (connections will need to be turned on). Zoom in
to 800% again and look at the tips of your lines.

If the tips meet up perfectly with the edges of the squares, your Gap
value is set correctly. If there is a gap between the tips and the
squares, your Gap value is too high and needs to be decreased, while
conversley, the Gap value should be increased if the tips overlap. As
with the LineGap values, don't try for accuracy above the tenthes digit.

Name: This serves the exact same purpose as ShapeName does but for
arrowheads. It is declared as below:

Name = myArrowhead;

Path: Path is the arrowheads equivalent of StrokePath. It requires
elements just as StrokePath does, and will accept the same element values.
Path's are defined as follows:

Path = {
elements = (
...
);
};

Width: The last value for an arrowhead is the width value. This is
simply the total x distance that the arrowhead spans, and should be
calculated from the values used in the path. The form for Width is:

Width = 10;

Arrowhead Example:

So now lets take a look at how to make an arrowhead of our own. Just like
with our shapes we start by saying we want to make an arrowhead and the
creating a new one with a curly brace

arrowheads = (
{

Next we will need to define the Gap and LineGap values. For this
arrowhead, I found the Gap value to be 0.4 and the LineGap to be 2.1.

Gap = 0.4;
LineGap = 2.1;

We'll then set a name for our arrowhead and define the path outline for it.
In this case we are making a backwards Native American arrowhead, so we
need one MOVETO, three LINETO's and a CLOSE element.

Name = BackNAArrowhead;
Path = {
elements = (
{element = MOVETO; point = "{0, -4}"; },
{element = LINETO; point = "{4, 0}"; },
{element = LINETO; point = "{0, 4}"; },
{element = LINETO; point = "{10, 0}"; },
{element = CLOSE;}
);
};

And finally we will set our width value and end the shape. The width is
calculated as the maximum change in the x value for the path. In our
example, we go from x = 0 to x = 10, so the width is equal to 10 - 0 or 10.

Width = 10;
}
);

So we have now completed the tutorial for creating OmniGraffle
.graffleshapes files.