MooDrop: Mootools Eyedropper tool

For a new application I’m working on I’ve searched the internet for a javascript based eyedropper tool. Fortunately I only found some Java based applications and I’m not a big fan of those.

So I decided to write my own Eyedropper. Test it and install it on your own website! You can tweak some events so it has more functionality.

There is also a Zip file available with a working example. Just upload the files to your folder on your webspace and navigate to it!

Example Download Class Download Zip

File structure

The following structure is used in the example and the documentation.

• images
  • your_image.jpg
• js
  • cvMooDrop.js
  • mootools-1.2.js
• ajax_moodrop.php
• basic.css
• cvMooDrop.css
• index.php /*This file contains the html for the eyedropper*/
• moodrop.php

The html

The html is really simple. The path to the image is the relative path.

The css

#dropperid {
	float: left;
	padding: 0px;
	width: 551px; //the width of the image
	height: 157px; //the height of the image
	}

#prev {
	float: left;
	width: 80px;
	height: 80px;
	border: 1px #CCC solid;
	}

The basic javascript

window.addEvent('domready', function() {
	var test1 = new moodrop('dropperid',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev'
	});
});

The more advanced javascript

window.addEvent('domready', function() {
	var test2 = new moodrop('dropperadvanced',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev2',
	});

	var colors = [];

	var addColor = function(c){
		if(colors.contains(c)){
			alert('This color already exists!');
		}else{
			colors.push(c);
			$('colors_field').value = JSON.encode(colors);
			createColor(c);
		}
	}

	var createColor = function(c){
		var box = new Element('span',{	'id': this.hex,
							  			'class': 'box',
										'styles': {
											'background': c,
											'display': 'block',
											'float': 'left',
											'cursor': 'pointer'
											}
										}).inject($('scheme'));
	};

	$('add').addEvent('click',function(a){
		addColor(test2.hex);
	});
});

The php (ajax_moodrop.php)

The AJAX request has several variables in it to get the right pixel, the pixel the dropper is pointing at.

• image: the relative path to the image file
• n: the relative top position of the pixel
• w: the relative left position of the pixel

if(isset($_GET['image'])){
	/* select the left lower pixel from the dropperdiv and get the color index */
	$im = imagecreatefromjpeg($_GET['image']);
	$color_index = imagecolorat($im, $_GET['w'], $_GET['n']);

	/* get rid of the temporary image and display the human readable hex color */
	echo '#'.dechex($color_index);
}

The function imagecreatefrom* can be changed to several functions, depending on the image type you use. In this case I’ve used a very simple static solution but you can select the correct function by checking the mime type.

• imagecreatefromjpeg
• imagecreatefromgif
• imagecreatefrompng

• Mootools 1.2 cvLinkSelect class 1.1 (0)
• Mootools 1.2 cvLinkSelect class 1.2 (0)
• Mootools 1.2 cvLinkSelect class (24)
• Php part for cvLinkSelect class (0)
• Mootools 1.2 cvElementAppear class (0)
• Mootools 1.2 cvNewsTicker class (8)
• Mootools 1.2 cvRelativeTop class (0)
• Mootools 1.2 password strength indicator (1)

Leave a Comment

Get your own Gravatar!
Your email will never be published!