View Blog - Ajax and Color Pickers

In my job as a programmer at Bandwise LLC, I'm required to write all kinds of custom scripts and applications using a variety of programming tricks and techniques. One of the most revolutionary techniques that I added to the Bandwise toolbox was the use of Ajax. Ajax (Asynchronous Javascript and XML) is not so much a programming language as some people like to think. It is actually a technique used in Javascript to return content from a page or file other than the page you are viewing. If that file is a dynamic script (i.e. PHP, ASP, Coldfusion), you can produce Javascript applications on your web page that actually interact with your database without disturbing the current page or its content.

The user-interactive capabilities of Ajax has made it a widely used technique over the past five years. Its use is paramount in such websites as Youtube, Facebook, and popular website software products like vBulletin. Almost every button, widget, app, or tool on Facebook uses Ajax extensively. Youtube's video commenting system also uses Ajax so users may comment on videos without disturbing the video player. Like Youtube, Facebook, and Jelsoft, we here at Bandwise are always up on modern programming techniques. Therefore, Ajax is a common part of our web design repertoire.

Just yesterday, I was required to write a script for the next version of Majicko. Allen requested a color picker script that would display a preselected image rather than a generic gradient. The user must be able to click the image. The specific pixel clicked upon by the user must be selected, its color identified, and the appropriate hex code for the identified color passed into a text field. This seemed simple in theory, but it turned out to be an absurdly rare find on the Internet.

I first scoured the search engines for such a script and turned up nothing we could use that fit this description. Most scripts are either copyrighted, and therefore not fit for use in Majicko, or did not meet the requirements. So I started considering what I would need to make one myself. The process turned out to be easier than I ever imagined, compounding the absurdity of why no one had such a script openly available on the Internet. Don't worry, everyone. I'll provide a sample at the end of this blog.

I knew GD lib for PHP had a function called "imagecolorat" that returned the RGB color combination for a selected image at an X and Y pixel coordinate also selected. From this information alone, I was able to piece together something simple and effective, but would require Ajax to make it work. It took me about 15 minutes to put together a simple PHP script that would examine a graphic and use the imagecolorat function to return the RBG color of a pixel I preselected. I had to dig up a simple PHP function on php.net for converting RGB to Hex because that's what we prefer to use around here. The finished PHP component of this Ajax script was only 15 lines of code, not counting a few error catches I included for efficiency.

Now I needed the Javascript component. I dug up a simple Javascript function that could return the X and Y pixel coordinates of a given point on an image. Just for aesthetics, I included a little cross-hair pointer that would appear on the image, marking where it was clicked. When I click the image, the the X and Y coordinates are identified and I use Ajax to pass this information to my PHP component. In this part of the script, GD lib uses its imagecolorat function to identify the color of the point I clicked on and pass it back to my page to be inserted anywhere I want it with standard Javascript. This process was so simple that I was amazed that people were actually selling copyrighted scripts like this.

Here is the sample I put together. The Ajax component is included so anyone can try it out. This version does not include any error catches and the various browsers may disagree on how to properly position the crosshair selector I included, but I'll leave it you all to fine tune the script to your needs.