|
|
Free Open Book
PHP Hacks |
|
Hack 23. Build a Color Selector
Use HSB and DHTML to create a PHP color picker. People like to be able to pick the colors of their site, or the colors that are applied to their data in a web application. This hack demonstrates a DHTML color picker that allows people to select a color from a grid of HSB color values. Figure 3-18. A simple geometric shape created with the graphics library
3.14.1. The CodeExample 3-18 is the code for index.php. Example 3-18. Handling conversion between HSB and RGB values
<?php
function hsb( $h, $s, $v )
{
$r = $g = $b = 0;
if ( $s == 0 )
{
$r = $g = $b = $v;
}
else
{
$h = $h / 60;
$i = floor( $h );
$f = $h - $i;
$p = $v * ( 1 - $s );
$q = $v * ( 1 - $s * $f );
$t = $v * ( 1 - $s * ( 1 - $f ) );
switch( $i ) {
case 0: $r = $v; $g = $t; $b = $p; break;
case 1: $r = $q; $g = $v; $b = $p; break;
case 2: $r = $p; $g = $v; $b = $t; break;
case 3: $r = $p; $g = $q; $b = $v; break;
case 4: $r = $t; $g = $p; $b = $v; break;
default: $r = $v; $g = $p; $b = $q; break;
}
}
return array( $r, $g, $b );
}
function hsb2hex( $h, $s, $b )
{
list( $r, $g, $b ) = hsb( $h, $s, $b );
return sprintf( "#%02x%02x%02x", $r, $g, $b );
}
?>
<html>
<head>
<script language="Javascript">
function mover( id )
{
var obj = document.getElementById( id );
obj.style.borderColor = "black";
}
function mout( id )
{
var obj = document.getElementById( id );
obj.style.borderColor = "white";
}
function selectColor( color )
{
document.getElementById( "color" ).value = color;
}
function hover( color )
{
document.getElementById( "hoverColor" ).innerHTML = color;
}
</script>
<style type="text/css">
body { font-family: arial, verdana, sans-serif; }
#color { font-family: courier; }
#hoverColor { font-family: courier; }
</style>
</head>
<body>
Color: <input id="color" type="text" size="8" />
<table cellspacing="10" cellpadding="0"><tr><td>
<table cellspacing="0" cellpadding="0">
<?php
$id = 1;
for( $h = 0; $h < 360; $h += 18 ) { ?>
<tr>
<?php for( $b = 255; $b >= 0; $b -= 10 ) {
$color = hsb2hex( $h, $b / 255, $b );
?>
<td>
<div id="cp<?php echo( $id ); ?>" style="height:10px; width:10px; border:1px
solid white; background:<?php echo( $color ); ?>;" onmouseover="mover('cp<?php
echo( $id ); ?>');hover('<?php echo( $color ); ?>');" onmouseout="mout('cp<?php
echo( $id ); ?>')" onclick="selectColor('<?php echo( $color ); ?>');"></div>
</td>
<?php
$id += 1;
} ?>
</tr>
<?php } ?>
</table>
</td><td valign="top">
<div id="hoverColor"></div>
</td></tr></table>
</body>
</html>
The big trick here is the HSB( ) function, which converts into RGB a color value that is specified in the hue, saturation, and brightness (HSB) color space. I found this recipe on the Web and did the trivial conversion to PHP from C. The hsb2hex( ) call just wraps the HSB conversion and formats the output RGB value in the #RRGGBB format. 3.14.2. Running the HackUpload the index.php file to the site and navigate to it in your web browser. The web browser should look like Figure 3-19. Just roll around the grid with your mouse, and the value on the right will show the RGB value of the color under the mouse. Clicking on a grid item will put the RGB value of the color into the Color text box at the top of the page.
Figure 3-19. The DHTML color picker
|
Main Menu |
| 500 Juegos Gratis | 500 Giochi Gratis | 500 Jeux Gratuits | 500 Jogos Gratis | 500 Kostenlose Spiele |
