<< Chapter < Page Chapter >> Page >

-----

Listing 27 . The program named Svg21.java.
/*File Svg21.java, Copyright 2011, R.G.BaldwinRevised 08/07/11 to support the addition of a title parameter to each element for IVEO compatibility. If theoutput SVG file is opened in IVEO, the title for the svg element is spoken when the user opens the file, and thetitles for the individual elements are spoken when the user touches a corresponding shape on the touchpad orclicks on that shape on the screen. If the SVG file won't be used with IVEO, just leave the title strings unchanged.This program requires access to the file named SvgLib21.javaThis is a demonstration program. This program uses JDOM 1.1.1 and an SVG graphics libraryclass of my own design named SvgLib21 to create an XML file named Svg21.svg that draws at least one of each ofthe following six basic SVG shapes when rendered in an SVG graphics engine such as Firefox 5.* rectangle * circle* ellipse * line* polyline * polygonIn addition, the program illustrates the creation of the following two types of elements in the output SVG file.* description * commentThe main purpose is to demonstrate how to create an SVG file using the JDOM SVG graphics library that can bedisplayed using Firefox 5 or IE 9. The file can also be opened in other programs such as InkScape and IVEO.All coordinate values are in inches and fractions of inches.One svg unit equals approximately 0.011 inch. An svg unit is not necessarily the same size as a pixel on yourmonitor or your printer. However, dimensions specified in inches should be very close when you print the image.By default, all lines that define the geometric shapes are black and are one pixel wide. This can be changedby calling appropriate methods to change attribute values. By default, the fill attribute for all geometric shapesis "none". This can be changed by calling appropriate methods to change attribute values.This program creates a canvas that is 8.5x11 inch in a portrait orientation.The origin is at the lower-left corner. Positive x is to the right and positive y is up the page.Tested using J2SE 6, JDOM 1.1.1, and Firefox 5 running under Windows Vist Home Premium Edition.*********************************************************/ import java.io.*;import org.jdom.*; public class Svg21{public static void main(String[] args){//DO NOT MODIFY ANY OF THE CODE ABOVE THIS LINE. //##################################################////ONLY THE CODE BELOW THIS LINE CAN BE MODIFIED//CREATE A DRAWING CANVAS //This must be the first statement that you write in// the program and it must appear only once. //The following statement creates a canvas that is// 8.5x11 inches in size in a portrait layout. The // size of the canvas can be changed by changing the// width and height parameters in the method call. Element svg = SvgLib21.makeSvg(ns,"Document Title", 8.5,//width11 //height );//DO NOT MODIFY THE FOLLOWING STATEMENT//This statement must immediately follow the call to // the makeSvg method above and this statement MUST// NOT BE MODIFIED. Document doc = new Document(svg,docType);//DESCRIPTION ELEMENT//The following code can be used to add a<desc>// element to the svg file if you want one. Replace // the text in quotation marks with your description.// Don't make any other changes to the code. SvgLib21.makeDescription(svg,ns, "The basic SVG shapes.");//XML/SVG COMMENT //The following code can be used to insert a comment// into the svg file if you want one. Replace the // text in quotatin marks with your comment text.// Don't make any other changes to the code. You can // insert as many statements of this type as you// need, one for each comment. A comment will be // inserted into the svg file each time you insert a// makeComment statement. SvgLib21.makeComment(svg,"Show outline of canvas." );//Create some geometrical shapes.//LINE SEGMENT //The following code can be used to draw a line// segment. //Set the values of the first two parameters// following ns to specify the x and y coordinates of // one end of the line segment.//Set the final two parameters to specify the other // end of the line segment.//By default the line segment (the stroke) is one // pixel wide and black.//You can insert as many statements of this type as // you need, one for each line segment.//Give each line segment a unique name such as lineA, // lineB, lineC, etc.//Don't make any other changes to the code, and in // particular, don't delete the commas.//The line segment drawn by the following statement // extends from the lower-left to the upper-right// corner of the canvas. Element lineA = SvgLib21.makeLine(svg,ns, "line",0, 0,8.5, 11.0); //RECTANGLE//The following code can be used to draw a // rectangle whose sides are parallel to the// horizontal and vertical axes. //Set the values of the first two parameters// following ns to specify the x and y coordinates of // the lower-left corner of the rectangle.//Set the final two parameters to specify the width // and height of the rectangle.//By default the outline of the rectangle (the stroke) // is one pixel wide and black.//You can insert as many statements of this type as // you need, one for each rectangle.//Give each rectangle a unique name such as rectA, // rectB, rectC, etc.//Don't make any other changes to the code. //The rectangle drawn by this statement barely fits// inside the 8.5x11 inch canvas with a portrait // layout.Element rectA = SvgLib21.makeRect(svg, ns,"rectangle",0.05, 0.05,8.4, 10.9); //CIRCLE//The following code can be used to draw a circle. //Set the first two parameters following ns to// specify the x and y coordinates of the center of // the circle.//Set the third parameter to specify the radius of // the circle.//By default the outline of the circle (the stroke) // is one pixel wide and black.//You can insert as many statements of this type as // you need, one for each circle.//Give each circle a unique name such as circleA, // circleB, circleC, etc.//Don't make any other changes to the code. // The circle drawn by this statement is centered in// the canvas. The radius is slightly less than half // the width of the canvas.Element circleA = SvgLib21.makeCircle(svg, ns,"circle", 4.25,5.5, 4.15); //ELLIPSE//The following code can be used to draw an ellipse // whose major and minor axes are parallel to the// horizontal and vertical axes. //Set the first two parameters following ns to// specify the x and y coordinates of the center of // the ellipse.//Set the third parameter to specify the horizontal // radius of the ellipse.//Set the fourth parameter to specify the vertical // radius.//By default the outline of the ellipse (the stroke) // is one pixel wide and black.//You can insert as many statements of this type as // you need, one for each ellipse.//Give each ellipse a unique name such as ellipseA, // ellipseB, ellipseC, etc.//Don't make any other changes to the code. //The ellipse drawn by this statement is centered in// the canvas. It is two inches wide and one inch // high.Element ellipseA = SvgLib21.makeEllipse(svg, ns,"ellipse", 4.25,5.5, 1.0,0.5 );//POLYLINE//The following code can be used to draw a polyline, // which is a line constructed from a set of line// segments that extend from one set of x,y // coordinate values to the next set of x,y// coordinate values. //This is the most versatile of all of the shapes.// With enough patience, it can be used to draw any // shape that can be drawn with curved lines. To// draw a curved line, approximate it using a large // number of short line segments.//Insert any number of x,y coordinate-pairs inside // the curly brackets.//By default, the polyline is black with a line width // (thickness) of one pixel.//You can insert as many statements of this type as // you need, one for each polyline.//Give each polyline a unique name such as polylineA, // polylineB, polylineC, etc.//Don't make any other changes to the code. //The polyline drawn by the coordinate values used// here consists of two line segments that form two // sides of a triangle with the third or top side// missing. Element polylineA = SvgLib21.makePolyline(svg, ns,"polyline", new double[]{ 3.25,4.02,4.25,3.01, 5.25,4.02}); //POLYGON//The following code can be used to draw a polygon, // which is like a polyline except that an extra line// is automatically drawn to connect the last point // to the first point. You can use a polygon to draw// any closed shape. //For example, you could use a polygon to draw a// rectangle whose sides are not parallel to the // horizontal and vertical axes, or an ellipse whose// axes are not parallel to the horizontal and // vertical axes.//Insert any number of x,y coordinate-pairs inside // the curly brackets.//By default, the polygon is black with a line // thickness of one pixel.//You can insert as many statements of this type as // you need, one for each polygon.//Give each polygon a unique name such as polygonA, // polygonB, polygonC, etc.//Don't make any other changes to the code. //The polygon drawn by the coordinate values used// here draws two line segments that form two sides of // a triangle with the third or top side being// automatically drawn. Element polygonA = SvgLib21.makePolygon(svg,ns, "polygon",new double[]{3.25,8.02, 4.25,7.01,5.25,8.02 });//TEXT //The following code can be used to add one line of// text to the drawing. //Set the values of the first two parameters// following ns to specify the x and y coordinates of // the bottom left corner of the first letter in the// line of text. //Set the third parameter following ns to the name of// the font family. If no name or an invalid name is // entered between the quotation marks, a default// font family will be used. //Set the fourth parameter following ns to the// desired size of the text in points. //Set the last parameter to the string of text that// is to be drawn. //By default the text is normal (not bold, not// italic, etc.). //You can insert as many statements of this type as// you need, one for each line of text. //Give each line of text a unique name such as textA,// textB, textC, etc. //Don't make any other changes to the code.//The line of text drawn by the following statement // is positioned 2.125 inches from the left edge of// the canvas one inch up from the bottom. //The bold italic decoration will be applied later.Element textA = SvgLib21.makeText( svg,ns, 2.125,1.00, "arial",36, "Here is some bold italic text.");//Decorate the objects in the drawing.//FONT STYLE //The following code can be used to set the font// style to normal | italic | oblique where // the | character means you must specify one of the// choices as a parameter. //Set the value of the first parameter to the name of// the line of text being modified. //Set the value of the second parameter to one of the// available choices. //Each time you call this method, you must pass a// reference to an existing text object as the first // parameter.//Don't make any other changes to the code. //The following statement changes the style of textA// from normal to italic. SvgLib21.setFontStyle(textA,"italic" );//FONT WEIGHT//The following code can be used to set the font // weight to normal | bold | bolder | lighter | 100 |// 200 | 300| 400 | 500 | 600 | 700 | 800 | 900 // where the | charactermeans you must specify one // of the choices as a parameter.//Set the value of the first parameter to the name of // the line of text being modified.//Set the value of the second parameter to one of the // available choices.//Each time you call this method, you must pass a // reference to an existing text object as the first// parameter. //Don't make any other changes to the code.//The following statement statement changes the // weight of textA from its previous weight to bold.SvgLib21.setFontWeight(textA, "bold"); //LINE WIDTH//The following code can be used to specify the // stroke (line) width for rectangles, circles,// ellipses, lines, polylines, and polygons. //Set the value of the first parameter to the name of// the object whose line width is being modified. //Set the second parameter to the value of the// desired line width in inches. //Each time you call the method, you must pass a// reference to an existing object as the first // parameter//Don't make any other changes to the code. //Note that when you increase the thickness of a line,// the original one-pixel line remains in the center // of the new thicker line. In other words, the// thickness of the line increases on both sides of // the original line.// The following statement changes the line width of// the rectangle to 0.1 inch. SvgLib21.setStrokeWidth(rectA,0.1);// The following statement changes the line width of // the ellipse to 0.25 inch.SvgLib21.setStrokeWidth(ellipseA,0.25); // The following statement changes the line width of// the polyline to 0.15 inch. SvgLib21.setStrokeWidth(polylineA,0.15);// The following statement changes the line width of // the polygon to 0.15 inch.SvgLib21.setStrokeWidth(polygonA,0.15); // The following statement changes the line width of// the line to 0.1 inch. SvgLib21.setStrokeWidth(lineA,0.1);// The following statement changes the line width of // the circle to 0.1 inch.SvgLib21.setStrokeWidth(circleA,0.1);//With the exception of the code to write the output // file, the following code may not be of interest// to blind students. However, it may be of interest // to students with low vision, so I am including it// for completeness.//STROKE OPACITY //The following code can be used to specify the// stroke opacity for rectangles, circles, ellipses, // lines, polylines, and polygons.//Set the value of the first parameter to the name of // the object whose stroke opacity is being modified.//Set the second parameter to the value of the // desired opacity level. A value of 0.0 causes the// stroke to be totally transparent. A value of 1.0 // causes the stroke to be completely opaque. Values// between 0.0 and 1.0 result in a proportional // opacity level.//Each time you call the method, you must pass a // reference to an existing object as the first// parameter //Don't make any other changes to the code.//The following statement changes the line to be //40-percent opaque, or 60-percent transparent,// whichever you prefer. SvgLib21.setStrokeOpacity(lineA,0.4);//FILL COLOR //The following code can be used to specify the fill// color for closed shapes such as rectangles, // circles, ellipses, and polygons. It can also be// applied to polylines, but the results may not be // what you expect.//Set the value of the first parameter to the name of // the object whose fill color is being modified.//Set the second parameter to the name of the desired // color. The fill color can be set to "none" or to// the name of any of the colors at // http://www.w3.org/TR/SVG/types.html#ColorKeywords,// and possibly some other values as well. //Each time you call the method, you must pass a// reference to an existing object as the first // parameter//Don't make any other changes to the code. //The following statement changes the fill color for// the polygon from its previous fill color to dark // blue.SvgLib21.setFill(polygonA,"blue"); //FILL OPACITY//The following code can be used to specify the fill // opacity for rectangles, circles, ellipses,// polylines, and polygons. (As with fill color, it // might not work as expected with polylines.)//Set the value of the first parameter to the name of // the object whose fill opacity is being modified.//Set the second parameter to the value of the // desired opacity level (see the discussion regarding// opacity values above). // Each time you call the method, you must pass a// reference to an existing object as the first // parameter//Don't make any other changes to the code. //The following statement changes the dark blue fill// for the polygon to become only 30-percent opaque. // Because the background underneath the fill is// white, this causes the visible color of the fill // to change to a light blue.SvgLib21.setFillOpacity(polygonA,0.3); //STROKE COLOR//The following code can be used to specify the // stroke color for rectangles, circles, ellipses,// lines, polylines, and polygons. //Set the value of the first parameter to the name of// the object whose stroke color is being modified. //Set the second parameter to the name of the desired// color. (See the discussion of available colors // above.)//Each time you call the method, you must pass a // reference to an existing object as the first// parameter. //Don't make any other changes to the code.//The following statement changes the stroke color // for the polygon from its previous color to red.SvgLib21.setStroke(polygonA,"red"); //WRITE OUTPUT FILE//The following code can be used to write an output // file containing the instructions needed by an svg// processor (such as a browser) to display the // drawing.//This must be the last statement that you write in // your program. Otherwise, you will get an// incomplete file. //Set the value of the first parameter to the desired// path and name for the file. Always specify the // extension to be svg.//Don't make any other changes to the code. //The following code writes the output file with the// name Svg21.svg in the folder from which the // program is being executed (the current folder).//Don't include extension in output file name. SvgLib21.writePrettyFile("Svg21",doc);//ONLY THE CODE ABOVE THIS LINE CAN BE MODIFIED//##################################################// //DO NOT MODIFY ANY OF THE FOLLOWING CODE.}//end main //----------------------------------------------------////Create a String variable containing the namespace // URI to reduce the amount of typing that is required// later. Note that the variable name is short and // easy to type.static String ns = "http://www.w3.org/2000/svg";//For clarity, create strings containing the name of // the element that is constrained by the DTD (the// root element), the Public ID of the DTD, and the // System ID of the DTD.static String dtdConstrainedElement = "svg"; static String dtdPublicID = "-//W3C//DTD SVG 1.1//EN";static String dtdSystemID = "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";static DocType docType = new DocType(dtdConstrainedElement,dtdPublicID,dtdSystemID); }//end class Svg21

Miscellaneous

This section contains a variety of miscellaneous information.

Housekeeping material
  • Module name: If You Can Imagine It, You Can Draw It using SVG
  • File: Phy1002.htm
  • Revised: 09/29/15
  • Keywords:
    • physics
    • accessible
    • accessibility
    • blind
    • graph board
    • protractor
    • screen reader
    • refreshable Braille display
    • JavaScript
    • trigonometry
    • SVG
    • scalable vector graphics
Disclaimers:

Financial : Although the openstax CNX site makes it possible for you to download a PDF file for the collection that contains thismodule at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should beaware that some of the HTML elements in this module may not translate well into PDF.

You also need to know that Prof. Baldwin receives no financial compensation from openstax CNX even if you purchase the PDF version of the collection.

In the past, unknown individuals have copied Prof. Baldwin's modules from cnx.org, converted them to Kindle books, and placed them for sale on Amazon.com showing Prof. Baldwin as the author.Prof. Baldwin neither receives compensation for those sales nor does he know who doesreceive compensation. If you purchase such a book, please be aware that it is a copy of a collection that is freelyavailable on openstax CNX and that it was made and published without the prior knowledge of Prof. Baldwin.

Affiliation : Prof. Baldwin is a professor of Computer Information Technology at Austin Community College in Austin, TX.

-end-

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Accessible physics concepts for blind students. OpenStax CNX. Oct 02, 2015 Download for free at https://legacy.cnx.org/content/col11294/1.36
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Accessible physics concepts for blind students' conversation and receive update notifications?

Ask