Help for the Triangle Solver

1 Enter your data

Enter any combination of three angles or sides, in an order that makes sense for the problem at hand. If two angles (and no sides) are entered, then the triangle is still solved: for this case, and for the three-angles-entered case, side A becomes one unit long by default.

Illegal starting points are detected, such as any angle greater than 180°, sum of angles greater than 180°, negative angles, the sum of two sides shorter than (or equal to) the other side, etc.

2 Solve the triangle

Once your data is entered, push the “Calculate” button. The answers will appear and the triangle will be drawn to scale. If the triangle would be too narrow to render well in the drawing area, one dimension, width or height, is squashed: both the background grid and the notation at the lower left reflect this condition. This is the default behaviour, see section 4, below, for an option to disable the scaling. Note that any squashing is always by an integer value, although if the factor is high it may not be visible on the background grid. Any input values considered to be in error are highlighted in red, and a corresponding error message below the drawing will indicate the problem. Solved values are shown with a blue background.

The solver's menu should stay out of the way of any data points: it chooses a position, either top left to top right, as needed. If desired, the “<=>” button can be used to move it to the opposite side.

3 Make any changes

If changes are to be made on the input data, it is often quicker to delete the solutions by pressing the “Clear Answers ” button, editing what needs to be changed, then pushing the “(re) Calculate” button.

If the orientation of the triangle is not as desired, the horizontal base can be made to be any of the sides by clicking on one of the “CW” (rotates the triangle clockwise by an angle of 180-a) or “CCW” (counter clock wise by an angle of 180-b) buttons as needed. These buttons simply rotate the input data and cause a new solution to be found. (One side is always horizontal, even though sometimes it is useful to have a side drawn vertically, but that is one thing that the program does not do!) This facility can also aid if display scaling is making the triangle hard to visualize.

4 The setup button

When the setup button is clicked, a whole set of possibilities is presented. In order, top to bottom, the choices are:

1. The angular measurement system can be changed from the default degrees to radians or grads. Conversions between units are automatic, however the converted angles are NOT truncated down to any particular number of decimal points;
2. The presence or absence of the angle represented as % grade. This only applies to angles a and b and only when each angle is 45° or less. (If angle c is wanted as a slope, then the triangle can be rotated.)
3. The labels used for the lengths of the sides can be changed from the generic “Units ” to anything else that you can type (whether it makes sense or not) in 10 characters. No units conversion will ever take place for the lengths;
4. For woodworkers using imperial measurements, working in fractions is common. The calculator can now handle fractions on input and/or output. On input, when the “Allow fractions in:” is checked (by default it is checked) sides can be entered as a whole number + or - a fraction, e.g. 3 3/4 (a blank is seen as a plus), or just a fraction, e.g. 6/4. Currently all such numbers ar converted to decimal and will stay as decimals. To show results as fractions, check the “Show fractions out:” box. Fractions can be shown as quarters, eigths, sisteenths or thirty-seconths by selecting one of the radio buttons at the bottom of this section. Fractions are not simplified: e.g. 12/16 will stay as that: not be simplified to 3/4.
5. The precision of the displayed results can be changed to anything in the range 0...4 decimal digits (1 is the default);
6. The height of the area where the triangle is drawn can be changed from the default 415 pixels up as large as 9,999 pixels (may be slow loading!). The width remains constant at 585 pixels;
7. A box can be checked which turns on the display of a short report of the steps taken to solve the triangle (default: off);
8. Another check box allows the automatic scaling to be turned off: if you really want to see what a 0.1° angle looks like, you can. Note that any triangle solutions are still drawn to best fit whatever the drawing area size is set to: just that their X and Y scalings will now be equal. (Default is scaling on.)
9. The upper of the three buttons at the bottom of the setup menu, “Solve with new setup...,” has the same effect as pushing the “Clear Answers” and then the “(re) Calculate” buttons on the main menu. The Setup menu does not close, allowing one to try various ideas.
10. The middle of the three buttons causes the initial settings to be restored.
11. The bottom button is the same as the “X” at the top right.

The setup box can be moved around by clicking on and dragging its title bar, and it can be dismissed by clicking on the usual 'X' in the top right of the box. Note, however, that any changes made will take effect even if the box is dismissed!

5 Some examples

NOTE: All of these examples use the default settings.

