update skpdiff visualization (image magnification with alpha mask)

tools/skpdiff/diff_viewer.js

 var MAX_SWAP_IMG_SIZE = 400;
+var MAGNIFIER_WIDTH = 200;

[epoger, 2013/10/21 15:02:53]

Is the web UI available somewhere for me to view easily?  (i.e. without patching
this CL into a local workspace and preparing my own JSON file to feed it)

As much as I love reading Javascript, my feedback will be more helpful if I can
play around with the UI

+var MAGNIFIER_HEIGHT = 200;
+var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5;
+var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5;
+// TODO add support for a magnified scale factor
+var MAGNIFIER_SCALE_FACTOR = 2.0;
 
 angular.module('diff_viewer', []).
-config(['$routeProvider', function($routeProvider) {
-    // Show the list of differences by default
-    $routeProvider.
-    otherwise({ templateUrl: '/diff_list.html', controller: DiffListController});
-}]).
-directive('swapImg', function() {
-    // Custom directive for showing an image that gets swapped my mouseover.
-    return {
-        restrict: 'E', // The directive can be used as an element name
-        replace: true, // The directive replaces itself with the template
-        template: '<canvas ng-mouseenter="swap()" ng-mouseleave="swap()"></canvas>',
-        scope: { // The attributes below are bound to the scope
-            leftSrc: '@',
-            rightSrc: '@',
-            side: '@'
-        },
-        link: function(scope, elm, attrs, ctrl) {
-            var leftImage = new Image();
-            var rightImage = new Image();
-            var ctx = elm[0].getContext('2d');
+directive('imgCompare', function() {
+  // Custom directive for showing an image that gets swapped my mouseover.

[epoger, 2013/10/21 15:02:53]

my -> by?

[djsollen, 2013/11/06 16:02:30]

Done.

+  return {
+      restrict: 'E', // The directive can be used as an element name
+      replace: true, // The directive replaces itself with the template
+      template: '<canvas/>',
+      scope: true,
+      link: function(scope, elm, attrs, ctrl) {
+          var image = new Image();
+          var canvas = elm[0];
+          var ctx = canvas.getContext('2d');
 
-            scope.render = function() {
-                var image;
-                if (scope.side == "left") {
-                    image = leftImage;
-                } else {
-                    image = rightImage;
-                }
+          var magnifiyContent = false;

[epoger, 2013/10/21 15:02:53]

magnifiy -> magnify

[djsollen, 2013/11/06 16:02:30]

Done.

 
-                // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZE, and the images are
-                // scaled down in halves.
-                var divisor = 1;
-                while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) {
-                    divisor *= 2;
-                }
+          // When the type attribute changes, load the image and then render
+          attrs.$observe('type', function(value) {
+              switch(value) {
+                case "alphaMask":
+                    image.src = scope.record.differencePath;
+                    break;
+                case "baseline":
+                    image.src = scope.record.baselinePath;
+                    magnifiyContent = true;
+                    break;
+                case "test":
+                  image.src = scope.record.testPath;

[epoger, 2013/10/21 15:02:53]

inconsistent indentation in here

+                  magnifiyContent = true;
+                  break;
+                default:
+                    console.log("Unknown type attribute on <img-compare>: " + value);
+                    return;
+              }
 
-                // Set canvas to correct size and draw the image into it
-                elm[0].width = image.width / divisor;
-                elm[0].height = image.height / divisor;
-                ctx.drawImage(image, 0, 0, elm[0].width, elm[0].height);
+              image.onload = function() {
+                  // compute the scaled image width/height for image and canvas
+                  var divisor = 1;
+                  // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZE,
+                  // and the images are scaled down in halves.
+                  while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) {

[epoger, 2013/10/21 15:02:53]

The iterative implementation is _ok_, but couldn't you compute this in one shot
using log()?

+                      divisor *= 2;
+                  }
+
+                  scope.setImgScaleFactor(1 / divisor);
+
+                  // Set canvas to correct size
+                  canvas.width = image.width * scope.imgScaleFactor;
+                  canvas.height = image.height * scope.imgScaleFactor;
+
+                  // render the image onto the canvas
+                  scope.renderImage();
+              }
+          });
+
+          // When the magnify attribute changes, render the magnified rect at
+          // the default zoom level.
+          scope.$watch('magnifyCenter', function(magCenter) {
+              if (!magnifiyContent) {
+                  return;
+              }
+
+              scope.renderImage();
+
+              if (!magCenter) {
+                  return;
+              }
+
+              var magX = magCenter.x - MAGNIFIER_HALF_WIDTH;
+              var magY = magCenter.y - MAGNIFIER_HALF_HEIGHT;
+
+              var magMaxX = canvas.width - MAGNIFIER_WIDTH;
+              var magMaxY = canvas.height - MAGNIFIER_HEIGHT;
+
+              var magRect = { x: Math.max(0, Math.min(magX, magMaxX)),
+                              y: Math.max(0, Math.min(magY, magMaxY)),
+                              width: MAGNIFIER_WIDTH,
+                              height: MAGNIFIER_HEIGHT
+                            };
+
+              var imgRect = { x: (magCenter.x / scope.imgScaleFactor) - MAGNIFIER_HALF_WIDTH,
+                              y: (magCenter.y  / scope.imgScaleFactor) - MAGNIFIER_HALF_HEIGHT,
+                              width: MAGNIFIER_WIDTH,
+                              height: MAGNIFIER_HEIGHT
+                            };
+
+              // draw the magnified image
+              ctx.clearRect(magRect.x, magRect.y, magRect.width, magRect.height);
+              ctx.drawImage(image, imgRect.x, imgRect.y, imgRect.width, imgRect.height,
+                            magRect.x, magRect.y, magRect.width, magRect.height);
+
+              // draw the outline rect
+              ctx.beginPath();
+              ctx.rect(magRect.x, magRect.y, magRect.width, magRect.height);
+              ctx.lineWidth = 2;
+              ctx.strokeStyle = 'red';
+              ctx.stroke();
+
+          });
+
+          scope.renderImage = function() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+          };
+
+          scope.computeMagnifierOutline = function(event) {
+            var scaledWidth = MAGNIFIER_WIDTH * scope.imgScaleFactor;
+            var scaledHeight = MAGNIFIER_HEIGHT * scope.imgScaleFactor;
+            return {
+              x: event.offsetX - (scaledWidth * 0.5),
+              y: event.offsetY  - (scaledHeight * 0.5),
+              width: scaledWidth,
+              height: scaledHeight
             };
+          };
 
-            // When the leftSrc attribute changes, load the image and then rerender
-            attrs.$observe('leftSrc', function(value) {
-                leftImage.src = value;
-                leftImage.onload = function() {
-                    if (scope.side == "left") {
-                        scope.render();
-                    }
-                };
-            });
+          scope.MagnifyDraw = function(event, startMagnify) {

[epoger, 2013/10/21 15:02:53]

please document the function parameters and behavior

+              if (startMagnify) {
+                scope.setMagnifierState(true);

[epoger, 2013/10/21 15:02:53]

inconsistent indentation again

+              }  else if (!scope.magnifierOn) {
+                  return;
+              }
 
-            // When the rightSrc attribute changes, load the image and then rerender
-            attrs.$observe('rightSrc', function(value) {
-                rightImage.src = value;
-                rightImage.onload = function() {
-                    if (scope.side == "right") {
-                        scope.render();
-                    }
-                };
-            });
+              scope.renderImage();
 
-            // Swap which side to draw onto the canvas and then rerender
-            scope.swap = function() {
-                if (scope.side == "left") {
-                    scope.side = "right";
-                } else {
-                    scope.side = "left";
-                }
-                scope.render();
-            };
-        }
-    };
+              // render the magnifier outline rect
+              var rect = scope.computeMagnifierOutline(event);
+              ctx.save();
+              ctx.beginPath();
+              ctx.rect(rect.x, rect.y, rect.width, rect.height);
+              ctx.lineWidth = 2;
+              ctx.strokeStyle = 'red';
+              ctx.stroke();
+              ctx.restore();
+
+              // update scope on baseline / test that will cause them to render
+              scope.setMagnifyCenter({x: event.offsetX, y: event.offsetY});
+          };
+
+          scope.MagnifyEnd = function(event) {
+              scope.renderImage();
+              // update scope on baseline / test that will cause them to render
+              scope.setMagnifierState(false);
+              scope.setMagnifyCenter(undefined);
+        };
+      }
+  };
 });
 
