[Artbeyondsightmuseums] Drawing program for visually impaired

Lisa Yayla fnugg at online.no
Mon Sep 19 02:15:46 UTC 2011


Forwarding very interesting news about a drawing tool for the visually 
impaired created by  Richard Baldwin, Professor of Computer Information 
Technology Austin Community College.


This message is intended mainly for teachers of blind or visually 
impaired students in STEM courses. Of course, this is a public forum and 
everyone is welcome to read the message and provide comments as 
appropriate.

Having been the sighted teacher of a blind student for several years, I 
firmly believe that making it possible for blind and visually impaired 
people, and particularly blind and visually impaired students in STEM 
courses, to communicate using accurate printed and tactile graphics will 
improve the quality of life and the likelihood of academic success for 
those students.

I have written a computer program that makes it possible, for the first 
time in history, for blind and visually impaired people to create such 
graphics in an accessible and user-friendly way.

Version 0.0.8 of my drawing program for blind students is now posted and 
available for free and immediate download at:

http://www.austincc.edu/baldwin/SWT-SVG/SVGDraw01.zip

Three components are necessary to accomplish the goal of widespread 
graphics communication among blind and visually impaired students and 
their teachers:

    * Availability of a robust and universally accepted graphics standard.
    * Availability of a robust, accessible, and user-friendly drawing
      program that allows blind people to take advantage of the SVG
      standard.
    * Availability of high-quality, economical, and readily available
      graphics embossing equipment.


      A robust graphics standard - SVG

A robust and universally accepted graphics standard is already available 
in the form of Scalable Vector Graphics (SVG). See Scalable Vector 
Graphics (SVG) 1.1 (Second Edition) <http://www.w3.org/TR/SVG/>


      An accessible and user-friendly drawing program - SVGDraw01

I have written and provided, free of charge, a drawing program that 
blind and visually impaired people can use to draw pictures. To the best 
of my knowledge, no other existing program provides that capability. (If 
such a program exists, it is a well-kept secret.) Thus, for the first 
time in history, your students can express themselves using graphics.

While many drawing programs exist, they are written for use by sighted 
people and not for use by blind people. My program is designed and 
written specifically for use by blind and visually impaired people.

Even though my program is still under development, it already provides 
the capability for STEM students to create graphics that mirror many of 
the figures and diagrams typically found in STEM textbooks.


        A graph board on steroids

As a teacher of blind or visually impaired students, you might think of 
this program as bringing the old-fashioned graph board into the computer 
age. Students and others using this program can create both printed and 
tactile graphics using many of 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.

For example, one student 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."

Another student 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."


        Getting an immediate visual output

I will be adding new capabilities over time. However, I probably won't 
add capabilities that would not be useful to blind and visually impaired 
users. For example, the program does not, by default, produce an 
immediate visual output. The primary output is intended to be a printer, 
a graphics embosser, or both. But, if you are sighted, or if you are 
blind and using the vOICe sonification software to view the progress of 
your drawing, you can use a procedure described in the attached file to 
view your drawing as it progresses.


      High-quality, economical, and readily-available graphics embossing
      equipment

This is the area where we fall short relative to achieving our 
widespread graphics communications goal. Although high-quality embossing 
equipment is available in the marketplace, it is not economical (by 
computer standards) nor is it readily available for the personal use of 
most blind students.

I view this as a supply and demand problem. Prior to the release of my 
program, there were no robust, accessible, and user-friendly tools that 
made it possible for blind people to create  accurate graphics for use 
with a high-quality embosser. Thus, the demand for such embossing 
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 
embossing equipment will go up and the costs for the equipment will come 
down.

Even today, however, many schools, colleges, and other organizations own 
high-quality graphics embossing equipment that they can make available 
to their blind and visually impaired clientele on some basis. In those 
cases, there is no reason for blind people to hold back from learning to 
communicate using graphics.

My drawing program is freely available for you and your students to use. 
As a teacher, it is up to you to connect your blind and visually 
impaired students to those available hardware embossing resources.

The attached HTML file is the User-Instruction file for my drawing 
program named SVGDraw01.

Please feel free to forward this message to others who may have an 
interest in the use of graphics by blind and visually impaired people.

Richard Baldwin
Professor of Computer Information Technology
Austin Community College
baldwin at austincc.edu <mailto:baldwin at austincc.edu>

http://www.austincc.edu/baldwin/

Instructions.htm


  Brief instructions for using the program named SVGDraw01

