Computer-aided design/Software

Part of:

Introduction

We will discuss how a CAD software works. We will even create our own 2D CAD, ... well sort of ...

Main CAD building blocks

Database

Typically CAD software is built upon some database stored in the hard disk. From the user's point of view it is a file. CAD objects such as a line or circle, however, are stored as structured records. The CAD engine has implemented methods for fast data retrieval and storage.

Object model

Data is read from the hard disk into memory RAM as an object model. Each graphical element is represented as an object. Changes are made by manipulating these objects in RAM. And then stored in the database on permanent storage such as the hard disk.

Modeling kernel

The modeling kernel is a set of methods generally programmed in a low level programming language such as C. Libraries contain methods for creating graphical objects (draw line, extrude, etc.) as well manipulating them (rotate, join, union, etc.). These operations are mainly based on parametric equations and due to the number of objects and vertexes are often time consuming. Since these arithmetical operations are running in the computer's CPU, computers used for CAD tend to have high end processors.

Visualization

Objects are displayed on screen. Visualization, especially 3D graphics, consumes a lot of resources, memory, and processor time. 3D geometry, transparency, light and shadow, fog, different material properties, etc. all must be taken into account when calculating a scene. Simplified views shown during on-screen part rotation must even be calculated several times a second. To ease the burden and speed up operations, the visualization layer is distributed between the CPU and GPU (graphics card). DirectX and OpenGL APIs are used. The GPU is specially designed for processing images, so CAD visualization layers are increasingly being designed to take advantage of graphics card capabilities.

Tasks to do

As good engineers, we will create a simple CAD from cheap and widely available components. Quite probably you have them already installed.

We will use:

Text file as the database.
Database records must have some defined structure, we will use SVG for this purpose.
Text or XML editor to create and change records.
SVG enabled browser such as Firefox or Opera to read SVG file and to view it.

To:

Understand SVG basics and create really simple vector graphics.
Manipulate SVG in memory i.e. change DOM dynamically
Create GUI to interact with user using ECMAScript (JavaScript)

... and to "program" a 2D "CAD" in three simple steps

You will need

Browser with SVG support like Mozilla Firefox or Opera
Any text editor as Notepad will be sufficient. However XML editor will make your editing easier.

Lesson

Step One - Draw Line

Let's start with something simple, very simple. We will draw SVG line from point 0,0 to 100,100. SVG is a standard defined by W3C Consortium. We will use W3C SVG 1.1 reference, especially line definition and examples. Write following code using any text editor such as Notepad.

<?xml version="1.0"?>
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black"/>
 </svg>

... save it as a text file, for example linetest.svg. Open it in browser and ... you should see the line.

Although XML is almost self explainable and you probably have got the idea, let's comment the example a little.

First line <?xml version="1.0"?> defines that structure is XML, and you must follow the rules like "every element has name, element must be enclosed in <>, element must be closed, element can have attributes ..."
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> means that SVG standard is used and graphics will be displayed in 200x200 square.
<line x1="0" y1="0" x2="100" y2="100" stroke="black"/> means "draw black line from point 0,0 to point 100,100"

Play with SVG commands a little. For example cross the thin black line (you already have) with thick blue line. To achieve this, just add one line to text file and reopen it in browser (reload works, too). Use above mentioned SVG reference and examples.

Your text should look like this:

<?xml version="1.0"?>
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black"/>
  <line x1="0" y1="100" x2="100" y2="0" stroke="blue" stroke-width="2"/>
 </svg>

If you do not see lines as depicted above, check if your browser has SVG support (in the case of MS IE, you need to have a SVG plugin installed such as Adobe). Also check if your text is valid XML-SVG document, for example all elements must be closed (<XXX>...</XXX>), double check mistypings...

If everything works, let's extend our example a little and create something more fancy to get acquainted with SVG capabilities. Just a few tips:

add a rectangle and a overlapping circle
fill them with RGB color
make one of them transparent
add some descriptive text
rotate the rectangle
draw a curve (path)

Step Two - Use DOM and JavaScript to manipulate XML dynamically

We will use JavaScript to create a line dynamically in memory. Similarly as in the big CAD systems (instead of JavaScript C language is usually used, objects look differently, but principles are the same).

<?xml version="1.0"?>
<svg
 id="svgarea" 
 onload="createRandomBlueLine()" 
 xmlns="http://www.w3.org/2000/svg" 
 width="200" 
 height="200"
 >
	<script type="text/ecmascript"><![CDATA[
		var svgNS = "http://www.w3.org/2000/svg";
		function createRandomBlueLine() {
			var newUseEl = document.createElementNS(svgNS,"line");
			newUseEl.setAttributeNS(null,"x1",Math.random() * 200);
			newUseEl.setAttributeNS(null,"y1",Math.random() * 200);
			newUseEl.setAttributeNS(null,"x2",Math.random() * 200);
			newUseEl.setAttributeNS(null,"y2",Math.random() * 200);
			newUseEl.setAttributeNS(null,"stroke-width","1");
			newUseEl.setAttributeNS(null,"stroke","blue");
 			document.getElementById("svgarea").appendChild(newUseEl);
		}
	]]></script>
</svg>

... again save this code as text file, and open it in your browser. You should see the blue line. After refresh or reopening you should observe lines in random directions and lengths.

