skia2/experimental/skpdiff/viewer.html
zachr@google.com 9432c0c284 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
2013-07-09 21:08:28 +00:00

44 lines
1.5 KiB
HTML

<!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;">&nbsp;</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>