gm/rebaseline_server/static/view.html - Issue 147453003: Add the perceptual difference metric to the rebaseline server

Side by Side Diff: gm/rebaseline_server/static/view.html

Issue 147453003: Add the perceptual difference metric to the rebaseline server (Closed) Base URL: https://skia.googlesource.com/skia.git@master

Patch Set: Address feedback Created 6 years, 10 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2	2

3 <html ng-app="Loader" ng-controller="Loader.Controller">	3 <html ng-app="Loader" ng-controller="Loader.Controller">

4	4

5 <head>	5 <head>

6 <title ng-bind="windowTitle"></title>	6 <title ng-bind="windowTitle"></title>

7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>	7 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>

8 <script src="loader.js"></script>	8 <script src="loader.js"></script>

9 <script src="diff_viewer.js"></script>	9 <script src="diff_viewer.js"></script>

10 <link rel="stylesheet" href="view.css">	10 <link rel="stylesheet" href="view.css">

(...skipping 245 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
256 ng-checked="(sortColumn == 'percentDifferingPixels')"	256 ng-checked="(sortColumn == 'percentDifferingPixels')"

257 ng-click="sortResultsBy('percentDifferingPixels')">	257 ng-click="sortResultsBy('percentDifferingPixels')">

258 differing pixels in white	258 differing pixels in white

259 </th>	259 </th>

260 <th width="{{imageSize}}">	260 <th width="{{imageSize}}">

261 <input type="radio"	261 <input type="radio"

262 name="sortColumnRadio"	262 name="sortColumnRadio"

263 value="weightedDiffMeasure"	263 value="weightedDiffMeasure"

264 ng-checked="(sortColumn == 'weightedDiffMeasure')"	264 ng-checked="(sortColumn == 'weightedDiffMeasure')"

265 ng-click="sortResultsBy('weightedDiffMeasure')">	265 ng-click="sortResultsBy('weightedDiffMeasure')">

266 difference per pixel	266 perceptual difference

267 <br>	267 <br>

268 <input type="range" ng-model="pixelDiffBgColorBrightness"	268 <input type="range" ng-model="pixelDiffBgColorBrightness"

269 ng-init="pixelDiffBgColorBrightness=64; pixelDiffBgColor=brig htnessStringToHexColor(pixelDiffBgColorBrightness)"	269 ng-init="pixelDiffBgColorBrightness=64; pixelDiffBgColor=brig htnessStringToHexColor(pixelDiffBgColorBrightness)"

270 ng-change="pixelDiffBgColor=brightnessStringToHexColor(pixelD iffBgColorBrightness)"	270 ng-change="pixelDiffBgColor=brightnessStringToHexColor(pixelD iffBgColorBrightness)"

271 title="image background brightness"	271 title="image background brightness"

272 min="0" max="255"/>	272 min="0" max="255"/>

273 </th>	273 </th>

274 <th>	274 <th>

275 <!-- item-selection checkbox column -->	275 <!-- item-selection checkbox column -->

276 </th>	276 </th>

(...skipping 94 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
371 </div>	371 </div>

372 <div ng-hide="result.expectedHashDigest != result.actualHashDigest"	372 <div ng-hide="result.expectedHashDigest != result.actualHashDigest"

373 style="text-align:center">	373 style="text-align:center">

374 –none–	374 –none–

375 </div>	375 </div>

376 </td>	376 </td>

377	377

378 <!-- diffs: per-channel RGB deltas -->	378 <!-- diffs: per-channel RGB deltas -->

379 <td valign="bottom" width="{{imageSize}}">	379 <td valign="bottom" width="{{imageSize}}">

380 <div ng-hide="result.expectedHashDigest == result.actualHashDigest"	380 <div ng-hide="result.expectedHashDigest == result.actualHashDigest"

381 title="Weighted difference measure is {{result.weightedDiffMeas ure.toFixed(4)}}%. Maximum difference per channel: R={{result.maxDiffPerChannel [0]}}, G={{result.maxDiffPerChannel[1]}}, B={{result.maxDiffPerChannel[2]}}">	381 title="Perceptual difference measure is {{result.perceptualDiff erence.toFixed(4)}}%. Maximum difference per channel: R={{result.maxDiffPerChan nel[0]}}, G={{result.maxDiffPerChannel[1]}}, B={{result.maxDiffPerChannel[2]}}">

382	382

383 {{result.weightedDiffMeasure.toFixed(4)}}%	383 {{result.perceptualDifference.toFixed(4)}}%

384 {{result.maxDiffPerChannel}}	384 {{result.maxDiffPerChannel}}

385 <br/>	385 <br/>

386 <a href="/static/generated-images/diffs/{{result.expectedHashDiges t}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>	386 <a href="/static/generated-images/diffs/{{result.expectedHashDiges t}}-vs-{{result.actualHashDigest}}.png" target="_blank">View Image</a><br/>

387 <img-compare ng-style="{backgroundColor: pixelDiffBgColor}"	387 <img-compare ng-style="{backgroundColor: pixelDiffBgColor}"

388 type="differencePerPixel" width="{{imageSize}}"	388 type="differencePerPixel" width="{{imageSize}}"

389 src="/static/generated-images/diffs/{{result.expected HashDigest}}-vs-{{result.actualHashDigest}}.png"	389 src="/static/generated-images/diffs/{{result.expected HashDigest}}-vs-{{result.actualHashDigest}}.png"

390 ng-mousedown="MagnifyDraw($event, true)"	390 ng-mousedown="MagnifyDraw($event, true)"

391 ng-mousemove="MagnifyDraw($event, false)"	391 ng-mousemove="MagnifyDraw($event, false)"

392 ng-mouseup="MagnifyEnd($event)"	392 ng-mouseup="MagnifyEnd($event)"

393 ng-mouseleave="MagnifyEnd($event)" />	393 ng-mouseleave="MagnifyEnd($event)" />

(...skipping 21 matching lines...) Expand all Loading...
415 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and	415 <!-- TODO(epoger): Can we get the base URLs (commondatastorage and

416 issues list) from	416 issues list) from

417 https://skia.googlesource.com/buildbot/+/master/site_config/global_variab les.json ?	417 https://skia.googlesource.com/buildbot/+/master/site_config/global_variab les.json ?

418 I tried importing the	418 I tried importing the

419 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using	419 http://skia.googlecode.com/svn/buildbot/skia_tools.js script and using

420 that to do so, but I got Access-Control-Allow-Origin errors.	420 that to do so, but I got Access-Control-Allow-Origin errors.

421 -->	421 -->

422	422

423 </body>	423 </body>

424 </html>	424 </html>

OLD	NEW