Hack19.Build a DHTML Binary Clock | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 19. Build a DHTML Binary Clock

Use a combination of PHP and DHTML to build the bit clock that you can buy on ThinkGeek.com.

A coworker of mine recently bought one of the "bit clocks" from ThinkGeek (http://www.thinkgeek.com/). The clock has three sections, each with eight lights. The sections represent seconds, minutes, and hours, and the individual lights represent the bits in each value. Though neither he nor I could actually read the clock (!!), we both agreed that it was very cool. Along the same lines, here's a hard-to-read clock in PHP, also super-cool to show off.

3.10.1. The Code

clock.php does the work; it's shown in Example 3-12.

Example 3-12. Setting up an array of bit masks, and beyond

 <?php $bit_names = array( 1, 2, 4, 8, 10, 20 ); $bit_masks = array( array( '0', '0x1', '1' ), array( '1', '0x2', '2' ), array( '2', '0x4', '4' ), array( '3', '0x8', '8' ), array( '4', '0x10', '16' ), array( '5', '0x20', '32' ) ); $size = 40; function bit_table( $name ) { global $size; ?> <table width="<?php echo($size*2); ?>" cellspacing="2" cellpadding="0"> <tr> <td  width="<?php echo($size); ?>" height="<?php echo($size); ?>" /></td> <td  width="<?php echo($size); ?>" height="<?php echo($size); ?>" /></td> </tr> <tr> <td  width="<?php echo($size); ?>" height="<?php echo($size); ?>" /></td> <td  width="<?php echo($size); ?>" height="<?php echo($size); ?>" /></td> </tr> <tr> <td  width="<?php echo($size); ?>" height="<?php echo($size); ?>" /></td> <td  width="<?php echo($size); ?>" height="<?php echo($size); ?>" /></td> </tr> </table> <?php } ?> <html> <head> <script> var second_bits = []; var minute_bits = []; var hour_bits = []; function startup( ) { <?php foreach( $bit_names as $name ) { ?> second_bits.push( document.getElementById( "second_<?php echo( $name ) ?>" ) ); minute_bits.push( document.getElementById( "minute_<?php echo( $name ) ?>" ) ); hour_bits.push( document.getElementById( "hour_<?php echo( $name ) ?>" ) ); <?php } ?> set_clock( ); window.setInterval( "set_clock( )", 200 ); } function set_state( obj, val, on_color ) { obj.style.background = val ? on_color : "white"; } function set_clock( ) { var now = new Date( ); var seconds = now.getSeconds( ); var minutes = now.getMinutes( ); var hours = now.getHours( ); <?php foreach( $bit_masks as $mask ) { ?> set_state( second_bits[<?php echo($mask[0] ); ?>], ( ( seconds & <?php   echo($mask[1] ); ?> ) == <?php echo($mask[2] ); ?> ), "red" ); set_state( minute_bits[<?php echo($mask[0] ); ?>], ( ( minutes & <?php   echo($mask[1] ); ?> ) == <?php echo($mask[2] ); ?> ), "green" ); set_state( hour_bits[<?php echo($mask[0] ); ?>], ( ( hours & <?php   echo($mask[1] ); ?> ) == <?php echo($mask[2] ); ?> ), "blue" ); <?php } ?> } </script> </head> <body onload="startup( );"> <table cellpadding="5" cellspacing="0"> <tr><td> <?php bit_table( "second" ); ?> </td><td> <?php bit_table( "minute" ); ?> </td><td> <?php bit_table( "hour" ); ?> </td></tr></table> </body> </html>

This script starts by setting up the bit table that will be used in the generation of the page and in the JavaScript that updates the clock. The bit_names array is used to name each bit in a clock element, starting at the top left and going down to the bottom right. The bit_masks array stores the bit number in the first position of the array, the JavaScript bit mask value in the second position, and the value of the bit in the third position.

The bit_table( ) function creates an HTML table with positions for each bit. It's used three times: the first for seconds, the second for minutes, and the third for hours. The PHP portion of the script also defines the set_clock() function, which decomposes a time value into its bits, and sets the clock accordingly.

Once the page is rendered, it's shown in the browser. The first thing the browser does after rendering the tables for seconds, minutes, and hours is to call the startup( ) function, which initializes the bits to the current time. The startup( ) function calls set_clock( ), which gets the current hour, minute, and second, and calls set_state( ) for each. The set_state() function simply sets the background color of the table element using CSS. If the bit is on, it sets the value to a color; otherwise, the element is set to white.

The startup() function also creates a timer that calls the set_clock( ) function every 500 ms, giving you a clock that continuously updates on the page.

3.10.2. Running the Hack

Upload clock.php to your server and navigate to the it in your web browser. The result should look like Figure 3-14.

Figure 3-14. The bit clock showing the current time

The bit clock shows the current time in three sections of six bits each, where each section is a different color (shown here in black and white). The red blocks indicate the seconds, the green block indicates minutes, and the blue blocks indicate hours. The hours are, of course, on military time (023). If I remember correctly, I took this picture around 8 p.m. But as I said, this is more about the cool factor than about conveying time information any more effectively (or even discernibly) than a regular clock.

3.10.3. See Also

"Make a DHTML Slideshow" [Hack #21]
"Create an Interactive Calendar" [Hack #25]
"Create the Google Maps Scrolling Effect" [Hack #26]