Implemented output settings as suggested by amolgkulkarni

README.md

@@ -3,6 +3,8 @@ Resemble.js
 
 Analyse and compare images with Javascript and HTML5. [Resemble.js Demo](http://huddle.github.com/Resemble.js/)
 
+![Two image diff examples side-by-side, one pink, one yellow.](https://raw.github.com/Huddle/Resemble.js/master/demoassets/readmeimage.jpg "Visual image comparison")
+
 ### Get it
 
 `npm install resemblejs`
@@ -51,6 +53,21 @@ You can also change the comparison method after the first analysis.
 diff.ignoreAntialiasing();
 ```
 
+And change the output display style.
+
+```javascript
+resemble.outputSettings({
+  errorColor: {
+    red: 255,
+    green: 0,
+    blue: 255
+  },
+  errorType: 'movement',
+  transparency: 0.3
+});
+// resembleControl.repaint();
+```
+
 --------------------------------------
 
 Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team.

demoassets/main.js

@@ -60,7 +60,7 @@ $(function(){
 			window.open(diffImage.src, '_blank');
 		});
 
-		$('#buttons').show();
+		$('.buttons').show();
 
 		if(data.misMatchPercentage == 0){
 			$('#thesame').show();
@@ -80,13 +80,14 @@ $(function(){
 	var file1;
 	var file2;
 	var resembleControl;
+
 	dropZone($('#dropzone1'), function(file){
-		console.log(file);
 		file1 = file;
 		if(file2){
 			resembleControl = resemble(file).compareTo(file2).onComplete(onComplete);
 		}
 	});
+
 	dropZone($('#dropzone2'), function(file){
 		file2 = file;
 		if(file1){
@@ -94,13 +95,12 @@ $(function(){
 		}
 	});
 
-
+	var buttons = $('.buttons button');
-	var buttons = $('#raw, #colors, #antialising');
 
 	buttons.click(function(){
 		var $this = $(this);
 
-		buttons.removeClass('active');
+		$this.parent('.buttons').find('button').removeClass('active');
 		$this.addClass('active');
 
 		if($this.is('#raw')){
@@ -114,8 +114,57 @@ $(function(){
 		if($this.is('#antialising')){
 			resembleControl.ignoreAntialiasing();
 		}
+		else
+		if($this.is('#pink')){
+			resemble.outputSettings({
+				errorColor: {
+					red: 255,
+					green: 0,
+					blue: 255
+				}
+			});
+			resembleControl.repaint();
+		}
+		else
+		if($this.is('#yellow')){
+			resemble.outputSettings({
+				errorColor: {
+					red: 255,
+					green: 255,
+					blue: 0
+				}
+			});
+			resembleControl.repaint();
+		}
+		else
+		if($this.is('#flat')){
+			resemble.outputSettings({
+				errorType: 'flat'
+			});
+			resembleControl.repaint();
+		}
+		else
+		if($this.is('#movement')){
+			resemble.outputSettings({
+				errorType: 'movement'
+			});
+			resembleControl.repaint();
+		}
+		else
+		if($this.is('#opaque')){
+			resemble.outputSettings({
+				transparency: 1
+			});
+			resembleControl.repaint();
+		}
+		else
+		if($this.is('#transparent')){
+			resemble.outputSettings({
+				transparency: 0.3
+			});
+			resembleControl.repaint();
+		}
 	});
-
 
 	(function(){
 		var xhr = new XMLHttpRequest();

index.html

@@ -84,11 +84,31 @@
 									Diff will appear here.
 								</div>
 								<br/>
-								<div class="btn-group" id="buttons" style="display:none">
+
+								<div class="btn-group buttons" style="display:none">
 									<button class="btn active" id="raw">Ignore nothing</button>
 									<button class="btn" id="colors">Ignore colors</button>
 									<button class="btn" id="antialising">Ignore antialiasing</button>
 								</div>
+
+								<br/>
+								<br/>
+
+								<div class="btn-group buttons" style="display:none">
+									<button class="btn active" id="pink">Pink</button>
+									<button class="btn" id="yellow">Yellow</button>
+								</div>
+
+								<div class="btn-group buttons" style="display:none">
+									<button class="btn active" id="flat">Flat</button>
+									<button class="btn" id="movement">Movement</button>
+								</div>
+								
+								<div class="btn-group buttons" style="display:none">
+									<button class="btn active" id="opaque">Opaque</button>
+									<button class="btn" id="transparent">Transparent</button>
+								</div>
+
 								<br/>
 								<br/>
 								<div id="diff-results" style="display:none;">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "resemblejs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Image analysis and comparison with HTML5",
   "main": "resemble.js",
   "repository": {

resemble.js

@@ -1,13 +1,41 @@
 /*
-Author: James Cryer
+James Cryer / Huddle 2014
-Company: Huddle
-Last updated date: 17 Sep 2013
 URL: https://github.com/Huddle/Resemble.js
 */
 
 (function(_this){
 	'use strict';
 
+	var pixelTransparency = 1;
+
+	var errorPixelColor = { // Color for Error Pixels. Between 0 and 255.
+		red: 255,
+		green: 0,
+		blue: 255,
+		alpha: 255
+	};
+
+	var errorPixelTransform = {
+		flat : function (d1, d2){
+			return {
+				r: errorPixelColor.red,
+				g: errorPixelColor.green,
+				b: errorPixelColor.blue,
+				a: errorPixelColor.alpha
+			}
+		},
+		movement: function (d1, d2){
+			return {
+				r: ((d2.r*(errorPixelColor.red/255)) + errorPixelColor.red)/2,
+				g: ((d2.g*(errorPixelColor.green/255)) + errorPixelColor.green)/2,
+				b: ((d2.b*(errorPixelColor.blue/255)) + errorPixelColor.blue)/2,
+				a: d2.a
+			}
+		}
+	};
+	
+	var errorPixelTransformer = errorPixelTransform.flat;
+
 	_this['resemble'] = function( fileData ){
 
 		var data = {};
@@ -242,28 +270,28 @@ URL: https://github.com/Huddle/Resemble.js
 			return false;
 		}
 
-		function errorPixel(px, offset){
+		function errorPixel(px, offset, data1, data2){
-			px[offset] = 255; //r
+			var data = errorPixelTransformer(data1, data2);
-			px[offset + 1] = 0; //g
+			px[offset] = data.r;
-			px[offset + 2] = 255; //b
+			px[offset + 1] = data.g;
-			px[offset + 3] = 255; //a
+			px[offset + 2] = data.b;
+			px[offset + 3] = data.a;
 		}
 
 		function copyPixel(px, offset, data){
 			px[offset] = data.r; //r
 			px[offset + 1] = data.g; //g
 			px[offset + 2] = data.b; //b
-			px[offset + 3] = data.a; //a
+			px[offset + 3] = data.a * pixelTransparency; //a
 		}
 
 		function copyGrayScalePixel(px, offset, data){
 			px[offset] = data.brightness; //r
 			px[offset + 1] = data.brightness; //g
 			px[offset + 2] = data.brightness; //b
-			px[offset + 3] = data.a; //a
+			px[offset + 3] = data.a * pixelTransparency; //a
 		}
 
-
 		function getPixelInfo(data, offset, cacheSet){
 			var r;
 			var g;
@@ -346,14 +374,14 @@ URL: https://github.com/Huddle/Resemble.js
 					if( isPixelBrightnessSimilar(pixel1, pixel2) ){
 						copyGrayScalePixel(targetPix, offset, pixel2);
 					} else {
-						errorPixel(targetPix, offset);
+						errorPixel(targetPix, offset, pixel1, pixel2);
 						mismatchCount++;
 					}
 					return;
 				}
 
 				if( isRGBSimilar(pixel1, pixel2) ){
-					copyPixel(targetPix, offset, pixel2);
+					copyPixel(targetPix, offset, pixel1, pixel2);
 
 				} else if( ignoreAntialiasing && (
 						addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry.
@@ -365,11 +393,11 @@ URL: https://github.com/Huddle/Resemble.js
 					if( isPixelBrightnessSimilar(pixel1, pixel2) ){
 						copyGrayScalePixel(targetPix, offset, pixel2);
 					} else {
-						errorPixel(targetPix, offset);
+						errorPixel(targetPix, offset, pixel1, pixel2);
 						mismatchCount++;
 					}
 				} else {
-					errorPixel(targetPix, offset);
+					errorPixel(targetPix, offset, pixel1, pixel2);
 					mismatchCount++;
 				}
 
@@ -515,6 +543,10 @@ URL: https://github.com/Huddle/Resemble.js
 					if(hasMethod) { param(); }
 					return self;
 				},
+				repaint: function(){
+					if(hasMethod) { param(); }
+					return self;
+				},
 				onComplete: function( callback ){
 
 					updateCallbackArray.push(callback);
@@ -545,4 +577,24 @@ URL: https://github.com/Huddle/Resemble.js
 		};
 
 	};
+
+	_this['resemble'].outputSettings = function(options){
+		var key;
+		var undefined;
+
+		if(options.errorColor){
+			for (key in options.errorColor) {
+				errorPixelColor[key] = options.errorColor[key] === undefined ? errorPixelColor[key] : options.errorColor[key];
+			}
+		}
+
+		if(options.errorType && errorPixelTransform[options.errorType] ){
+			errorPixelTransformer = errorPixelTransform[options.errorType];
+		}
+		
+		pixelTransparency = options.transparency || pixelTransparency;
+
+		return this;
+	};
+
 }(this));