Updated 09/17/11

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.


    Index

    * Purpose
          o A robust graphics standard - SVG
          o An accessible and user-friendly drawing program SVGDraw01
          o High-quality, economical, and readily-available graphics
            embossing equipment
    * A note about drawing orientation
    * Program startup
    * General user instructions
          o Selecting actions from the Action List
          o Performing the action
          o Pressing the Esc key
          o Text field objects
          o Checkbox objects
          o Button objects
          o Message box objects
          o Polylines, polygons, and paths
          o The name and path of the output file
          o Rotation, translation, and scaling
          o A note about page size
    * Action items
          o User instructions
          o Open existing drawing
          o Start a new drawing
          o Draw a line
          o Draw a rectangle
          o Draw a circle
          o Draw an ellipse
          o Draw a polyline, a polygon, or a path
                + A csv file
                + A path file
                + Sample files
          o Draw line of text
          o Rotate shapes
          o Translate shapes
          o Scale shapes
          o Delete shapes
          o Stop program
          o Write drawing file
    * Please provide feedback


    Purpose

Select A note about drawing orientation to skip this section and go 
directly to the next major section.

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) to communicate 
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.

Three components are necessary to accomplish that goal:

    * Availability of a robust and universally accepted graphics standard.
    * Availability of an accessible and user-friendly drawing program
      that allows blind people to take advantage of that standard.
    * Availability of high-quality, economical, and readily available
      graphics embossing equipment.


      A robust graphics standard - SVG

A robust and universally accepted graphics standard is already available 
in the form of Scalable Vector Graphics (SVG). See Scalable Vector 
Graphics (SVG) 1.1 (Second Edition) <http://www.w3.org/TR/SVG/>


      An accessible and user-friendly drawing program - SVGDraw01

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.


        A graph board on steroids

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.

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."

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."


        Getting an immediate visual output

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.

Start the program and select the following two actions in sequence in 
the Action List:

   1. "Start a new drawing"
   2. "Write drawing file"

Provide the requested information for both actions including the path 
and file name for the output SVG file.

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.

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."


      High-quality, economical, and readily-available graphics embossing
      equipment

This is the area where we fall short relative to achieving the 
communications goal. Although high-quality embossing equipment is 
available, it is neither economical nor readily available for the 
majority of blind people.

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.

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.


    A note about drawing orientation

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.

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.

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.

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.

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.


    Program startup

When the program starts, you will land in an Action List that provides 
the following actions:

    * User instructions - opens this HTML file containing instructions
      in a browser window.
    * Open existing drawing - opens a drawing file that was previously
      created and saved using SVGDraw01.
    * Start a new drawing - starts fresh and creates a new drawing.
    * Draw a line - draw a straight line segment between two specified
      points.
    * Draw a rectangle - draw a rectangle at a specified location with a
      specified width and height.
    * Draw a circle - draw a circle at a specified location with a
      specified radius.
    * Draw an ellipse - draw an ellipse at a specified location with
      specified width and height.
    * Draw a polyline, a polygon, or a path - draw a polyline, a
      polygon, or a path based on csv data or path data that is imported
      into the program.
    * Draw a line of text - draw a line of text at a specified location
      with a specified point size and other parameters as well.
    * Rotate shapes - rotate any one or more shapes by a specified angle
      in degrees clockwise around a specified center of rotation. See
      Rotation, translation, and scaling below for cautions regarding
      the use of this action.
    * Translate shapes - translate any one or more shapes by a specified
      distance along both the x-axis and the y-axis. See Rotation,
      translation, and scaling below.
    * Scale shapes - Multiply the coordinate values that make up one or
      more shapes by a scale factor to enlarge or shrink the shape. See
      Rotation, translation, and scaling below.
    * Delete shapes - delete one or more shapes from the current drawing.
    * Stop program - just what it says. Be sure to write your drawing
      into an output file before selecting this action.
    * Write drawing file - write the current drawing into an SVG file.

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."


    General user instructions

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.

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.


      Selecting actions from the Action List

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.

Navigate down through those GUI objects with the tab key. Navigate up 
through the objects with the shift-tab key combination.

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.


      Performing the action

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.


      Pressing the Esc key

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.

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.

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.


      Text field objects

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.


      Checkbox objects

