diff options
| author |  zachr@google.com <zachr@google.com@2bbb7eff-a529-9590-31e7-b0007b416f81> | 2013-07-09 21:08:28 +0000 |
|---|---|---|
| committer | zachr@google.com <zachr@google.com@2bbb7eff-a529-9590-31e7-b0007b416f81> | 2013-07-09 21:08:28 +0000 |
| commit | 9432c0c2843112c293be2630421ddc52cbf62583 (patch) | |
| tree | 7b33a0c6481c81e904281fa2672cc3bfba2b034a | |
| parent | dc7919f228da7f15731e0c7f11e21f5dfac2c129 (diff) | |
add diff viewer website
- adjust PMetric output to be percentage
R=borenet@google.com, bsalomon@google.com
Review URL: https://codereview.chromium.org/18132007
git-svn-id: http://skia.googlecode.com/svn/trunk@9942 2bbb7eff-a529-9590-31e7-b0007b416f81
| -rw-r--r-- | experimental/skpdiff/SkPMetric.cpp | 2 | ||||
| -rw-r--r-- | experimental/skpdiff/diff_viewer.js | 22 | ||||
| -rw-r--r-- | experimental/skpdiff/viewer.html | 44 | ||||
| -rw-r--r-- | experimental/skpdiff/viewer_style.css | 76 |
4 files changed, 143 insertions, 1 deletions
diff --git a/experimental/skpdiff/SkPMetric.cpp b/experimental/skpdiff/SkPMetric.cpp index 710b18bd20..a9628539b5 100644 --- a/experimental/skpdiff/SkPMetric.cpp +++ b/experimental/skpdiff/SkPMetric.cpp @@ -379,7 +379,7 @@ float pmetric(const ImageLAB* baselineLAB, const ImageLAB* testLAB, SkTDArray<Sk SkDELETE_ARRAY(cyclesPerDegree); SkDELETE_ARRAY(contrast); SkDELETE_ARRAY(thresholdFactorFrequency); - return (double)failures; + return 1.0 - (double)failures / (width * height); } const char* SkPMetric::getName() { diff --git a/experimental/skpdiff/diff_viewer.js b/experimental/skpdiff/diff_viewer.js new file mode 100644 index 0000000000..338dbdfaef --- /dev/null +++ b/experimental/skpdiff/diff_viewer.js @@ -0,0 +1,22 @@ +function DiffViewController($scope) { + $scope.differs = [ + { + "title": "Different Pixels" + }, + { + "title": "Perceptual Difference" + } + ]; + $scope.sortIndex = 1; + $scope.records = SkPDiffRecords.records; + $scope.highlight = function(differName) { + console.debug(differName); + } + $scope.setSortIndex = function(a) { + $scope.sortIndex = a; + } + $scope.sortingDiffer = function(a) { + console.debug($scope.sortIndex); + return a.diffs[$scope.sortIndex].result; + } +}
\ No newline at end of file diff --git a/experimental/skpdiff/viewer.html b/experimental/skpdiff/viewer.html new file mode 100644 index 0000000000..b0ac4f2e58 --- /dev/null +++ b/experimental/skpdiff/viewer.html @@ -0,0 +1,44 @@ +<!doctype html> +<html> + <head> + <script type="text/javascript" + src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> + <script type="text/javascript" src="skpdiff_output.json"></script> + <script type="text/javascript" src="diff_viewer.js"></script> + <link rel="stylesheet" type="text/css" href="viewer_style.css"> + <title>SkPDiff</title> + </head> + <body> + <div ng-app ng-controller="DiffViewController"> + <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> + <table> + <thead> + <tr> + <td>Baseline Image</td> + <td>Actual Image</td> + <td>Results</td> + </tr> + </thead> + <tbody> + <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"> + <td><img src="{{ record.baselinePath }}" class="gm-image baseline-image" /></td> + <td><img src="{{ record.testPath }}" class="gm-image test-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> + </body> +</html>
\ No newline at end of file diff --git a/experimental/skpdiff/viewer_style.css b/experimental/skpdiff/viewer_style.css new file mode 100644 index 0000000000..48a295c7bb --- /dev/null +++ b/experimental/skpdiff/viewer_style.css @@ -0,0 +1,76 @@ +body, img, div { + font-family: Verdana; + margin: 0; + padding: 0; +} + +table { + width:100%; + border-collapse: collapse; + border-spacing: 0; + padding: 8px; +} + +td { + border-top: 1px solid #DDD; + padding: 8px; +} +thead > tr > td { + border: none; +} + +.gm-image { + width:300px; +} + +.baseline-image { + float: right; +} + +.test-image { + text-align: right; +} + +.result { + padding: 8px; + cursor: default; + opacity: 0.7; +} + +.result:hover { + border: 2px dotted #DDD; + padding: 6px; + opacity: 1.0; +} + +.result-0 { + background-color: #268bd2; +} + +.result-1 { + background-color: #d33682; +} + +.result-2 { + background-color: #b58900; +} + +.result-3 { + background-color: #cb4b16; +} + +.result-4 { + background-color: #6c71c4; +} + +.result-5 { + background-color: #dc322f; +} + +.result-6 { + background-color: #2aa198; +} + +.result-7 { + background-color: #859900; +} |