JavaScript and client side scripting.
Moderator: General Moderators
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Thu Feb 03, 2005 1:06 pm
View it
here ... it's not finished but now that I'm using JavaScript it's running very slow.
I think it's to do with the nested loops... BTW, the <?php echo $interval; ?> bit outputs a value of 16.
I can't see any better way to make it goes faster other than increase 16 to 32 and end up with a poor selection of colors. Click the hue selection bar on the right to see just how slow it is.
Code: Select all
//Show the hex code of the chosen cell
function displayHex(el) {
document.getElementById('hexcode').value = el.id
}
//Reconstructs pallette for chosen hue
var clearImg = new Image()
clearImg.src = 'clear.gif'
function makePallette(el) {
var jinterval = <?php echo $interval."\r\n"; ?>
var jmultiply = (jinterval/4)
var jheight = (Math.round((256*6)/jinterval)*jmultiply)
//Start building pallette
var pallette = '<table cellspacing="0" cellpadding="0" border="0" id="color_pallette" height="'+jheight+'" width="'+jheight+'">'
//var row_gap = jinterval
var w_hex = 0xFF //White level
//End point colors
var r_hex_end = parseInt(el.id.substr(1,2),16)
var g_hex_end = parseInt(el.id.substr(3,2),16)
var b_hex_end = parseInt(el.id.substr(5,2),16)
//Increments per row
var inc_w = Math.ceil(w_hex/(256/jinterval))
var inc_y_r = Math.ceil(r_hex_end/(256/jinterval))
var inc_y_g = Math.ceil(g_hex_end/(256/jinterval))
var inc_y_b = Math.ceil(b_hex_end/(256/jinterval))
for(var i=255; i>=0; i-=jinterval) {
//Initial whiteness
r_hex = w_hex
g_hex = w_hex
b_hex = w_hex
pallette += '<tr>'
//Difference in values left to right
var diff_x_r = w_hex - r_hex_end
var diff_x_g = w_hex - g_hex_end
var diff_x_b = w_hex - b_hex_end
//Increment per cell for hex
var inc_x_r = Math.ceil(diff_x_r/(256/jinterval))
var inc_x_g = Math.ceil(diff_x_g/(256/jinterval))
var inc_x_b = Math.ceil(diff_x_b/(256/jinterval))
for (var x=255; x>=0; x-=jinterval) { //Cells
//Red, green and blue hex start values
if (r_hex < 0) {
r_hex = 0
}
var r_hex_code = r_hex.toString(16)
if (r_hex_code.length == 1) {
r_hex_code = '0'+r_hex_code
}
if (g_hex < 0) {
g_hex = 0
}
var g_hex_code = g_hex.toString(16)
if (g_hex_code.length == 1) {
g_hex_code = '0'+g_hex_code
}
if (b_hex < 0) {
b_hex = 0
}
var b_hex_code = b_hex.toString(16)
if (b_hex_code.length == 1) {
b_hex_code = '0'+b_hex_code
}
//Make a cell
pallette += '<td bgcolor="#'+r_hex_code.toUpperCase()+g_hex_code.toUpperCase()+b_hex_code.toUpperCase()+'" id="#'+r_hex_code.toUpperCase()+g_hex_code.toUpperCase()+b_hex_code.toUpperCase()+'" onClick="displayHex(this)"><img src="'+clearImg.src+'"></td>'
r_hex -= inc_x_r
g_hex -= inc_x_g
b_hex -= inc_x_b
r_hex_end = r_hex
g_hex_end = g_hex
g_hex_end = g_hex
}
pallette += '</tr>'
r_hex_end -= inc_y_r
g_hex_end -= inc_y_g
b_hex_end -= inc_y_b
w_hex -= inc_w
document.getElementById('palletteSpace').innerHTML = pallette
}
}
Last edited by
Chris Corbyn on Mon Feb 07, 2005 6:32 pm, edited 2 times in total.
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Thu Feb 03, 2005 1:11 pm
If I could just document.write the table onto the page at onLoad then the only thing that changes is one single variable yet I'm reconstructiing the entire table based upon this change....
Is there any way I can just make a vriable change and anything was printed to the page will change as soon as it changes (like it would in a spreadsheet)
EDIT: I took all the code out of the second (nested) loop and just replaced it with a counter, commented out the document.write and added
alert(counter)
to the end so I knew when it was done and it's lightnigh quick so it's not the loops it the code that's inside the second loop
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Thu Feb 03, 2005 3:10 pm
Hmmm... a good start has been to take out all the clear gif's.... I thought the cells would collapse without them but evidently not. Also, I had toUpperCase() repeated un unneccessarry number of times in the loop when I could do it 1/3 of the number of times. Changin this has made it load in about 25% of the time it originally took but I reckon it can still be faster.
The IF statements to keep things no lower than zero and to keep the hex values as pairs could make a difference but i think I'm stuck with them
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Thu Feb 03, 2005 4:32 pm
precalculating anything you can, either at start up or whatever helps a tremendous amount.
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Thu Feb 03, 2005 5:02 pm
Oh yeah that was one thing I did... I got PHP to pre calculate a few things but the other bits dynamically change if a new color is selected. It's clear that the IF statements are slowing it down. It takes 1 second or so to respond... which isn't bad but when I set out to make this I was expecting it to be almost instant (to the point the user could click and drag and it would all update on the fly (click and drag isn't in the code yet))
Changed a bit... (it would be useful if there was some way of indicating a minum value of zero for the caclulations so that I don't have to run the IF (var < 0) { var = 0 } kinda thing...)
Code: Select all
//Show the hex code of the chosen cell
function displayHex(el) {
document.getElementById('hexcode').value = el.id
document.getElementById('samplecolor').style.backgroundColor = el.id
}
//Updates the window location to new num colors
function changeSpec(el) {
window.location = '?mode='+el.optionsїel.selectedIndex].value
}
//Reconstructs pallette for chosen hue
function makePallette(el) {
var jinterval = <?php echo $interval."\r\n"; ?>
var jmultiply = <?php echo $multiply."\r\n"; ?>
var jheight = <?php echo $height."\r\n"; ?>
//Start building pallette
var pallette = '<table cellspacing="0" cellpadding="0" border="0" id="color_pallette" height="'+jheight+'" width="'+jheight+'">'
var w_hex = 0xFF //White level
//End point colors
var r_hex_end = parseInt(el.id.substr(1,2),16)
var g_hex_end = parseInt(el.id.substr(3,2),16)
var b_hex_end = parseInt(el.id.substr(5,2),16)
//Increments per row
var inc_w = Math.ceil(w_hex/(256/jinterval))
var inc_y_r = Math.ceil(r_hex_end/(256/jinterval))
var inc_y_g = Math.ceil(g_hex_end/(256/jinterval))
var inc_y_b = Math.ceil(b_hex_end/(256/jinterval))
for(var i=255; i>=0; i-=jinterval) {
//Initial whiteness
r_hex = w_hex
g_hex = w_hex
b_hex = w_hex
pallette += '<tr>'
//Difference in values left to right
var diff_x_r = w_hex - r_hex_end
var diff_x_g = w_hex - g_hex_end
var diff_x_b = w_hex - b_hex_end
//Increment per cell for hex
var inc_x_r = Math.ceil(diff_x_r/(256/jinterval))
var inc_x_g = Math.ceil(diff_x_g/(256/jinterval))
var inc_x_b = Math.ceil(diff_x_b/(256/jinterval))
for (var x=255; x>=0; x-=jinterval) { //Cells
//Red, green and blue hex start values
if (r_hex < 0) {
r_hex = 0
}
var r_hex_code = r_hex.toString(16)
if (r_hex_code.length == 1) {
r_hex_code = '0'+r_hex_code
}
if (g_hex < 0) {
g_hex = 0
}
var g_hex_code = g_hex.toString(16)
if (g_hex_code.length == 1) {
g_hex_code = '0'+g_hex_code
}
if (b_hex < 0) {
b_hex = 0
}
var b_hex_code = b_hex.toString(16)
if (b_hex_code.length == 1) {
b_hex_code = '0'+b_hex_code
}
var buildHex = (r_hex_code+g_hex_code+b_hex_code).toUpperCase()
//Make a cell
pallette += '<td bgcolor="#'+buildHex+'" id="#'+buildHex+'" onClick="displayHex(this)"></td>'
//Reduce to amount of white
r_hex -= inc_x_r
g_hex -= inc_x_g
b_hex -= inc_x_b
}
pallette += '</tr>'
//For the next row
r_hex_end -= inc_y_r
g_hex_end -= inc_y_g
b_hex_end -= inc_y_b
w_hex -= inc_w
//Write the html to the cell
document.getElementById('palletteSpace').innerHTML = pallette
}
}
http://www.chriscorbyn.co.uk/colors/
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Fri Feb 04, 2005 9:56 am
I believe that if you altered the existing code (via the style objects) instead of creating new code for the html, it would be quite a bit faster..
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Sat Feb 05, 2005 3:28 pm
Yeah... that's a good point. I wrote it so that the variable jinterval would change dynamically to make the table contain more cells (restricted to 1,2,4,8,16.....) so that's why I was creating the table on-the-fly but thinking about it, that is predefined by PHP so I should know the number of rows and cells before the code is executed....
I'm gonna re-write so that it is the style objects used to change the colors and also that display the code (just write it's backgroundColor object)... it's should be a considerable amount faster.
Cheers feyd... I'll let you know how it goes
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Sat Feb 05, 2005 4:38 pm
Brilliant... that's made it load in about 50-60% of the time it did do... getting closer to being instant
BTW feyd... when are we getting the PHP tags back again?
Code: Select all
<!-- Hide from older browsers
//Show the hex code of the chosen cell
var currCell = document.getElementById('r255_c255') //Keep track of current cell (Used in palette refining)
function displayHex(el) {
currCell = el
document.getElementById('hexcode').value = currCell.style.backgroundColor.toUpperCase()
document.getElementById('samplecolor').style.backgroundColor = currCell.style.backgroundColor
}
//Makes palette adjust to new color (fine tuning)
function refinePalette() {
makePallette(currCell)
}
//Reconstructs pallette for chosen hue
var jinterval = <?php echo $interval."\r\n"; ?>
var jmultiply = <?php echo $multiply."\r\n"; ?>
var jheight = <?php echo $height."\r\n"; ?>
function makePallette(el) {
var w_hex = 0xFF //White level
//End point colors
var r_hex_end = parseInt(el.style.backgroundColor.substr(1,2),16)
var g_hex_end = parseInt(el.style.backgroundColor.substr(3,2),16)
var b_hex_end = parseInt(el.style.backgroundColor.substr(5,2),16)
//Increments per row
var inc_w = Math.ceil(w_hex/(256/jinterval))
var inc_y_r = Math.ceil(r_hex_end/(256/jinterval))
var inc_y_g = Math.ceil(g_hex_end/(256/jinterval))
var inc_y_b = Math.ceil(b_hex_end/(256/jinterval))
for(var i=255; i>=0; i-=jinterval) {
//Initial whiteness
r_hex = w_hex
g_hex = w_hex
b_hex = w_hex
//Difference in values left to right
var diff_x_r = w_hex - r_hex_end
var diff_x_g = w_hex - g_hex_end
var diff_x_b = w_hex - b_hex_end
//Increment per cell for hex
var inc_x_r = Math.ceil(diff_x_r/(256/jinterval))
var inc_x_g = Math.ceil(diff_x_g/(256/jinterval))
var inc_x_b = Math.ceil(diff_x_b/(256/jinterval))
for (var x=255; x>=0; x-=jinterval) { //Cells
//Red, green and blue hex start values
if (r_hex < 0) {
r_hex = 0
}
var r_hex_code = r_hex.toString(16)
if (r_hex_code.length == 1) {
r_hex_code = '0'+r_hex_code
}
if (g_hex < 0) {
g_hex = 0
}
var g_hex_code = g_hex.toString(16)
if (g_hex_code.length == 1) {
g_hex_code = '0'+g_hex_code
}
if (b_hex < 0) {
b_hex = 0
}
var b_hex_code = b_hex.toString(16)
if (b_hex_code.length == 1) {
b_hex_code = '0'+b_hex_code
}
var buildHex = (r_hex_code+g_hex_code+b_hex_code).toUpperCase()
//Make a cell
document.getElementById('r'+i+'_c'+x).style.backgroundColor = '#'+buildHex //Change the cell colors
//Reduce to amount of white
r_hex -= inc_x_r
g_hex -= inc_x_g
b_hex -= inc_x_b
}
//For the next row
r_hex_end -= inc_y_r
g_hex_end -= inc_y_g
b_hex_end -= inc_y_b
w_hex -= inc_w
}
}
// End hiding -->
or full PHP file....
Code: Select all
<html>
<head>
<title>Chris Corbyn - Hex Colour JavaScript Palette</title>
<?php
$interval = 16; //The interval between hex colors (higher value = smaller table with less colors. Value of 1 = All Possible colors)
$multiply = $interval/4;
$height = (round((256*6)/$interval))*$multiply;
?>
<style>
<!--
/*Parent table*/
#container {border:1px solid #AFAFAF; background:#EFEFEF}
/*The hue selection bar*/
#hue_selector {font-size:0pt; width:25px; border:2px solid #000000; cursor:pointer}
#hue_selector td {margin:0px; padding:0px}
/*The color pallette*/
#color_pallette {font-size:0pt; border:2px solid #000000; cursor:pointer}
/*The hex code box*/
#hexcode {border:2px solid #888888; font-family:verdana,arial,sans-serif; font-size:10pt; padding:1px; background-color:#FFFFFF; color:#000000}
/*Cell for the code output*/
#codecell {font-family:verdana,arial,sans-serif; font-size:8pt; color:#000000}
/*Links*/
.blacklink {color:#05415F; text-decoration:none}
.blacklink:hover {color:#05415F; text-decoration:underline}
-->
</style>
<script language="javascript" type="text/javascript">
<!-- Hide from older browsers
//Show the hex code of the chosen cell
var currCell = document.getElementById('r255_c255') //Keep track of current cell (Used in palette refining)
function displayHex(el) {
currCell = el
document.getElementById('hexcode').value = currCell.style.backgroundColor.toUpperCase()
document.getElementById('samplecolor').style.backgroundColor = currCell.style.backgroundColor
}
//Makes palette adjust to new color (fine tuning)
function refinePalette() {
makePallette(currCell)
}
//Reconstructs pallette for chosen hue
var jinterval = <?php echo $interval."\r\n"; ?>
var jmultiply = <?php echo $multiply."\r\n"; ?>
var jheight = <?php echo $height."\r\n"; ?>
function makePallette(el) {
var w_hex = 0xFF //White level
//End point colors
var r_hex_end = parseInt(el.style.backgroundColor.substr(1,2),16)
var g_hex_end = parseInt(el.style.backgroundColor.substr(3,2),16)
var b_hex_end = parseInt(el.style.backgroundColor.substr(5,2),16)
//Increments per row
var inc_w = Math.ceil(w_hex/(256/jinterval))
var inc_y_r = Math.ceil(r_hex_end/(256/jinterval))
var inc_y_g = Math.ceil(g_hex_end/(256/jinterval))
var inc_y_b = Math.ceil(b_hex_end/(256/jinterval))
for(var i=255; i>=0; i-=jinterval) {
//Initial whiteness
r_hex = w_hex
g_hex = w_hex
b_hex = w_hex
//Difference in values left to right
var diff_x_r = w_hex - r_hex_end
var diff_x_g = w_hex - g_hex_end
var diff_x_b = w_hex - b_hex_end
//Increment per cell for hex
var inc_x_r = Math.ceil(diff_x_r/(256/jinterval))
var inc_x_g = Math.ceil(diff_x_g/(256/jinterval))
var inc_x_b = Math.ceil(diff_x_b/(256/jinterval))
for (var x=255; x>=0; x-=jinterval) { //Cells
//Red, green and blue hex start values
if (r_hex < 0) {
r_hex = 0
}
var r_hex_code = r_hex.toString(16)
if (r_hex_code.length == 1) {
r_hex_code = '0'+r_hex_code
}
if (g_hex < 0) {
g_hex = 0
}
var g_hex_code = g_hex.toString(16)
if (g_hex_code.length == 1) {
g_hex_code = '0'+g_hex_code
}
if (b_hex < 0) {
b_hex = 0
}
var b_hex_code = b_hex.toString(16)
if (b_hex_code.length == 1) {
b_hex_code = '0'+b_hex_code
}
var buildHex = (r_hex_code+g_hex_code+b_hex_code).toUpperCase()
//Make a cell
document.getElementById('r'+i+'_c'+x).style.backgroundColor = '#'+buildHex //Change the cell colors
//Reduce to amount of white
r_hex -= inc_x_r
g_hex -= inc_x_g
b_hex -= inc_x_b
}
//For the next row
r_hex_end -= inc_y_r
g_hex_end -= inc_y_g
b_hex_end -= inc_y_b
w_hex -= inc_w
}
}
// End hiding -->
</script>
</head>
<body>
<center>
<table cellpadding="5" cellspacing="0" border="0" id="container">
<tr>
<td id="palletteSpace">
<table cellspacing="0" cellpadding="0" border="0" id="color_pallette" height="<?php echo $height; ?>" width="<?php echo $height; ?>">
<?php
//$row = 1;
$row_gap = $interval;
//Starting hex values
$w_hex = 0xFF;
$r_hex_end = 0x00;
$g_hex_end = 0xBF;
$b_hex_end = 0xFF;
//Increment per row for hex values
$inc_w = ceil($w_hex/(256/$interval));
$inc_y_r = ceil($r_hex_end/(256/$interval));
$inc_y_g = ceil($g_hex_end/(256/$interval));
$inc_y_b = ceil($b_hex_end/(256/$interval));
for($i=255; $i>=0; $i-=$row_gap) { //Rows
//Whiteness
$r_hex = $w_hex;
$g_hex = $w_hex;
$b_hex = $w_hex;
echo "\t\t\t\t".'<tr>';
//Difference in values left to right
$diff_x_r = $w_hex-$r_hex_end;
$diff_x_g = $w_hex-$g_hex_end;
$diff_x_b = $w_hex-$b_hex_end;
//Increment per cell for hex values
$inc_x_r = ceil($diff_x_r/(256/$interval));
$inc_x_g = ceil($diff_x_g/(256/$interval));
$inc_x_b = ceil($diff_x_b/(256/$interval));
for ($x=255; $x>=0; $x-=$row_gap) { //Cells
//Red, green and blue hex start values
if($r_hex < 0) {
$r_hex = 0;
}
$r_hex_code = dechex($r_hex);
if(strlen($r_hex_code) == 1) {
$r_hex_code = '0'.$r_hex_code; //Keep it double
}
if($g_hex < 0) {
$g_hex = 0;
}
$g_hex_code = dechex($g_hex);
if(strlen($g_hex_code) == 1) {
$g_hex_code = '0'.$g_hex_code; //Keep it double
}
if($b_hex < 0) {
$b_hex = 0;
}
$b_hex_code = dechex($b_hex);
if(strlen($b_hex_code) == 1) {
$b_hex_code = '0'.$b_hex_code; //Keep it double
}
echo "\r\n\t\t\t\t\t".'<td style="background-color:#'.$r_hex_code.$g_hex_code.$b_hex_code.'" id="r'.$i.'_c'.$x.'" onClick="displayHex(this)"></td>'."\r\n";
$r_hex -= $inc_x_r;
$g_hex -= $inc_x_g;
$b_hex -= $inc_x_b;
}
echo "\t\t\t\t".'</tr>'."\r\n";
$r_hex_end -= $inc_y_r;
$g_hex_end -= $inc_y_g;
$b_hex_end -= $inc_y_b;
$w_hex -= $inc_w;
}
?>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" id="hue_selector" height="<?php echo $height; ?>">
<?php
#Generates the Hue Selection Bar
//Start at full red and increase green
for ($i = 0x00; $i <= 0xFF; $i+=$interval) {
$g_hex = dechex($i);
if (strlen($g_hex) == 1) {
$g_hex = '0'.$g_hex; //Keep it double digit
}
echo "\t<tr>\r\n";
echo "\t\t".'<td style="background-color:#FF'.$g_hex.'00" onClick="makePallette(this); displayHex(currCell)" id="#FF'.strtoupper($g_hex).'00"></td>'."\r\n";
echo "\t</tr>\r\n";
}
//Decrease red
for ($i = 0xFF; $i >= 0x00; $i-=$interval) {
$r_hex = dechex($i);
if (strlen($r_hex) == 1) {
$r_hex = '0'.$r_hex; //Keep it double digit
}
echo "\t<tr>\r\n";
echo "\t\t".'<td style="background-color:#'.$r_hex.'FF00" onClick="makePallette(this); displayHex(currCell)" id="#'.strtoupper($r_hex).'FF00"></td>'."\r\n";
echo "\t</tr>\r\n";
}
//Increase blue
for ($i = 0x00; $i <= 0xFF; $i+=$interval) {
$b_hex = dechex($i);
if (strlen($b_hex) == 1) {
$b_hex = '0'.$b_hex; //Keep it double digit
}
echo "\t<tr>\r\n";
echo "\t\t".'<td style="background-color:#00FF'.$b_hex.'" onClick="makePallette(this); displayHex(currCell)" id="#00FF'.strtoupper($b_hex).'"></td>'."\r\n";
echo "\t</tr>\r\n";
}
//Decrease green
for ($i = 0xFF; $i >= 0x00; $i-=$interval) {
$g_hex = dechex($i);
if (strlen($g_hex) == 1) {
$g_hex = '0'.$g_hex; //Keep it double digit
}
echo "\t<tr>\r\n";
echo "\t\t".'<td style="background-color:#00'.$g_hex.'FF" onClick="makePallette(this); displayHex(currCell)" id="#00'.strtoupper($g_hex).'FF"></td>'."\r\n";
echo "\t</tr>\r\n";
}
//Increase red
for ($i = 0x00; $i <= 0xFF; $i+=$interval) {
$r_hex = dechex($i);
if (strlen($r_hex) == 1) {
$r_hex = '0'.$r_hex; //Keep it double digit
}
echo "\t<tr>\r\n";
echo "\t\t".'<td style="background-color:#'.$r_hex.'00FF" onClick="makePallette(this); displayHex(currCell)" id="#'.strtoupper($r_hex).'00FF"></td>'."\r\n";
echo "\t</tr>\r\n";
}
//Decrease blue and it goes back to full red
for ($i = 0xFF; $i >= 0x00; $i-=$interval) {
$b_hex = dechex($i);
if (strlen($b_hex) == 1) {
$b_hex = '0'.$b_hex; //Keep it double digit
}
echo "\t<tr>\r\n";
echo "\t\t".'<td style="background-color:#FF00'.$b_hex.'" onClick="makePallette(this); displayHex(currCell)" id="#FF00'.strtoupper($b_hex).'"></td>'."\r\n";
echo "\t</tr>\r\n";
}
?>
</table>
</td>
<td align="right" id="codecell"><div style="width:120px; height:120px; border:2px solid #000000; background-color:#00BFFF" id="samplecolor"></div><br><b>HEX :: </b><input type="text" size="7" id="hexcode" value="#00BFFF"><hr><a class="blacklink" href="javascript:refinePalette()"><b>Refine Palette</b></a> <hr><p><div align="left" style="width:120px; border:2px solid #06066F; background:#FFFFFF; padding:3px; font-size:7pt">Choose the hue from the hue bar by clicking on it.<p>To display the hex color code click the shade in the palette.<p>"Refine Palette" will fine tune the palette to the chosen shade.</div><hr></td>
</tr>
</table>
</body>
</html>
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Sat Feb 05, 2005 4:44 pm
the tags should be back soon. I have a few bugs to fix in the code, and then it should be good to bring back.
What about creating storing off 256/jinterval, since you repeat that alot.. and jinterval doesn't appear to change often, if ever. This should save a fractional bit of time, but it is a savings..
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Sat Feb 05, 2005 4:54 pm
Good point... there's another bug with it since I tried to make it remember the current cell and also printing style.backgroundColor. Netscape doesn't like it... I get the color as
RGB(22, 125, 76)
Instead of it's hex value.... also, it wont update the cell properties (EM "CurrCell has no properties").
It's an easy fix... It obviously doesn't like somevar = someElement. I'll just store the element ID instead and call it up by document.getElementById()
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Sat Feb 05, 2005 5:33 pm
No actually, my problem is that
Code: Select all
document.write(someElement.style.backgroundColor)
returns
RGB(int, int, int) not #hexhexhex
Is there any way around this? It's only in netscape/mozilla... works fine in IE
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Sat Feb 05, 2005 7:34 pm
OK I've had to change my displayHex() function and my makePallette() functions to check if values are represented as RGB and then convert accordingly if they are.
Code: Select all
//Show the hex code of the chosen cell
var currCell = 'r255_c255' //Keep track of current cell (Used in palette refining)
function displayHex() {
if(document.getElementById(currCell).style.backgroundColor.toUpperCase().substr(0,3) == 'RGB') {
rgbArray = document.getElementById(currCell).style.backgroundColor.toUpperCase().match(/RGB\((\d+)\,\s?(\d+)\,\s?(\d+)\)/)
var r_hex_code = parseInt(rgbArrayї1]).toString(16)
if (r_hex_code.length == 1) {
r_hex_code = '0'+r_hex_code
}
var g_hex_code = parseInt(rgbArrayї2]).toString(16)
if (g_hex_code.length == 1) {
g_hex_code = '0'+g_hex_code
}
var b_hex_code = parseInt(rgbArrayї3]).toString(16)
if (b_hex_code.length == 1) {
b_hex_code = '0'+b_hex_code
}
var dispHexCode = '#'+(r_hex_code+g_hex_code+b_hex_code).toUpperCase()
document.getElementById('hexcode').value = dispHexCode
} else {
document.getElementById('hexcode').value = document.getElementById(currCell).style.backgroundColor.toUpperCase()
}
document.getElementById('samplecolor').style.backgroundColor = document.getElementById(currCell).style.backgroundColor
}
//Makes palette adjust to new color (fine tuning)
function refinePalette(refCell) {
makePallette(refCell)
}
//Reconstructs pallette for chosen hue
var jinterval = <?php echo $interval."\r\n"; ?>
var jdivision = (256/jinterval)
var jmultiply = <?php echo $multiply."\r\n"; ?>
var jheight = <?php echo $height."\r\n"; ?>
function makePallette(el) {
var w_hex = 0xFF //White level
//End point colors
//var r_hex_end = parseInt(el.substr(1,2),16)
//var g_hex_end = parseInt(el.substr(3,2),16)
//var b_hex_end = parseInt(el.substr(5,2),16)
if (document.getElementById(el).style.backgroundColor.substr(0,3).toUpperCase() == 'RGB') {
rgbArray = document.getElementById(el).style.backgroundColor.toUpperCase().match(/RGB\((\d+)\,\s?(\d+)\,\s?(\d+)\)/)
var r_hex_end = rgbArrayї1]
var g_hex_end = rgbArrayї2]
var b_hex_end = rgbArrayї3]
} else {
var r_hex_end = parseInt(document.getElementById(el).style.backgroundColor.substr(1,2),16)
var g_hex_end = parseInt(document.getElementById(el).style.backgroundColor.substr(3,2),16)
var b_hex_end = parseInt(document.getElementById(el).style.backgroundColor.substr(5,2),16)
}
//Increments per row
var inc_w = Math.ceil(w_hex/jdivision)
var inc_y_r = Math.ceil(r_hex_end/jdivision)
var inc_y_g = Math.ceil(g_hex_end/jdivision)
var inc_y_b = Math.ceil(b_hex_end/jdivision)
for(var i=255; i>=0; i-=jinterval) {
//Initial whiteness
r_hex = w_hex
g_hex = w_hex
b_hex = w_hex
//Difference in values left to right
var diff_x_r = w_hex - r_hex_end
var diff_x_g = w_hex - g_hex_end
var diff_x_b = w_hex - b_hex_end
//Increment per cell for hex
var inc_x_r = Math.ceil(diff_x_r/jdivision)
var inc_x_g = Math.ceil(diff_x_g/jdivision)
var inc_x_b = Math.ceil(diff_x_b/jdivision)
for (var x=255; x>=0; x-=jinterval) { //Cells
//Red, green and blue hex start values
if (r_hex < 0) {
r_hex = 0
}
var r_hex_code = r_hex.toString(16)
if (r_hex_code.length == 1) {
r_hex_code = '0'+r_hex_code
}
if (g_hex < 0) {
g_hex = 0
}
var g_hex_code = g_hex.toString(16)
if (g_hex_code.length == 1) {
g_hex_code = '0'+g_hex_code
}
if (b_hex < 0) {
b_hex = 0
}
var b_hex_code = b_hex.toString(16)
if (b_hex_code.length == 1) {
b_hex_code = '0'+b_hex_code
}
var buildHex = (r_hex_code+g_hex_code+b_hex_code).toUpperCase()
//Make a cell
document.getElementById('r'+i+'_c'+x).style.backgroundColor = '#'+buildHex //Change the cell colors
//Reduce to amount of white
r_hex -= inc_x_r
g_hex -= inc_x_g
b_hex -= inc_x_b
}
//For the next row
r_hex_end -= inc_y_r
g_hex_end -= inc_y_g
b_hex_end -= inc_y_b
w_hex -= inc_w
}
}
Last edited by
Chris Corbyn on Wed Apr 26, 2006 3:59 am, edited 2 times in total.
The Monkey
Forum Contributor
Posts: 168 Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA
Post
by The Monkey » Sun Feb 06, 2005 10:19 am
I must say... that is pretty cool.
John Cartwright
Site Admin
Posts: 11470 Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:
Post
by John Cartwright » Sun Feb 06, 2005 10:56 am
Its a lot faster the last time i tested this, keep up the good work...
Pretty cool code
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Sun Feb 06, 2005 12:54 pm
Thanks guys... it started out as a personal project since we don't have any graphics applications at work and I tended to use the photoshop color picker to get hex codes. A pain when I'm trying to do web dev stuff in my spare time at work. Then a friend also needed a color picker only... not a full package so i thought... oh heck... I'll write one.
I'll put the finished source code up somewhere once it's done so people can play with it as they wish