Color Picker

[eclisse]

Hi.I'm new on forum from France.I've found a wonderful system of colorpicker from pages of W3schools but i don't understand part of this module.the link is : http://www.w3schools.com/tags/ref_colorpicker.aspI was interesting to create this type of linear gradient from black to white with a specific color passed by parameters.I've created a function to do it but it's not working so fine.I paste my code here :

<% colorHex=request("colorHex") Red = cdbl("&H"& mid(colorHex,1,2))Green = cdbl("&H"& mid(colorHex,3,2))Blue = cdbl("&H"& mid(colorHex,5,2))ColorHexR = RedColorHexG = GreenColorHexB = BluecolorHex = Red &"|"& Green &"|"& Blue color_end=split(colorHex,"|")color_beg = Array (0,0,0)color_end = Array (255,255,255)valu = Array ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f") function genRanges()	color_end=split(colorHex,"|")	qty = 25	beg_col_1 = color_beg(0)	beg_col_2 = color_beg(1)	beg_col_3 = color_beg(2)		step1 = Cint((beg_col_1 - color_end(0)) / ((qty/2)-1))	step2 = Cint((beg_col_2 - color_end(1)) / ((qty/2)-1))	step3 = Cint((beg_col_3 - color_end(2)) / ((qty/2)-1))			for i = 1 to (qty/2)		bg_col = RGBtoColor(beg_col_1, beg_col_2, beg_col_3)		fg_col = RGBtoColor((beg_col_1 OR 255), (beg_col_2 OR 255), (beg_col_3 OR 255))				beg_col_1=beg_col_1-step1		beg_col_2=beg_col_2-step2		beg_col_3=beg_col_3-step3				response.write "<tr><td style='width:10px;'>"&i&"</td>"		response.write "<td onmouseout='mouseOutMap()' onclick='clickColor("""&bg_col&""",-1,-1)' onmouseover='mouseOverColor("""&bg_col&""")' style='width:200px;height:20px;color:#FFFFFF;background:"&bg_col&"'> </td>"		response.write "<td style='width:10px;'></td><td style='font-family:courier new;font-size:110%;'>"&bg_col&"</td></tr>"			next		color_beg = Array (beg_col_1-step1,beg_col_2-step2,beg_col_3-step3)	color_end = Array (255,255,255)	beg_col_1 = color_beg(0)	beg_col_2 = color_beg(1)	beg_col_3 = color_beg(2)		step1 = Cint((beg_col_1 - color_end(0)) / ((qty/2)-2))	step2 = Cint((beg_col_2 - color_end(1)) / ((qty/2)-2))	step3 = Cint((beg_col_3 - color_end(2)) / ((qty/2)-2))			for i = i to (qty-2)			if cdbl(replace(bg_col, "#", "&H")) < cdbl("&H"&request("colorHex")) then 			response.Write(bg_col)						bg_col = RGBtoColor(beg_col_1, beg_col_2, beg_col_3)			fg_col = RGBtoColor((beg_col_1 OR 255), (beg_col_2 OR 255), (beg_col_3 OR 255))						beg_col_1=beg_col_1-step1			beg_col_2=beg_col_2-step2			beg_col_3=beg_col_3-step3						response.write "<tr><td style='width:10px;'>"&i&"</td>"			response.write "<td onmouseout='mouseOutMap()' onclick='clickColor("""&bg_col&""",-1,-1)' onmouseover='mouseOverColor("""&bg_col&""")' style='width:200px;height:20px;color:#FFFFFF;background:"&bg_col&"'> </td>"			response.write "<td style='width:10px;'></td><td style='font-family:courier new;font-size:110%;'>"&bg_col&"</td></tr>"		end if	next 	End function function Hex16(num)	if num > 15 then num = 15	if num < 0 then num = 0	Hex16 = (valu(num))end function function Hex16ToInt(digit)	Hex16ToInt=""	for i = 0 to ubound(valu)		  if digit=valu(i) then Hex16ToInt=i	nextend function function Hex255(num)	if num > 255 then num = 255	if num < 0 then num = 0	Hex255 = Hex16(Cint(num / 16)) & Hex16(Cint(num mod 16))end function function Hex255ToInt(digit)	if len(digit)=1 then		Hex255ToInt=Hex16ToInt(digit)	elseif len(digit)>1 then		Hex255ToInt = Cint(Hex16ToInt(mid(digit,1,1)))*16 & Hex16ToInt(mid(digit,2,1))	else 		Hex255ToInt=NULL	end ifend function function ColorToRGB(color)	rgb = Array (NULL, NULL, NULL)	if len(color)=7 then		rgb(0) = Hex255ToInt(mid(color,1,1)&mid(color,2,1))		rgb(1) = Hex255ToInt(mid(color,3,1)&mid(color,4,1))		rgb(2) = Hex255ToInt(mid(color,5,1)&mid(color,6,1))	end if	ColorToRGB=rgbend function function RGBtoColor(red, green, blue)	if red > 255 then red = 255	if green > 255 then green = 255	if blue > 255 then blue = 255	if red < 0 then red = 0	if green < 0 then green = 0	if blue < 0 then blue = 0	RGBtoColor="#" & Hex255(red) & Hex255(green) & Hex255(blue)end function%> <table cellpadding='0' cellspacing='0' border='0' style='margin-right:5px;'><tr style='height:30px;'>	<td></td>	<td valign='top' align='left'>Darker/lighter shades:</td>	<td colspan='2' valign='top' align='left'>Hex values:</td></tr><% genRanges %></table>

