A simple javascript-based colour picker

#1 September 1st, 2008, 04:45 PM

I came across a message sometime back in 2002. Here's a link:
http://groups.google.com/group/comp....b1ac5840e445e5.

The author tries to build a colour picker from scratch but his overuse
of <tdtags puts me off the solution. Here is something I just
created. It uses prototype, just because it makes life easier for me.

....
<head>
<script type="text/javascript" src="prototype.js"></script>
<style>
.colour_field
{
width: 1.2em;
height: 1.2em !important;
background-color: #fff;
border: solid 1px #999;
float: left;
margin: 3px auto 1px auto;
cursor: pointer;
clear: right;
}
.colour_palette
{
position: absolute;
width: 252px;
border: solid 1px #dedede;
margin: 12px auto auto -2px;
cursor: default;
border-bottom: solid 2px #acacac;
border-right: solid 1px #dedede;
z-index: 9999;
}
.colour_marker
{
width: 12px;
height: 12px !important;
float: left;
cursor: pointer;
}
</style>
</head>
<body onload="initialise_colour_fields();">


<div id="something" class="colour_field"></div>

<script type="text/javascript" language="Javascript">
/*
* I am using a set of web-safe colours
*/
var colour_palette_schema = ""+
"000|300|600|900|C00|F00|"+
"003|303|603|903|C03|F03|"+
"006|306|606|906|C06|F06|"+
"009|309|609|909|C09|F09|"+
"00C|30C|60C|90C|C0C|F0C|"+
"00F|30F|60F|90F|C0F|F0F|"+
"030|330|630|930|C30|F30|"+
"033|333|633|933|C33|F33|"+
"036|336|636|936|C36|F36|"+
"039|339|639|939|C39|F39|"+
"03C|33C|63C|93C|C3C|F3C|"+
"03F|33F|63F|93F|C3F|F3F|"+
"060|360|660|960|C60|F60|"+
"063|363|663|963|C63|F63|"+
"066|366|666|966|C66|F66|"+
"069|369|669|969|C69|F69|"+
"06C|36C|66C|96C|C6C|F6C|"+
"06F|36F|66F|96F|C6F|F6F|"+
"090|390|690|990|C90|F90|"+
"093|393|693|993|C93|F93|"+
"096|396|696|996|C96|F96|"+
"099|399|699|999|C99|F99|"+
"09C|39C|69C|99C|C9C|F9C|"+
"09F|39F|69F|99F|C9F|F9F|"+
"0C0|3C0|6C0|9C0|CC0|FC0|"+
"0C3|3C3|6C3|9C3|CC3|FC3|"+
"0C6|3C6|6C6|9C6|CC6|FC6|"+
"0C9|3C9|6C9|9C9|CC9|FC9|"+
"0CC|3CC|6CC|9CC|CCC|FCC|"+
"0CF|3CF|6CF|9CF|CCF|FCF|"+
"0F0|3F0|6F0|9F0|CF0|FF0|"+
"0F3|3F3|6F3|9F3|CF3|FF3|"+
"0F6|3F6|6F6|9F6|CF6|FF6|"+
"0F9|3F9|6F9|9F9|CF9|FF9|"+
"0FC|3FC|6FC|9FC|CFC|FFC|"+
"0FF|3FF|6FF|9FF|CFF|FFF";
function initialise_colour_fields()
{
var colour_fields = $$(".colour_field");
for(c=0; c<colour_fields.length; ++c)
{
colour_field = colour_fields[c];
colour_palette = document.createElement("div");
colour_palette.className = "colour_palette";
if(colour_field.id == null || colour_field.id == "")
colour_field.id = "colour_field_" + generate_guid();
colour_palette.id = "palette_" + colour_field.id;
colour_field.setStyle({ width: "1.2em" });
create_colour_palette(colour_palette, colour_palette_schema);
colour_field.appendChild(colour_palette);
colour_field.observe("click", function(e)
{
var id = "palette_" + e.target.id;
try{ $(id).style.display = ($(id).style.display ==
"none")
? "" : "none"; }
catch(ex){}
});
}
c = 0;
}
function create_colour_palette(palette, schema)
{
var colour_values = schema.split("|");
var colour_marker = null;
for(i=0; i<colour_values.length; ++i)
{
colour_marker = document.createElement("div");
colour_marker.className = "colour_marker";
colour_marker.setStyle({
backgroundColor: "#" + colour_values[i],
border: "solid 1px transparent"
});
colour_marker.title = "#" + colour_values[i];
colour_marker.observe("click", function(e)
{
background_colour = e.target.style.backgroundColor;
colour_values = background_colour.substring(4,
background_colour.length-1).split(",");
red =
parseInt(colour_values[0]).toString(16).substring(1);
green =
parseInt(colour_values[1]).toString(16).substring(1);
blue =
parseInt(colour_values[2]).toString(16).substring(1);
if(red == "") red = "0";
if(green == "") green = "0";
if(blue == "") blue = "0";
hex_colour_value = ("#" + red + green +
blue).toUpperCase();
$(palette.id).parentNode.setStyle({ backgroundColor:
hex_colour_value });
$(palette.id).parentNode.title = hex_colour_value;
$(palette.id).setStyle({display: "none"});
});
colour_marker.observe("mouseover", function(e)
{
e.target.setStyle({ border: "solid 1px #606060"});
});
colour_marker.observe("mouseout", function(e)
{
e.target.setStyle({ border: "solid 1px transparent"});
});
palette.appendChild(colour_marker);
palette.setStyle({ display: "none" });
}
}
function generate_guid()
{
var result, i, j;
result = '';
for(j=0; j<32; j++)
{
if( j == 8 || j == 12|| j == 16|| j == 20)
i = Math.floor(Math.random()*16).toString(16).toUpperC ase();
result = result + i;
}
return result;
}
</script>
</body>
....

