Adventures in scripting...

BuzzLY

OK, I know it's not a PHP question, but I have over 1800 posts here, so you can all bite me :evilgrin:

Now that I've said that, how about some help? 😃

I have been playing with the GD library, and been having some fun with it. I created a Color Picker that generates a color chart, which is clickable. When you click it, it sets the background color to your choice, and displays Hex, RGB, CMY, and CMYK values for the color. So far, so good.

What I want it to do is display a value to the user as they mouse over the image. I want this to be displayed in a custom tooltip, and I want the value in the tooltip to change as the mouse moves (as well as have the tooltip be anchored to the mouse).

Anyone done something like this in Javascript? I know I could use fields near the image and update them on mouse movement. I know it would be a better app in Java (but then it wouldn't be a PHP project, would it?). Any push in the right direction would be cool. I have STFW, but if you know where I might have missed it, then let me know!

Oh, and let me know what you think of my first foray into the world of GD goodness 🙂

Thanks!

silent

I don't know how to help you exactly, but that is some very cool %$#.

I will go STFW myself, and see if I can come up with something to help you out (I know, my post could have waited till I found something, but I had to comment on your ColorPicker) 🙂

drew010

i think you are probably looking for something like this . it takes a lot of js coding to get the tips to work for all browsers so you may want to use one of these existing scripts. now the only issue you face is passing the coords in the mouseover to a js function that will know what color it is over. btw, in mozilla 1.7, i didnt try it in firefox, clicking your image does nothing. check your js.

BuzzLY

Thanks, silent. It was fun to do 🙂

I apologize, I should have mentioned that it currently only works in/was tested in IE. I haven't figured out the equivalent "event.x" and "event.y" parameters for Mozilla. Take a look that Javascript, and see if you know what I can do. I'm working on that next.

drew010

it seems like it may be difficult to get the same results for all browsers. i found this page which outlines the different events and what browsers the work for. no event seems to be 100% for any browser. the other option (but you may have to modify a lot of code) is to use the ISMAP property of the <img> tag.
it will put the x,y coordinates of the mouse position in the image into the query string of the hyperlink.
for example <a href="page.php"><img src="image.gif" ISMAP></a> would return something like page.php?35,366 but it isnt very friendly with other vars in the query string. you might need to use some js to append other things to the link and parse it appropriately with regex on the next page load to determine your other variables. that seems to me like the easiest and most surefire way to get the coords.

Drakla

BuzzLY I was just browsing through your directories and running all your code and laughing to myself - my computer is exactly the same, filled with hundreds of bits of code to test php functions, half of them outputting nothing.

Phwew! I feel much saner knowing I'm not the only one who codes just for the sake of it.

BuzzLY

Yeah, I should really clean those up. I've been thinking of taking some of my better apps and making an online portfolio. I'm sure one of these days I'll get around to it LOL.

My page is New & Improved. Please let me know what you think. It was challenging working with colors, and as you can see from the source code of that page, there are a lot of calculations!

If I do any more work with this page, it'll probably be to bundle the functions into objects. I have a few very useful functions, like hsv2rgb, rgb2hsv, etc, that convert color values. They were very useful, for example, in finding the complementary colors, since you have to adjust the Hue to achieve this. I suppose they could be used to adjust image contrast, brightness, etc. as well. If anyone wants to see those functions, let me know. I currently have them protected in an include file.

Or, if you are interested in all sorts of color calculations, definitely check out the following sites:

Color conversions at http://www.easyrgb.com/math.php
Color calculator at http://dev.sessions.edu/ilu/ilu_1.html
Color Dabbler: http://www.arcticowlsoftware.com/colordabbler.htm

Definitely check out Color Dabbler. I swear, it is PMP cool!

BuzzLY

FYI, in case anyone's interested...

I mucked around with my Color Picker today, and I have made it work for Mozilla. There is no guarantee that it will work in all browsers (as you'll see, it does some funky stuff), but I don't really have that much time to devote to this. It was a fun project, though, and I learned a few things about GD and Javascript events.

Let me know what you think.

tekky

one thing you might consider....

changing your body text color to one of the compliments or something... (some colors are impossible to read normally -- like #000000 😛 )

awesome work though, very cool 🙂

BuzzLY

I thought of doing that, but that's why I stuck with a white background and black text. I didn't want to change TOO much whenever you choose a color.

But thanks 🙂

If anyone has trouble using the Color Picker, please let me know what browser you are using so I can attempt to address it.

dalecosp

Sorry if I'm late/stoopid.

Overlib? http://www.bosrup.com/web/overlib/

🙂

ednark

mozilla gives out a cross platform XB library... XBstyle XBlibrary etc. etc.

for others trying out cross browser stuff thats a good place to start in my opinion, haven't bothered looking at the liscence though...

http://devedge.netscape.com/viewsource/2002/updating-expcol-xbstyle/

BuzzLY

Thanks for the suggestions, guys. I did look at a few different solutions, and decided to keep the data in the window to the left of the color picker. It seemed less intrusive that way.