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
diff --git a/experimental/skpdiff/viewer.html b/experimental/skpdiff/viewer.html
new file mode 100644
index 0000000..b0ac4f2
--- /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