modularize the display of diffs for skpdiff

R=djsollen@google.com

Review URL: https://codereview.chromium.org/18925004

git-svn-id: http://skia.googlecode.com/svn/trunk@10044 2bbb7eff-a529-9590-31e7-b0007b416f81

3 files changed, 125 insertions, 21 deletions

diff --git a/experimental/skpdiff/diff_viewer.js b/experimental/skpdiff/diff_viewer.js
index 338dbdfaef..700bf4b0e4 100644
--- a/experimental/skpdiff/diff_viewer.js
+++ b/experimental/skpdiff/diff_viewer.js
@@ -1,4 +1,81 @@
-function DiffViewController($scope) {
+angular.module('diff_viewer', []).
+config(['$routeProvider', function($routeProvider) {
+    // Show the list of differences by default
+    $routeProvider.
+    otherwise({ templateUrl: '/diff_list.html', controller: DiffListController});
+}]).
+directive('swapImg', function() {
+    // Custom directive for showing an image that gets swapped my mouseover.
+    return {
+        restrict: 'E', // The directive can be used as an element name
+        replace: true, // The directive replaces itself with the template
+        template: '<canvas ng-mouseenter="swap()" ng-mouseleave="swap()"></canvas>',
+        scope: { // The attributes below are bound to the scope
+            leftSrc: '@',
+            rightSrc: '@',
+            side: '@'
+        },
+        link: function(scope, elm, attrs, ctrl) {
+            var leftImage = new Image();
+            var rightImage = new Image();
+            var ctx = elm[0].getContext('2d');
+
+            scope.render = function() {
+                var image;
+                if (scope.side == "left") {
+                    image = leftImage;
+                } else {
+                    image = rightImage;
+                }
+
+                // Make it so the maximum size of an image is 500, and the images are scaled
+                // down in halves.
+                var divisor = 1;
+                while ((image.width / divisor) > 500) {
+                    divisor *= 2;
+                }
+
+                // Set canvas to correct size and draw the image into it
+                elm[0].width = image.width / divisor;
+                elm[0].height = image.height / divisor;
+                ctx.drawImage(image, 0, 0, elm[0].width, elm[0].height);
+            };
+
+            // When the leftSrc attribute changes, load the image and then rerender
+            attrs.$observe('leftSrc', function(value) {
+                leftImage.src = value;
+                leftImage.onload = function() {
+                    if (scope.side == "left") {
+                        scope.render();
+                    }
+                };
+            });
+
+            // When the rightSrc attribute changes, load the image and then rerender
+            attrs.$observe('rightSrc', function(value) {
+                rightImage.src = value;
+                rightImage.onload = function() {
+                    if (scope.side == "right") {
+                        scope.render();
+                    }
+                };
+            });
+
+            // Swap which side to draw onto the canvas and then rerender
+            scope.swap = function() {
+                if (scope.side == "left") {
+                    scope.side = "right";
+                } else {
+                    scope.side = "left";
+                }
+                scope.render();
+            };
+        }
+    };
+});
+
+function DiffListController($scope) {
+    // Label each kind of differ for the sort buttons.
     $scope.differs = [
         {
             "title": "Different Pixels"
@@ -7,16 +84,20 @@ function DiffViewController($scope) {
             "title": "Perceptual Difference"
         }
     ];
-    $scope.sortIndex = 1;
+
+    // Puts the records within AngularJS scope
     $scope.records = SkPDiffRecords.records;
-    $scope.highlight = function(differName) {
-        console.debug(differName);
-    }
-    $scope.setSortIndex = function(a) {
-        $scope.sortIndex = a;
-    }
-    $scope.sortingDiffer = function(a) {
-        console.debug($scope.sortIndex);
-        return a.diffs[$scope.sortIndex].result;
-    }
-}
\ No newline at end of file
+
+    // Indicates which diff metric is used for sorting
+    $scope.sortIndex = 1;
+
+    // Called by the sort buttons to adjust the metric used for sorting
+    $scope.setSortIndex = function(idx) {
+        $scope.sortIndex = idx;
+    };
+
+    // A predicate for pulling out the number used for sorting
+    $scope.sortingDiffer = function(record) {
+        return record.diffs[$scope.sortIndex].result;
+    };
+}
diff --git a/experimental/skpdiff/viewer.html b/experimental/skpdiff/viewer.html
index b0ac4f2e58..0949dab565 100644
--- a/experimental/skpdiff/viewer.html
+++ b/experimental/skpdiff/viewer.html
@@ -1,5 +1,6 @@
 <!doctype html>
-<html>
+<!-- This whole page uses the module -->
+<html ng-app="diff_viewer">
   <head>
     <script type="text/javascript"
             src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
@@ -9,7 +10,12 @@
     <title>SkPDiff</title>
   </head>
   <body>
-    <div ng-app ng-controller="DiffViewController">
+    <!--
+      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">
+      <!-- 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)">
@@ -17,6 +23,7 @@
           {{ differ.title }}
         </button>
       </div>
+      <!-- Begin list of differences -->
       <table>
         <thead>
           <tr>
@@ -26,9 +33,19 @@
           </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">
-            <td><img src="{{ record.baselinePath }}" class="gm-image baseline-image" /></td>
-            <td><img src="{{ record.testPath }}" class="gm-image test-image" /></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)"
@@ -39,6 +56,8 @@
           </tr>
         </tbody>
       </table>
-    </div>
+    </script>
+    <!-- Whatever template is used is rendered in the following div -->
+    <div ng-view></div>
   </body>
 </html>
\ No newline at end of file
diff --git a/experimental/skpdiff/viewer_style.css b/experimental/skpdiff/viewer_style.css
index 48a295c7bb..140deaa55b 100644
--- a/experimental/skpdiff/viewer_style.css
+++ b/experimental/skpdiff/viewer_style.css
@@ -20,14 +20,18 @@ thead > tr > td {
 }
 
 .gm-image {
-    width:300px;
+    border: 1px dotted black;
 }
 
-.baseline-image {
+.gm-image:hover {
+    border: 1px dashed black;
+}
+
+.left-image {
     float: right;
 }
 
-.test-image {
+.right-image {
     text-align: right;
 }