area measuring fixes

- add debug mode - place area dimensions at maximum width/height - fix measuring 1px high or wide areas potentially fixes #22
mrflix · Jul 14, 2015 · 2ec76bf · 2ec76bf
1 parent 705edab
commit 2ec76bf
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -6,3 +6,23 @@ Currently only available for Chrome.
 Download from the [Product Website](http://felixniklas.com/dimensions/) or the [Chrome Webstore](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj).
 
 ![Dimensions screenshot](/_sources/screenshot.png?raw=true)
+
+Change Log
+==========
+
+## Version 2 (2015-07-9)
+
+**Implemented enhancements:**
+
+- measure an area (press ALT) [\#14](https://github.com/mrflix/dimensions/issues/14)
+- adjust dimensions color depending on the background [\#20](https://github.com/mrflix/dimensions/issues/20)
+- climb up gradients [\#3](https://github.com/mrflix/dimensions/issues/3)
+- hide cursor [\#16](https://github.com/mrflix/dimensions/issues/16)
+
+
+**Fixed bugs:**
+
+- fix measuring on Mac Retina [\#8](https://github.com/mrflix/dimensions/issues/8)
+- fix a bug that breaks dimensions [\#22](https://github.com/mrflix/dimensions/issues/22)
+
+## Version 1 (2014-9-10)
diff --git a/extension/chrome.js b/extension/chrome.js
@@ -1,3 +1,4 @@
+var debug = false;
 var tabs = {};
 
 function toggle(tab){
@@ -55,6 +56,10 @@ var dimensions = {
 
     this.worker = new Worker("dimensions.js");
     this.worker.onmessage = this.receiveWorkerMessage.bind(this);
+    this.worker.postMessage({ 
+      type: 'init',
+      debug: debug 
+    });
   },
 
   deactivate: function(){
@@ -71,39 +76,31 @@ var dimensions = {
   initialize: function(port){
     this.port = port;
     port.onMessage.addListener(this.receiveBrowserMessage.bind(this));
+    this.port.postMessage({
+      type: 'init',
+      debug: debug
+    })
   },
 
   receiveWorkerMessage: function(event){
-    switch(event.data.type){
-      case 'distances':
-        this.port.postMessage({ 
-          type: event.data.type, 
-          data: event.data.data
-        });
-        break;
-      case 'screenshot processed':
-        this.port.postMessage({ type: 'screenshot taken', data: this.image.src });
-        break;
+    var forward = ['debug screen', 'distances', 'screenshot processed'];
+
+    if(forward.indexOf(event.data.type) > -1){
+      this.port.postMessage(event.data)
     }
   },
 
   receiveBrowserMessage: function(event){
-    switch(event.type){
-      case 'position':
-        this.worker.postMessage({
-          type: 'distances',
-          data: event.data
-        });
-        break;
-      case "area":
-        this.worker.postMessage({
-          type: 'area',
-          data: event.data
-        });
-        break;
-      case 'take screenshot':
-        this.takeScreenshot();
-        break;
+    var forward = ['position', 'area'];
+
+    if(forward.indexOf(event.type) > -1){
+      this.worker.postMessage(event)
+    } else {
+      switch(event.type){
+        case 'take screenshot':
+          this.takeScreenshot();
+          break;
+      }
     }
   },
 

diff --git a/extension/dimensions.js b/extension/dimensions.js
@@ -1,16 +1,24 @@
 var areaThreshold = 6;
 var dimensionsThreshold = 6;
+var debug;
+var map;
 
 onmessage = function(event){
   switch(event.data.type){
+    case 'init':
+      debug = event.data.debug;
+      break;
     case 'imgData':
       imgData = new Uint8ClampedArray(event.data.imgData);
       data = grayscale( imgData );
       width = event.data.width;
       height = event.data.height;
       postMessage({ type: "screenshot processed" });
+
+      if(debug)
+        sendDebugScreen()
       break;
-    case 'distances':
+    case 'position':
       measureAreaStopped = true;
       measureDistances(event.data.data);
       break;
@@ -22,6 +30,45 @@ onmessage = function(event){
 }
 
 
+//
+// create debug visualization
+// ==========================
+//  
+// goals:
+//  - show grayscale version to check for weaknesess in the conversion
+//  - show area progress to debug the area detection flood fill
+//
+// returns imgData
+//
+
+function createDebugVisualization() {
+  var visData = new Uint8ClampedArray(imgData);
+  var color;
+
+  for(var i=0, n=0, l=data.length; i<l; i++, n+= 4){
+    if(map && map[i] > -1) {
+      color = [255,0,0]
+    } else {
+      color = [data[i],data[i],data[i]]
+    }
+    visData[n] = color[i]; // r
+    visData[n+1] = color[i+1]; // g
+    visData[n+2] = color[i+2]; // b
+    visData[n+3] = 255; // a
+  }
+
+  return visData;
+}
+
+function sendDebugScreen() {
+  var visData = createDebugVisualization()
+  postMessage({ 
+    type: 'debug screen',
+    visDataBuffer: visData.buffer
+  })
+}
+
+
 //
 // measureArea
 // ===========
@@ -48,6 +95,9 @@ function measureArea(pos){
 function nextTick(){
   workOffStack();
 
+  if(debug)
+    sendDebugScreen()
+
   if(!measureAreaStopped){
     if(stack.length){
       setTimeout(nextTick, 0);
@@ -94,26 +144,43 @@ function floodFill(){
 }
 
 function finishMeasureArea(){
-  var boundariePixels = { vertical: [], horizontal: [] };
+  var boundariePixels = { 
+    top: [],
+    right: [],
+    bottom: [],
+    left: []
+  };
+
+  // clear map
+  map = []
 
-  // find boundaries pixels
+  // find boundarie-pixels
 
   for(var i=0, l=pixelsInArea.length; i<l; i++){
     var x = pixelsInArea[i][0];
     var y = pixelsInArea[i][1];
 
-    if(x === area.left || x === area.right)
-      boundariePixels.vertical.push(y);
-    if(y === area.top || y === area.bottom)
-      boundariePixels.horizontal.push(x);
+    if(x === area.left)
+      boundariePixels.left.push(y);
+    if(x === area.right)
+      boundariePixels.right.push(y);
+
+    if(y === area.top)
+      boundariePixels.top.push(x);
+    if(y === area.bottom)
+      boundariePixels.bottom.push(x);
   }
 
-  // center at boundarie pixel center
-  // e.g. in a circle this will center the area
+  // place dimensions at the max spread point
+  // e.g.:
+  //  - in a circle it returns the center
+  //  - in a complex shape this might fail but it tries to get close enough
 
-  area.x = getAverage(boundariePixels.horizontal);
-  area.y = getAverage(boundariePixels.vertical);
+  var x = getMaxSpread(boundariePixels.top, boundariePixels.bottom);
+  var y = getMaxSpread(boundariePixels.left, boundariePixels.right);
 
+  area.x = x;
+  area.y = y;
   area.left = area.x - area.left;
   area.right = area.right - area.x;
   area.top = area.y - area.top;
@@ -128,14 +195,33 @@ function finishMeasureArea(){
 }
 
 
-function getAverage(values){
-  var i = values.length;
-  var sum = 0;
+function getMaxSpread(sideA, sideB){
+  var a = getDimensions(sideA);
+  var b = getDimensions(sideB);
 
-  while(i--)
-    sum = sum + values[i];
+  // favor the smaller side
+  var smallerSide = a.length < b.length ? a : b;
 
-  return Math.floor(sum/values.length);
+  return smallerSide.center;
+}
+
+function getDimensions(values){
+  var min = Infinity;
+  var max = 0;
+
+  for(var i=0, l=values.length; i<l; i++){
+    if(values[i] < min)
+      min = values[i]
+    if(values[i] > max)
+      max = values[i]
+  }
+
+  return {
+    min: min,
+    center: min + Math.floor((max - min)/2),
+    max: max,
+    length: max - min
+  }
 }
 
 //

diff --git a/extension/tooltip.css b/extension/tooltip.css
@@ -16,11 +16,12 @@
   pointer-events: none;
 }
 
-.fn-screenshot {
+.fn-debugScreen {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 999;
+  background: rgba(255,0,0,.1);
 }
 
 .fn-tooltip {

diff --git a/extension/tooltip.js b/extension/tooltip.js
@@ -1,5 +1,3 @@
-var debug = false;
-
 var body = document.querySelector('body');
 var port = chrome.runtime.connect({ name: "dimensions" });
 var changeDelay = 300;
@@ -12,6 +10,7 @@ var lineColor = getLineColor();
 var colorThreshold = [0.2,0.5,0.2];
 var overlay = document.createElement('div');
 overlay.className = 'fn-noCursor';
+var debug;
 
 function init(){
   window.addEventListener('mousemove', onInputMove);
@@ -31,14 +30,20 @@ port.onMessage.addListener(function(event){
     return;
 
   switch(event.type){
+    case 'init':
+      debug = event.debug;
+
+      if(debug)
+        createDebugScreen();
+      break;
     case 'distances':
       showDimensions(event.data);
       break;
-    case 'screenshot taken':
+    case 'screenshot processed':
       resume();
-
-      if(debug)
-        debugScreenshot(event.data);
+      break;
+    case 'debug screen':
+      renderDebugScreenshot(event.visDataBuffer)
       break;
     case 'destroy':
       destroy();
@@ -54,19 +59,24 @@ function onResizeWindow(){
 
 onResizeWindow();
 
-function removeDebugScreenshot(){
-  var oldscreen = body.querySelector('.fn-screenshot');
-  if(oldscreen)
-    oldscreen.parentNode.removeChild(oldscreen);
+function createDebugScreen(){
+  debugScreen = document.createElement('canvas');
+  dsx = debugScreen.getContext('2d');
+  debugScreen.className = 'fn-debugScreen';
+  body.appendChild(debugScreen);
 }
 
-function debugScreenshot(src){
-  removeDebugScreenshot();
+function removeDebugScreen(){
+  if(debug)
+    body.removeChild(body.querySelector('.fn-debugScreen'))
+}
 
-  var screenshot = new Image();
-  screenshot.src = src;
-  screenshot.className = 'fn-screenshot';
-  body.appendChild(screenshot);
+function renderDebugScreenshot(visDataBuffer){
+  debugScreen.setAttribute('width', window.innerWidth);
+  debugScreen.setAttribute('height', window.innerHeight);
+  var visData = dsx.createImageData(window.innerWidth, window.innerHeight);
+  visData.data = new Uint8ClampedArray(visDataBuffer);
+  dsx.putImageData(visData, 0, 0);
 }
 
 function destroy(){
@@ -75,8 +85,8 @@ function destroy(){
   window.removeEventListener('touchmove', onInputMove);
   window.removeEventListener('scroll', onVisibleAreaChange);
 
+  removeDebugScreen();
   removeDimensions();
-  removeDebugScreenshot();
   enableCursor();
 }
 
@@ -95,9 +105,6 @@ function onVisibleAreaChange(){
   if(changeTimeout)
     clearTimeout(changeTimeout);
 
-  if(debug)
-    removeDebugScreenshot();
-
   changeTimeout = setTimeout(requestNewScreenshot, changeDelay);
 }
 
@@ -125,7 +132,7 @@ function enableCursor(){
 }
 
 function detectAltKeyPress(event){
-  if(event.altKey){
+  if(event.altKey && !altKeyWasPressed){
     altKeyWasPressed = true;
     sendToWorker(event);
   }
@@ -161,6 +168,8 @@ function sendToWorker(event){
   if(paused)
     return;
 
+  console.log(Date.now(), "sendToWorker");
+
   port.postMessage({ 
     type: event.altKey ? 'area' : 'position', 
     data: { x: inputX, y: inputY }