You must press the space bar to check or uncheck a check box. (The Enter 
key won't do the job.)


      Button objects

You can press either the space bar or the Enter key to activate a button 
when it has the focus.


      Message box objects

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.

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.

If you discover errors that do not result in a message box, please let 
me know.


      Polylines, polygons, and paths

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.

I will explain how to draw these three types of shapes in more detail later.


      The name and path of the output file

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.


      Rotation, translation, and scaling

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.

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.


      A note about page size

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.

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..


    Action items

As mentioned earlier, when you first start the program you will land in 
an Action List 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.


      User instructions

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.

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.

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


      Open existing drawing

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.

(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.)

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 Write drawing file 
before executing this action.

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."

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.

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.

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.


      Start a new drawing

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.

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.

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.


        A very important point

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.

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.


        The Action button

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.


      Draw a line

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.


        The title and description fields

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.


        Coordinate-value fields

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.

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.


        Stroke width and opacity

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.


          The stroke width

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.

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.

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.


          The opacity

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.

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.

The line will essentially not be drawn and therefore will be invisible 
for a value of 0.

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.

The greater the opacity value, the darker will be the line. The smaller 
the opacity value, the lighter will be the line.

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.

(Also see The fill checkbox and fill opacity later.)


      Draw a rectangle

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 rotate it later or draw it as a polygon or as a path.

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.


        The fill checkbox and fill opacity

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.

Because this is a closed geometric shape, you can cause it to be filled 
with a color ranging from black through gray to white.

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.

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.

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.


        The Action button for the rectangle

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.


      Draw a circle

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.

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.


      Draw an ellipse

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 rotate the shape 
later if the default orientation is not what you need.

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.

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.


      Draw a polyline, a polygon, or a path

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.


        Polyline and polygon

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.


        A path

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.

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 https://developer.mozilla.org/en/SVG/Tutorial/Paths. 
Hopefully, it will be sufficiently accessible that you can read it.

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.


        The action page

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:

    * Polyline
    * Polygon
    * Path

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."

If you selected either the Polyline or the Polygon radio button, you 
will need to provide a csv file containing the data. This file must have 
an extension of .csv or it will be rejected.

If you selected the Path radio button, you will need to provide a path 
file containing the data. This file must have an extension of .pth or it 
will be rejected.


        A csv file

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.

Here are the contents of a simple csv file that can be used to draw 
either a polyline or a polygon

200,200
600,200
400,400

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.


        A path file

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:

M130 110 C 120 140, 180 140, 170 110

You will find an explanation of this SVG code in the section on Bezier 
curves at https://developer.mozilla.org/en/SVG/Tutorial/Paths.


        Sample files

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.

Many programs, including Microsoft Excel, produce csv files as a 
standard output. You can also create your own csv files using a text editor.

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.

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.


      Draw line of text

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).

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.

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.

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.


      Rotate shapes

The first few actions in the Action List 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 Action 
List, which were also discussed earlier, deal with drawing specific 
shapes such as lines, rectangles, circles, paths, etc.

Beginning with this section, the next several actions in the Action List 
deal with actions that you can perform on shapes that you have already 
drawn. The first of these actions is the  "Rotate shapes" action.

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.)


        The action page

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.

Each shape in the list is identified as follows:

Title {Description} [Unique identifier]

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.

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.


        Embedded instructions

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:

/"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."/

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.

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.

Before using the rotation feature, you should read the cautions in the 
Rotation, translation, and scaling section.


      Translate shapes

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.

The procedure for performing this action is essentially the same as the 
procedure for rotating shapes. The differences are:

    * In this case, you specify translation distances instead of the
      rotation point and rotation angle required by rotation.
    * In this case, you mark the shapes that are to be translated using
      the 't' key instead of the 'r' key.

If you understand how to rotate shapes, you should have no problem using 
this action to translate shapes.

Once again, however, before using the translation feature, you should 
read the cautions in the Rotation, translation, and scaling section.


      Scale shapes

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.

The procedure for performing this action is essentially the same as the 
procedure for rotating shapes. The differences are:

    * In this case, you specify multiplicative scale factors instead of
      the rotation point and rotation angle required by rotation.
    * In this case, you mark the shapes that are to be scaled using the
      's' key instead of the 'r' key.

If you understand how to rotate shapes, you should have no problem using 
this action to scale shapes.

Before using the scaling feature, you should read the cautions in the 
Rotation, translation, and scaling section.


      Delete shapes

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.

The procedure for deleting shapes is similar to but simpler than the 
procedure for rotating shapes. The differences are:

    * 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."
    * 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.

If you understand how to rotate shapes, you should have no problem using 
this action to delete shapes.


      Stop program

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 Write drawing file action before performing this 
action if you want to save your drawing.


      Write drawing file

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.

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.


    Please provide feedback

Please let me know if you find errors in these instructions, or you find 
areas that deserve a more thorough explanation.

I would also like to hear about it if there are features that you would 
like to see added to this program.

Dick Baldwin
baldwin at dickbaldwin.com





More information about the ArtBeyondSightMuseums mailing list