+function ImageController($scope, $http, $location, $timeout, $parse) {
+  $scope.imgScaleFactor = 1.0;

[epoger, 2013/10/21 15:02:53]

given that the image is always REDUCED, not expanded, maybe it would be better
to store it as the divisor (and thus avoid floating-point resolution issues)?

+  $scope.magnifierOn = false;
+  $scope.magnifyCenter = undefined;
+
+  $scope.setImgScaleFactor = function(scaleFactor) {
+    $scope.imgScaleFactor = scaleFactor;
+  }
+
+  $scope.setMagnifierState = function(magnifierOn) {
+    $scope.magnifierOn = magnifierOn;
+  }
+
+  $scope.setMagnifyCenter = function(magnifyCenter) {
+      $scope.magnifyCenter = magnifyCenter;
+  }
+}
+
 function DiffListController($scope, $http, $location, $timeout, $parse) {
     // Detect if we are running the web server version of the viewer. If so, we set a flag and
     // enable some extra functionality of the website for rebaselining.
     $scope.isDynamic = ($location.protocol() == "http" || $location.protocol() == "https");
 
     // Label each kind of differ for the sort buttons.
     $scope.differs = [
         {
             "title": "Different Pixels"
         },
@@ skipping 74 matching lines @@
         }
         $http.post("/commit_rebaselines", {
             "rebaselines": rebaselines
         }).success(function(data) {
             $scope.flashStatus(data.success);
         }).error(function() {
             $scope.flashStatus(false);
         });
     };
 }