update skpdiff visualization (image magnification with alpha mask)
R=epoger@google.com
Review URL: https://codereview.chromium.org/29103005
git-svn-id: http://skia.googlecode.com/svn/trunk@12174 2bbb7eff-a529-9590-31e7-b0007b416f81
diff --git a/tools/skpdiff/SkDiffContext.cpp b/tools/skpdiff/SkDiffContext.cpp
index 07d304b..ce1fad9 100644
--- a/tools/skpdiff/SkDiffContext.cpp
+++ b/tools/skpdiff/SkDiffContext.cpp
@@ -41,6 +41,12 @@
}
}
+void SkDiffContext::setDifferenceDir(const SkString& path) {
+ if (!path.isEmpty() && sk_mkdir(path.c_str())) {
+ fDifferenceDir = path;
+ }
+}
+
void SkDiffContext::setDiffers(const SkTDArray<SkImageDiffer*>& differs) {
// Delete whatever the last array of differs was
if (NULL != fDiffers) {
@@ -55,6 +61,23 @@
differs.copy(fDiffers);
}
+static SkString get_common_prefix(const SkString& a, const SkString& b) {
+ const size_t maxPrefixLength = SkTMin(a.size(), b.size());
+ SkASSERT(maxPrefixLength > 0);
+ for (size_t x = 0; x < maxPrefixLength; ++x) {
+ if (a[x] != b[x]) {
+ SkString result;
+ result.set(a.c_str(), x);
+ return result;
+ }
+ }
+ if (a.size() > b.size()) {
+ return b;
+ } else {
+ return a;
+ }
+}
+
void SkDiffContext::addDiff(const char* baselinePath, const char* testPath) {
// Load the images at the paths
SkBitmap baselineBitmap;
@@ -75,9 +98,21 @@
newRecord->fNext = fRecords;
fRecords = newRecord;
+ // compute the common name
+ SkString baseName = SkOSPath::SkBasename(baselinePath);
+ SkString testName = SkOSPath::SkBasename(testPath);
+ newRecord->fCommonName = get_common_prefix(baseName, testName);
+
+ bool alphaMaskPending = false;
+ bool alphaMaskCreated = false;
+
// Perform each diff
for (int differIndex = 0; differIndex < fDifferCount; differIndex++) {
SkImageDiffer* differ = fDiffers[differIndex];
+ // TODO only enable for one differ
+ if (!alphaMaskCreated && !fDifferenceDir.isEmpty()) {
+ alphaMaskPending = differ->enablePOIAlphaMask();
+ }
int diffID = differ->queueDiff(&baselineBitmap, &testBitmap);
if (diffID >= 0) {
@@ -91,6 +126,25 @@
SkIPoint* poi = differ->getPointsOfInterest(diffID);
diffData.fPointsOfInterest.append(poiCount, poi);
+ if (alphaMaskPending
+ && SkImageDiffer::RESULT_CORRECT != diffData.fResult
+ && newRecord->fDifferencePath.isEmpty()) {
+ newRecord->fDifferencePath = SkOSPath::SkPathJoin(fDifferenceDir.c_str(),
+ newRecord->fCommonName.c_str());
+
+ // compute the image diff and output it
+ SkBitmap* alphaMask = differ->getPointsOfInterestAlphaMask(diffID);
+ SkBitmap copy;
+ alphaMask->copyTo(©, SkBitmap::kARGB_8888_Config);
+ SkImageEncoder::EncodeFile(newRecord->fDifferencePath.c_str(), copy,
+ SkImageEncoder::kPNG_Type, 100);
+ }
+
+ if (alphaMaskPending) {
+ alphaMaskPending = false;
+ alphaMaskCreated = true;
+ }
+
// Because we are doing everything synchronously for now, we are done with the diff
// after reading it.
differ->deleteDiff(diffID);
@@ -201,18 +255,8 @@
SkString baselineAbsPath = get_absolute_path(currentRecord->fBaselinePath);
SkString testAbsPath = get_absolute_path(currentRecord->fTestPath);
- // strip off directory structure and find the common part of the filename
- SkString baseName = SkOSPath::SkBasename(baselineAbsPath.c_str());
- SkString testName = SkOSPath::SkBasename(testAbsPath.c_str());
- for (size_t x = 0; x < baseName.size(); ++x) {
- if (baseName[x] != testName[x]) {
- baseName.insertUnichar(x, '\n');
- break;
- }
- }
-
stream.writeText(" \"commonName\": \"");
- stream.writeText(baseName.c_str());
+ stream.writeText(currentRecord->fCommonName.c_str());
stream.writeText("\",\n");
stream.writeText(" \"differencePath\": \"");
diff --git a/tools/skpdiff/SkDiffContext.h b/tools/skpdiff/SkDiffContext.h
index 20193b3..9669ae0 100644
--- a/tools/skpdiff/SkDiffContext.h
+++ b/tools/skpdiff/SkDiffContext.h
@@ -26,6 +26,12 @@
void setThreadCount(int threadCount) { fThreadCount = threadCount; }
/**
+ * Creates the directory if it does not exist and uses it to store differences
+ * between images.
+ */
+ void setDifferenceDir(const SkString& directory);
+
+ /**
* Sets the differs to be used in each diff. Already started diffs will not retroactively use
* these.
* @param differs An array of differs to use. The array is copied, but not the differs
@@ -106,6 +112,7 @@
};
struct DiffRecord {
+ SkString fCommonName;
SkString fDifferencePath;
SkString fBaselinePath;
SkString fTestPath;
@@ -121,6 +128,8 @@
SkImageDiffer** fDiffers;
int fDifferCount;
int fThreadCount;
+
+ SkString fDifferenceDir;
};
#endif
diff --git a/tools/skpdiff/SkDifferentPixelsMetric.h b/tools/skpdiff/SkDifferentPixelsMetric.h
index 38fa5ac..614f920 100644
--- a/tools/skpdiff/SkDifferentPixelsMetric.h
+++ b/tools/skpdiff/SkDifferentPixelsMetric.h
@@ -27,13 +27,17 @@
public SkImageDiffer {
#endif
public:
+ SkDifferentPixelsMetric() : fPOIAlphaMask(false) {}
+
virtual const char* getName() SK_OVERRIDE;
+ virtual bool enablePOIAlphaMask() SK_OVERRIDE;
virtual int queueDiff(SkBitmap* baseline, SkBitmap* test) SK_OVERRIDE;
virtual void deleteDiff(int id) SK_OVERRIDE;
virtual bool isFinished(int id) SK_OVERRIDE;
virtual double getResult(int id) SK_OVERRIDE;
virtual int getPointsOfInterestCount(int id) SK_OVERRIDE;
virtual SkIPoint* getPointsOfInterest(int id) SK_OVERRIDE;
+ virtual SkBitmap* getPointsOfInterestAlphaMask(int id) SK_OVERRIDE;
protected:
#if SK_SUPPORT_OPENCL
@@ -41,8 +45,9 @@
#endif
private:
- struct QueuedDiff;
+ bool fPOIAlphaMask;
+ struct QueuedDiff;
SkTDArray<QueuedDiff> fQueuedDiffs;
#if SK_SUPPORT_OPENCL
diff --git a/tools/skpdiff/SkDifferentPixelsMetric_cpu.cpp b/tools/skpdiff/SkDifferentPixelsMetric_cpu.cpp
index 4e5e939..a3e4a38 100644
--- a/tools/skpdiff/SkDifferentPixelsMetric_cpu.cpp
+++ b/tools/skpdiff/SkDifferentPixelsMetric_cpu.cpp
@@ -16,12 +16,18 @@
bool finished;
double result;
SkTDArray<SkIPoint>* poi;
+ SkBitmap poiAlphaMask;
};
const char* SkDifferentPixelsMetric::getName() {
return "different_pixels";
}
+bool SkDifferentPixelsMetric::enablePOIAlphaMask() {
+ fPOIAlphaMask = true;
+ return true;
+}
+
int SkDifferentPixelsMetric::queueDiff(SkBitmap* baseline, SkBitmap* test) {
double startTime = get_seconds();
int diffID = fQueuedDiffs.count();
@@ -44,6 +50,14 @@
int height = baseline->height();
int differentPixelsCount = 0;
+ // Prepare the POI alpha mask if needed
+ if (fPOIAlphaMask) {
+ diff->poiAlphaMask.setConfig(SkBitmap::kA8_Config, width, height);
+ diff->poiAlphaMask.allocPixels();
+ diff->poiAlphaMask.lockPixels();
+ diff->poiAlphaMask.eraseARGB(SK_AlphaOPAQUE, 0, 0, 0);
+ }
+
// Prepare the pixels for comparison
baseline->lockPixels();
test->lockPixels();
@@ -56,6 +70,9 @@
if (std::memcmp(&baselineRow[x * 4], &testRow[x * 4], 4) != 0) {
poi->push()->set(x, y);
differentPixelsCount++;
+ if (fPOIAlphaMask) {
+ *diff->poiAlphaMask.getAddr8(x,y) = SK_AlphaTRANSPARENT;
+ }
}
}
}
@@ -93,3 +110,10 @@
SkIPoint* SkDifferentPixelsMetric::getPointsOfInterest(int id) {
return fQueuedDiffs[id].poi->begin();
}
+
+SkBitmap* SkDifferentPixelsMetric::getPointsOfInterestAlphaMask(int id) {
+ if (fQueuedDiffs[id].poiAlphaMask.empty()) {
+ return NULL;
+ }
+ return &fQueuedDiffs[id].poiAlphaMask;
+}
diff --git a/tools/skpdiff/SkDifferentPixelsMetric_opencl.cpp b/tools/skpdiff/SkDifferentPixelsMetric_opencl.cpp
index f2a02c1..b3f5d2d 100644
--- a/tools/skpdiff/SkDifferentPixelsMetric_opencl.cpp
+++ b/tools/skpdiff/SkDifferentPixelsMetric_opencl.cpp
@@ -47,6 +47,10 @@
return "different_pixels";
}
+bool SkDifferentPixelsMetric::enablePOIAlphaMask() {
+ return false;
+}
+
int SkDifferentPixelsMetric::queueDiff(SkBitmap* baseline, SkBitmap* test) {
int diffID = fQueuedDiffs.count();
double startTime = get_seconds();
diff --git a/tools/skpdiff/SkImageDiffer.h b/tools/skpdiff/SkImageDiffer.h
index 6c570cb..3b50d57 100644
--- a/tools/skpdiff/SkImageDiffer.h
+++ b/tools/skpdiff/SkImageDiffer.h
@@ -19,6 +19,9 @@
SkImageDiffer();
virtual ~SkImageDiffer();
+ static const double RESULT_CORRECT = 1.0f;
+ static const double RESULT_INCORRECT = 0.0f;
+
/**
* Gets a unique and descriptive name of this differ
* @return A statically allocated null terminated string that is the name of this differ
@@ -37,6 +40,12 @@
virtual bool requiresOpenCL() { return false; }
/**
+ * Enables the generation of an alpha mask for all points of interest.
+ * @return True if the differ supports generating an alpha mask and false otherwise.
+ */
+ virtual bool enablePOIAlphaMask() { return false; }
+
+ /**
* Wraps a call to queueDiff by loading the given filenames into SkBitmaps
* @param baseline The file path of the baseline image
* @param test The file path of the test image
@@ -87,6 +96,13 @@
*/
virtual SkIPoint* getPointsOfInterest(int id) = 0;
+ /*
+ * Gets a bitmap containing an alpha mask containing transparent pixels at the points of
+ * interest for the diff of the given id. The results are only meaningful after the
+ * queued diff has finished.
+ * @param id The id of the queued diff to query
+ */
+ virtual SkBitmap* getPointsOfInterestAlphaMask(int id) { return NULL; }
protected:
diff --git a/tools/skpdiff/diff_viewer.js b/tools/skpdiff/diff_viewer.js
index 9c33f84..06a864e 100644
--- a/tools/skpdiff/diff_viewer.js
+++ b/tools/skpdiff/diff_viewer.js
@@ -1,81 +1,185 @@
var MAX_SWAP_IMG_SIZE = 400;
+var MAGNIFIER_WIDTH = 200;
+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 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');
- scope.render = function() {
- var image;
- if (scope.side == "left") {
- image = leftImage;
- } else {
- image = rightImage;
- }
+ var magnifyContent = false;
- // 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;
+ magnifyContent = true;
+ break;
+ case "test":
+ image.src = scope.record.testPath;
+ magnifyContent = 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) {
+ 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 (!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
};
+ };
- // 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();
- }
- };
- });
+ // event handler for mouse events that triggers the magnification
+ // effect across the 3 images being compared.
+ scope.MagnifyDraw = function(event, startMagnify) {
+ if (startMagnify) {
+ scope.setMagnifierState(true);
+ } 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});
+ };
+
+ // 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;
+ }
+}
+
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.
diff --git a/tools/skpdiff/skpdiff_main.cpp b/tools/skpdiff/skpdiff_main.cpp
index 55640f7..b1bf917 100644
--- a/tools/skpdiff/skpdiff_main.cpp
+++ b/tools/skpdiff/skpdiff_main.cpp
@@ -38,6 +38,7 @@
DEFINE_string2(folders, f, "", "Compare two folders with identical subfile names: <baseline folder> <test folder>");
DEFINE_string2(patterns, p, "", "Use two patterns to compare images: <baseline> <test>");
DEFINE_string2(output, o, "", "Writes the output of these diffs to output: <output>");
+DEFINE_string(alphaDir, "", "Writes the alpha mask of these diffs to output: <output>");
DEFINE_bool(jsonp, true, "Output JSON with padding");
DEFINE_string(csv, "", "Writes the output of these diffs to a csv file");
DEFINE_int32(threads, -1, "run N threads in parallel [default is derived from CPUs available]");
@@ -186,9 +187,20 @@
}
}
+ if (!FLAGS_alphaDir.isEmpty()) {
+ if (1 != FLAGS_alphaDir.count()) {
+ SkDebugf("alphaDir flag expects one argument: <directory>\n");
+ return 1;
+ }
+ }
+
SkDiffContext ctx;
ctx.setDiffers(chosenDiffers);
+ if (!FLAGS_alphaDir.isEmpty()) {
+ ctx.setDifferenceDir(SkString(FLAGS_alphaDir[0]));
+ }
+
if (FLAGS_threads >= 0) {
ctx.setThreadCount(FLAGS_threads);
}
diff --git a/tools/skpdiff/viewer.html b/tools/skpdiff/viewer.html
index 1d3793b..6ae65f7 100644
--- a/tools/skpdiff/viewer.html
+++ b/tools/skpdiff/viewer.html
@@ -9,73 +9,73 @@
<link rel="stylesheet" type="text/css" href="viewer_style.css">
<title>SkPDiff</title>
</head>
- <body>
- <!--
- All templates are being included with the main page to avoid using AJAX, which would force
- us to use a webserver.
- -->
- <script type="text/ng-template" id="/diff_list.html">
- <div ng-class="statusClass">
- <!-- The commit button -->
- <div ng-show="isDynamic" class="commit">
- <button ng-click="commitRebaselines()">Commit</button>
- </div>
- <!-- Give a choice of how to order the differs -->
- <div style="margin:8px">
- Show me the worst by metric:
- <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
- <span class="result-{{ $index }}" style="padding-left:12px;"> </span>
- {{ differ.title }}
- </button>
- </div>
- <!-- Begin list of differences -->
- <table>
- <thead>
- <tr>
- <td ng-show="isDynamic">Rebaseline?</td>
- <td>Name</td>
- <td>Expected Image</td>
- <td>Actual Image</td>
- <td>Results</td>
- </tr>
- </thead>
- <tbody>
- <!--
- Loops through every record and crates a row for it. This sorts based on the whichever
- metric the user chose, and places a limit on the max number of records to show.
- -->
- <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
- ng-class="{selected: record.isRebaselined}">
- <td ng-show="isDynamic">
- <input type="checkbox"
- ng-model="record.isRebaselined"
- ng-click="selectedRebaseline($index, $event)"
- ng-class="{lastselected: lastSelectedIndex == $index}" />
- </td>
- <td class="common-name">{{ record.commonName }}</td>
- <td>
- <swap-img left-src="{{ record.baselinePath }}"
- right-src="{{ record.testPath }}"
- side="left"
- class="gm-image left-image" /></td>
- <td>
- <swap-img left-src="{{ record.baselinePath }}"
- right-src="{{ record.testPath }}"
- side="right"
- class="gm-image right-image" /></td>
- <td>
- <div ng-repeat="diff in record.diffs"
- ng-mouseover="highlight(diff.differName)"
- class="result result-{{$index}}">
- <span class="result-button">{{ diff.result }}</span>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </script>
- <!-- Whatever template is used is rendered in the following div -->
- <div ng-view></div>
+ <body ng-controller="DiffListController" ng-class="statusClass">
+ <!-- The commit button -->
+ <div ng-show="isDynamic" class="commit">
+ <button ng-click="commitRebaselines()">Commit</button>
+ </div>
+ <!-- Give a choice of how to order the differs -->
+ <div style="margin:8px">
+ Show me the worst by metric:
+ <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
+ <span class="result-{{ $index }}" style="padding-left:12px;"> </span>
+ {{ differ.title }}
+ </button>
+ </div>
+ <!-- Begin list of differences -->
+ <table>
+ <thead>
+ <tr>
+ <td ng-show="isDynamic">Rebaseline?</td>
+ <td>Name</td>
+ <td>Difference Mask</td>
+ <td>Expected Image</td>
+ <td>Actual Image</td>
+ <td>Results</td>
+ </tr>
+ </thead>
+ <tbody>
+ <!--
+ Loops through every record and crates a row for it. This sorts based on the whichever
+ metric the user chose, and places a limit on the max number of records to show.
+ -->
+ <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
+ ng-class="{selected: record.isRebaselined}"
+ ng-controller="ImageController">
+ <td ng-show="isDynamic">
+ <input type="checkbox"
+ ng-model="record.isRebaselined"
+ ng-click="selectedRebaseline($index, $event)"
+ ng-class="{lastselected: lastSelectedIndex == $index}" />
+ </td>
+ <td class="common-name">{{ record.commonName }}</td>
+ <td>
+ <img-compare type="alphaMask"
+ class="left-image"
+ ng-mousedown="MagnifyDraw($event, true)"
+ ng-mousemove="MagnifyDraw($event, false)"
+ ng-mouseup="MagnifyEnd($event)"
+ ng-mouseleave="MagnifyEnd($event)"/>
+ </td>
+ <td>
+ <img-compare type="baseline"
+ name="{{record.commonName}}"
+ class="gm-image left-image" />
+ </td>
+ <td>
+ <img-compare type="test"
+ name="{{record.commonName}}"
+ class="gm-image right-image" />
+ </td>
+ <td>
+ <div ng-repeat="diff in record.diffs"
+ ng-mouseover="highlight(diff.differName)"
+ class="result result-{{$index}}">
+ <span class="result-button">{{ diff.result }}</span>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</body>
</html>