PDA

View Full Version : color picker



amain
03-25-2006, 08:40 AM
how can i get the color value when we point the mouse on images?

Twey
03-25-2006, 10:48 AM
You can't, insofar as I know.

djr33
03-25-2006, 11:54 AM
Depending on how important it is, you could use php to do it.
It would be intense coding, probably beyond most people on the board here, but it IS possible, I think.
I don't really know how, but, generally,

You could have the point on which an image was clicked be transferred to a php interpretation page (not sure how, but there's a special way... I think its a default to send coordinates), then use that point to locate the pixel with php.
Php, in addition to programming and text stuff, can actually create and modify images.
Php could find that particular pixel of the image, somehow read a color value from it, then print that value to html.

No idea about using JS, though.

You could try to make that a JS operation... where you have an iframe or something that's the interpretation php page.. and when it was done, you'd somehow transfer the color code to the other window.

I dunno... it's complex.



You could try just making each pixel it's own image... it would be a page, but it's possible... just a lot of handcoding....


Actually, an imagemap of each pixel would do you more good and save you a bit of time coding...


How badly do you need it? :p

Twey
03-25-2006, 12:06 PM
Ah, now that's a good idea. Using PHP and GD with AJAX, this might actually be possible. I hadn't thought of that.
But yes, it does boil down to:
How badly do you need it?This is one heck of a lot of effort, and not something to be undertaken for the purpose of a minor effect.

It would be easier to do using Flash or Java, still, as I posted in your other thread. (http://www.dynamicdrive.com/forums/showthread.php?p=30643)

djr33
03-25-2006, 12:10 PM
Hey, Twey... this is a random question, but also helpful for this thread.

How could you best get php working in a client-side-esque manor?
Obviously its serverside, but how could you get it to function in realtime, with javascript and the like?
That's somewhat ambiguous, but just pick an example and go with it or something... I'm curious... wondering how that might work....


I mean... obviously you could just refresh the page with js/meta and get the php to do itself again... but that doesn't work in many cases.

Twey
03-25-2006, 12:42 PM
As I said, I'd use AJAX. This allows Javascript to send and receive data to and from a server-side script without refreshing the page. It's not entirely realtime, as there is lag, but it's closer to it than anything else.
Obviously its serversideUnless used client-side. :) It even has GTK bindings so one can create GUIs with it.

djr33
03-26-2006, 12:18 AM
Hmm.... cool.
But... AJAX isn't anything special... it's just a paricular style of combining languages, right?
I can always look up more info... no matter right now anyway.


For a color picker, I'd recommend making one not as a picture, but as a specifically coded thing just for that. Use javascript, create some kind of map and have the point relate to math that will use the coordinate to generate a code. Better yet, make some sliders with JS or something then have those change the values, creating a text box entry with the HTML code for the color. Also use that same value as a dynamic element of the page to show what the color looks like. just use a table and use bgcolor to demonstrate. (Set the table to width/height 50px and should be a nice little 'image'.)

amain
03-26-2006, 03:49 AM
I'm still trying to find the similar example for my problem.

djr33
03-26-2006, 07:20 AM
Hmm.... ok. i'm curious, so post when you find it.

Question... are you interested in the function of letting someone pick a color to serve that purpose, or actually being able to use any image you want and picking that pixel and the color?... it's very different.

jscheuer1
03-26-2006, 07:33 AM
I've seen image maps used this way but, it would be a pain if not impossible to make each pixel an area. Every block of 4 or 8 pixels might not be too bad if you are fanatical about it or can figure out a way to generate the code.

djr33
03-26-2006, 07:34 AM
Yeah. That's what makes it complex. If you didn't mind having it just be like 256 colors, then it wouldn't be too bad. But if you actually needed to make a fairly large image pixel by pixel do this, it would be lots of work...

amain
03-26-2006, 07:46 AM
djr33,i interested in the function of letting someone pick a color from any image on the desktop and i want that value color.
So can i have look the coding?

djr33
03-26-2006, 07:59 AM
Ah. Well... that's the hard thing.

I mean... it would be easy for you to setup an object that would let people choose colors.

But that's hard.


The only way I can think of doing it is through PHP. That would be insanely complex coding. Heck, I'd give it a try, but I just don't have that much time on my hands. Maybe Twey or someone else knows about the PHP image functions more than I do.

amain
03-26-2006, 08:11 AM
I know that php have image function.
But i don't know what function need to use and how to use it.

amain
03-26-2006, 08:14 AM
Twey,AJAX use for interactive web development.
This is new to me.
How to use it?
Is that AJAX is a function or new language?

djr33
03-26-2006, 08:42 AM
actually, i'm messing around with the image stuff now in php. i'm gonna try to get this to work... i'm curious.

questions:

1. what output... html code or rgb color... rgb seems easier.
2. can we chat or something? aim? other IM? I'm on right now... just lemme know your sn. PM it to me.

Or... just IM me. I'm d33jr on aim.

feel free to IM me if you're intersted, Twey.


As for AJAX... look it up on wikipedia. Basically, its a new coding language that lets you have complex serverside coding realtime. It uses JS, dhtml and other languages. It's cool. It's not actually a language, but a method of using languages together.

djr33
03-26-2006, 09:06 AM
Nevermind about this being too complex.

It's done.

Now... just gotta figure out what you want it to do, exactly....

http://ci-pro.com/misc/phptest/images/color.php


EDIT: played some more. kinda cool.
well... out for the night. check it out, see how you like it.
not sure what you want, so let me know what the point of this is and I can make it work for your purpose.
it could even use any source for the image... user input source, but I don't know if that's what you want.
So... yeah. Lemme know.
BTW, the background is what you clicked and the text should be the inverse of that, but its not quite right... some math error. i'm tired. Later.

Twey
03-26-2006, 11:44 AM
<html>
<body>
Click the image above to get color value at that pixel.</body></html>Wow. Nice page. :p
Guys, Java was made for this kind of thing. I'll hack up a quick applet later.

djr33
03-26-2006, 09:50 PM
Ok... it works... really does. Something's weird. I think I screwed up the php... I used an if and it only shows the image if you have a pixel selected.. I was moving stuff around. Here ya go.
http://ci-pro.com/misc/phptest/images/color.php
All better.

djr33
03-27-2006, 08:25 AM
Huh? No replies? Wah :p

Twey
03-27-2006, 03:15 PM
Very good. :)
Can it handle transparency?

