download and rebaseline images using server

tools/skpdiff/diff_viewer.js

 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
@@ skipping 10 matching lines @@
             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
+                // Make it so the maximum size of an image is 400, and the images are scaled

[epoger, 2013/08/02 14:33:06]

Please create a constant, near the top of the file, to hold this value. 
Otherwise, the documentation and the reality WILL diverge.

[Zach Reizner, 2013/08/02 21:30:58]

Done.

                 // down in halves.
                 var divisor = 1;
-                while ((image.width / divisor) > 500) {
+                while ((image.width / divisor) > 400) {
                     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
@@ skipping 22 matching lines @@
                     scope.side = "right";
                 } else {
                     scope.side = "left";
                 }
                 scope.render();
             };
         }
     };
 });
 
-function DiffListController($scope) {
+function DiffListController($scope, $http, $timeout) {
     // Label each kind of differ for the sort buttons.
     $scope.differs = [
         {
             "title": "Different Pixels"
         },
         {
             "title": "Perceptual Difference"
         }
     ];
 
     // Puts the records within AngularJS scope
     $scope.records = SkPDiffRecords.records;
 
     // 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;
     };
+
+    // Flash status indicators on the rows, and then remove them so the style can potentially be
+    // reapplied later.

[epoger, 2013/08/02 14:33:06]

Is this hosted somewhere that I can look at it, and see what the effect looks
like?

[Zach Reizner, 2013/08/02 21:30:58]

Nope. Never done that before on the corp network.

[epoger, 2013/08/06 15:26:43]

It's easy to do.  See the "User directories" section within
https://support.google.com/techstop/answer/3222246 .  Basically, you just copy
files into /google/data/rw/users/za/zachr/www and then they are viewable within
https://x20web.corp.google.com/~zachr/ .

It may or may not make sense for you to bother setting this up, depending on how
much time you have left (not much, at least for now!)  But it's an easy way to
let your reviewers try out a web service.

+    $scope.flashRowStatus = function(success, record) {
+        var flashStyle = success ? "success-flash" : "failure-flash";
+        var flashDuration = success ? 500 : 800;

[epoger, 2013/08/02 14:33:06]

I take it this is in milliseconds?  If so, please rename as flashDurationMillis
to make it clear.

[Zach Reizner, 2013/08/02 21:30:58]

Done.

+
+        // Store the style in the record. The row will pick up the style this way instead of through
+        // index because index can change with sort order.
+        record.cssClasses = flashStyle;
+
+        // The animation cannot be repeated unless the class is removed the element.
+        $timeout(function() {
+            record.cssClasses = "";
+        }, flashDuration);
+    }
+
+    $scope.setHashOf = function(imagePath, record) {
+        $http.post("/set_hash", {
+            "path": imagePath
+        }).success(function(data) {
+            $scope.flashRowStatus(data.success, record);
+        }).error(function() {
+            $scope.flashRowStatus(false, record);
+        });
+
+    };
 }