Muffinresearch Labs by Stuart Colville

Pickr: colour palettes from photography | Comments (11)

Posted in Code on 7th November 2005, 2:10 am by Stuart

Pickr is a small demonstration of javascript’s ability to leverage server-side libraries using XMLHttpRequest. In this case the client-side script is making use of the GD library on the server side. The co-ordinates of the on-click are generated by working out the offset of the image in relation to the viewport. These co-ordinates are then sent to a PHP script (via XMLHttpRequest) which returns the RGB value of the pixel using the GD graphics library. Subsequently the “holder’s” background color is changed to match the value of that pixel.

If javascript is turned off on the browser the script degrades to using PHP sessions and GET requests to replicate the client side functionality. The image is a form input in order to retrieve the X and Y co-ordinates of the image where it was clicked and these are passed to GD to work out the colour information for that pixel

Althought this is purely a demonstration there are a few possible applications for this script. One would be to extend the script to allow users to upload photos to create palettes of colours from the photography. Also one idea I had (which is the reason for the script’s name!) would allow the user to retrieve pictures from their flickr account to create colour schemes. If nothing else, it shows that it should be possible to access anything that the GD library can do from the client side.

Check out the Pickr Demo here

Post Tools

Comments: Add yours

1. On November 7th, 2005 at 8:14 am Tim said:

Still looking good Stu – great choice of photo, although the Monkey noise one would have been funnier… ;)

I still think the reset button needs work.

And where’s the link to the files? >makes a note – “does not share toys”

2. On November 23rd, 2005 at 2:24 pm Stuart said:

Will sort out a download of the files some point in due course ; )

3. On December 6th, 2005 at 9:33 pm Timothy Wood said:

This is an awesome concept – one suggestion I’d love to see is a method to display either a list of the codes selected or next to each icon as they are selected – some way to quickly grab the codes for a photoshop swatch.

4. On December 7th, 2005 at 8:50 am Stuart said:

@Timothy: Yes great idea, I will add your suggestion in the next iteration at the same time as providing the source for download.

5. On April 28th, 2007 at 4:03 pm Dave said:

Hi would love to see how this works did you ever release the source?

6. On June 25th, 2007 at 7:03 pm R Wysong said:

Ditto. I was just looking for the source myself.

7. On February 27th, 2009 at 4:42 pm hex said:

is it available for download? please e-mail me. great work btw.

8. On March 19th, 2010 at 2:39 am Sean McAuliffe said:

Curious if you ever made the source for this available?

9. On February 26th, 2011 at 8:33 am gordy said:

I’m very interested in the source as well, thank you!

10. On May 3rd, 2011 at 11:07 am Vinod said:

Want to see what’s written in the PHP file as I need to use it with JAVA…

11. On August 12th, 2011 at 9:50 am Komal said:

Please, send the source code. Thanks a lot.







XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



GNU screen: open tab in current working directory|(1)

A nice trick for having screen open a new tab in the same directory as the one you’re currently in. To use it add it to your .screenrc

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Ubuntu: add-apt-repository: command not found|(2)

When you’re using a minimal Ubuntu install if you find the ‘add-apt-repository’ command is missing (it’s useful for adding PPAs and other repositories), then simply run:

sudo apt-get install python-software-properties

Photos on Flickr

© Copyright 2004-12 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.491s.