Hope this helps the most of you. I tried my best to convert the [table|
tr|td]-ridden code into neat <div>s. Please provide with suggestions
and how this little tool can be enhanced. For those who haven't used
prototype, just point to [ http://www.prototypejs.org/download ] and
download one [prototype.js] file (this file is required for this code
to work). Sorry for being a Brit with the spellings. :)

Cheers,
Arun

#2 September 1st, 2008, 07:45 PM

Arun wrote on 01 sep 2008 in comp.lang.javascript:

Quote:

/*
* I am using a set of web-safe colours
*/
var colour_palette_schema = ""+
"000|300|600|900|C00|F00|"+
"003|303|603|903|C03|F03|"+
"006|306|606|906 ...[........]

Wow!

var c = "";
var hx = '0369CF'.split('');
for (var i=0;i<6;i++)
for (var j=0;j<6;j++)
for (var k=0;k<6;k++)
c += hx[k]+hx[i]+hx[j]+'|';

var colour_palette_schema = c.slice(0,-1);

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

#3 September 2nd, 2008, 02:45 PM

On Sep 1, 7:40*pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:

Quote:

Arun wrote on 01 sep 2008 in comp.lang.javascript:
>

Quote:

* /*
* ** I am using a set of web-safe colours
* **/
* var colour_palette_schema = ""+
* * "000|300|600|900|C00|F00|"+
* * "003|303|603|903|C03|F03|"+
* * "006|306|606|906 ...[........]

>
Wow!
>
var c = "";
var hx = '0369CF'.split('');
for (var i=0;i<6;i++)
* *for (var j=0;j<6;j++)
* * * for (var k=0;k<6;k++)
* * * * *c += hx[k]+hx[i]+hx[j]+'|';
>
var colour_palette_schema = c.slice(0,-1);
>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Thank you for the code. I was just lazy enough to not change the
string as I got it. I planned doing the same but was reluctant enough
to have two-level deep inner loops (thinking of the performance). I
checked your code and it works wonders.

Thanks,
Arun

#4 September 2nd, 2008, 03:45 PM

Arun wrote:

Quote:

On Sep 1, 7:40 pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:

Quote:

>Arun wrote on 01 sep 2008 in comp.lang.javascript:
>>

