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/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>