.alias.
03-27-2006, 03:17 PM
yea thats nice i can't remember where but i saw some code (in javascript) so when you click you get the color, but if you were to edit it so it retrieves the color at the current location of the mouse and put that in a function and add to onMouseDown() on the image you might be able to do it without php?

i could be wrong

Twey
03-27-2006, 03:53 PM
Like this:
<?php
if($_POST['canscript'] == "yes") {
// Detection code goes here, and output
// a comma-seperated list of RGB values
// *nothing else*
die();
} else {
// Normal detection code goes here, with
// full output, for non-JS browsers.
die();
}
?>
<html>
<head>
<title>AJAX colour-detection script</title>
<script type="text/javascript">
function getHttpRequest() {
if(typeof ActiveXObject == "undefined" && typeof XMLHttpRequest == "undefined") return null;
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
catch (e) {
try xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
catch (E) xmlhttp = false;
}
@else xmlhttp = null;
@end @*/

if (xmlhttp == null && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = null;
}
}
return xmlhttp;
}

function handleClick(obj, ev) {
var xh = getHttpRequest();
xh.open(window.location.href, "POST", false);
xh.send("canscript=yes");
xh.send(obj.name + ".x=" + ev.offsetX);
xh.send(obj.name + ".y=" + ev.offsetY);
var colours = xh.responseText.split(",");
for(var i = 0;i < colours.length; i++)
colours[i] = parseInt(colours[i]);
var htmlColour = ("#" + colours[0].toString(16) + colours[1].toString(16) + colours[2].toString(16)).toUpperCase();
document.body.style.backgroundColour = htmlColour;
document.getElementById("output").innerHTML = "Colour values at selected pixel (" + ev.offsetX + "," + ev.offsetY + "): " + colours[0] + ", " + colours[1] + ", " + colours[2] + " (HTML colour code " + htmlColour + ").";
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="getNewColVals();return false;">
<input type="image" src="http://www.google.com/intl/en/images/logo.gif" name="ci" onclick="handleClick(this, event);return false;">
</form>
<p id="output">Click the image above to get color value at that pixel.</p>
</body>
</html>
PHP is still involved, by the way. It just doesn't involve submitting the form. :)

djr33
03-27-2006, 09:22 PM
Twey, the way I did it it could handle transparency, but it would be slightly weird.
See... it gets the value of the color IN the image, so it wouldn't account for the background.
Secondly, it stores 'transparency' as an alpha channel... basically yet another color... RGBA, so that alpha value is usually 255 (black), but can be as low as 0 (white) (yeah... reverse of the normal color thing...alphas are just representational, though. I could have this backwords, but I'm pretty sure I don't.)
So... what you'd do is get the alpha value and you could work with that, maybe. That's as easy as the RGB values.
But... if you do get the RGB values, it'll be as if it were totally opaque, and just be like that. The alpha determines see-through-ness, so you'd have to use that in some creative way...



As for your thing... meh. I don't get it. i mean... I do, but I don't get AJAX. Looks cool. :)
got a working example?

Twey
03-27-2006, 09:39 PM
So long as it doesn't conk out when it encounters transparency, I think that's all that's needed :)

got a working example?Nope, I haven't even tested it (as I didn't have the source for your image-pixel-colour-detection-thingummybob). It's probably full of bugs.

amain
03-30-2006, 06:07 AM
Thank you djr33..
I will reply later.
i'm busy right now

djr33
03-30-2006, 06:15 AM
It's probly full of bugs, eh? It's SO simple :)

Here... I'll post...

It's very specific to the functionality of that particular page... its a single page, so you'll have to seperate if you need that, and it also uses php to echo the body tag so that you can change the bg color... you probly want to make this work better... not sure.


<html>

<?php