1. Enter 1, 1 and 1 for the sides. An equilateral triangle is produced. Easy, right?;
2. Enter 3, 4 and 5 for the sides in any order you wish. A right triangle is produced. The 90° angle is indicated by the usual square at the corner (but it is not always drawn as a square: if it is angle c that is 90° and if horizontal or vertical scaling is in effect, then the corner square's shape is adjusted);
3. Enter 90° for an angle and 3 and 4 for the two adjacent sides. (Or, said another way, enter two sides of 3 and 4 units and enter the included angle as 90°.) The same triangle as in #2 is produced, but this time the side of length 5 (the hypotenuse) has been solved;
4. Enter 45° at two of the angles and nothing else. Four values are solved: a right triangle with side A fixed at 1.0 is produced.
5. It is desired to find the height of a tree. The only measurements that can be made are the angle to the top of the tree of 51.5°, measured at a distance along the ground from the trunk of 4 m. However the land is not flat: the slope is 10% [Note 1] and the measurements were made down-slope from the trunk.
   1. First we have to find the angle of the slope: enter 90 for angle b, 100 for side C and 10 for side A. Press the “Calculate” button to get 5.7° for the slope.
   2. Now, clear all by pressing the “Clear” button and then enter 95.7° (90 + 5.7) for angle a, 51.5° for angle B and 4 for distance C. Press the “Calculate” button to see that the tree is 5.8 m high.
6. A (non HDTV) television is said to be 22 inches. (This refers to the diagonal measurement.) For whatever reason, it is only possible to measure the width. The following steps will allow you to check the diagonal:
   1. Enter 3 for side A, 4 for side C and 5 for side B (or instead of the last, you could enter 90° for angle b). (A standard TV screen is 4:3 ratio in width to height.);
   2. Click on the “Calculate” button;
   3. Delete the numbers at all three sides, and enter the width measurement made at side C. (Lets assume that this measurement was 17.5.);
   4. Click on the “(re) Calculate” button;
   5. The solution for the diagonal, 21.9 is close to what the screen size is supposed to be, so you probably aren't being cheated.
7. A road sign informs a cyclist that the grade is 35% (he is riding in Duneidin NZ, see this link ). What angle is that, and how much elevation might be gained for a ride (or crawl) of 100 feet?
   1. Since we will be using feet, click on the “Setup” button and enter 'ft' in the “Side unit labels” box [Note 2]. As well, click the “Show % grade” checkbox. Hide the Setup menu by clicking on its top-right X;
   2. Similar to the first part of example 5, enter 90°, 100 for the run and 35 for the rise. The “(re) Calculate” button will produce an angle of 19.3° (!). The grade should be indicated;
   3. Now that we have the basic triangle, distances can be changed: delete all three lengths with the mouse and delete key. To see how much elevation is gained for a ride of 100 ft enter 100 for side B and click the “(re) Calculate” button again: you should see side A, the elevation gain is now 33.1 ft. The grade is the same because the triangles are similar.

[Note 1]: % grade is not a unit of angular measurement: instead it is the ratio of rise over run, times 100. So, for a given % grade, that number is equal to the rise for a 100 unit run. For a long time I struggled under the miscomprehension that grads were used for grade!
[Note 2]: the length units can be entered into the Setup box as desired. If you want furlongs, use furlongs! The value of the string entered in the box has absolutley no affect on the calculations, it is just a label.

6 Known bugs

• It is possible to enter data that over-specifies a triangle, and if some of that data is inconsistent, then error messages can result. Or worse, some such conditions can go un-noticed, returning a triangle that appears to be correct, but is not. This can only happen when 4 or more entries are made: a warning is issued when 4 or more values are entered.
• It is possible, under some conditions, to provide data which specifies TWO triangles. The program presently only supplies one solution. A partial fix has been implemented such that a warning is generated, as well an impossible triangle is caught. The problem is nicely shown at the Wikipedia entry on the law of sines .
• If something that is not a number is entered, then all bets are off: inputs are assumed to be numeric. Fractions, however are now OK.
• For some reason I used upper case letters (A, B, C) for the side (lengths) and lower case for the angles when the opposite is the convention. I really should fix this!
• Not really a bug, but a consequence of using the AJAX methodology is that the browser's back button will not get you to previous states. This is a general problem with the AJAX methodology. There are ways to deal with this (by providing one's own back button, mostly) but this will need to await further development.
• The setup box can be made to scroll out of the viewport, either on the left or the top of the browser's window. If this is seen to be happening it can be brought back if the mouse button has not been released, or if the mouse button has been released, just click on the “Setup” button again.

1 Introduction

This is a fairly complex program in that it uses both PHP and JavaScript to solve any valid triangle and draw the results, scaled if necessary to fit the window. As well, the PHP is split over four files just to make things interesting! These are:

• the file behind the initially loaded page, tri_intro.php;
• the code that is called by JavaScript (indirectly, via an “onclick” which is attached to the Calculate button): tri_solve.php;
• the program which draws the image, tri_draw.php;
• a package of subroutines which calculate the positions of the triangle's vertices, calculate the side and angle label positions, and solve the triangle. These are called by either tri_intro (the first time) or tri_solve (subsequent times), and are contained in the file triphp.php.

2 The AJAX aspects

Well, maybe it isn't full AJAX, since I'm not using XML, just returning the contents of a <div> to be substituted. (But if the X can stand for XHTML instead then it is AJAX since XHTML is written in XML!) But the JS XMLHttpRequest() [or an MS cousin, as needed] is used, asynchronously, and that can be considered the heart of AJAX.

AJAX is really about JavaScript. The JavaScript behind this application is in the file trijs.inc. It has a large number of functions, from the mundane to the complex. These can be divided into three areas:

• those that implement the various control functions in both menu and setup box, e.g. clearing data;
• those that handle the “drag and drop” (drag only, really) of the setup menu;
• those that effect the AJAX: communicating with the server to get the results.

3 The GD portion

The image (the triangle and grid, with the notation describing any scaling, as needed) is created on the server by a PHP program using the GD package. (GD used to stand for gif draw, but is now more usually thought of as graphics draw.) Go to the PHP documentation  (or your local mirror of the same) for more information about this powerful library.

Note that the image production is not part of the AJAX concept: the code which initiates the drawing of the image (for a solution: the initial call is hard-coded into tri_init.php) is sent to your browser by means of AJAX, but that is the extent of it: the browser then uses its standard get-an-image functionality to get the image data.