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

Questions & Answers

What are the factors that affect demand for a commodity
Florence Reply
differentiate between demand and supply giving examples
Lambiv Reply
differentiated between demand and supply using examples
Lambiv
what is labour ?
Lambiv
how will I do?
Venny Reply
how is the graph works?I don't fully understand
Rezat Reply
information
Eliyee
devaluation
Eliyee
t
WARKISA
hi guys good evening to all
Lambiv
multiple choice question
Aster Reply
appreciation
Eliyee
explain perfect market
Lindiwe Reply
In economics, a perfect market refers to a theoretical construct where all participants have perfect information, goods are homogenous, there are no barriers to entry or exit, and prices are determined solely by supply and demand. It's an idealized model used for analysis,
Ezea
What is ceteris paribus?
Shukri Reply
other things being equal
AI-Robot
When MP₁ becomes negative, TP start to decline. Extuples Suppose that the short-run production function of certain cut-flower firm is given by: Q=4KL-0.6K2 - 0.112 • Where is quantity of cut flower produced, I is labour input and K is fixed capital input (K-5). Determine the average product of lab
Kelo
Extuples Suppose that the short-run production function of certain cut-flower firm is given by: Q=4KL-0.6K2 - 0.112 • Where is quantity of cut flower produced, I is labour input and K is fixed capital input (K-5). Determine the average product of labour (APL) and marginal product of labour (MPL)
Kelo
yes,thank you
Shukri
Can I ask you other question?
Shukri
what is monopoly mean?
Habtamu Reply
What is different between quantity demand and demand?
Shukri Reply
Quantity demanded refers to the specific amount of a good or service that consumers are willing and able to purchase at a give price and within a specific time period. Demand, on the other hand, is a broader concept that encompasses the entire relationship between price and quantity demanded
Ezea
ok
Shukri
how do you save a country economic situation when it's falling apart
Lilia Reply
what is the difference between economic growth and development
Fiker Reply
Economic growth as an increase in the production and consumption of goods and services within an economy.but Economic development as a broader concept that encompasses not only economic growth but also social & human well being.
Shukri
production function means
Jabir
What do you think is more important to focus on when considering inequality ?
Abdisa Reply
any question about economics?
Awais Reply
sir...I just want to ask one question... Define the term contract curve? if you are free please help me to find this answer 🙏
Asui
it is a curve that we get after connecting the pareto optimal combinations of two consumers after their mutually beneficial trade offs
Awais
thank you so much 👍 sir
Asui
In economics, the contract curve refers to the set of points in an Edgeworth box diagram where both parties involved in a trade cannot be made better off without making one of them worse off. It represents the Pareto efficient allocations of goods between two individuals or entities, where neither p
Cornelius
In economics, the contract curve refers to the set of points in an Edgeworth box diagram where both parties involved in a trade cannot be made better off without making one of them worse off. It represents the Pareto efficient allocations of goods between two individuals or entities,
Cornelius
Suppose a consumer consuming two commodities X and Y has The following utility function u=X0.4 Y0.6. If the price of the X and Y are 2 and 3 respectively and income Constraint is birr 50. A,Calculate quantities of x and y which maximize utility. B,Calculate value of Lagrange multiplier. C,Calculate quantities of X and Y consumed with a given price. D,alculate optimum level of output .
Feyisa Reply
Answer
Feyisa
c
Jabir
the market for lemon has 10 potential consumers, each having an individual demand curve p=101-10Qi, where p is price in dollar's per cup and Qi is the number of cups demanded per week by the i th consumer.Find the market demand curve using algebra. Draw an individual demand curve and the market dema
Gsbwnw Reply
suppose the production function is given by ( L, K)=L¼K¾.assuming capital is fixed find APL and MPL. consider the following short run production function:Q=6L²-0.4L³ a) find the value of L that maximizes output b)find the value of L that maximizes marginal product
Abdureman
Got questions? Join the online conversation and get instant answers!
Jobilize.com Reply

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