Add magnifier to rebaseline server.

NOTRY=true
BUG=skia:1917
R=epoger@google.com

Author: rmistry@google.com

Review URL: https://codereview.chromium.org/149473005

git-svn-id: http://skia.googlecode.com/svn/trunk@13315 2bbb7eff-a529-9590-31e7-b0007b416f81

gm/rebaseline_server/static/diff_viewer.js

@@ -0,0 +1,179 @@
+var MAX_SWAP_IMG_SIZE = 200;
+var MAGNIFIER_WIDTH = 100;
+var MAGNIFIER_HEIGHT = 100;
+var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5;
+var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5;
+var MAGNIFIER_SCALE_FACTOR = 2.0;
+
+angular.module('diff_viewer', []).directive('imgCompare', function() {
+  // Custom directive for comparing (3-way) images
+  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');
+          var magnifyContent = false;
+
+          // When the type attribute changes, load the image and then render
+          attrs.$observe('type', function(value) {
+              switch(value) {
+                case "differingPixelsInWhite":
+                    magnifyContent = true;
+                    break;
+                case "differencePerPixel":
+                    break;
+                case "baseline":
+                    magnifyContent = true;
+                    break;
+                case "test":
+                    magnifyContent = true;
+                    break;
+                default:
+                    console.log("Unknown type attribute on <img-compare>: " + value);
+                    return;
+              }
+
+              image.src = attrs.src;
+              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) {
+                      divisor *= 2;
+                  }
+
+                  scope.setImgScaleFactor(1 / divisor);
+
+                  // Set canvas to correct size
+                  canvas.width = image.width * scope.imgScaleFactor;
+                  canvas.height = image.height * scope.imgScaleFactor;
+
+                  scope.renderImage();
+              }
+          });
+
+          // When the magnify attribute changes, render the magnified rect at
+          // the default zoom level.
+          scope.$watch('magnifyCenter', function(magCenter) {
+              if (!magnifyContent) {
+                  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();
+
+          });
+
+          // render the image to the canvas. This is often done every frame prior
+          // to any special effects (i.e. magnification).
+          scope.renderImage = function() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+          };
+
+          // compute a rect (x,y,width,height) that represents the bounding box for
+          // the magnification effect
+          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
+            };
+          };
+
+          // event handler for mouse events that triggers the magnification
+          // effect across the 4 images being compared.
+          scope.MagnifyDraw = function(event, startMagnify) {
+              if (startMagnify) {
+                  scope.setMagnifierState(true);
+              }  else if (!scope.magnifierOn) {
+                  return;
+              }
+
+              scope.renderImage();
+
+              // 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});
+          };
+
+          // event handler that triggers the end of the magnification effect and
+          // resets all the canvases to their original state.
+          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;
+  $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;
+  }
+}
+

gm/rebaseline_server/static/loader.js

@@ -5,7 +5,7 @@
  */
 var Loader = angular.module(
     'Loader',
-    []
+    ['diff_viewer']
 );
 
 

gm/rebaseline_server/static/view.html

@@ -6,6 +6,7 @@
   <title ng-bind="windowTitle"></title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
   <script src="loader.js"></script>
+  <script src="diff_viewer.js"></script>
   <link rel="stylesheet" href="view.css">
 </head>
 
@@ -212,7 +213,7 @@
         </tr>
       </table> <!-- results header -->
       </td></tr><tr><td>
-      <table border="1"> <!-- results -->
+      <table border="1" ng-app="diff_viewer"> <!-- results -->
         <tr>
           <!-- Most column headers are displayed in a common fashion... -->
           <th ng-repeat="categoryName in ['resultType', 'builder', 'test', 'config']">
@@ -275,7 +276,7 @@
              This is made a bit tricky by the fact that AngularJS expressions
              do not allow control flow statements.  See
              http://docs.angularjs.org/guide/expression -->
-        <tr ng-repeat="result in limitedTestData">
+        <tr ng-repeat="result in limitedTestData" ng-controller="ImageController">
           <td ng-click="(viewingTab != defaultTab) || showOnlyResultType(result.resultType)">
             {{result.resultType}}
           </td>
@@ -296,27 +297,34 @@
 
           <!-- expected image -->
           <td valign="top" width="{{imageSize}}">
-            <a class="image-link" target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png">
-              <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png"/>
-            </a>
+            <br/>
+            <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png" target="_blank">View Image</a><br/>
+            <img-compare type="baseline"
+                         src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png" />
+
           </td>
 
           <!-- actual image -->
           <td valign="top" width="{{imageSize}}">
-            <a class="image-link" target="_blank" href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png">
-              <img width="{{imageSize}}" src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png"/>
-            </a>
+            <br/>
+            <a href="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
+            <img-compare type="test"
+                         src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.actualHashType}}/{{result.test}}/{{result.actualHashDigest}}.png" />
+
           </td>
 
           <!-- whitediffs: every differing pixel shown in white -->
           <td valign="top" width="{{imageSize}}">
             <div ng-hide="result.expectedHashDigest == result.actualHashDigest"
                  title="{{result.numDifferingPixels | number:0}} of {{(100 * result.numDifferingPixels / result.percentDifferingPixels) | number:0}} pixels ({{result.percentDifferingPixels.toFixed(4)}}%) differ from expectation.">
-              <a class="image-link" target="_blank" href="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png">
-                <img width="{{imageSize}}" src="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/>
-              </a><br>
+
               {{result.percentDifferingPixels.toFixed(4)}}%
               ({{result.numDifferingPixels}})
+              <br/>
+              <a href="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
+              <img-compare type="differingPixelsInWhite"
+                           src="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" />
+
             </div>
             <div ng-hide="result.expectedHashDigest != result.actualHashDigest"
                  style="text-align:center">
@@ -328,11 +336,18 @@
           <td valign="top" width="{{imageSize}}">
             <div ng-hide="result.expectedHashDigest == result.actualHashDigest"
                  title="Weighted difference measure is {{result.weightedDiffMeasure.toFixed(4)}}%.  Maximum difference per channel: R={{result.maxDiffPerChannel[0]}}, G={{result.maxDiffPerChannel[1]}}, B={{result.maxDiffPerChannel[2]}}">
-              <a class="image-link" target="_blank" href="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png">
-                <img width="{{imageSize}}" src="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"/>
-              </a><br>
+
               {{result.weightedDiffMeasure.toFixed(4)}}%
               {{result.maxDiffPerChannel}}
+              <br/>
+              <a href="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
+              <img-compare type="differencePerPixel"
+                           src="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"
+                           ng-mousedown="MagnifyDraw($event, true)"
+                           ng-mousemove="MagnifyDraw($event, false)"
+                           ng-mouseup="MagnifyEnd($event)"
+                           ng-mouseleave="MagnifyEnd($event)" />
+
             </div>
             <div ng-hide="result.expectedHashDigest != result.actualHashDigest"
                  style="text-align:center">