diff options
| author |  djsollen@google.com <djsollen@google.com@2bbb7eff-a529-9590-31e7-b0007b416f81> | 2013-11-07 19:24:06 +0000 |
|---|---|---|
| committer | djsollen@google.com <djsollen@google.com@2bbb7eff-a529-9590-31e7-b0007b416f81> | 2013-11-07 19:24:06 +0000 |
| commit | 513a7bffd344a2bba6e014ec08838ea0bbb8aa68 (patch) | |
| tree | 65496eff4ae5305d3db15abc8e39b0dbf76d5aa3 /tools/skpdiff/viewer.html | |
| parent | 0cc00c273dcad0fb073df32b38e89d15064ebb0e (diff) | |
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
Diffstat (limited to 'tools/skpdiff/viewer.html')
| -rw-r--r-- | tools/skpdiff/viewer.html | 136 |
1 files changed, 68 insertions, 68 deletions
diff --git a/tools/skpdiff/viewer.html b/tools/skpdiff/viewer.html index 1d3793bbf5..6ae65f756c 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> |