Resistor Calculator - The code

So how does the resistor calculator do it's thing?

     We start with the main page that displays the form and the image underneath. First the form is displayed with a slew of select elements. When possible, php is used to populate these.

<?php
  $colors = array(0 => "Black", 1 => "Brown", 2 => "Red", 3 => "Orange", 4 => "Yellow", 
  5 => "Green", 6 => "Blue", 7 => "Violet", 8 => "Grey", 9 => "White");
?>

<select name="dig01">
  <?php for ($i =0; $i < 10; $i++){?>
    <option value="<?php echo $i;?>"><?php echo $i . ' ' . $colors[$i];?> </option>
  <?php }?>
</select>

This reuslts in the html:

<select name="dig01">
  <option value="0">0 Black </option>
  <option value="1">1 Brown </option>
  <option value="2">2 Red </option>
  <option value="3">3 Orange </option>
  <option value="4">4 Yellow </option>
  <option value="5">5 Green </option>
  <option value="6">6 Blue </option>
  <option value="7">7 Violet </option>
  <option value="8">8 Grey </option>
  <option value="9">9 White </option>
</select>

Then we need to assign some variables that will define the reistor image we create later on. If the Submit button on the form is pressed, we pull them from the form. If not we'll randomly assign them.

<?php
    if (isset( $Submit)) {
        $numBands = $HTTP_POST_VARS['nBands'];
        $digit01 = $HTTP_POST_VARS['dig01'];
        $digit02 = $HTTP_POST_VARS['dig02'];
        $digit03 = $HTTP_POST_VARS['dig03'];
        $multiplier = $HTTP_POST_VARS['mult']; 
        $tolerance = $HTTP_POST_VARS['tol'];
        $tmpCoeff = $HTTP_POST_VARS['tmpCo'];
    } else {
        $numBands = 4;
        $digit01 = (rand()%9);
        $digit02 = (rand()%9);
        $tmp = (rand()%8);
        $multArray = array(0 => "0.01", 1 => "0.1", 2 => "1", 3 => "10", 4 => "100", 
                           5 => "1K", 6 => "10K", 7 => "100K", 8 => "1000K");
        $multiplier =  $multArray[$tmp];
        $tmp = (rand()%4);
        $tolArray = array(0 => "20", 1 => "10", 2 => "5", 3 => "1", 4 => "2");
        $tolerance = $tolArray[$tmp];
    }
?>

Since PHP can create image output directly using GD, we'll set the image src of our picture to our script make_resistor.php.

<img src="make_resistor.php?size=400&numbands=>?php echo $numbands; ?<&digit01=>?php echo $digit01; ?<&digit02=>?php echo $digit02; ?<&digit03=>?php echo $digit03; ?<&multiplier=>?php echo $multiplier; ?<&tolerance=>?php echo $tolerance; ?<&tmpcoeff=>?php echo $tmpcoeff; ?>" name="resistpic" />

so the url that gets created by php looks something like this:

<img src = "make_resistor.php?size = 400&numbands = 4&digit01 = 8&digit02 = 6&digit03 = &multiplier = 1k&tolerance = 5&tmpcoeff = " name = "resistpic" />

make_resistor.php will take these parameters and generate a png of our resistor. to generate an image instead of html, we'll set the header to "content-type: image/png" in make_resistor.php.

The basic idea of the image creation process is this:

  • create a rounded rectangle for the resistor body with leads hanging off the ends (thin, black rectangles centered on the end of the body)
  • based on the values passed in, start drawing filled in rectangles based on the color codes they correspond to.
  • Draw some text below the resistor with the values.

the php file that does all that is here, a layout of the image is here

make_resistor.php

  • first we grab the number of bands ($numbands) and the size of the image ($imagewidth) as parameters. (lines 23-24)
  • the image height is defined as 1/4 the image width. ($imageheight) (line 25)
    note: this is the height of only the drawing area of the resistor itself.
  • the added text is drawn in a space 1/2 the image height. ($txtheight) (line 26)
  • the resistor rectangle dimensions are 80% of the image dimensions ($reswidth and $resheight) (line 27,28)
  • the width of each color band is set to the total width of the resistor divided by 2.5 times the number of bands ($resstripewidth) (line 38)
    this is pretty arbitrary, but seemed to give decent results with the number of bands allowed (4-6)
  • each color band is offset in the X dimension by two times the width of the band ($resstripeinc) (line 43)
    this lets us define the 1st band ($resStripeX1 and $resStripeX2) (line 41,42) and just add $resStripeInc each time we want to draw the next band.
  • Next, we grab the digits, the multiplier and the temp coefficient and calculate a nice string of the resistor value. (lines 44-63)
  • We scale the output string to fit in the space we have (lines 67-77) and define some color constants (lines 79-91)
  • we set up some arrays (lines 92-95) that allow us to assign our band colors (line 96-105)
  • Now we start drawing rectangles. We fill the background (line 107), then the resistor body (line 109) and leads (lines 111,112)
    The first color band is drawn (line 114), then each additional band is just offest by $resStripeInc in X
  • After drawing the second stripe, we draw the 3rd stripe if we're doing a 5 or 6 band resistor (lines 120-124), then draw the multiplier and tolerance stripes (linex 125-132)
    Last up is the temp coeff if we're drawing a 6 band resistor (lines 134-138)
  • Finally, we draw the text at the bottom. (line 140)



<< Home >>