if ($_POST['ci_x'] and $_POST['ci_y']) {

$image=imageCreateFromGIF('http://www.google.com/intl/en/images/logo.gif');

$x = $_POST['ci_x'];

$y = $_POST['ci_y'];

$colorindex = imagecolorat($image,$x,$y);

$colorrgb = imagecolorsforindex($image,$colorindex);

$r = $colorrgb['red'];

$g = $colorrgb['green'];

$b = $colorrgb['blue'];

$hex = dechex($r).dechex($g).dechex($b);

$rinv = 255-$colorrgb['red'];

$ginv = 255-$colorrgb['green'];

$binv = 255-$colorrgb['blue'];

$hexinv = dechex($rinv).dechex($ginv).dechex($binv);

echo "<body bgcolor=".$hex." text=".$hexinv."> \n";

echo '<form action="" method="post"><input type="image" src="http://www.google.com/intl/en/images/logo.gif" name="ci"></form>';

echo "RGB values of pixel at (".$x.",".$y.") are: <i>".$r." ".$g." ".$b."</i>.";

echo "<br>Hexidecimal value: ".$hex.".";

//IF YOU WANT ALPHA: echo "<br>(Apha value is ".$colorrgb['alpha'].".)";

}

else {

echo "<body> \n";

echo '<form action="" method="post"><input type="image" src="http://www.google.com/intl/en/images/logo.gif" name="ci"></form>';

echo "Click the image above to get color value at that pixel.";

}

?>

</body></html>

this is mostly cut and paste, but it works, and I even did the tabs right ^_^
enjoy.


ERROR: the only thing wrong with this is that the hexidecimal color value is off. This is from the math from rbg to hex. I think it has to do with single digit (double too?) values for the rgb.
I don't even know if the final needs hex, or just rgb, so I haven't bothered trying to fix. It comes close, anyway.

amain
03-30-2006, 08:25 AM
Thank you very very much djr33.
I also want to IM with you.
Can we talk on yahoo M?
Not today but another 2 days.
You can add me.
My email is am_cven84@yahoo.com

djr33
03-30-2006, 08:21 PM
Yeah.... I have yahoo.
I'm always on, but not always around... so go ahead and say hi and I'll respond when I'm at my computer :)
djr_33 (ATyahooDOTcom)

amain
04-01-2006, 10:37 AM
djr33, i save the websites that you give but when i run at my pc at home, it does not working.
Why?

Twey
04-01-2006, 01:18 PM
Here we go, all AJAX'ed up: http://www.twey.co.uk/files/colour.php (source (http://www.twey.co.uk/files/colour.phps))
amain: This script uses PHP, a server-side language. In order for it to work, you must be running the script on a server that supports PHP.

djr33
04-02-2006, 12:04 AM
looks like you fixed the dec to hex thing too, right?

Twey
04-02-2006, 10:57 AM
Yes, I padded out single-digit values.

djr33
04-03-2006, 09:20 AM
That script still has issues. I think it might be the jpg compress. 'Cause if you click in the white part enough, you'll end up with something that is very much not white. Heh. Same with black, actually.

So... amain, what do you plan to do with this? I'm now quite curious. I considered adding in custom image capabilities, but decided it wasn't worth it unless you needed that.



Oh, btw, Twey, I'm sure you realized this, but the "ci" label for the tag and other stuff was just 'cause I was using an image for "ci"- "creative imagination", my production company. Heh. That's weird to keep in the code.
amain, you might want to find that and change every instance of "ci" to "image" or something. Heh. Shouldn't affect how it functions... it's just a name. As long as all instances have the same name.

Twey
04-03-2006, 11:17 AM
Yeah, I used an optional "name" parameter so there's no need to edit the PHP code if you want to change the name of the image.
That script still has issues. I think it might be the jpg compress. 'Cause if you click in the white part enough, you'll end up with something that is very much not white. Heh. Same with black, actually.The fact that it's actually a GIF aside... :) I can't replicate this. Are you sure you didn't just miss?

amain
04-05-2006, 03:36 AM
Thank you twey for the source.
After this, I will put it in my system.
Actually my system want to apply fuzzy logic for the color.
Thank you all of you.

amain
04-05-2006, 03:44 AM
I want to know.
Let say red color.
How to group the red color?
I mean dark red, light red.
If dark red, so it belong to 'red' group color.
How to manage them?
Can we use if statement only?

Twey
04-05-2006, 11:09 AM
That's a bit trickier. You have to define conditions that make red red. In this case, for example, we could say that:

if($r > $g * 2 && $r > $b * 2) // colour is reddishHere, we require that the amount of blue and green be at most half the amount of red. This should cover everything from very dark red (almost black) to salmon (255,128,128).

djr33
04-05-2006, 05:09 PM
Twey, I tried it a couple times. Guessed it was jpg... meaning it would be slightly blurred at the pixel level...
But... if gif, I dunno.

Maybe something's wrong with the comparison of sizes... scale differes slightly in the way the browser and php see the image.

I dunno.

But, I AM sure I clicked in the right place...

Twey
04-05-2006, 05:40 PM
Hm... what browser are you using?

amain
04-07-2006, 10:58 AM
Fatal error: Call to undefined function: imagecreatefromgif()
This is the error when i run color picker coding.
What are the problem?
Did i missing something which is not install in my pc?

