I just finished whipping up a quick colour picker and I was wondering if you folks thought it was worth releasing. There are 1001 other colour pickers out there, but this one is way simpler to implement IMHO.
Implementation:
Code: Select all
<html>
<head>
<script src = "path/to/ColourPicker.php?mode=js"></script>
...
<form name = "myForm">
<input type = "text" name = "myCode" />
<input type = "submit" onClick = "newColourPicker('myForm.myCode');return false;" />
</form>
example This URL will change if this gets approved
And now the code:
Code: Select all
<?PHP
if($_GET['mode'] == 'js')
{
header('Content-type: text/javascript');
$window_url = $_SERVER['SCRIPT_NAME'];
echo <<<JS
function newColourPicker(id)
{
var myWindow = window.open('$window_url?element=' + id,'colourPicker','height=200, width=160, menubar=no, resizable=yes, scrollbars=no, status=no, titlebar=no, toolbar=no');
}
JS;
exit();
}
?>
<html>
<head>
<style type = "text/css">
body{
margin:0px;
padding:0px;
}
</style>
<title>
Colour Picker
</title>
<script type = "text/javascript">
function setWellColour(colour)
{
document.getElementById('well').style.backgroundColor = colour;
}
function convertToHex(colour)
{
var hex_r;
var hex_g;
var hex_b;
pattern = /rgb\((.*)\)/;
var match = pattern.exec(colour);
//if the colour was in the format rgb(RRR,GGG,BBB) (we're in Firefox)
if(match)
{
var rgb = match[1].split(", ");
var r = rgb[0];
var g = rgb[1];
var b = rgb[2];
hex_r = (r - 0).toString(16);
hex_g = (g - 0).toString(16);
hex_b = (b - 0).toString(16);
final_code = (hex_r.length == 2) ? hex_r : hex_r + hex_r;
final_code += (hex_g.length == 2) ? hex_g : hex_g + hex_g;
final_code += (hex_b.length == 2) ? hex_b : hex_b + hex_b;
return(final_code);
}
//if it didn't match, we must be in IE
else
{
hex_r = colour.substring(1,2);
hex_g = colour.substring(2,3);
hex_b = colour.substring(3,4);
return hex_r + hex_r + hex_g + hex_g + hex_b + hex_b;
}
}
</script>
</head>
<body>
<?PHP
$element = $_GET['element'];
$ColourPicker = new ColourPicker($element);
$ColourPicker->go();
?>
<div style = "border:1px solid #333;height:32px;width:152px;padding:3px;">
<div id = "well" style = "font-family:Verdana,sans-serif;font-size:8pt;height:32px;width:152px;">
</div>
</div>
<?PHP
class ColourPicker
{
var $step;
var $colour_max;
var $dimension;
var $font_size;
var $element_id;
function ColourPicker($p_element_id)
{
$this->step = 1;
$this->colour_max = 15;
$this->dimension = '5px';
$this->font_size = '3pt';
$this->element_id = $p_element_id;
}
function go()
{
echo "<div style = 'font-size:$this->font_size;'>";
//----------------
//dump green & blue
//Top left: turqoise
//Bottom right: black
$start_g = $this->colour_max;
$end_g = 0;
$start_b = $this->colour_max;
$end_b = 0;
echo '<div style = "float:left;">';
$this->dumpGrid($start_g,$end_g,$start_b,$end_b,'g','b');
echo '</div>';
//-----------------
//dump green & red
//Top left: green
//Bottom right: red
$start_g = $this->colour_max;
$end_g = 0;
$start_r = 0;
$end_r = $this->colour_max;
echo '<div>';
$this->dumpGrid($start_g,$end_g,$start_r,$end_r,'g','r');
echo '</div>';
//-----------------
//dump blue & red
//Top left: blue
//Bottom right: red
$start_b = $this->colour_max;
$end_b = 0;
$start_r = 0;
$end_r = $this->colour_max;
echo '<div style = "float:left;">';
$this->dumpGrid($start_r,$end_r,$start_b,$end_b,'r','b');
echo '</div>';
echo '<div>';
$this->dumpMonochromaticGrid();
echo '</div>';
}
function dumpGrid($start_x,$end_x,$start_y,$end_y,$x_rgb,$y_rgb)
{
$working_start_x = ($start_x > $end_x) ? $start_x * -1 : $start_x;
$working_end_x = ($start_x > $end_x) ? $end_x * -1 : $end_x;
$invert_x = ($start_x > $end_x) ? true : false;
$working_start_y = ($start_y > $end_y) ? $start_y * -1 : $start_y;
$working_end_y = ($start_y > $end_y) ? $end_y * -1 : $end_y;
$invert_y = ($start_y > $end_y) ? true : false;
for($i = $working_start_x; $i <= $working_end_x; $i += $this->step)
{
$x = ($invert_x) ? dechex($i * -1) : dechex($i);
for($j = $working_start_y; $j <= $working_end_y; $j += $this->step)
{
$y = ($invert_y) ? dechex($j * -1) : dechex($j);
$r = ($x_rgb == 'r') ? $x : 0;
$r = ($y_rgb == 'r') ? $y : $r;
$g = ($x_rgb == 'g') ? $x : 0;
$g = ($y_rgb == 'g') ? $y : $g;
$b = ($x_rgb == 'b') ? $x : 0;
$b = ($y_rgb == 'b') ? $y : $b;
$this->outputColourSquare($r,$g,$b);
}
echo '<br />';
}
}
function dumpMonochromaticGrid()
{
for($row = 0; $row <= $this->colour_max;$row += $this->step)
{
for($value = 0; $value <= $this->colour_max;$value += $this->step)
{
$hex_value = dechex($value);
$this->outputColourSquare($hex_value,$hex_value,$hex_value);
}
echo '<br />';
}
}
function outputColourSquare($r,$g,$b)
{
echo <<<SQUARE
<div style = "cursor:pointer;float:left;background-color:#{$r}{$g}{$b};width:$this->dimension;height:$this->dimension;"
onMouseOver = "setWellColour(this.style.backgroundColor);"
onClick = "window.opener.document.$this->element_id.value = convertToHex(this.style.backgroundColor);window.close();"> </div>
SQUARE;
}
}
?>
If anyone can come up with any way to optimize this further, please don't hesitate to let me know!