experimental/skpdiff/viewer.html - Issue 18132007: add diff viewer website

Unified Diff: experimental/skpdiff/viewer.html

Issue 18132007: add diff viewer website (Closed) Base URL: https://skia.googlecode.com/svn/trunk

Patch Set: Created 7 years, 5 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 side-by-side diff with in-line comments

Index: experimental/skpdiff/viewer.html

diff --git a/experimental/skpdiff/viewer.html b/experimental/skpdiff/viewer.html

new file mode 100644

index 0000000000000000000000000000000000000000..0902a48b740a15eab4eddb37c52bca793fbc2e21

--- /dev/null

+++ b/experimental/skpdiff/viewer.html

@@ -0,0 +1,44 @@

+<!doctype html>

+<html>

+ <head>

+ <script type="text/javascript"

+ src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

+ <script type="text/javascript" src="skpdiff_output.json"></script>

+ <script type="text/javascript" src="diff_viewer.js"></script>

+ <link rel="stylesheet" type="text/css" href="viewer_style.css">

+ <title>SkPDiff</title>

+ </head>

+ <body>

+ <div ng-app ng-controller="DiffViewController">

borenet 2013/07/08 20:44:38 Since I've never seen angular.js before (and I sus

+ <div style="margin:8px">

+ Show me the worst by metric:

+ <button ng-repeat="differ in differs" ng-click="setSortIndex($index)">

+ <span class="result-{{ $index }}" style="padding-left:12px;"> </span>

+ {{ differ.title }}

+ </button>

+ </div>

+ <table>

+ <thead>

+ <tr>

+ <td>Baseline Image</td>

+ <td>Test Image</td>

borenet 2013/07/08 20:44:38 We typically use "actual" as the term to describe

Zach Reizner 2013/07/08 21:02:19 So the correct term is "Baseline Actual?"

borenet 2013/07/09 15:25:51 "Actual," as opposed to "Baseline." So your heade

+ <td>Results</td>

+ </tr>

+ </thead>

+ <tbody>

+ <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>

+ <div ng-repeat="diff in record.diffs"

+ ng-mouseover="highlight(diff.differName)"

+ class="result result-{{$index}}">

+ <span class="result-button">{{ diff.result }}</span>

+ </div>

+ </td>

+ </tr>

+ </tbody>

+ </table>

+ </div>

+ </body>

+</html>

« experimental/skpdiff/diff_viewer.js ('K') | « experimental/skpdiff/diff_viewer.js ('k') | experimental/skpdiff/viewer_style.css » ('j') | no next file with comments »