Weight and Balance Calculator
for
Cessna 172 N2374U

This section is all about the 1963 Cessna 172 that I own.

Weight & balance calculator

Below is a weight and balance calculator for 74U. To use it, type in weights (in pounds) in the left-hand column of text boxes, then click "Calculate", and you should see the cross on the weight/balance graph move.

Important safety note: I use this calculator for doing weight and balance calculations before flying N2374U, but you should be aware that this calculator is specific to that particular aircraft. The answers it gives are not applicable to any other aircraft (not even other C172's). It illustrates the principles of how the calculation is done, but you must use the data taken from the POH of your particular aircraft.

Note: If you're using Opera 7, you may find that it has a browser bug where the cross won't move unless you resize your window slightly.

How does it work?

I get lots of emails from people asking me how the calculator works, and whether they can re-use it on their own sites. The answer is "yes" - you're free to re-use the code at your own risk and adapt it for your own aircraft. All I ask is that you include a link to this page and credit me as the original author of the calculator.

My aim when writing the calculator was to implement it using the least amount of web technology possible, so that it should work in as many browsers and on as many different platforms as possible. There are no Java applets or server-side components involved at all.

The calculator uses just two technologies: Javascript, and CSS. Both of these should be available on 99% of modern browsers, and because it's all client-side code the calculator works without the need for any round-trips to the web server.

Essentially, it all works using two images. The first image is a diagram of the weight and balance envelope, created using an ordinary graphics package and carefully copied from G-BSEP's POH. If you adapt the calculator for your own use, you will need to create your own envelope diagram using data for your own aircraft.

The envelope diagram is housed inside an HTML div, and forms the "background-image" of the div. The size of the div is manually set to match the size of the envelope diagram.

Now the clever bit. The crosshair is simply a transparent GIF that lives inside the envelope div. You can steal this image if you want (but please host it on your own server - don't just link to it). The crucial thing is that I've used CSS to give this a "position: relative" attribute. This takes the image out of the normal HTML document flow, and allows it to be repositioned dynamically by script.

Here's a simplified version of the HTML code, with the CSS styles included in the HTML code for clarity. In reality, you'd probably want to put the CSS styling into a separate CSS file...

<div style="background-image: url('http://www.yoursite.com/your_envelope_image.gif');
	width: 640px; height: 315px;">

	<img id="crossHairImage"
		style="position: relative; left: 0px; top: 0px; margin: 0px; padding: 0px;"
		src="http://www.yoursite.com/crosshair.gif"
			width="32" height="32" alt="" title="" />
</div>

The Javascript code simply takes all the weights that you type into the form, and does the calculations to figure out what coordinates it should move the crosshair to. It then updates the crosshair's "left" and "top" CSS properties, et voila! The crosshair moves automatically.

You can find the Javascript code here. It isn't the most beautiful code I've ever written, but it does the job. You will need to modify the values in the "WB_Reset" function to match the values for your own aircraft, and you'll need to modify the numbers in "WB_Plot" to match the dimensions of your envelope image.

    function WB_Plot(weight, moment)
    {
      // Left-margin on the graph is 65 pixels...
      var x = Math.round(65 + ((moment - 40000) / 10000) * 80) - 15;
      var y = 266 - Math.round(((weight - 1500) / 100) * 32) - 15;

      // Move the crosshair image by updating its "left" and "top"
      // properties...
      with (document.images.crossHairImage.style)
      {
        left = x + 'px';
        top  = y + 'px';
      }
    }