diff options
| -rw-r--r-- | gm/rebaseline_server/static/loader.js | 36 | ||||
| -rw-r--r-- | gm/rebaseline_server/static/view.html | 9 |
2 files changed, 44 insertions, 1 deletions
diff --git a/gm/rebaseline_server/static/loader.js b/gm/rebaseline_server/static/loader.js index 43089c3585..71972d1600 100644 --- a/gm/rebaseline_server/static/loader.js +++ b/gm/rebaseline_server/static/loader.js @@ -619,5 +619,41 @@ Loader.controller( return d.toString(); } + /** + * Returns a hex color string (such as "#aabbcc") for the given RGB values. + * + * @param r (numeric): red channel value, 0-255 + * @param g (numeric): green channel value, 0-255 + * @param b (numeric): blue channel value, 0-255 + */ + $scope.hexColorString = function(r, g, b) { + var rString = r.toString(16); + if (r < 16) { + rString = "0" + rString; + } + var gString = g.toString(16); + if (g < 16) { + gString = "0" + gString; + } + var bString = b.toString(16); + if (b < 16) { + bString = "0" + bString; + } + return '#' + rString + gString + bString; + } + + /** + * Returns a hex color string (such as "#aabbcc") for the given brightness. + * + * @param brightnessString (string): 0-255, 0 is completely black + * + * TODO(epoger): It might be nice to tint the color when it's not completely + * black or completely white. + */ + $scope.brightnessStringToHexColor = function(brightnessString) { + var v = parseInt(brightnessString); + return $scope.hexColorString(v, v, v); + } + } ); diff --git a/gm/rebaseline_server/static/view.html b/gm/rebaseline_server/static/view.html index 51755b958c..f756dcc5d7 100644 --- a/gm/rebaseline_server/static/view.html +++ b/gm/rebaseline_server/static/view.html @@ -264,6 +264,12 @@ ng-checked="(sortColumn == 'weightedDiffMeasure')" ng-click="sortResultsBy('weightedDiffMeasure')"> difference per pixel + <br> + <input type="range" ng-model="pixelDiffBgColorBrightness" + ng-init="pixelDiffBgColorBrightness=64; pixelDiffBgColor=brightnessStringToHexColor(pixelDiffBgColorBrightness)" + ng-change="pixelDiffBgColor=brightnessStringToHexColor(pixelDiffBgColorBrightness)" + title="image background brightness" + min="0" max="255"/> </th> <th> <!-- item-selection checkbox column --> @@ -341,7 +347,8 @@ {{result.maxDiffPerChannel}} <br/> <a href="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/> - <img-compare type="differencePerPixel" + <img-compare ng-style="{backgroundColor: pixelDiffBgColor}" + type="differencePerPixel" src="/static/generated-images/diffs/{{result.expectedHashDigest}}-vs-{{result.actualHashDigest}}.png" ng-mousedown="MagnifyDraw($event, true)" ng-mousemove="MagnifyDraw($event, false)" |