A simple javascript-based colour picker

09-01-2008

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 <td> tags 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

09-01-2008

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);

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

09-02-2008

On Sep 1, 7:40*pm, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
> 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);
>
> --
> 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

09-02-2008

Arun wrote:
> On Sep 1, 7:40 pm, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
>> 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);
>>
>> --
>> 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?

09-02-2008

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

> Arun wrote:
>> On Sep 1, 7:40 pm, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
>>> 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]

>>
>> 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)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
colour matcher/chooser/picker/changer prog	Tim W	HTML	2	08-24-2012 02:07 PM
What is the point of having 16 bit colour if a computer monitor can only display 8 bit colour? How do you edit 16 bit colour when you can only see 8 bit?	Scotius	Digital Photography	6	07-13-2010 03:33 AM
Getting default colour for <input> - or just the old colour	jodleren	Javascript	2	01-12-2008 02:57 PM
Date Time Picker	Charles A. Lackman	ASP .Net	4	11-30-2004 03:07 PM
Colour blindness, photography and colour management	Tor Lillqvist	Digital Photography	12	05-24-2004 08:57 AM