AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add diff viewer website

Browse Source 
- adjust PMetric output to be percentage

R=borenet@google.com, bsalomon@google.com

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

git-svn-id: http://skia.googlecode.com/svn/trunk@9942 2bbb7eff-a529-9590-31e7-b0007b416f81
This commit is contained in:
zachr@google.com 2013-07-09 21:08:28 +00:00
parent dc7919f228
commit 9432c0c284
4 changed files with 143 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
experimental/skpdiff/SkPMetric.cpp
View File

@ -379,7 +379,7 @@ float pmetric(const ImageLAB* baselineLAB, const ImageLAB* testLAB, SkTDArray<Sk
SkDELETE_ARRAY(cyclesPerDegree); SkDELETE_ARRAY(cyclesPerDegree);
SkDELETE_ARRAY(contrast); SkDELETE_ARRAY(contrast);
SkDELETE_ARRAY(thresholdFactorFrequency); SkDELETE_ARRAY(thresholdFactorFrequency);
return (double)failures; return 1.0 - (double)failures / (width * height);
} }
const char* SkPMetric::getName() { const char* SkPMetric::getName() {

22
experimental/skpdiff/diff_viewer.js Normal file
View File

@ -0,0 +1,22 @@
function DiffViewController($scope) {
$scope.differs = [
{
"title": "Different Pixels"
},
{
"title": "Perceptual Difference"
}
];
$scope.sortIndex = 1;
$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;
}
}

44
experimental/skpdiff/viewer.html Normal file
View File

@ -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">
<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;">&nbsp;</span>
{{ differ.title }}
</button>
</div>
<table>
<thead>
<tr>
<td>Baseline Image</td>
<td>Actual Image</td>
<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>

76
experimental/skpdiff/viewer_style.css Normal file
View File

@ -0,0 +1,76 @@
body, img, div {
font-family: Verdana;
margin: 0;
padding: 0;
}
table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding: 8px;
}
td {
border-top: 1px solid #DDD;
padding: 8px;
}
thead > tr > td {
border: none;
}
.gm-image {
width:300px;
}
.baseline-image {
float: right;
}
.test-image {
text-align: right;
}
.result {
padding: 8px;
cursor: default;
opacity: 0.7;
}
.result:hover {
border: 2px dotted #DDD;
padding: 6px;
opacity: 1.0;
}
.result-0 {
background-color: #268bd2;
}
.result-1 {
background-color: #d33682;
}
.result-2 {
background-color: #b58900;
}
.result-3 {
background-color: #cb4b16;
}
.result-4 {
background-color: #6c71c4;
}
.result-5 {
background-color: #dc322f;
}
.result-6 {
background-color: #2aa198;
}
.result-7 {
background-color: #859900;
}