amain
04-07-2006, 11:06 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0060)http://www.walterzorn.com/dragdrop/demos/timedtransition.htm -->
<HTML><HEAD><TITLE>ce object proof of concept</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK
rel=stylesheet>

<SCRIPT language=JavaScript type=text/JavaScript>
<!--
debug = 0;

function toggle(){

debug = !debug;

}
//-->
</SCRIPT>

<META content="MSHTML 6.00.2900.2769" name=GENERATOR></HEAD>
<BODY>
<SCRIPT language=JavaScript
src="js/wz_dragdrop.js"
type=text/JavaScript></SCRIPT>

<SCRIPT language=JavaScript
src="js/ce_wz_library.js"
type=text/JavaScript></SCRIPT>

<DIV id=Bloque1
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 506px; BORDER-LEFT: #000000 1px; WIDTH: 10px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 93px; HEIGHT: 10px; BACKGROUND-COLOR: #000000; layer-background-color: #000000; border: 1px none #000000;"></DIV>
<DIV id=Bloque2
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 498px; BORDER-LEFT: #000000 1px; WIDTH: 10px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 197px; HEIGHT: 10px; BACKGROUND-COLOR: #000000; layer-background-color: #000000; border: 1px none #000000;"></DIV>
<DIV id=Bloque3
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 500px; BORDER-LEFT: #000000 1px; WIDTH: 10px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 149px; HEIGHT: 10px; BACKGROUND-COLOR: #0000FF; layer-background-color: #0000FF; border: 1px none #000000;"></DIV>
<DIV id=Bloque4
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 397px; BORDER-LEFT: #000000 1px; WIDTH: 10px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 130px; HEIGHT: 10px; BACKGROUND-COLOR: #0000FF; layer-background-color: #0000FF; border: 1px none #000000;"></DIV>
<form name="form1" method="post" action="">
<table width=678 height="387" border=0 cellpadding=0 cellspacing=0>
<tbody>
<tr> </tr>
<tr> </tr>
<tr>
<td align=middle><strong>x : </strong></td>
<td align=middle><div align="left">
<input id=x1 size=5 name=x1>
<input name=x2 id=x2 size=5>
<input name="x3" type="text" id="x3" size="5">
<input name="x4" type="text" id="x4" size="5">
</div>
</tr>
<tr>
<td align=middle><strong>y : </strong></td>
<td align=middle><div align="left">
<input id=y1 size=5 name=y1>
<input id=y2 size=5 name=y2>
<input name="y3" type="text" id="y3" size="5">
<input name="y4" type="text" id="y4" size="5">
</div></td>
<td background="images/35.gif"></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle><p align="left">1. Drag one black box to the central of flower.</p></td>
</tr>
<tr>
<td height="22" align=middle>&nbsp;</td>
<td align=middle><div align="left">2. Drag another one black box to the end of flower petal.</div></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle><div align="left">3. Drag one blue box to the </div></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle><div align="left">4. Drag another one blue box to the </div></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle><div align="left">5. Enter the number of petals
<select name="select">
<option value="0" selected>- - -</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle><div align="left">6. Click on the flower photo to get the flower color
<input name="color" type="text" id="color" size="6" maxlength="6">
</div></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle><div align="left">7. If satisfy, press
<input name="enter" type=submit class=bt2 id="enter" onClick="o= dd.elements['Bloque1']; p= dd.elements['Bloque2']; q= dd.elements['Bloque3']; r= dd.elements['Bloque4']; document.forms[0].x1.value=o.x; document.forms[0].y1.value=o.y; document.forms[0].x2.value=p.x; document.forms[0].y2.value=p.y; document.forms[0].x3.value=q.x; document.forms[0].y3.value=q.y; document.forms[0].x4.value=r.x; document.forms[0].y4.value=r.y;" value=Enter>
</div></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle></td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle>&nbsp;</td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle>&nbsp;</td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle>&nbsp;</td>
<td align=middle>&nbsp;</td>
</tr>
<tr>
<td height="16" align=middle>&nbsp;</td>
<td align=middle>&nbsp;</td>
<td width="354" align=middle>&nbsp;</td>
</tr>
<tr>
<td height="21" colspan=3 align=middle>&nbsp;</td>
</tr>
</tbody>
</table>
</form>
<SCRIPT type=text/javascript>
<!--

SET_DHTML('Bloque1'+CURSOR_MOVE);
SET_DHTML('Bloque2'+CURSOR_MOVE);
SET_DHTML('Bloque3'+CURSOR_MOVE);
SET_DHTML('Bloque4'+CURSOR_MOVE);
//-->
</SCRIPT>
<?
if (isset($_POST['enter']))
{
$x1 = $_POST[x1];
$y1 = $_POST[y1];
$x2 = $_POST[x2];
$y2 = $_POST[y2];
$x3 = $_POST[x3];
$y3 = $_POST[y3];
$x4 = $_POST[x4];
$y4 = $_POST[y4];

$black = sqrt(pow($x2 - $x1,2) + pow($y2 - $y1,2));
$blue = sqrt(pow($x4 - $x3,2) + pow($y4 - $y3,2));
echo '<b>Distance between black box is : '.$black;
echo '<p></p>';
echo 'Distance between blue box is : '.$blue;
$r1 = $black/$blue;
$r2 = $blue/$black;
echo '<p></p>';
echo 'RATIO : Black/Blue = '.$r1;
echo '<p></p>';
echo 'RATIO : Blue/Black = '.$r2;
}//end enter
?>
</BODY></HTML>