Quote:

>>/*
>>* I am using a set of web-safe colours
>>*/
>>var colour_palette_schema = ""+
>>"000|300|600|900|C00|F00|"+
>>"003|303|603|903|C03|F03|"+
>>"006|306|606|906 ...[........]

>>
>Wow!
>>
>var c = "";
>var hx = '0369CF'.split('');
>for (var i=0;i<6;i++)
>for (var j=0;j<6;j++)
>for (var k=0;k<6;k++)
>c += hx[k]+hx[i]+hx[j]+'|';
>>
>var colour_palette_schema = c.slice(0,-1);
>>
>--
>Evertjan.
>The Netherlands.
>(Please change the x'es to dots in my emailaddress)

>
Thank you for the code. I was just lazy enough to not change the
string as I got it. I planned doing the same but was reluctant enough
to have two-level deep inner loops (thinking of the performance). I
checked your code and it works wonders.
>
Thanks,
Arun

This is a bit off topic, but I became curious about the performance of these
alternatives. Wondering, how many microseconds, milliseconds, seconds
might be the difference, and how the user might observe it. Page loading
time: more bytes to transfer before the js-program is ready to start
executing?(e.g. 1 megabit/second line --- 100 bytes / millisecond).
Execution time: how many simple js instructions is typically
executed each second? (eg. >1 000 000 ).
If there is a difference, the shorter program might have higher performance,
and the difference might be ... less than some milliseconds?

#5 September 2nd, 2008, 04:15 PM

optimistx wrote on 02 sep 2008 in comp.lang.javascript:

Quote:

Arun wrote:

Quote:

>On Sep 1, 7:40 pm, "Evertjan." <exjxw.hannivo...@interxnl.netwrote:

Quote:

>>Arun wrote on 01 sep 2008 in comp.lang.javascript:
>>>
>>>/*
>>>* I am using a set of web-safe colours
>>>*/
>>>var colour_palette_schema = ""+
>>>"000|300|600|900|C00|F00|"+
>>>"003|303|603|903|C03|F03|"+
>>>"006|306|606|906 ...[........]
>>>
>>Wow!
>>>
>>var c = "";
>>var hx = '0369CF'.split('');
>>for (var i=0;i<6;i++)
>>for (var j=0;j<6;j++)
>>for (var k=0;k<6;k++)
>>c += hx[k]+hx[i]+hx[j]+'|';
>>>
>>var colour_palette_schema = c.slice(0,-1);

[Please do not quote signatures on usenet]

Quote:

>>
>Thank you for the code. I was just lazy enough to not change the
>string as I got it. I planned doing the same but was reluctant enough
>to have two-level deep inner loops (thinking of the performance). I
>checked your code and it works wonders.
>>
>Thanks,
>Arun

>
This is a bit off topic, but I became curious about the performance of
these alternatives. Wondering, how many microseconds, milliseconds,
seconds might be the difference, and how the user might observe it.
Page loading time: more bytes to transfer before the js-program is
ready to start executing?(e.g. 1 megabit/second line --- 100 bytes /
millisecond). Execution time: how many simple js instructions is
typically executed each second? (eg. >1 000 000 ).
If there is a difference, the shorter program might have higher
performance, and the difference might be ... less than some
milliseconds?

As the above is code that is only used on setup of the page, the
minisecond or so it takes are far les than the tile it takes to download
and to render the page in the browser.

Repeated string concatenation is a slow process also in the OP code,
because every time a new memory location is used.

Therefore it would be fatr better to use an array.

And if you still want to end up with that strange string in the end,
try this code that does not concatenate the lang string,
but small 3 way concat()s and a single fast join():

=================================
var c = [];
var hx = '0369CF'.split('');
var n=0;
for (var i=0;i<6;i++)
for (var j=0;j<6;j++)
for (var k=0;k<6;k++)
c[n++] = hx[k].concat(hx[i],hx[j]);
c = c.join('|');
=================================

Both codes take about 3 miniseconds, methinks.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Popular Articles

What is Bytes?