rebaseline_server: get "image size" working again
BUG=skia:2134 NOTRY=True R=rmistry@google.com Author: epoger@google.com Review URL: https://codereview.chromium.org/155973003 git-svn-id: http://skia.googlecode.com/svn/trunk@13343 2bbb7eff-a529-9590-31e7-b0007b416f81
This commit is contained in:
commit-bot@chromium.org
parent
940e3bac13
commit
1c188ed9fa
@ -1,9 +1,5 @@
|
||||
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;
|
||||
// What portion of the image width will be taken up by the magnifier.
|
||||
var MAGNIFIER_WIDTH_FACTOR = 0.66;
|
||||
|
||||
angular.module('diff_viewer', []).directive('imgCompare', function() {
|
||||
// Custom directive for comparing (3-way) images
|
||||
@ -18,9 +14,9 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
|
||||
var ctx = canvas.getContext('2d');
|
||||
var magnifyContent = false;
|
||||
|
||||
// When the type attribute changes, load the image and then render
|
||||
// When the type attribute changes, set magnifyContent appropriately.
|
||||
attrs.$observe('type', function(value) {
|
||||
switch(value) {
|
||||
switch(attrs.type) {
|
||||
case "differingPixelsInWhite":
|
||||
magnifyContent = true;
|
||||
break;
|
||||
@ -36,27 +32,26 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
// Reset ImageController's scale and render the image;
|
||||
// we need to do this whenever attrs.src or attrs.width changes.
|
||||
scope.setScaleAndRender = function() {
|
||||
// compute the scaled image width/height for image and canvas
|
||||
scope.setImgScale(image.width, attrs.width);
|
||||
|
||||
// Set canvas to correct size
|
||||
canvas.width = image.width / scope.imgScaleDivisor;
|
||||
canvas.height = image.height / scope.imgScaleDivisor;
|
||||
|
||||
scope.renderImage();
|
||||
};
|
||||
attrs.$observe('src', function(value) {
|
||||
image.src = attrs.src;
|
||||
image.onload = scope.setScaleAndRender;
|
||||
});
|
||||
attrs.$observe('width', scope.setScaleAndRender);
|
||||
|
||||
// When the magnify attribute changes, render the magnified rect at
|
||||
// the default zoom level.
|
||||
scope.$watch('magnifyCenter', function(magCenter) {
|
||||
@ -70,22 +65,22 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
|
||||
return;
|
||||
}
|
||||
|
||||
var magX = magCenter.x - MAGNIFIER_HALF_WIDTH;
|
||||
var magY = magCenter.y - MAGNIFIER_HALF_HEIGHT;
|
||||
var magX = magCenter.x - scope.magnifierHalfWidth;
|
||||
var magY = magCenter.y - scope.magnifierHalfHeight;
|
||||
|
||||
var magMaxX = canvas.width - MAGNIFIER_WIDTH;
|
||||
var magMaxY = canvas.height - MAGNIFIER_HEIGHT;
|
||||
var magMaxX = canvas.width - scope.magnifierWidth;
|
||||
var magMaxY = canvas.height - scope.magnifierHeight;
|
||||
|
||||
var magRect = { x: Math.max(0, Math.min(magX, magMaxX)),
|
||||
y: Math.max(0, Math.min(magY, magMaxY)),
|
||||
width: MAGNIFIER_WIDTH,
|
||||
height: MAGNIFIER_HEIGHT
|
||||
width: scope.magnifierWidth,
|
||||
height: scope.magnifierHeight
|
||||
};
|
||||
|
||||
var imgRect = { x: (magCenter.x / scope.imgScaleFactor) - MAGNIFIER_HALF_WIDTH,
|
||||
y: (magCenter.y / scope.imgScaleFactor) - MAGNIFIER_HALF_HEIGHT,
|
||||
width: MAGNIFIER_WIDTH,
|
||||
height: MAGNIFIER_HEIGHT
|
||||
var imgRect = { x: (magCenter.x * scope.imgScaleDivisor) - scope.magnifierHalfWidth,
|
||||
y: (magCenter.y * scope.imgScaleDivisor) - scope.magnifierHalfHeight,
|
||||
width: scope.magnifierWidth,
|
||||
height: scope.magnifierHeight
|
||||
};
|
||||
|
||||
// draw the magnified image
|
||||
@ -112,8 +107,8 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
|
||||
// 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;
|
||||
var scaledWidth = scope.magnifierWidth / scope.imgScaleDivisor;
|
||||
var scaledHeight = scope.magnifierHeight / scope.imgScaleDivisor;
|
||||
return {
|
||||
x: event.offsetX - (scaledWidth * 0.5),
|
||||
y: event.offsetY - (scaledHeight * 0.5),
|
||||
@ -160,12 +155,16 @@ angular.module('diff_viewer', []).directive('imgCompare', function() {
|
||||
});
|
||||
|
||||
function ImageController($scope, $http, $location, $timeout, $parse) {
|
||||
$scope.imgScaleFactor = 1.0;
|
||||
$scope.imgScaleDivisor = 1.0;
|
||||
$scope.magnifierOn = false;
|
||||
$scope.magnifyCenter = undefined;
|
||||
|
||||
$scope.setImgScaleFactor = function(scaleFactor) {
|
||||
$scope.imgScaleFactor = scaleFactor;
|
||||
$scope.setImgScale = function(srcImageWidth, displayWidth) {
|
||||
$scope.imgScaleDivisor = srcImageWidth / displayWidth;
|
||||
$scope.magnifierWidth = displayWidth * MAGNIFIER_WIDTH_FACTOR;
|
||||
$scope.magnifierHeight = $scope.magnifierWidth;
|
||||
$scope.magnifierHalfWidth = $scope.magnifierWidth / 2;
|
||||
$scope.magnifierHalfHeight = $scope.magnifierHeight / 2;
|
||||
}
|
||||
|
||||
$scope.setMagnifierState = function(magnifierOn) {
|
||||
@ -173,7 +172,6 @@ function ImageController($scope, $http, $location, $timeout, $parse) {
|
||||
}
|
||||
|
||||
$scope.setMagnifyCenter = function(magnifyCenter) {
|
||||
$scope.magnifyCenter = magnifyCenter;
|
||||
$scope.magnifyCenter = magnifyCenter;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
</td>
|
||||
<td><table>
|
||||
<tr><td>
|
||||
Image size
|
||||
Image width
|
||||
<input type="text" ng-model="imageSizePending"
|
||||
ng-init="imageSizePending=100"
|
||||
ng-change="areUpdatesPending = true"
|
||||
@ -302,25 +302,23 @@
|
||||
</td>
|
||||
|
||||
<!-- expected image -->
|
||||
<td valign="top" width="{{imageSize}}">
|
||||
<br/>
|
||||
<td valign="bottom" width="{{imageSize}}">
|
||||
<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"
|
||||
<img-compare type="baseline" width="{{imageSize}}"
|
||||
src="http://chromium-skia-gm.commondatastorage.googleapis.com/gm/{{result.expectedHashType}}/{{result.test}}/{{result.expectedHashDigest}}.png" />
|
||||
|
||||
</td>
|
||||
|
||||
<!-- actual image -->
|
||||
<td valign="top" width="{{imageSize}}">
|
||||
<br/>
|
||||
<td valign="bottom" width="{{imageSize}}">
|
||||
<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"
|
||||
<img-compare type="test" width="{{imageSize}}"
|
||||
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}}">
|
||||
<td valign="bottom" 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.">
|
||||
|
||||
@ -328,7 +326,7 @@
|
||||
({{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"
|
||||
<img-compare type="differingPixelsInWhite" width="{{imageSize}}"
|
||||
src="/static/generated-images/whitediffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" />
|
||||
|
||||
</div>
|
||||
@ -339,7 +337,7 @@
|
||||
</td>
|
||||
|
||||
<!-- diffs: per-channel RGB deltas -->
|
||||
<td valign="top" width="{{imageSize}}">
|
||||
<td valign="bottom" 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]}}">
|
||||
|
||||
@ -348,7 +346,7 @@
|
||||
<br/>
|
||||
<a href="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>
|
||||
<img-compare ng-style="{backgroundColor: pixelDiffBgColor}"
|
||||
type="differencePerPixel"
|
||||
type="differencePerPixel" width="{{imageSize}}"
|
||||
src="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png"
|
||||
ng-mousedown="MagnifyDraw($event, true)"
|
||||
ng-mousemove="MagnifyDraw($event, false)"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user