in js folder
file name = ce_wz_library


//Integrated to Walter Zorn html library

// function executeTest: for testing purposes on layerObject.htm
function executeTest(){

transformLayer (document.forms[0].x.value,document.forms[0].y.value,document.forms[0].w.value,document.forms[0].h.value,"Bloque",100,10);


}

// Uses WZ dhtml library to make timed transformations of dhtml,
// so minimizing, maximizing layers can be rather "smoot" for user,
// simulating windows os.

//Function transformLayer
//x,y = Position. Top left corner coordinates
//w,h = Size. width and height of <div></div> layer
//id = id of the Div (i.e.: id="myLayer", then, use "myLayer", WITH quotes!)
//duration = Duration, in miliseconds
//steps = Transition intervals

function transformLayer (x,y,w,h,id,duration,steps) {

//duration is in seconds
stepDuration = Math.round(duration/steps) ; // Value is in miliseconds.

obj = dd.elements[id];


// Get original values: x,y = top left corner; w,h = width height

x1 = obj.x;
y1 = obj.y;
w1 = obj.w;
h1 = obj.h;


// If values not set, or zero, we do not modify them, and take original as final as well
x = (x)?x:x1;
y = (y)?y:y1;
w = (w)?w:w1;
h = (h)?h:h1;

// how much do we need to modify our values for each step?
// The WZ library moveBy and resizeBy takes the diff with inverted sign as from original ce script:
difX = (x - x1)/steps;
difY = (y - y1)/steps;
difW = (w - w1)/steps;
difH = (h - h1)/steps;



if(top.debug==true) window.alert('x1:'+x1+', y1:'+y1+', w1:'+w1+', h1:'+h1+',<br>x:'+x+', y:'+y+', w:'+w+', h:'+h+', <br>difX:'+difX+', difY:'+difY+', difW:'+difW+', difH:'+difH+',<br>duration:'+duration+', <br>steps:'+steps+',<br>stepDuration:'+stepDuration+'');

obj.moveBy(difX,difY);
obj.resizeBy(difW,difH);

//We take out the amount of time used, and a step already being executed
duration = (duration - stepDuration);
steps --;

//If there is any step left, we execute again
if(steps>=0){
setTimeout('transformLayer('+x+','+y+','+w+','+h+',"'+id+'",'+duration+','+steps+')',stepDuration);
}
//If Return... we could set some api here as to call a function to be evaluated by the javascript,if set, on return
//for example to call the function that has to populate the div with content
//but WZ has already thought on it :-)
return;

}

amain
04-07-2006, 11:25 AM
Continue
in js folder
file name = wz_dragdrop
wz_dragdrop.js can download from http://www.walterzorn.com

If you run this coding, you can drag 4 box.
I want to connect the same box color use single line.
If the box is drag the line is move.
Twey n djr33, can you help me?

Twey
04-07-2006, 11:41 AM
It's imageCreateFromGIF. And you have to have the GD library installed.

amain
04-09-2006, 07:46 AM
Ok. Thank you Twey..
What about my problem to make line to link the box?

amain
04-09-2006, 07:52 AM
How to install GD library?
How to link with php?

Twey
04-09-2006, 08:26 AM
What about my problem to make line to link the box?No idea here, I'm afraid. Having seen some of Walter Zorn's stuff, I'm not going to say it's impossible. I just don't know how to do it. ;)

How to install GD library?
How to link with php?Depends on the platform. On Gentoo:
emerge gd; USE="gd gd-external" emerge php... although you'd be better off adding it to /etc/make.conf.

amain
04-10-2006, 01:26 AM
I'm using window xp platform.
So how to install it?
It does not have .exe file

Twey
04-10-2006, 06:52 PM
In that case I've no idea, although you should probably just follow the instructions.

amain
04-12-2006, 09:49 AM
Ok. I already have gd.exe.
Then I install it.
So i'm stuck at there.

Twey
04-12-2006, 03:41 PM
Well... I'd think that'd be all you'd need to do, so long as it installs GD into the correct PHP library path. If not, find the module (I'm guessing it'll have a .dll extension) and copy it to the PHP library directory.

djr33
04-13-2006, 06:45 AM
Sorry, guys... missed this thread for a bit... but Twey knows more about the subject at hand than I do... carry on.

Umm... why are you doing this on your own computer? Wouldn't you want this to be web-based? If not, then just open up photoshop and get the color from it's color picker ^_^

amain
04-13-2006, 07:29 AM
Yes, my system is web-based but the server is in my pc.

I get the others information

How do I install GD in windows? 15712 Users read it.

George Petrov
(May 28, 2003) Rating: 124 users
4.3 out of 5
Question:

--------------------------------------------------------------------------------

The GD Library is not installed under php in windows, how do I install it?
Answer:


--------------------------------------------------------------------------------

