<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Brief instructions for using the program named SVGDraw01</title>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
</head>
<body style="font-family: Arial,Helvetica,sans-serif;font-size: 10pt"
bgcolor="#FEFFF0" link="#0000ff" vlink="#cc00cc" alink="#ff0000">
<h1>Brief instructions for using the program named SVGDraw01</h1>
<p>Updated 09/17/11</p>
<p>At any time, you can tab down to the button labeled "Press this button to
return to the Action List," and use that button to abandon this Instructional
document and return to the Action List. Do not press the Esc key.</p>
<h2>Index</h2>
<ul>
<li><a href="#Purpose">Purpose</a><ul>
<li><a href="#A_robust_graphics_standardSVG">A robust graphics standard - SVG</a></li>
<li><a href="#An_accessible_and_userfriendly_drawing_program">An accessible and user-friendly drawing program
SVGDraw01</a></li>
<li>
<a href="#High-quality,_economical,_and_readilyavailable_graphics_embossing_equipment">High-quality, economical, and readily-available graphics embossing equipment</a></li>
</ul>
</li>
<li><a href="#Orientation">A note about drawing orientation</a></li>
<li><a href="#Program_startup">Program startup</a></li>
<li><a href="#User_instructions">General user instructions</a><ul>
<li><a href="#Selecting_action_items">Selecting actions from the Action
List</a></li>
<li><a href="#Performing_the_action">Performing the action</a></li>
<li><a href="#Pressing_the_Esc_key">Pressing the Esc key</a></li>
<li><a href="#Text_field_objects">Text field objects</a></li>
<li><a href="#Checkbox_objects">Checkbox objects</a></li>
<li><a href="#Button_objects">Button objects</a></li>
<li><a href="#Message_box_objects">Message box objects</a></li>
<li><a href="#Polylines_and_polygons">Polylines, polygons, and paths</a></li>
<li><a href="#The_name_and_path_of_the_output_file">The name and path of the output file</a></li>
<li><a href="#Rotation_translation_and_scaling">Rotation, translation, and
scaling</a></li>
<li><a href="#A_note_about_page_size">A note about page size</a></li>
</ul>
</li>
<li><a href="#Specific_user_instructions" name="actionItemListInToc">Action
items</a><ul>
<li><a href="#userInstructions2">User instructions</a></li>
<li><a href="#Open_existing_drawing">Open existing drawing</a></li>
<li><a href="#Start_a_new_drawing">Start a new drawing</a></li>
<li><a href="#Draw_a_line">Draw a line</a></li>
<li><a href="#Draw_a_rectangle">Draw a rectangle</a></li>
<li><a href="#Draw_a_circle">Draw a circle</a></li>
<li><a href="#Draw_an_ellipse">Draw an ellipse</a></li>
<li><a href="#Draw_a_polyline,_a_polygon,_or_a_path">Draw a polyline, a
polygon, or a path</a><ul>
<li><a href="#A_csv_file">A csv file</a></li>
<li><a href="#A_path_file">A path file</a></li>
<li><a href="#Sample_csv_files">Sample files</a></li>
</ul>
</li>
<li><a href="#Draw_line_of_text">Draw line of text</a></li>
<li><a href="#Rotate_shapes">Rotate shapes</a></li>
<li><a href="#Translate_shapes">Translate shapes</a></li>
<li><a href="#Scale_shapes">Scale shapes</a></li>
<li><a href="#Delete_shapes">Delete shapes</a></li>
<li><a href="#Stop_program">Stop program</a></li>
<li><a href="#Write_drawing_file">Write drawing file</a></li>
</ul>
</li>
<li><a href="#Please_provide_feedback">Please provide feedback</a></li>
</ul>
<h2><a name="Purpose">Purpose</a></h2>
<p>Select <a href="#Orientation">A note about drawing orientation</a> to skip
this section and go directly to the next major section.</p>
<p>I firmly believe that making it possible for blind and visually impaired people, and
particularly blind and visually impaired students in Science, Technology, Engineering, and Mathematics
(STEM) <a name="to_communicate">to communicate</a> using accurate printed and tactile graphics will
improve the quality of life for those people. The purpose of this program is to make it possible for blind
and visually impaired people to create such graphics in an accessible and
user-friendly way.</p>
<p>Three components are necessary to accomplish that <a href="#to_communicate">goal</a>:</p>
<ul>
<li>Availability of a robust and universally accepted
<a href="#A_robust_graphics_standardSVG">graphics standard</a>.</li>
<li>Availability of an accessible and user-friendly
<a href="#An_accessible_and_userfriendly_drawing_program">drawing program</a> that
allows blind people to take advantage of that standard.</li>
<li>Availability of high-quality, economical, and readily available graphics
<a href="#High-quality,_economical,_and_readilyavailable_graphics_embossing_equipment">
embossing equipment</a>.</li>
</ul>
<h3><a name="A_robust_graphics_standardSVG">A robust graphics standard - SVG</a></h3>
<p>A robust and universally accepted graphics standard is already available in
the form of Scalable Vector Graphics (SVG). See
<a href="http://www.w3.org/TR/SVG/">Scalable Vector Graphics (SVG) 1.1 (Second
Edition)</a></p>
<h3><a name="An_accessible_and_userfriendly_drawing_program">An accessible and
user-friendly drawing program - SVGDraw01</a></h3>
<p>This program is my attempt to provide,
free of charge, a drawing program that makes it possible for blind and visually
impaired
people to take advantage of many of the capabilities of SVG. Even though the
program is still under development, it already makes it
possible for STEM students to create graphics that mirror many of the figures
and diagrams typically found in STEM textbooks.</p>
<h4>A graph board on steroids</h4>
<p>One might think of this program as bringing the old-fashioned graph board
that uses pushpins and rubber bands to convey graphic information into the
computer age. Students and others using this program can create both printed and
tactile graphics using much the same thought processes that they would use when
constructing a "drawing" on a graph board using pushpins, rubber bands, a
protractor, and a measuring stick.</p>
<p>For example, one person might use this program to create and send an SVG file
to a friend with the message "Take a look at the cool floor plan of my new
apartment."</p>
<p>Another person might use this program to create and send an SVG file to a
college professor with the message "This is a free body diagram showing the
magnitude and directions of forces F21 and F23 caused by the interactions among
charges q1, q2, and q3."</p>
<h4>Getting an immediate visual output</h4>
<p>I will be adding new capabilities over time. However, I probably won't add
capabilities that would not be useful to blind users. For example, the program
does not, by default, produce a visual output. But, if you are sighted, or if you are
a blind user using the vOICe sonification software to view the progress of your drawing, you can
use the following procedure to create a visual output.</p>
<p>Start the program and select the following two actions in sequence in the
Action List:</p>
<ol>
<li>"Start a new drawing"</li>
<li>"Write drawing file"</li>
</ol>
<p>Provide the requested information for both actions including the path and
file name for the output SVG file.</p>
<p>Then open the output SVG file in Firefox or IE9 (earlier versions of IE won't
work) . You should see an empty drawing in the browser window.</p>
<p>Return to the
Action List and start drawing shapes. Each time you want to see an updated
drawing, select and process "Write drawing file" and then refresh your browser.
Your updated drawing should appear in the browser window. You should be able to
continue adding shapes and viewing them so long as you don't select "Open
existing drawing" or "Start a new drawing."</p>
<h3>
<a name="High-quality,_economical,_and_readilyavailable_graphics_embossing_equipment">
High-quality, economical, and readily-available graphics embossing equipment</a></h3>
<p>This is the area where we fall short relative to achieving the
<a href="#to_communicate">communications goal</a>. Although high-quality embossing equipment is
available, it is neither economical nor readily available for the majority of
blind people. </p>
<p>I view this as something of a supply and demand problem.
Prior to the release of the developmental versions of this program, to the
best of my knowledge, there have been no readily-available tools that make it
possible for blind people to create accurate graphics for use with a
high-quality embosser. Thus, the demand for such equipment has been very
limited. My hope is that by making it possible for all blind people to create
accurate graphics, the demand for such equipment will go up and the costs for
the equipment will come down.</p>
<p>Even today, however, many schools, colleges, and other organizations own
high-quality graphics embossing equipment that they can make available to their
clientele on some basis. In those cases, there is no reason for blind people to
hold back from learning to communicate using accurate graphics.</p>
<h2><a name="Orientation">A note a</a>bout drawing orientation</h2>
<p>In most STEM courses , you typically learn to draw graphs and other
diagrams with the 0,0 origin in the lower-left corner of the drawing. Positive
values along the y-axis go up the page and positive values along the x-axis go
to the right.</p>
<p>Unfortunately, in SVG, and most other computer graphics programming systems,
the situation is reversed insofar as the y-axis is concerned. In SVG, and
in this program as well, the 0,0 origin is at the top-left corner
of the drawing and positive values along the y-axis go down the page.</p>
<p>This not only has an impact on the physical locations of shape objects in
your drawings, it also has an impact on the orientation of those objects. for
example, this causes the reference corner for a rectangle to be the upper-left
corner. It causes the location of the y-coordinate values for all shapes to be
measured down from the top of the drawing instead of up from the bottom of the
drawing.</p>
<p>Note, however, that it does not change the fact that the reference location
for a line of text is at the lower-left corner of the first character in the
line.</p>
<p>At some point, I may attempt to correct this issue arithmetically. In the
meantime, however, you will simply need to get used to an upside-down coordinate
system, and unfortunately, you may need to refer your teacher or professor to
this section in this document.</p>
<h2><a name="Program_startup">Program startup</a></h2>
<p>When the program starts, you will land in an Action List that provides the
following actions:</p>
<ul>
<li><a href="#userInstructions2">User instructions</a> - opens this HTML file containing instructions in a
browser window.</li>
<li><a href="#Open_existing_drawing">Open existing drawing</a> - opens a drawing file that was previously created
and saved using SVGDraw01.</li>
<li><a href="#Start_a_new_drawing">Start a new drawing</a> - starts fresh and creates a new drawing.</li>
<li><a href="#Draw_a_line">Draw a line </a>- draw a straight line segment between two specified points.</li>
<li><a href="#Draw_a_rectangle">Draw a rectangle</a> - draw a rectangle at a specified location with a
specified width and height.</li>
<li><a href="#Draw_a_circle">Draw a circle</a> - draw a circle at a specified location with a specified
radius.</li>
<li><a href="#Draw_an_ellipse">Draw an ellipse</a> - draw an ellipse at a specified location with specified
width and height.</li>
<li><a href="#Draw_a_polyline,_a_polygon,_or_a_path">Draw a polyline, a
polygon, or a path</a> - draw a polyline, a polygon, or a path based on csv
data or path data that is imported into the program.</li>
<li><a href="#Draw_line_of_text">Draw a line of text</a> - draw a line of text at a specified location with a
specified point size and other parameters as well.</li>
<li><a href="#Rotate_shapes">Rotate shapes</a> - rotate any one or more shapes by a specified angle in
degrees clockwise around a specified center of rotation. See
<a href="#Rotation_translation_and_scaling">Rotation, translation, and
scaling</a> below for cautions regarding the use of this action.</li>
<li><a href="#Translate_shapes">Translate shapes</a> - translate any one or more shapes by a specified
distance along both the x-axis and the y-axis. See
<a href="#Rotation_translation_and_scaling">Rotation, translation, and
scaling</a> below.</li>
<li><a href="#Scale_shapes">Scale shapes</a> - Multiply the coordinate values that make up one or more
shapes by a scale factor to enlarge or shrink the shape. See
<a href="#Rotation_translation_and_scaling">Rotation, translation, and
scaling</a> below.</li>
<li><a href="#Delete_shapes">Delete shapes</a> - delete one or more shapes from the current drawing.</li>
<li><a href="#Stop_program">Stop program</a> - just what it says. Be sure to write your drawing into an
output file before selecting this action.</li>
<li><a href="#Write_drawing_file">Write drawing file</a> - write the current drawing into an SVG file.</li>
</ul>
<p>
The first action that you select should be "User Instructions", "Open existing
drawing", or "Start a new drawing." You should always select either "Open
existing drawing" or "Start a new drawing" and provide the requested information
before selecting any of the actions below those two with the possible exception
of the action titled "Stop program."</p>
<h2>
<a name="User_instructions">General user instructions</a></h2>
<p>
If you are reading this document from inside the program, you must have
already opened this HTML document in an SWT
browser widget. If so, keep reading.</p>
<p>
On the other hand, you may also have opened this document in a
standard browser without running the program named SVGDraw01. If so, keep reading.</p>
<h3>
<a name="Selecting_action_items">Selecting actions from the Action List</a></h3>
<p>
With the exception of the action named "Stop program", when you select an item
in the Action List and press the Enter key, an action page will open containing labels, text fields,
check boxes, radio buttons, push buttons, and other Graphical User Input (GUI)
objects. That action page will enable you to provide the
information needed and to perform the steps necessary to execute that action.</p>
<p>
Navigate down through those GUI objects with the
tab key. Navigate up through the objects with the shift-tab key combination.</p>
<p>
Navigate through radio buttons and the items in lists using the
arrow keys. Press the tab key to escape from a set of radio buttons or from a
list without making a selection.</p>
<h3>
<a name="Performing_the_action">Performing the action</a></h3>
<p>
With the exception of the action labeled "Stop the program," there is a button
on each Action Page that you
must press to cause the action to be performed. If you tab past that button and
return to the Action List, the selected action will not have been performed.</p>
<h3>
<a name="Pressing_the_Esc_key">Pressing the Esc key</a></h3>
<p>
If you press the Esc key when any read/write object on any page has the focus,
the current action will be abandoned and focus will return to the
Action List where you can select another action.</p>
<p>
This html viewer is a
read-only object and does not behave well if you press the Esc key. If you do
accidentally press the Esc key while reading this document, use the tab key to
work your way back to the Action List.</p>
<p>
A few of the other objects are
read-only objects and do not respond at all to the Esc key. They only respond to
the tab key.</p>
<h3>
<a name="Text_field_objects">Text field objects</a></h3>
<p>
Press the tab key to accept the default value in a text field. To change the
value in the field, type the new value and press the tab key. Normally, it
should not be necessary for you to delete the current contents of a text field in
order to change it. However, you may find situations where it is necessary for
you to delete the current contents so be on the lookout for those situations.</p>
<h3>
<a name="Checkbox_objects">Checkbox objects</a></h3>
<p>
You must press the space bar to check or uncheck a check box. (The Enter key
won't do the job.)
</p>
<h3>
<a name="Button_objects">Button objects</a></h3>
<p>
You can press either the space bar or the Enter key to activate a button when it
has the focus.</p>
<h3>
<a name="Message_box_objects">Message box objects</a></h3>
<p>
A message box will appear to announce the completion of those actions where
completion is not obvious such as writing the output file, for example.</p>
<p>
Most errors will also result in the appearance of a message box. In most cases,
you can press either the space bar or the Enter key to dismiss a message box.
However, in some cases you must select one of two buttons labeled Yes and No.</p>
<p>
If you discover errors that do not result in a message box, please let me know.</p>
<h3>
<a name="Polylines_and_polygons">Polylines, polygons</a>, and paths</h3>
<p>
The polyline, the polygon, and the path are by far the most versatile shapes that you can
draw with this program. For example, if you need to plot a function such as y = x^2, the polyline
shape or the path shape are probably your best choices.</p>
<p>
I will explain how to draw these three types of shapes in more detail <a href="#Draw_a_polyline,_a_polygon,_or_a_path">later</a>.</p>
<h3>
<a name="The_name_and_path_of_the_output_file">The name and path of the output file</a></h3>
<p>
When you select "Write Drawing File" in the Action List, you will be prompted
to enter a file name for the output file. If you are running the program from
an executable jar file, you should provide both a path and a file name, or you
probably won't be able to find your output file on your disk.</p>
<h3>
<a name="Rotation_translation_and_scaling">Rotation, translation, and scaling</a></h3>
<p>
These three features, which fall in the general category of SVG transforms, are
relatively easy to use as long as you don't combine them on a single shape. However, once you
combine them, the topic of SVG transforms becomes an advanced topic and will
probably require outside study on your part for proper use.</p>
<p>
Among other things, when you apply a
combination of rotation, translation, and/or scaling transforms, the order in
which you perform the operations is critically important to the outcome. A good understanding of the use of transforms in SVG is needed in order to
understand those outcomes.</p>
<h3>
<a name="A_note_about_page_size">A note about page size</a></h3>
<p>
Your printer is probably not capable of printing from the extreme left edge to
the extreme right edge, or from the extreme top edge to the extreme bottom edge
of the largest paper size that it is advertised to accommodate. For example my
HP Deskjet 6940 printer advertises "Borderless Printing up to 8.5 x 24 in."
However, the largest rectangle that it will actually print is 8.14 x 10.63
inches on a sheet of paper that is 8.5 inches wide and 11 inches high.
Therefore, you should probably allow for some loss of print width and print
height on the right side and the bottom of the page.</p>
<p>
If you plan to emboss your drawing on a tactile graphics embosser, you may also
need to purposely leave a margin on both sides of your drawing to accommodate
the width of the mechanical embossing mechanism. Check the specifications of the
embosser that you plan to use to determine what those margins need to be..</p>
<h2>
<a name="Specific_user_instructions">Action items</a></h2>
<p>
As mentioned earlier, when you first start the program you will land in an
<a href="#actionItemListInToc">Action List</a> that allows you to select and
perform any one of more than one dozen different drawing actions. I will discuss
each of those actions in this section so that you will know what to expect when
you select one of them.</p>
<h3>
<a name="userInstructions2">User instructions</a></h3>
<p>
If you select "User instructions" in the Action List and press the Enter key,
you will land on a page containing a button labeled "Press this button to open
instructions in a browser." When you press that button, this HTML document will open in a separate browser window.
Note that the browser window is an SWT Widget, and may appear to be different in
some respects from your standard browser. However, you should be able to navigate and read the
document just like you would read any other HTML document in a browser window.</p>
<p>
When you get to the end of the document, pressing the tab key will land you on a button labeled "Press this button to return to the Action
List." As the name implies, pressing the button will cause the browser window to
close and focus will return to the Action List where you can make another
selection.</p>
<p>
Almost every page has an "Action" button near the end. If you simply tab past
that button and don't press it, focus will return to the Action List and the
action will not be performed</p>
<h3>
<a name="Open_existing_drawing">Open existing drawing</a></h3>
<p>
Selecting this Action and pressing the Enter key will land you on a
page from which you can open a previously-saved drawing file that was created
using this program.</p>
<p>
(SVG drawing files created using other program may or may not work, so don't be
surprised if you open a drawing file that was created using a different program
and you experience errors.)</p>
<p>
Be aware that any
work that you may have been doing on a new drawing will be lost unless you save
that work by selecting <a href="#Write_drawing_file">Write drawing file</a>
before executing this action.</p>
<p>
The Action page for this Action is relatively simple. You will be presented with
a text field and asked to "Enter name and path of drawing file to open." The
existing drawing will have an extension of .svg. Once you have entered the
requested information, press the tab key and you will land on a button labeled
"Press to open drawing file." </p>
<p>
Pressing that button will cause a Message Box to pop up containing information
about the search for the existing drawing file. Press the OK button on that
Message Box and the search will begin. You may have to be very patient at this
point. Sometimes it takes a quite a while on my computer for the program to find and open the existing
drawing file.</p>
<p>
If the file is not found, a Message Box will pop up with that information. Press
OK to dismiss the Message Box and focus will return to the Action List.</p>
<p>
If the file is found and opened, a Message Box will pop up with that information
as well. When you press the OK button on that Message Box, focus will return to
the Action List.</p>
<h3>
<a name="Start_a_new_drawing">Start a new drawing</a></h3>
<p>
Select this action to start a new drawing. When you select this action and press
the Enter key, you will land on a page from which you can provide the
information required for a new drawing.</p>
<p>
The first two text fields allow you to enter a title and a description for your
new drawing. If you simply tab past those two fields, a default title and a
default description will be recorded for your new drawing.</p>
<p>
You will be asked to enter the width and height in inches of your new drawing in
the next two text fields. If you simply tab past those two fields, default
values will be assigned for width and height.</p>
<h4>
A very important point</h4>
<p>
This is where I need to explain a very important point. You specify the width
and height of your new drawing in inches, such as 8.5 inches and 11 inches.
However, just enter the numbers. Don't enter the units. The units of inches are understood by the
program.</p>
<p>
After you establish the width and height of your new drawing in inches by
executing this action, you
will be asked later to provide coordinate and/or dimensional information for many other
actions. In those cases, you will provide the information in units of 0.01 inch,
or 100 units per inch. For example, if you later decide to draw a rectangle that
is 8.5 inches wide and 11 inches high, you will specify the width as 850 and
you will specify the height as 1100.</p>
<h4>
The Action button</h4>
<p>
Like most other Action pages, this page has an Action button near the end that
is labeled "Press to start drawing." When you press that button, a Message Box
will pop up to acknowledge that the new drawing is started. Pressing the OK
button on the Message Box will return the focus to the Action List.</p>
<h3>
<a name="Draw_a_line">Draw a line</a></h3>
<p>
Selecting this action and pressing the Enter key will land you on a
page from which you can draw a line segment between any two points in your
drawing.</p>
<h4>
The title and description fields</h4>
<p>
On this page, as on may other pages, the first
two fields allow you to enter a title and description for the line object. If
you tab through these two fields, a default title and a default description will
be assigned to the object. Because this is essentially the same on all pages, I
won't mention it with respect to Action pages that I discuss in the
remaining sections of this document.</p>
<h4>
Coordinate-value fields</h4>
<p>
You will be asked to enter the x and y coordinate values for one end of the line
in the next two fields. As usual, the fields already contain default values that
you can accept by simply tabbing through the fields.</p>
<p>
You will then be asked to enter the x and y coordinate values for the other end of
the line in the next two fields.</p>
<h4>
Stroke width and opacity</h4>
<p>
You will be asked to enter the stroke width and opacity in the next two fields.
You will encounter these same two fields on many action pages and the
meaning will always be the same. Therefore, I will explain the meaning here and
then ignore it for the remainder of this document.</p>
<h5>
The stroke width</h5>
<p>
The stroke width is the width or thickness of the line that will be drawn. If
you are planning to emboss the drawing, the stroke width should probably be at
least as wide as the distance between two dots on the embosser. If the embosser
supports 20 dots per inch, the stroke width should probably be at least 5, which
represents 0.05 inch or the distance between the dots on a 20 dot per inch embosser.</p>
<p>
If the
embosser supports 16 dots per inch, the stroke width should probably be at least
6.25, which represents 0.0625 inch or the distance between the dots at 16 dots
per inch.</p>
<p>
You may find that those values aren't sufficient to provide
high-quality embossing and you may may need to make the stroke width even wider
than the values suggested above.</p>
<h5>
The opacity</h5>
<p>
If we were talking about color, opacity would be a complicated topic. However,
since we are only talking about white, black, and gray, the concept of opacity is fairly simple.</p>
<p>
You will be asked to enter a value between 0 and 1 for the stroke opacity. The
line will be drawn pure black for a value of 1.</p>
<p>
The line will essentially not be drawn and therefore will be invisible for a value of 0.</p>
<p>
The line will be drawn with a shade of gray that is half way
between between white and black for a value of 0.5. </p>
<p>
The greater the opacity
value, the darker will be the line. The smaller the opacity value, the
lighter will be the line.</p>
<p>
On an embosser with variable dot height, a value of 1
will produce dots with the maximum height. For lower stroke opacity values, the height of the dots
will be lower.</p>
<p>
(Also see <a href="#The_fill_checkbox_and_fill_opacity">The fill checkbox and fill opacity</a> later.)</p>
<h3>
<a name="Draw_a_rectangle">Draw a rectangle</a></h3>
<p>
Selecting this action and pressing the Enter key will land you on a
page from which you can draw a rectangle whose sides are parallel to the
horizontal and vertical axes. If you need a rectangle whose sides are not
parallel to the horizontal and vertical axes, you can draw it with this action
and then <a href="#Rotate_shapes">rotate</a> it later or draw it as a
<a href="#Draw_a_polyline,_a_polygon,_or_a_path">polygon</a> or as a
<a href="#Draw_a_polyline,_a_polygon,_or_a_path">path</a>.</p>
<p>
Using this action, you specify the x and y coordinates of the upper-left corner
of the rectangle and the width and the height of the rectangle. As before,
you also specify the stroke width and the stroke opacity.</p>
<h4>
<a name="The_fill_checkbox_and_fill_opacity">The fill checkbox and fill opacity</a></h4>
<p>
This action, along with several of the other actions to be discussed later,
introduces a new parameter - fill. I will explain it here and then ignore it
when discussing actions in subsequent sections.</p>
<p>
Because this is a closed geometric shape, you can cause it to be filled with a
color ranging from black through gray to white.</p>
<p>
Before you reach the action button while navigating down this action page, you will
come to a checkbox labeled "Check this box for black fill." You can check (and
uncheck) the box by pressing the space bar while the checkbox has the focus.</p>
<p>
If you check the box, a new text field will be exposed between the checkbox and the
action button. You will be asked to "Enter value between 0 and 1 for fill
opacity." Opacity has the same meaning here that it has for stroke opacity
discussed earlier, except that this time it doesn't simply apply to a line. Rather,
it applies to an entire area defined by a line.</p>
<p>
A word of caution is in order here. I have been told that if you plan to emboss
your graphic using an embosser with variable dot height, you should avoid
filling large areas with large opacity values. I have been told that this can
cause undesirable paper buckling when the embosser attempts to emboss a large
area with high dots. It was suggested that low opacity values should be used
when filling.</p>
<h4>
The Action button for the rectangle</h4>
<p>
Finally, you will come to an action button labeled "Press to draw rectangle." As
usual, pressing the button will cause the rectangle object to become a part of
your drawing and focus will return to the Action List.</p>
<h3>
<a name="Draw_a_circle">Draw a circle</a></h3>
<p>
Selecting this action and pressing the Enter key will land you on a
page from which you can draw a circle at a given location with a given radius.</p>
<p>
You won't find anything new on this page. You will be asked to enter the x and y
coordinates for the circle along with the radius of the circle.</p>
<h3>
<a name="Draw_an_ellipse">Draw an ellipse</a></h3>
<p>
Selecting this action and pressing the Enter key will land you on a
page from which you can draw an ellipse at a given location with a given radius
along the horizontal axis and a different radius along the vertical axis. As
with the rectangle, you may need to <a href="#Rotate_shapes">rotate</a> the
shape later if the default orientation is not what you need.</p>
<p>
In case you aren't familiar with this shape, an ellipse is like a
squashed circle. It is a smooth closed shape, but its radius may be larger along
one axis than it is along the other axis.</p>
<p>
Once again, you won't find anything new on this action page. This page is much like the page for
drawing a circle except that on this page, you will be asked to provide both a
horizontal radius and a vertical radius. If you enter the same value for
both of the radii, you will end up with a circle.</p>
<h3>
<a name="Draw_a_polyline,_a_polygon,_or_a_path">Draw a polyline, a polygon, or a
path</a></h3>
<p>
Selecting this action and pressing the Enter key will land you on a
page from which you can draw a polyline, a polygon, or a path.</p>
<h4>
Polyline and polygon</h4>
<p>
For either a polyline or a polygon, you provide the x and y coordinate values
for a set of points. (I will provide and example later.) The points are connected by straight line segments in the
order that you define the points. The only difference between the two is that
when you draw a polygon, the last point is automatically connected to the first
point creating a closed shape.</p>
<h4>
A path</h4>
<p>
A path is a different kind of animal altogether. It can be used to draw
something as simple as a straight line segment, and can also be used to draw
something as complex as a cubic Bezier curve or an elliptical arc.</p>
<p>
To use this
feature of the program, you will probably need to first study SVG paths. The
best material that I have found on the topic is a tutorial located at
<a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">
https://developer.mozilla.org/en/SVG/Tutorial/Paths</a>. Hopefully, it will be
sufficiently accessible that you can read it.</p>
<p>
To draw a path, you provide a string of characters consisting of both SVG path
commands and coordinate information. I will provide an example later.</p>
<h4>
The action page</h4>
<p>
The action page for this action is relatively straightforward. The first new
thing on the page is a set of three radio buttons by which you specify that you
want to draw one of the following three shapes:</p>
<ul>
<li>Polyline</li>
<li>Polygon</li>
<li>Path</li>
</ul>
<p>
Then you are asked to provide the name and path of a file to import that
contains the information from which the shape will be drawn. When you enter
that information and press the tab key, you land on a button labeled "Press this
button to import data file."</p>
<p>
If you selected either the Polyline or the Polygon radio button,
you will need to provide a <a href="#A_csv_file">csv</a> file containing the
data. This file must have an extension of .csv or it will be rejected.</p>
<p>
If you selected the Path radio button, you will need to provide a
<a href="#A_path_file">path</a> file containing the data. This file must have an
extension of .pth or it will be rejected.</p>
<h4>
<a name="A_csv_file">A csv file</a></h4>
<p>
A csv file is a simple text file containing x,y coordinate value pairs with no
spaces and with each value followed by a comma. You can put one or more values
on each line so long as you are careful to follow each value with a comma. You
can omit the comma at the end of the line if you wish. As mentioned above, the file
must
have an extension of .csv or it will be rejected.</p>
<p>
Here are the contents of a simple csv file that can be used to draw either a
polyline or a polygon</p>
<pre>200,200
600,200
400,400</pre>
<p>If you were to use this data to draw a polyline, the program would draw two
sides of a triangle. If you were to use it to draw a polygon, the program would
draw all three sides of the same triangle.</p>
<h4>
<a name="A_path_file">A path file</a></h4>
<p>
A path file contains the actual SVG code for the path that you want to draw. For
example, a file containing the following characters will cause a cubic Bezier
curve to be drawn:</p>
<pre>M130 110 C 120 140, 180 140, 170 110</pre>
<p>
You will find an explanation of this SVG code in the section on Bezier curves at
<a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">
https://developer.mozilla.org/en/SVG/Tutorial/Paths</a>. </p>
<h4>
<a name="Sample_csv_files">Sample files</a></h4>
<p>
The executable jar file containing this program contains some sample csv files
and some sample path files in a folder named Samples. You can extract those
files using a program like WinZip and use them to experiment with the data
import feature for drawing polylines, polygons, and paths. </p>
<p>
Many programs, including Microsoft Excel, produce csv files as a standard
output. You can also create your own csv files using a text editor.</p>
<p>
I have never seen a program that produces path files as a standard output
format. Therefore, if you use them, you will probably need to create them using
a text editor. Although that may sound like a daunting task, you may find it worth your while because you can squeeze a lot of graphic information
into a path file once you understand SVG paths.</p>
<p>
For example, assume that you frequently need to draw curves in a Cartesian
coordinate system with an x-axis, a y-axis, and tic marks along each axis, or
maybe you need to draw grid lines instead of tic marks. You could create a path
file for that basic structure. Then whenever you need to draw a graph, you could
begin by importing the path file for the axes and then draw your data points
within those axes.</p>
<h3>
<a name="Draw_line_of_text">Draw line of text</a></h3>
<p>
Selecting this action and pressing the Enter key will land you on a
page from which you can draw a single line of text at a given location with a
given font face (such as Arial) and a given point size. You have three choices
for the font style (normal, italic, or oblique). You also have four choices for
the font weight (normal, bold, bolder, or lighter).</p>
<p>
If you have worked through the discussions of the action pages in the previous
sections of this document, you shouldn't find anything new on this action page.</p>
<p>
The starting x and y coordinate values specify the location of the lower-left
corner of a rectangle that fully encloses the first character in the line of
text.</p>
<p>
A point size of 72 will probably produce an upper-case "T" that is approximately
one-half inch from top to bottom on your printer. Other point sizes produce text
that is proportionally larger or smaller.</p>
<h3>
<a name="Rotate_shapes">Rotate shapes</a></h3>
<p>
The first few actions in the <a href="#Specific_user_instructions">Action List</a>
discussed earlier
deal with getting instructions and either starting a new drawing or opening an
existing drawing. After that, the next several actions in the
<a href="#Specific_user_instructions">Action List</a>, which were also discussed
earlier, deal with drawing specific
shapes such as lines, rectangles, circles, paths, etc.</p>
<p>
Beginning with this section, the next several actions in the
<a href="#Specific_user_instructions">Action List</a> deal with actions that you
can perform on shapes that you have already drawn. The first of these actions is the "Rotate
shapes" action.</p>
<p>
Selecting the "Rotate
shapes" action and pressing the Enter key will land you on a
page from which you can select one or more existing shapes and cause them to be
rotated about a specific point by a specific angle in degrees clockwise.
(Negative angles rotate counter-clockwise.)</p>
<h4>
The action page</h4>
<p>
The action page for this action is relatively straightforward. First you press a
button labeled "Press to get list of shapes in your drawing" to populate a
physical list with identifying information about each shape that you have thus
far created in your drawing. You can navigate up and down that list using the
arrow keys.</p>
<p>
Each shape in the list is identified as follows:</p>
<pre>Title {Description} [Unique identifier]</pre>
<p>The first two items in the identifying information are the title and description that you assigned to
the
shape when you created it, or a default title and description if you didn't
enter a title or description.</p>
<p>The third item is a unique identifier that was
created by the program when the shape was created. This identifier can be used
to differentiate among different shapes having the same titles and descriptions.</p>
<h4>
Embedded instructions</h4>
<p>
Instructions are embedded among the GUI components on many of the action pages.
On this page, after you press the button to populate the list, you will see the following
instructions:</p>
<p>
<em>"When you press the tab key, you will land in a Combo List Box containing one item for each shape in your drawing. You can mark a shape for rotation by selecting the shape using the arrow keys and then pressing the 'r' key. Press the tab key to move out of the Combo List Box."</em></p>
<p>
After using the arrow keys and the 'r' key to mark all of the shapes that you
want to rotate around a common point, you can press the tab key, enter the coordinates of the common rotation point, and
enter the rotation angle in
degrees clockwise.</p>
<p>
Finally, you can press a button labeled "Press to rotate shapes" to cause the
rotation to be performed. This is the point where your drawing is actually
modified. If you tab past this button and return the focus to the Action List,
your drawing will not have been modified.</p>
<p>
Before using the rotation feature, you should read the cautions in the
<a href="#Rotation_translation_and_scaling">Rotation, translation, and scaling</a> section.</p>
<h3>
<a name="Translate_shapes">Translate shapes</a></h3>
<p>
Selecting the "Translate
shapes" action and pressing the Enter key will land you on a page from
which you can select one or more existing shapes and cause them to be translated
(moved) by specific distances along the horizontal and vertical axes.</p>
<p>
The procedure for performing this action is essentially the same as the
procedure for rotating shapes. The differences are:</p>
<ul>
<li>In this case, you specify translation distances instead of the rotation
point and rotation angle required by rotation.</li>
<li>In this case, you mark the shapes that are to be translated using the
't' key instead of the 'r' key.</li>
</ul>
<p>
If you understand how to rotate shapes, you should have no problem using this
action to translate shapes.</p>
<p>
Once again, however, before using the translation feature, you should read the cautions in the <a href="#Rotation_translation_and_scaling">Rotation, translation, and scaling</a>
section.</p>
<h3>
<a name="Scale_shapes">Scale shapes</a></h3>
<p>
Selecting the "Scale
shapes" action and pressing the Enter key will land you on a page from
which you can select one or more existing shapes and cause them to be scaled
(made larger or smaller) by applying specific multiplicative scale factors along the horizontal and vertical axes.</p>
<p>
The procedure for performing this action is essentially the same as the
procedure for rotating shapes. The differences are:</p>
<ul>
<li>In this case, you specify multiplicative scale factors instead of the rotation
point and rotation angle required by rotation.</li>
<li>In this case, you mark the shapes that are to be scaled using the
's' key instead of the 'r' key.</li>
</ul>
<p>
If you understand how to rotate shapes, you should have no problem using this
action to scale shapes.</p>
<p>
Before using the scaling feature, you should read the cautions in the <a href="#Rotation_translation_and_scaling">Rotation, translation, and scaling</a>
section.</p>
<h3>
<a name="Delete_shapes">Delete shapes</a></h3>
<p>
Selecting the "Delete
shapes" action and pressing the Enter key will land you on a page from
which you can select one or more existing shapes and cause them to be deleted
from your drawing.</p>
<p>
The procedure for deleting shapes is similar to but simpler than the
procedure for rotating shapes. The differences are:</p>
<ul>
<li>In this case, there are no coordinate values to be provided. Instead,
you simply mark the shapes that are to be deleted and press the button
labeled "Press to delete shapes."</li>
<li>In this case, you mark the shapes that are to be deleted by pressing the
'Delete' key. Note, however, that the shapes are not actually deleted from
your drawing until you press the button labeled "Press to delete shapes"
later. Once again, if you tab past that button and return the focus to the
Action List, the shapes that you marked will not be deleted from your
drawing.</li>
</ul>
<p>
If you understand how to rotate shapes, you should have no problem using this
action to delete shapes.</p>
<h3>
<a name="Stop_program">Stop program</a></h3>
<p>
As the name implies, selecting the "Stop program" action and pressing the
Enter key will cause the program to be terminated. Make sure that you have
performed the <a href="#Write_drawing_file">Write drawing file</a> action before
performing this action if you want to save your drawing.</p>
<h3>
<a name="Write_drawing_file">Write drawing file</a></h3>
<p>
Selecting this action and pressing the Enter key will land you on a
page from which you can save your drawing with a specific file and path name.
The extension .svg will be automatically appended to the file name that you
specify so you should not include it when you enter the path and file name.</p>
<p>
Each time you perform this action, the current state of your drawing will be
saved in the specified file. It might be a good idea to perform this action
often while creating a drawing so that if you make a mistake (or you have a
power failure), you can re-open the most recent good version of the drawing file.</p>
<h2>
<a name="Please_provide_feedback">Please provide feedback</a></h2>
<p>
Please let me know if you find errors in these instructions, or you find areas
that deserve a more thorough explanation.</p>
<p>
I would also like to hear about it if there are features that you would like to
see added to this program.</p>
<p>
Dick Baldwin<br/>
baldwin@dickbaldwin.com</p>