diff options
author | commit-bot@chromium.org <commit-bot@chromium.org@2bbb7eff-a529-9590-31e7-b0007b416f81> | 2014-02-04 22:45:40 +0000 |
---|---|---|
committer | commit-bot@chromium.org <commit-bot@chromium.org@2bbb7eff-a529-9590-31e7-b0007b416f81> | 2014-02-04 22:45:40 +0000 |
commit | 076f078a5ef3506190fb6c97b7b91827d91cb7c1 (patch) | |
tree | 654bfdd83236500537836af1b692bda6e8f0c0ba /gm/rebaseline_server | |
parent | 967dee32ef540b7c0fed6d0cd518d42b9b345c78 (diff) |
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
Diffstat (limited to 'gm/rebaseline_server')
-rw-r--r-- | gm/rebaseline_server/static/diff_viewer.js | 179 | ||||
-rw-r--r-- | gm/rebaseline_server/static/loader.js | 2 | ||||
-rw-r--r-- | gm/rebaseline_server/static/view.html | 43 |
3 files changed, 209 insertions, 15 deletions
diff --git a/gm/rebaseline_server/static/diff_viewer.js b/gm/rebaseline_server/static/diff_viewer.js new file mode 100644 index 0000000000..cad83321fb --- /dev/null +++ b/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; + } +} + diff --git a/gm/rebaseline_server/static/loader.js b/gm/rebaseline_server/static/loader.js index 3339cad4a9..43089c3585 100644 --- a/gm/rebaseline_server/static/loader.js +++ b/gm/rebaseline_server/static/loader.js @@ -5,7 +5,7 @@ */ var Loader = angular.module( 'Loader', - [] + ['diff_viewer'] ); diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html index cbc2bd8d13..51755b958c 100644 --- a/gm/rebaseline_server/static/view.html +++ b/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"> |