Go to http://www.php.net/downloads.php and download the 'PHP 4.x.x zip package' if you don't allready have it.
This package contains the GD-Library for windows. Find php_gd2.dll (or php_gd.dll if you need gif-support,
but you will have less good image quality) and put it in your php folder (Usual c:\php).
Find in the php.ini in your windows folder:
;extension=php_gd.dll
;extension=php_gd2.dll

Uncomment extension="php_gd2".dll by deleting the ';' in front of it.

I follow all instruction but it doesn't work. I not found php_gd.dll

djr33
04-13-2006, 07:39 AM
Yes, my system is web-based but the server is in my pc.Oh, ok. That makes sense. Sure :)

Hmm... it's weird... what version of php to you have? 'cause I think it comes bundled with everything after like 4.3.
If you don't have 4.3, then you might want to upgrade anyway... would fix this, and would get you closer to the newest version (though that's 5, and there seem to be a few big differences that might conflict with older coding).

I wouldn't know about installing this stuff... it came with my host... guess I'm lucky :)

Twey
04-13-2006, 10:54 AM
I follow all instruction but it doesn't work. I not found php_gd.dllHow about php_gd2.dll? Windows has a search program, does it not? Use that to look for the file.
I wouldn't know about installing this stuff... it came with my host... guess I'm lucky :)It beats me how anyone can say *n?x is user-unfriendly, after all the fishing around and copying of files and manual config editing and other obscure jiggery-pokery required to get a simple webserver working on Windows -- without even any manpages to turn to for help. Apache and PHP can be installed and automatically configured with two commands in most Linux distributions.

amain
04-14-2006, 02:48 AM
I'm using PHP 4.3. GD library come bundle in that PHP version.
Ok guy.GD library successfully installed.
Now, problem come again.
Can i use jpeg format in GD?
From you all exmple, all of picture on the top left of the desktop.
So is that possible for me to move that picture to anywhere?
If yes, how?

djr33
04-14-2006, 03:07 AM
You can use GIF, JPEG or PNG.
However, the createimagefromGIF must be changed to "createimagefromJPEG" or whatever. Same with the other functions. Basically, in the code, whereever you see "GIF", make it "JPEG"... and I'm pretty sure its jpeg, not jpg... can't remember for sure though. I can look it up later if it matters...

As for position of the image, sure. Whatever you want... just make sure the code around it is the same... the JS that twey setup and the form stuff too.

amain
04-14-2006, 08:53 AM
I'm not really catch what you say about image position.
Ok, let say the page website have banner,picture,several link on the left side.
The website use frame.At the center will display picture.
Then how to get the color on picture or banner because it is different page?

djr33
04-14-2006, 09:25 AM
example of how to place the image somewhere else:


<?php
function padNum($num, $len) {
$r = "" . $num;
while(strlen($r) < $len)
$r = "0" . $r;
return $r;
}

if(isset($_GET['name'])) {
$name = $_GET['name'];
$image = imageCreateFromGIF('noisy-jera.gif');
$x = $_GET[$name . '_x'];
$y = $_GET[$name . '_y'];
$colorindex = imagecolorat($image,$x,$y);
$colorrgb = imagecolorsforindex($image,$colorindex);
$r = $colorrgb['red'];
$g = $colorrgb['green'];
$b = $colorrgb['blue'];
$hex = padNum(dechex($r), 2) . padNum(dechex($g), 2) . padNum(dechex($b), 2);
$rinv = 255-$colorrgb['red'];
$ginv = 255-$colorrgb['green'];
$binv = 255-$colorrgb['blue'];
$hexinv = padNum(dechex($rinv), 2) . padNum(dechex($ginv), 2) . padNum(dechex($binv), 2);

if($_GET['canscript'] == "yes") {
echo("$r,$g,$b;$rinv,$ginv,$binv;$x,$y");
die();
}

echo '<html><head><title>Colour Detection</title></head><body style="background-color:'.$hex.';color:'.$hexinv.';">'."\n";
echo '<form action="colour.php" method="get"><input type="hidden" name="name" value="ci"><input type="image" src="noisy-jera.gif" name="ci"></form>'."\n";
echo "<p>RGB values of pixel at (".$x.",".$y.") are: <i>".$r." ".$g." ".$b."</i>.";
echo "<br>Hexidecimal value: ".$hex.".</p></body></html>";
} else {
?>
<html>
<head>
<title>AJAX colour-detection script</title>
<script type="text/javascript">
function padNum(num, len) {
var r = "" + num;
while(r.length < len) r = "0" + r;
return r;
}

function getHttpRequest() {
if(typeof ActiveXObject == "undefined" && typeof XMLHttpRequest == "undefined") return null;
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
catch (e) {
try xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
catch (E) xmlhttp = false;
}
@else xmlhttp = null;
@end @*/

if (xmlhttp == null && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = null;
}
}
return xmlhttp;
}

// Kudos to QuirksMode for the following two functions.
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

var xh = getHttpRequest();