Let's look at the code again. There is svg root element similar as in previous static example. But it has additional attribute onload="createRandomBlueLine()", meaning "Immediately after text file content is loaded call function that will create blue line with random length and direction". There is also another new attribute id="svgarea". This attribute is an identifier which is used to locate the correct element in the tree. In our simple example, where we have only one element it has no obvious meaning, but the tree can be quite large and searching can be quite long. Worse than that, there can be more elements with the same tag (name) and the program might not easily decide with which element it should work. The ID must be unique in the scope of XML document and so the ID fully identifies one element. We will use this identifier later to address svg element in JavaScript function.

JavaScript function createRandomBlueLine(). When browser reads XML from file, it also creates objects and places them into tree structure. This process takes place in computer memory. Objects and tree structure is called DOM. Root DOM object is called document. That is why var newUseEl = document.createElementNS(svgNS,"line"); will create new element with tag line as a part of document object. Now we can enhance our new element line. Command newUseEl.setAttributeNS(null,"x1",Math.random() * 200); creates attribute x1 with calculated random value. Similar result you can get by writing <line x1="123"/> in XML document. Next few lines in JavaScript function just adds few more attributes with random or fixed values. Last command document.getElementById("svgarea").appendChild(newUseEl); finds element by its identifier (in our case it is element <svg id="svgarea" ...>) and places newly created element (line) to correct place in the tree (as a child of svg element).

If you will think about this small example a little more, you could see, that XML is parsed from text to memory representation called DOM and you can see the way, how to manipulate it using programming language. Try to add an error for example add unclosed element for example one line with <x>. You should see error message after trying to display it in the browser. What happened? Browser tried to create DOM, but failed due to syntax errors. Further execution was stopped, while without valid DOM all other tasks does not make sense.

If everything works, we can enhance our example to RSCAD (Really Simple CAD). We will add functionality, that will enable user interactions.

Step Three - Add menu and user input

The code that will do the trick is:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
	<script type="text/ecmascript"><![CDATA[
		var svgNS = "http://www.w3.org/2000/svg";
		function createRandomBlueLine() {
			var newUseEl = document.createElementNS(svgNS,"line");
			newUseEl.setAttributeNS(null,"x1",Math.random() * 500);
			newUseEl.setAttributeNS(null,"y1",Math.random() * 500);
			newUseEl.setAttributeNS(null,"x2",Math.random() * 500);
			newUseEl.setAttributeNS(null,"y2",Math.random() * 500);
			newUseEl.setAttributeNS(null,"stroke-width","1");
			newUseEl.setAttributeNS(null,"stroke","blue");
 			document.getElementById("drawGroup").appendChild(newUseEl);
		}
		function createLine() {
			var newUseEl = document.createElementNS(svgNS,"line");
			var x1 = prompt('1st point X','10');
      			var y1 = prompt('1st point Y','10');
			var x2 = prompt('2nd point X','100');
      			var y2 = prompt('2nd point Y','100');
      			var color = prompt('Stroke color','black');
			newUseEl.setAttributeNS(null,"x1",x1);
			newUseEl.setAttributeNS(null,"y1",y1);
			newUseEl.setAttributeNS(null,"x2",x2);
			newUseEl.setAttributeNS(null,"y2",y2);
			newUseEl.setAttributeNS(null,"stroke-width","1");
			newUseEl.setAttributeNS(null,"stroke",color);
 			document.getElementById("drawGroup").appendChild(newUseEl);
		}
	]]></script>
	<g id="menuGroup">
		<text x="10" y="30" font-size="12px">Click to draw:</text>
		<text x="25" y="45" onclick="createRandomBlueLine()" font-size="14px">- random line</text>
		<text x="25" y="60" onclick="createLine()" font-size="14px">- line</text>
	</g>
	<g id="drawGroup" transform="translate(150,10)">
		<rect x="0" y="0" width="650" height="590" fill="none" stroke="black" stroke-width="1"/>
		<text x="0" y="0" font-size="10px">0,0</text>
		<text x="500" y="0" font-size="10px">500,0</text>
		<text x="0" y="500" font-size="10px">0,500</text>
	</g>
</svg>

Copy this code to file, for example rscad.svg and open it in the browser.

Explanations and hints: We added new SVG element <g id="menuGroup">. This is group element that groups several elements together. Attribute transform="translate(150,10)" then transforms all X,Y coordinates in the group. SVG text element <text x="25" y="60" onclick="createLine()"> display text and calls JavaScript function createLine() when user clicks on the displayed text. JavaScript command var x1 = prompt('1st point X','10'); then displays edit box and stores value to variable. Variable is then used to set attribute values of line SVG element.

Result should look like this

Now we have really simple CAD. You can even use it for some real tasks. However you will probably use server-side technology like PHP and Apache, you will probably create menu not as SVG text, but HTML menus instead, but in general, principle will remain the same.

Tasks to do

Study the example and play with it. Then try to enhance it. Add functions and menu entries for:

rectangle (filled, RGB colors, transparency)
circle
polygon
dimension (line, arrows and dimension text)

and (not so easy) functions as Move, Copy and Delete.

If you will have something valuable, do not hesitate to place it here, so that others can be inspired by your example.

Achievements

You have a basic understanding of how CAD software is made and how it works. More than that, you can even create your own simple 2D CAD and show it on Internet.