From 397a80450e8dcbe40d80a8e62db614ff61e4463b Mon Sep 17 00:00:00 2001
From: Anton Konovalov <extempl@gmail.com>
Date: Sat, 3 Sep 2016 17:57:19 +0300
Subject: [PATCH 1/2] Add pure black & white colors to image analysis.

---
 demoassets/main.js      |  2 +
 demoassets/resemble.css | 91 ++++++++++++++++++++++++++++-------------
 index.html              | 17 ++++++--
 resemble.js             | 22 +++++++---
 4 files changed, 95 insertions(+), 37 deletions(-)

diff --git a/demoassets/main.js b/demoassets/main.js
index 01bf319..6aaa6c6 100644
--- a/demoassets/main.js
+++ b/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+'%');
 		});
 
 	});
diff --git a/demoassets/resemble.css b/demoassets/resemble.css
index 437ee36..7e2dab6 100644
--- a/demoassets/resemble.css
+++ b/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)
+}
diff --git a/index.html b/index.html
index 09182e4..3cfc225 100644
--- a/index.html
+++ b/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>
diff --git a/resemble.js b/resemble.js
index 2626a6d..847e78b 100644
--- a/resemble.js
+++ b/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();
 		}

From c86132dd06c51866ac2ce08e7a156b8e37d26f4c Mon Sep 17 00:00:00 2001
From: "james.cryer" <james.cryer@huddle.com>
Date: Tue, 27 Sep 2016 16:02:03 +0100
Subject: [PATCH 2/2] cleanup demo page for b&w bars

---
 demoassets/resemble.css |  7 +++++++
 index.html              | 14 +++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/demoassets/resemble.css b/demoassets/resemble.css
index 7e2dab6..4387968 100644
--- a/demoassets/resemble.css
+++ b/demoassets/resemble.css
@@ -67,6 +67,13 @@ footer {
     border-style: solid;
 }
 
+.progress {
+    margin-bottom: 4px;
+}
+.progress.last {
+    margin-bottom: 8px;
+}
+
 .progress #alpha {
     background-color: #eee;
     background-image: linear-gradient(45deg, darkgrey 25%, transparent 25%, transparent 75%, darkgrey 75%, darkgrey),
diff --git a/index.html b/index.html
index 3cfc225..7443f6f 100644
--- a/index.html
+++ b/index.html
@@ -49,21 +49,20 @@
 									    <div class="progress">
 										    <div id="blue" class="bar" style="width: 0%;"></div>
 									    </div>
-									    <div class="progress">
+									    <div class="progress last">
 										    <div id="alpha" class="bar" style="width: 0%;"></div>
 									    </div>
-										<div class="progress">
-											<div id="white" class="bar" style="width: 0%;"></div>
-										</div>
+										Black &amp; white
 										<div class="progress">
 											<div id="black" class="bar" style="width: 0%;"></div>
 										</div>
-
+										<div class="progress last">
+											<div id="white" class="bar" style="width: 0%;"></div>
+										</div>
 									    Brightness
 									    <div class="progress progress-warning">
 									    	<div id="brightness" class="bar" style="width: 0%;"></div>
 									    </div>
-
 									</div>
 								</div>
 							</div>
@@ -108,9 +107,6 @@
 									<button class="btn" id="same-size">Scale to same size</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>