Home | History | Annotate | Download | only in skpdiff 
      1 <!doctype html>
      2 <!-- This whole page uses the module -->
      3 <html ng-app="diff_viewer">
      4   <head>
      5     <script type="text/javascript"
      6             src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
      7     <script type="text/javascript" src="skpdiff_output.json"></script>
      8     <script type="text/javascript" src="diff_viewer.js"></script>
      9     <link rel="stylesheet" type="text/css" href="viewer_style.css">
     10     <title>SkPDiff</title>
     11   </head>
     12   <body ng-controller="DiffListController" ng-class="statusClass">
     13     <!-- The commit button -->
     14     <div ng-show="isDynamic" class="commit">
     15       <button ng-click="commitRebaselines()">Commit</button>
     16     </div>
     17     <!-- Give a choice of how to order the differs -->
     18     <div style="margin:8px">
     19       Show me the worst by metric:
     20       <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">
     21         <span class="result-{{ $index }}" style="padding-left:12px;">&nbsp;</span>
     22         {{ differ.title }}
     23       </button>
     24     </div>
     25     <!-- Begin list of differences -->
     26     <table>
     27       <thead>
     28         <tr>
     29           <td ng-show="isDynamic">Rebaseline?</td>
     30           <td>Name</td>
     31           <td>Difference Mask</td>
     32           <td>Expected Image</td>
     33           <td>Actual Image</td>
     34           <td>Results</td>
     35         </tr>
     36       </thead>
     37       <tbody>
     38         <!--
     39           Loops through every record and crates a row for it. This sorts based on the whichever
     40           metric the user chose, and places a limit on the max number of records to show.
     41         -->
     42         <tr ng-repeat="record in records | orderBy:sortingDiffer | limitTo:500"
     43             ng-class="{selected: record.isRebaselined}" 
     44             ng-controller="ImageController">
     45           <td ng-show="isDynamic">
     46             <input type="checkbox"
     47                    ng-model="record.isRebaselined"
     48                    ng-click="selectedRebaseline($index, $event)"
     49                    ng-class="{lastselected: lastSelectedIndex == $index}" />
     50           </td>
     51           <td class="common-name">{{ record.commonName }}</td>
     52           <td>
     53             <img-compare type="alphaMask"
     54                          class="left-image"
     55                          ng-mousedown="MagnifyDraw($event, true)"
     56                          ng-mousemove="MagnifyDraw($event, false)"
     57                          ng-mouseup="MagnifyEnd($event)"
     58                          ng-mouseleave="MagnifyEnd($event)"/>
     59           </td>
     60           <td>
     61             <img-compare type="baseline"
     62                          name="{{record.commonName}}"
     63                          class="gm-image left-image" />
     64           </td>
     65           <td>
     66             <img-compare type="test"
     67                          name="{{record.commonName}}"
     68                          class="gm-image right-image" />
     69           </td>
     70           <td>
     71             <div ng-repeat="diff in record.diffs"
     72                  ng-mouseover="highlight(diff.differName)"
     73                  class="result result-{{$index}}">
     74               <span class="result-button">{{ diff.result }}</span>
     75             </div>
     76           </td>
     77         </tr>
     78       </tbody>
     79     </table>
     80   </body>
     81 </html>
     82