Add pure black & white colors to image analysis.

demoassets/main.js

@@ -46,6 +46,8 @@ $(function(){
 			$('#blue').css('width',data.blue+'%');
 			$('#alpha').css('width',data.alpha+'%');
 			$('#brightness').css('width',data.brightness+'%');
+			$('#white').css('width',data.white+'%');
+			$('#black').css('width',data.black+'%');
 		});
 
 	});

demoassets/resemble.css

@@ -1,20 +1,19 @@
 
-
 h1 {
     text-align: center;
 }
 
 body {
-    padding-top: 60px;  
+    padding-top: 60px;
 }
-    
+
 footer {
     margin-top: 45px;
     padding: 35px 0 36px;
     border-top: 1px solid #e5e5e5;
 }
 
-.drop-zone{
+.drop-zone {
     border: 10px dashed #ccc;
     color: #ccc;
     font-size: 32px;
@@ -25,17 +24,19 @@ footer {
     overflow: hidden;
     position: relative;
 }
-    .drop-zone.drag-over{
-        border: 10px dashed #0088CC;		
-    }
-    .drop-zone img {
-        width: 400px;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
 
-.small-drop-zone{
+.drop-zone.drag-over {
+    border: 10px dashed #08c;
+}
+
+.drop-zone img {
+    width: 400px;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.small-drop-zone {
     margin-top: 20px;
     margin-left: 90px;
     border: 10px dashed #ccc;
@@ -48,17 +49,51 @@ footer {
     overflow: hidden;
     position: relative;
 }
-    .small-drop-zone.drag-over{
-        border: 10px dashed #0088CC;        
-    }
-    .small-drop-zone img {
-        width: 330px;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-    #image-diff {
-        margin-left: 0;
-        margin-top: 50px;
-        border-style: solid;
-    }
+
+.small-drop-zone.drag-over {
+    border: 10px dashed #08c;
+}
+
+.small-drop-zone img {
+    width: 330px;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#image-diff {
+    margin-left: 0;
+    margin-top: 50px;
+    border-style: solid;
+}
+
+.progress #alpha {
+    background-color: #eee;
+    background-image: linear-gradient(45deg, darkgrey 25%, transparent 25%, transparent 75%, darkgrey 75%, darkgrey),
+    linear-gradient(45deg, darkgrey 25%, lightgrey 25%, lightgrey 75%, darkgrey 75%, darkgrey);
+    background-size: 14px 14px;
+    background-position: 0 0, 7px 7px;
+    background-repeat: repeat;
+}
+
+.progress #white {
+    background-color: #fff;
+    background-image: -moz-linear-gradient(top, #fff, #ddd);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#ddd));
+    background-image: -webkit-linear-gradient(top, #fff, #ddd);
+    background-image: -o-linear-gradient(top, #fff, #ddd);
+    background-image: linear-gradient(to bottom, #fff, #ddd);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0)
+}
+
+.progress #black {
+    background-color: #000;
+    background-image: -moz-linear-gradient(top, #555, #000);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555), to(#000));
+    background-image: -webkit-linear-gradient(top, #555, #000);
+    background-image: -o-linear-gradient(top, #555, #000);
+    background-image: linear-gradient(to bottom, #555, #000);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff000000', GradientType=0)
+}

index.html

@@ -52,6 +52,12 @@
 									    <div class="progress">
 										    <div id="alpha" class="bar" style="width: 0%;"></div>
 									    </div>
+										<div class="progress">
+											<div id="white" class="bar" style="width: 0%;"></div>
+										</div>
+										<div class="progress">
+											<div id="black" class="bar" style="width: 0%;"></div>
+										</div>
 
 									    Brightness
 									    <div class="progress progress-warning">
@@ -168,10 +174,13 @@ var api = resemble(fileData).onComplete(function(data){
 	return data;
 	/*
 	{
-	  red: 255,
-	  green: 255,
-	  blue: 255,
-	  brightness: 255
+	  red: 100,
+	  green: 100,
+	  blue: 100,
+	  brightness: 100,
+	  alpha: 100,
+	  white: 100,
+	  black: 100
 	}
 	*/
 });</pre>

resemble.js

@@ -100,12 +100,12 @@ URL: https://github.com/Huddle/Resemble.js
 			}
 		}
 
-		function loop(x, y, callback){
-			var i,j;
+		function loop(w, h, callback){
+			var x,y;
 
-			for (i=0;i<x;i++){
-				for (j=0;j<y;j++){
-					callback(i, j);
+			for (x=0;x<w;x++){
+				for (y=0;y<h;y++){
+					callback(x, y);
 				}
 			}
 		}
@@ -118,6 +118,8 @@ URL: https://github.com/Huddle/Resemble.js
 			var blueTotal = 0;
 			var alphaTotal = 0;
 			var brightnessTotal = 0;
+			var whiteTotal = 0;
+			var blackTotal = 0;
 
 			loop(height, width, function(verticalPos, horizontalPos){
 				var offset = (verticalPos*width + horizontalPos) * 4;
@@ -127,6 +129,14 @@ URL: https://github.com/Huddle/Resemble.js
 				var alpha = sourceImageData[offset + 3];
 				var brightness = getBrightness(red,green,blue);
 
+				if (red == green && red == blue && alpha) {
+					if (red == 0) {
+						blackTotal++
+					} else if (red == 255) {
+						whiteTotal++
+					}
+				}
+
 				pixelCount++;
 
 				redTotal += red / 255 * 100;
@@ -141,6 +151,8 @@ URL: https://github.com/Huddle/Resemble.js
 			data.blue = Math.floor(blueTotal / pixelCount);
 			data.alpha = Math.floor(alphaTotal / pixelCount);
 			data.brightness = Math.floor(brightnessTotal / pixelCount);
+			data.white = Math.floor(whiteTotal / pixelCount * 100);
+			data.black = Math.floor(blackTotal / pixelCount * 100);
 
 			triggerDataUpdate();
 		}