Fast forward a bit, this project is the first big project I have taken on. It is a 10 segment bar graph that I wired up, but now, I am moving it’s control from the 10 analog pins to some shift registers. This frees up most of the pins that I needed initially, and doesn’t make control more difficult.

A shift register is like a bucket brigade. Each bucket is one bit on the register, and as you pass it bits, the rest of them get passed one down the line. So, to control which legs of the shift register are powered and which not, I just have to pulse 1′s and 0′s into the register until I get it set the way I want. Since the LED segments are controlled by the shift register legs, they’re set by what is pulsed to the register.

If I want to have an alternating pattern, the registers contain these values

   [10101010] -> [10101010]
// Register 1 -> Register 2

If I were to push one more bit down the line, they would all move one step along.

   [01010101] -> [01010101]
// Register 1 -> Register 2

If I wanted to push the segments to all lit, the register just has to be fed 1′s.

   [11111111] -> [11010101]
// Register 1 -> Register 2

Part List

• Arduino
• 10 x 330Ω Resistors
• 10 Segment LED bar graph or 10 x LED’s
• 2 x 74LS164N Shift Registers (or any non-164 shift register, your wiring may be different)
• Wires and Breadboards

Notes

• For this project, I’m not using the reset ability of the 164, so that pin has been tied to V+.
• There is an Arduino function called shiftOut() that would make this a little easier. I have not used it because I wanted to shift the bits myself to get a better feel for what it was doing.
• To wire the shift registers to the Arduino, it’s pin 2 on the Arduino to the clock pin (pin 8) on the first or second shift register (since they’re both wired together), and pin 3 Arduino to data pin (pin 1) on the first shift register.

#define DATA 3
#define CLOCK 2

void setup() {
  pinMode(CLOCK, OUTPUT);
  pinMode(DATA, OUTPUT);

  for(int i = 0; i < 10; ++i){
    digitalWrite(DATA, LOW);
    digitalWrite(CLOCK, HIGH);
    digitalWrite(CLOCK, LOW);
  }
}

void loop() {
  for(int i = 0; i < 10; ++i){
    int hilo = random(0, 2);

    switch(hilo){
        case 0: digitalWrite(DATA, LOW); break;
        case 1: digitalWrite(DATA, HIGH); break;
    }

    digitalWrite(CLOCK, HIGH);
    digitalWrite(CLOCK, LOW);
    delay(50);
  }
}

function heatSteps($config){
    $config['colorStart'] = (isset($config['colorStart'])) ? hexdec($config['colorStart']) : 0xdee7f8;
    $config['colorEnd'] = (isset($config['colorEnd'])) ? hexdec($config['colorEnd']) : 0xff0f15;
    $config['colorSteps'] = (isset($config['colorSteps'])) ? $config['colorSteps'] : 10;

    $config['colorStart'] = (($config['colorStart'] >= 0x000000) && ($config['colorStart'] <= 0xffffff)) ? $config['colorStart'] : 0x000000;
    $config['colorEnd'] = (($config['colorEnd'] >= 0x000000) && ($config['colorEnd'] <= 0xffffff)) ? $config['colorEnd'] : 0xffffff;
    $config['colorSteps'] = (($config['colorSteps'] > 0) && ($config['colorSteps'] < 256)) ? $config['colorSteps'] : 256;

    $theR0 = ($config['colorStart'] & 0xff0000) >> 16;
    $theG0 = ($config['colorStart'] & 0x00ff00) >> 8;
    $theB0 = ($config['colorStart'] & 0x0000ff) >> 0;

    $theR1 = ($config['colorEnd'] & 0xff0000) >> 16;
    $theG1 = ($config['colorEnd'] & 0x00ff00) >> 8;
    $theB1 = ($config['colorEnd'] & 0x0000ff) >> 0;

    $colorSteps = array();
    for($i = 0; $i <= $config['colorSteps']; $i++){
        $theR = interpolateHeatSteps($theR0, $theR1, $i, $config['colorSteps']);
        $theG = interpolateHeatSteps($theG0, $theG1, $i, $config['colorSteps']);
        $theB = interpolateHeatSteps($theB0, $theB1, $i, $config['colorSteps']);

        $colorSteps[] = dechex(((($theR << 8) | $theG) << 8) | $theB);
    }

    return($colorSteps);
}

function interpolateHeatSteps($pBegin, $pEnd, $pStep, $pMax){
    if ($pBegin < $pEnd){
        return(($pEnd - $pBegin) * ($pStep / $pMax)) + $pBegin;
    }else{
        return(($pBegin - $pEnd) * (1 - ($pStep / $pMax))) + $pEnd;
    }
}

So, digging in with Chrome’s developer tools, I looked into figuring out how to do it. At first, I thought it was a Javascript thing, using jQuery and mouseOver events, because that’s how it could have been done. However, that seemed a little heavy for this purpose, since it’d require some Javascript be loaded on each load. So, examining it a bit closer, I dug into the CSS, and discovered a new use of the pseudo property :hover.

Today I learned that you can use :hover on a parent element to change properties on a child element. Of course, it makes perfect sense now to use it like that, but it was one of those Ooohhhh! moments that you get when something obvious smacks you in the face.

Here’s one way to do the reddit π icon:

<style type="text/css">
#pibottom{float: right; padding-top: 4px;}
#pi{color: #a0a0a0; font: 16pt serif; padding: 2px;}
#picontent{font-size: 11pt; display: none;}
#pibottom:hover #picontent{display:inline;}
</style>

<br clear="all">
<div id="pibottom">
    <span id="pi">&pi;</span>&nbsp;<span id="picontent">Load in ' . getScriptTiming() . ' sec. Ran ' . getCountDBQueries() . ' queries.</span>
</div>