Muffinresearch Labs by Stuart Colville

Pickr: colour palettes from photography | 11 Comments

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

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

  • http://www.nefariousdesigns.co.uk Tim

    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”

  • http://www.muffinresearch.co.uk Stuart

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

  • http://www.designbytim.com Timothy Wood

    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.

  • http://www.muffinresearch.co.uk Stuart

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

  • Dave

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

  • R Wysong

    Ditto. I was just looking for the source myself.

  • hex

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

  • http://seanmcauliffe.com Sean McAuliffe

    Curious if you ever made the source for this available?

  • gordy

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

  • Vinod

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

  • Komal

    Please, send the source code. Thanks a lot.

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.504s.