function handleResponse() {
if(xh.readyState != 4) return;
var colours = xh.responseText.split(";");
var invcolours = colours[1].split(",");
var pos = colours[2].split(",");
colours = colours[0].split(",");
for(var i = 0;i < colours.length; i++) {
colours[i] = parseInt(colours[i]);
invcolours[i] = parseInt(invcolours[i]);
}
var htmlColour = ("#" + padNum(colours[0].toString(16), 2) + padNum(colours[1].toString(16), 2) + padNum(colours[2].toString(16), 2)).toUpperCase();
var invHtmlColour = ("#" + padNum(invcolours[0].toString(16), 2) + padNum(invcolours[1].toString(16), 2) + padNum(invcolours[2].toString(16), 2)).toUpperCase();
window.document.body.style.backgroundColor = htmlColour;
window.document.body.style.color = invHtmlColour;
window.document.getElementById("output").innerHTML = "Colour values at selected pixel (" + pos[0] + "," + pos[1] + "): " + colours[0] + ", " + colours[1] + ", " + colours[2] + " (HTML colour code " + htmlColour + ").";
}

function handleClick(obj, ev) {
xh.open("GET", window.location.href + "?name=" + obj.name + "&" + obj.name + ".x=" + (ev.pageX - findPosX(obj)) + "&" + obj.name + ".y=" + (ev.pageY - findPosY(obj)) + "&canscript=yes", true);
xh.send(null);
xh.onreadystatechange = handleResponse;
}
</script>
</head>
^^^Put that at the TOP of your page. Don't change it!!! (Except the <title></title> part, if you want)

Now,
<body> (you can add to the body tag if you need to)

Then, put your formatting stuff, and/or other text... like this:
Here is some text.Here's a <a href="something">LINK!</a>.
Maybe a <table></table> here or something.
<!-- Now, I'll use some <center> tags to center the image below: -->
<center>

Now, put this code, from what Twey posted, exactly like this, changing ONLY the src for the image to YOUR IMAGE:
<form action="colour.php" method="get">
<input type="image" src="noisy-jera.gif" name="ci" onclick="handleClick(this, event);return false;">
<input type="hidden" name="name" value="ci">
</form>
<p id="output">Click the image above to get color value at that pixel.</p>^^(you can also change "Click the image above...." to say what you want.)

Now, end the formatting you had above...
</center>
<!-- See? That close </center> tag stops it from being centered, so "this text" is now normal. -->
Maybe some more code down here... text... etc...

End the <body> section with:
</body>

End the <html> section with:
</html>

Then, be sure to put this at the end:
<?php } ?>

djr33
04-14-2006, 09:29 AM
And, even simpler version here:

example of how to place the image somewhere else:


<?php
function padNum($num, $len) {
$r = "" . $num;
while(strlen($r) < $len)
$r = "0" . $r;
return $r;
}

if(isset($_GET['name'])) {
$name = $_GET['name'];
$image = imageCreateFromGIF('noisy-jera.gif');
$x = $_GET[$name . '_x'];
$y = $_GET[$name . '_y'];
$colorindex = imagecolorat($image,$x,$y);
$colorrgb = imagecolorsforindex($image,$colorindex);
$r = $colorrgb['red'];
$g = $colorrgb['green'];
$b = $colorrgb['blue'];
$hex = padNum(dechex($r), 2) . padNum(dechex($g), 2) . padNum(dechex($b), 2);
$rinv = 255-$colorrgb['red'];
$ginv = 255-$colorrgb['green'];
$binv = 255-$colorrgb['blue'];
$hexinv = padNum(dechex($rinv), 2) . padNum(dechex($ginv), 2) . padNum(dechex($binv), 2);

if($_GET['canscript'] == "yes") {
echo("$r,$g,$b;$rinv,$ginv,$binv;$x,$y");
die();
}

echo '<html><head><title>Colour Detection</title></head><body style="background-color:'.$hex.';color:'.$hexinv.';">'."\n";
echo '<form action="colour.php" method="get"><input type="hidden" name="name" value="ci"><input type="image" src="noisy-jera.gif" name="ci"></form>'."\n";
echo "<p>RGB values of pixel at (".$x.",".$y.") are: <i>".$r." ".$g." ".$b."</i>.";
echo "<br>Hexidecimal value: ".$hex.".</p></body></html>";
} else {
?>
<html>
<head>
<title>AJAX colour-detection script</title>
<script type="text/javascript">
function padNum(num, len) {
var r = "" + num;
while(r.length < len) r = "0" + r;
return r;
}

function getHttpRequest() {
if(typeof ActiveXObject == "undefined" && typeof XMLHttpRequest == "undefined") return null;
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
catch (e) {
try xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
catch (E) xmlhttp = false;
}
@else xmlhttp = null;
@end @*/

if (xmlhttp == null && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = null;
}
}
return xmlhttp;
}

// Kudos to QuirksMode for the following two functions.
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

var xh = getHttpRequest();