If someone has an idea to complete my code, it would be nice.Thanks.

[justsomeguy]

What happens when you run the code? Are there errors? Do you have an example online?

[eclisse]

Thanks for your answer.yes, you can see it on http://demo.eklize.com/colorpicker/gradien...colorHex=ff0000I have try to analyse code used by the page from 3schools but i don't succed to find the way they use to display this gradient from 000000 to ffffff each time with every nuances of color.I see they pass by parameter a variable from a javascript math function but i don't undestand if this has an incidence and whereThanks to give me a little help

[justsomeguy]

The clickColor Javascript function on the w3schools page gets the hex value and uses an ajax request to send the color to the server, and the server returns the HTML markup to display for the gradient. So the server, not Javascript, is generating that gradient. The Math.random function is just there to stop caching.

[eclisse]

Ok for the math.random function.

So the server, not Javascript, is generating that gradient.

Yes, i know. This is the code used on my page called by ajax. I just need to find a way how reproduce or undestand which function they have used to get this table of gradient color for each color passed by parameter

[justsomeguy]

They have start and end values, and an algorithm to generate X number of values between the start and end ranges. It's just math. If your start value is 0, and your end value is 100, and you want to show 10 colors, then you take the difference between the start and end, divide by the number of colors you want to show, and the result is how much to increase the value each time. So the first would be 0, the second is 10, the third is 20, etc, up to 100. With colors it's the same, you just split the one hex number up into the parts for red, green, and blue, calculate each value separately, and put them back together for the final hex color.

[eclisse]

and an algorithm to generate X number of values between the start and end ranges

Yes, sur!! trouble is : which algorithm.... i try in many ways without find it.If i pass by request an 336699 color, my gradient from 0 to 255 don't use blue color instead of...If you can help to write it, it's with pleasure i ask you.Thanks

[justsomeguy]

Yes, sur!! trouble is : which algorithm

If your start value is 0, and your end value is 100, and you want to show 10 colors, then you take the difference between the start and end, divide by the number of colors you want to show, and the result is how much to increase the value each time.

You know the start color and the end color. You are trying to determine the amount to change the color for each other color in the gradient. You do that by taking the difference between the start and end, and dividing by the number of gradations you want to show. The result is the amount to increase for each time through. That is the algorithm.Other than that, all you need to do is split the 6-character hex value into three 2-character values, for RGB, and then convert each hex value to decimal to make the math easier. Convert back to hex after the calculations when you're printing each value out.

[eclisse]

Try this :http://demo.eklize.com/colorpicker/gradien...colorhex=ff0000Don't care about the long long long gradient.... i'll see later to reduce it.I did as you told me, take the difference between start en end and divide by number of graduations.Try to reload the page with another color code (as 336699, this is a blue one)...no blue color in my gradient...what is missing ?

[justsomeguy]

It counts up the red, green, and blue, it just does each individually. Each color in the gradient needs to have updated values for all 3 colors, not just one of them.

[eclisse]

ok, i've corrected to increment each value rgb with the number of graduation.But there is no change when i load with another color.need i take my request color as my base color and change my loop :request color and decrement from this to the 000 value to the 10 first ?request color and increment the fff for the 10 last ?

[justsomeguy]

What kind of gradient are you trying to make? A gradient has 2 colors, start and stop. Your page only takes 1 color. What is this gradient supposed to look like?

[eclisse]

A simple list like the one from the page of 3schools (the right part gotten by ajax) i talk about at the beginning of this post. just pass a color in request and get the list of the gradient for this color from black to white.I thought it was maybe not too complicated... finally, maybe it is...

[justsomeguy]

just pass a color in request and get the list of the gradient for this color from black to white.

That's what I don't understand, are you trying to make a gradient just from black to white, or is it supposed to use the color you pass in somehow? Like from black to the color you pass in, or white to the color you pass in, or black to the color you pass in, then to white, etc? I don't understand what "the gradient for this color from black to white" means. The basic principal is the same though, you have two colors, the start and end, and you figure out the difference between the R, G, and B portions and how much of each you need to increase by in order to get from the start to the stop. Your code is incrementing each color individually instead of all at once, all three colors need to be incremented for each new color in the gradient.

[eclisse]

After 2 days of reflexions, i'm back!!you're right, i've mistaked!!! i've mixed up gradient color and light dark color... sorry...Is for that i didn't understand your last msg where you're talking about 2 colors in request... Of course, a gradient is build from one to antoher, so what i wanted to do was not possible in the way i supposed to do it... my gradient in fact worked well, just it's not what i wanted to do.So, i need to get a color from request and create a "gradient" with modification of the light of this color. And in that way, my first one will be black and my last white (or inverse, not important...).I've looked on webpages about philosophy to do it. It seems i need to convert RGB color in HSL color, modify light of the color and reconvert from HSL to RGB. I've began to run it, so if you have tips to help me...

[eclisse]

No idea ??

[justsomeguy]

There should be examples online if you want to convert.http://www.google.com/search?client=opera&...channel=suggest