function handleResponse() {
if(xh.readyState != 4) return;
var colours = xh.responseText.split(";");
var invcolours = colours[1].split(",");
var pos = colours[2].split(",");
colours = colours[0].split(",");
for(var i = 0;i < colours.length; i++) {
colours[i] = parseInt(colours[i]);
invcolours[i] = parseInt(invcolours[i]);
}
var htmlColour = ("#" + padNum(colours[0].toString(16), 2) + padNum(colours[1].toString(16), 2) + padNum(colours[2].toString(16), 2)).toUpperCase();
var invHtmlColour = ("#" + padNum(invcolours[0].toString(16), 2) + padNum(invcolours[1].toString(16), 2) + padNum(invcolours[2].toString(16), 2)).toUpperCase();
window.document.body.style.backgroundColor = htmlColour;
window.document.body.style.color = invHtmlColour;
window.document.getElementById("output").innerHTML = "Colour values at selected pixel (" + pos[0] + "," + pos[1] + "): " + colours[0] + ", " + colours[1] + ", " + colours[2] + " (HTML colour code " + htmlColour + ").";
}

function handleClick(obj, ev) {
xh.open("GET", window.location.href + "?name=" + obj.name + "&" + obj.name + ".x=" + (ev.pageX - findPosX(obj)) + "&" + obj.name + ".y=" + (ev.pageY - findPosY(obj)) + "&canscript=yes", true);
xh.send(null);
xh.onreadystatechange = handleResponse;
}
</script>
</head>
<body>
^^^Put that at the TOP of your page. Don't change it!!! (Except the <title></title> part, if you want)

YOUR OWN FORMATTING AND/OR TEXT/CONTENT

Now, put this code, from what Twey posted, exactly like this, changing ONLY the src for the image to YOUR IMAGE:
(put this where you want it in the code... it'll show up there on the page)
<form action="colour.php" method="get">
<input type="image" src="noisy-jera.gif" name="ci" onclick="handleClick(this, event);return false;">
<input type="hidden" name="name" value="ci">
</form>
<p id="output">Click the image above to get color value at that pixel.</p>^^(you can also change "Click the image above...." to say what you want.)

MORE OF YOUR OWN FORMATTING AND/OR TEXT/CONTENT


</body>
</html>
<?php } ?>

amain
04-17-2006, 09:00 AM
Everything is ok but example the image size is 800x600 so i want resize the size to small. When i using set height and width the color picker not working properly.
What i have to do?

djr33
04-17-2006, 09:17 AM
The size of the image is irrelevant. Just make "width=xxxxx" and "height=xxxxx".

However, the php is actually interpreting your image.

So... you must rename the file twice--
1. Where it's shown to the user
and
2. In the php code so it's looking at the same image.

see, what you're doing right now is clicking on one image at point (1,94), but you're actually getting the color value for ANOTHER image at (1,94).



fix:
CHANGE both of the filenames below to the same new filename. (must be JPG, or you'll have to switch all "JPG" to "GIF" or whatever... just stick with JPG, easiest)
IN THE PHP AT THE TOP:
......
if(isset($_GET['name'])) {
$name = $_GET['name'];
$image = imageCreateFromGIF('noisy-jera.gif');
.......


And, on your page, within the form. But you obviously know where that is.

Twey
04-17-2006, 10:46 AM
The size of the image is irrelevant. Just make "width=xxxxx" and "height=xxxxx".The size is not irrelevant at all, when the image has been resized using height= and width=. The script is looking at the original, unresized image. Therefore, if the browser samples the image down to 50% of its width, (1,30) clicked on the image will yield results from the pixel at (1,30) on the original image, while the pixel clicked is actually the pixel at (1,60) on the original image. The only way to do this is to actually size the image in a photo editor (which is a much better idea than getting the browser to resize it anyway).

djr33
04-17-2006, 08:10 PM
Oh, that's true. I assumed he's using a new image, not resized.

I don't think it's worth dealing with resizing... just make it the right size and go with that. Resave the image at whatever rez you want, so it's consistant.

The php could do conversions... divide the coordinates by 2, or something, but it would be a pain, and, since you don't like editing the php, you'll have much more luck just changing the image itself.

Twey
04-17-2006, 08:13 PM
Indeed. Also, it would break the non-JS code, which wouldn't be able to deal with sending the width and height of the image.

amain
04-18-2006, 07:08 AM
The only way to do this is to actually size the image in a photo editor (which is a much better idea than getting the browser to resize it anyway).

That mean i have resize the image manually using photo editor. Ok


The php could do conversions... divide the coordinates by 2, or something, but it would be a pain, and, since you don't like editing the php, you'll have much more luck just changing the image itself.

How to do conversions?

Twey
04-18-2006, 09:33 AM
How to do conversions?You don't need to, if you're editing the image manually. Don't worry about it.

djr33
04-18-2006, 07:28 PM
Just do it in a photo editor.

Only if you don't do that would you need to convert the coordinates (the point... (1,35), etc). that's the only reason.
It's really much easier to just change in a photo program, especially because you don't know too much php yet.

amain
04-19-2006, 09:33 AM
Ok..
Means i must edit the picture manual.
50 picture i must edit it to resize.
Thank you

djr33
04-21-2006, 02:55 AM
Hmm....
http://www.dynamicdrive.com/dynamicindex11/yuicolorpicker/index.htm
Heh.

Twey
04-21-2006, 02:53 PM
Impressive. BSD-licensed too. But I don't think it's exactly what was wanted here.

djr33
04-23-2006, 05:37 AM
Yeah... just funny we didn't know about that before... I was randomly browsing through some scripts. :)