зеркало из https://github.com/mozilla/gecko-dev.git
423 строки
14 KiB
HTML
423 строки
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Video Codec Test Results</title>
|
|
<style type="text/css">
|
|
<!-- Begin 960 reset -->
|
|
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,c
|
|
ode,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h
|
|
3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,
|
|
output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbo
|
|
dy,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,b
|
|
ody{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{displa
|
|
y:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interp
|
|
olation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;borde
|
|
r-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:befo
|
|
re,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relati
|
|
ve;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}
|
|
<!-- End 960 reset -->
|
|
<!-- Begin 960 text -->
|
|
body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}pre,code{font-family
|
|
:'DejaVu Sans Mono',Menlo,Consolas,monospace}hr{border:0 #ccc solid;border-top-width:1px;clear:both;
|
|
height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h
|
|
6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5
|
|
,h6,ol,ul,pre,table,address,fieldset,figure{margin-bottom:20px}
|
|
<!-- End 960 text -->
|
|
<!-- Begin 960 grid (fluid variant)
|
|
12 columns, 1152px total width
|
|
http://960.gs/ | http://grids.heroku.com/ -->
|
|
.container_12{width:92%;margin-left:4%;margin-right:4%}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid
|
|
_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;ma
|
|
rgin-left:1%;margin-right:1%}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:
|
|
6.333%}.container_12 .grid_2{width:14.667%}.container_12 .grid_3{width:23.0%}.container_12 .grid_4{w
|
|
idth:31.333%}.container_12 .grid_5{width:39.667%}.container_12 .grid_6{width:48.0%}.container_12 .gr
|
|
id_7{width:56.333%}.container_12 .grid_8{width:64.667%}.container_12 .grid_9{width:73.0%}.container_
|
|
12 .grid_10{width:81.333%}.container_12 .grid_11{width:89.667%}.container_12 .grid_12{width:98.0%}.c
|
|
ontainer_12 .prefix_1{padding-left:8.333%}.container_12 .prefix_2{padding-left:16.667%}.container_12
|
|
.prefix_3{padding-left:25.0%}.container_12 .prefix_4{padding-left:33.333%}.container_12 .prefix_5{p
|
|
adding-left:41.667%}.container_12 .prefix_6{padding-left:50.0%}.container_12 .prefix_7{padding-left:
|
|
58.333%}.container_12 .prefix_8{padding-left:66.667%}.container_12 .prefix_9{padding-left:75.0%}.con
|
|
tainer_12 .prefix_10{padding-left:83.333%}.container_12 .prefix_11{padding-left:91.667%}.container_1
|
|
2 .suffix_1{padding-right:8.333%}.container_12 .suffix_2{padding-right:16.667%}.container_12 .suffix
|
|
_3{padding-right:25.0%}.container_12 .suffix_4{padding-right:33.333%}.container_12 .suffix_5{padding
|
|
-right:41.667%}.container_12 .suffix_6{padding-right:50.0%}.container_12 .suffix_7{padding-right:58.
|
|
333%}.container_12 .suffix_8{padding-right:66.667%}.container_12 .suffix_9{padding-right:75.0%}.cont
|
|
ainer_12 .suffix_10{padding-right:83.333%}.container_12 .suffix_11{padding-right:91.667%}.container_
|
|
12 .push_1{left:8.333%}.container_12 .push_2{left:16.667%}.container_12 .push_3{left:25.0%}.containe
|
|
r_12 .push_4{left:33.333%}.container_12 .push_5{left:41.667%}.container_12 .push_6{left:50.0%}.conta
|
|
iner_12 .push_7{left:58.333%}.container_12 .push_8{left:66.667%}.container_12 .push_9{left:75.0%}.co
|
|
ntainer_12 .push_10{left:83.333%}.container_12 .push_11{left:91.667%}.container_12 .pull_1{left:-8.3
|
|
33%}.container_12 .pull_2{left:-16.667%}.container_12 .pull_3{left:-25.0%}.container_12 .pull_4{left
|
|
:-33.333%}.container_12 .pull_5{left:-41.667%}.container_12 .pull_6{left:-50.0%}.container_12 .pull_
|
|
7{left:-58.333%}.container_12 .pull_8{left:-66.667%}.container_12 .pull_9{left:-75.0%}.container_12
|
|
.pull_10{left:-83.333%}.container_12 .pull_11{left:-91.667%}.clear{clear:both;display:block;overflow
|
|
:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font
|
|
-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clea
|
|
rfix{height:1%}.clearfix{display:block}
|
|
<!-- End 960 grid -->
|
|
|
|
div.metricgraph {
|
|
|
|
}
|
|
|
|
body {
|
|
|
|
}
|
|
|
|
div.header {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
div.header h2 {
|
|
margin: .5em auto;
|
|
}
|
|
|
|
div.radio {
|
|
font-family: Arial, sans-serif;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
div.main {
|
|
|
|
}
|
|
|
|
div.cliplist {
|
|
font-family: Arial, sans-serif;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
div.chartarea {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
div.indicators {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 13px;
|
|
margin-top: 6px;
|
|
min-height: 600px;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
div.indicators div.content {
|
|
margin: 1em;
|
|
}
|
|
|
|
div.indicators div.content h5 {
|
|
font-size: 13px;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
div.indicators div.content ul {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
div.indicators div.content ul li {
|
|
margin-left: 1.5em;
|
|
}
|
|
|
|
div.indicators div.content p:first-child {
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
span.google-visualization-table-sortind {
|
|
color: #000;
|
|
}
|
|
.header-style {
|
|
font-weight: bold;
|
|
border: 1px solid #fff;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
td.header-style+td {
|
|
|
|
}
|
|
|
|
.orange-background {
|
|
background-color: orange;
|
|
}
|
|
|
|
.light-gray-background {
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
|
<script type="text/javascript">
|
|
var chart_left = 40;
|
|
var chart_top = 6;
|
|
var chart_height = document.documentElement.clientHeight-100;
|
|
var chart_width = "100%";
|
|
ftable='filestable_avg'
|
|
var snrs = [];
|
|
var filestable_dsnr = [];
|
|
var filestable_drate = [];
|
|
var filestable_avg = [];
|
|
|
|
// Python template code replaces the following 2 lines.
|
|
//%%metrics_js%%//
|
|
//%%filestable_dpsnr%%//
|
|
//%%filestable_avg%%//
|
|
//%%filestable_drate%%//
|
|
//%%snrs%%//
|
|
|
|
var selected = 0
|
|
var imagestr = '';
|
|
var bettertable=0;
|
|
var chart=0;
|
|
var better=0;
|
|
var metricdata=0;
|
|
var metricView=0;
|
|
var column=1;
|
|
var formatter=0;
|
|
|
|
function changeColumn(col) {
|
|
column = col;
|
|
console.log(col)
|
|
draw_files();
|
|
}
|
|
|
|
function changeMetric(m) {
|
|
ftable=m
|
|
draw_files()
|
|
}
|
|
|
|
function setup_vis() {
|
|
chart = new google.visualization.ScatterChart(
|
|
document.getElementById("metricgraph"));
|
|
|
|
bettertable = new google.visualization.Table(
|
|
document.getElementById("bettertable"));
|
|
|
|
draw_files();
|
|
build_metrics_radio();
|
|
}
|
|
|
|
function build_metrics_radio() {
|
|
for (metric=1; metric < metrics.length; metric++) {
|
|
var rb = document.createElement('input');
|
|
var l = document.createElement('label');
|
|
rb.setAttribute('type','radio');
|
|
rb.setAttribute('name','metric');
|
|
rb.setAttribute('onClick', "changeColumn('"+metric.toString()+"')");
|
|
l.innerHTML = metrics[metric];
|
|
document.getElementById('metrics').appendChild(rb);
|
|
document.getElementById('metrics').appendChild(l);
|
|
}
|
|
}
|
|
|
|
function draw_files() {
|
|
var options = {'allowHtml': true, 'width': "100%", 'height': "50%"};
|
|
if (better != 0) delete better;
|
|
|
|
col=eval(ftable+'[column]')
|
|
better = new google.visualization.DataTable(col)
|
|
|
|
// Python Template code replaces the following line with a list of
|
|
// formatters.
|
|
if (ftable == 'filestable_dsnr')
|
|
formatter = new google.visualization.NumberFormat(
|
|
{fractionDigits: 4, suffix:" db"});
|
|
else
|
|
formatter = new google.visualization.NumberFormat(
|
|
{fractionDigits: 4, suffix:"%"});
|
|
|
|
//%%formatters%%//
|
|
|
|
bettertable.draw(better,options);
|
|
google.visualization.events.addListener(bettertable, 'select',
|
|
selectBetterHandler);
|
|
query_file()
|
|
}
|
|
|
|
function query_file() {
|
|
imagestr = better.getFormattedValue(selected, 0)
|
|
var metricjson = eval('(' + snrs[column][selected] + ')');
|
|
metricdata = new google.visualization.DataTable(metricjson, 0.6);
|
|
if( metricView != 0 ) delete metricView;
|
|
metricView = new google.visualization.DataView(metricdata);
|
|
|
|
chart.draw(metricView, {curveType:'function',
|
|
explorer: {},
|
|
chartArea:{left:chart_left, top:chart_top, width:chart_width,
|
|
height:chart_height-90},
|
|
hAxis:{title:"Datarate in kbps"},
|
|
vAxis:{title:"Quality in decibels", format: '##.0', textPosition: 'in'},
|
|
legend:{position:"in"}, title:imagestr, pointSize:2, lineWidth:1,
|
|
width:chart_width, height:chart_height-50 });
|
|
|
|
google.visualization.events.addListener(chart, 'select', chartSelect);
|
|
google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
|
|
google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
|
|
}
|
|
|
|
function chartMouseOut(e) {
|
|
statusbar = document.getElementById('status');
|
|
statusbar.style.display = 'none';
|
|
}
|
|
|
|
function chartMouseOver(e) {
|
|
pointDifference(e.row, e.column)
|
|
}
|
|
|
|
function pointDifference(row, col) {
|
|
if(!row || !col)
|
|
return;
|
|
|
|
var cols = metricdata.getNumberOfColumns();
|
|
var rows = metricdata.getNumberOfRows();
|
|
|
|
var sel_bitrate = metricView.getValue(row, 0 );
|
|
var sel_metric = metricView.getValue(row, col);
|
|
|
|
var message = '<ul>' + metricView.getColumnLabel(col) +
|
|
' (' + sel_bitrate.toFixed(0) + ' kbps, ' + sel_metric.toFixed(2) + ')' + ' is ';
|
|
|
|
|
|
// col 0 is datarate
|
|
for( var i=1;i<cols;++i) {
|
|
|
|
var metric_greatest_thats_less = 0;
|
|
var rate_greatest_thats_less = 0;
|
|
var metric_smallest_thats_greater = 999;
|
|
var rate_smallest_thats_greater = 0;
|
|
|
|
if(i==col)
|
|
continue;
|
|
|
|
// Find the lowest metric for the column that's greater than sel_metric and
|
|
// the highest metric for this column that's less than the metric.
|
|
for(var line_count = 0; line_count < rows; ++line_count) {
|
|
this_metric = metricdata.getValue(line_count, i)
|
|
this_rate = metricdata.getValue(line_count, 0)
|
|
if(!this_metric)
|
|
continue;
|
|
|
|
if(this_metric > metric_greatest_thats_less &&
|
|
this_metric <= sel_metric) {
|
|
metric_greatest_thats_less = this_metric;
|
|
rate_greatest_thats_less = this_rate;
|
|
}
|
|
if(this_metric < metric_smallest_thats_greater &&
|
|
this_metric > sel_metric) {
|
|
metric_smallest_thats_greater = this_metric;
|
|
rate_smallest_thats_greater = this_rate;
|
|
}
|
|
}
|
|
|
|
if(rate_smallest_thats_greater == 0 || rate_greatest_thats_less == 0) {
|
|
message = message + " <li> Couldn't find a point on both sides.</li>"
|
|
} else {
|
|
metric_slope = ( rate_smallest_thats_greater - rate_greatest_thats_less) /
|
|
( metric_smallest_thats_greater - metric_greatest_thats_less);
|
|
|
|
projected_rate = ( sel_metric - metric_greatest_thats_less) *
|
|
metric_slope + rate_greatest_thats_less;
|
|
|
|
difference = 100 * (projected_rate / sel_bitrate - 1);
|
|
|
|
|
|
if (difference > 0)
|
|
message = message + "<li> " + difference.toFixed(2) +
|
|
"% smaller than <em>" +
|
|
metricdata.getColumnLabel(i) + "</em></li> "
|
|
else
|
|
message = message + "<li> " + -difference.toFixed(2) +
|
|
"% bigger than <em>" +
|
|
metricdata.getColumnLabel(i) + "</em></li> "
|
|
}
|
|
|
|
}
|
|
message = message + "</ul>"
|
|
statusbar = document.getElementById('status');
|
|
statusbar.innerHTML = "<p>" + message + "</p>";
|
|
statusbar.style.display = 'block';
|
|
}
|
|
|
|
function chartSelect() {
|
|
var selection = chart.getSelection();
|
|
var message = '';
|
|
var min = metricView.getFormattedValue(selection[0].row, 0);
|
|
var max = metricView.getFormattedValue(selection[selection.length-1].row, 0);
|
|
var val = metricView.getFormattedValue(selection[0].row,selection[0].column);
|
|
|
|
pointDifference(selection[0].row, selection[0].column)
|
|
min = min / 3
|
|
max = max * 3
|
|
metricView.setRows(metricdata.getFilteredRows(
|
|
[{column: 0,minValue: min, maxValue:max}]));
|
|
|
|
chart.draw(metricView, {curveType:'function',
|
|
chartArea:{left:40, top:10, width:chart_width, height:chart_height - 110},
|
|
hAxis:{title:"datarate in kbps"}, vAxis:{title:"quality in decibels"},
|
|
legend:{position:"in"}, title:imagestr, pointSize:2, lineWidth:1,
|
|
width:chart_width, height:chart_height - 50});
|
|
}
|
|
|
|
function selectBetterHandler() {
|
|
var selection = bettertable.getSelection();
|
|
for (var i = 0; i < selection.length; i++) {
|
|
item = selection[i];
|
|
}
|
|
selected = item.row
|
|
query_file()
|
|
}
|
|
|
|
|
|
google.load('visualization', '1', {'packages' : ['corechart','table']});
|
|
google.setOnLoadCallback(setup_vis);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container_12">
|
|
|
|
<div class="grid_12 header">
|
|
<h2>Codec Comparison Results</h2>
|
|
</div>
|
|
|
|
<div class="grid_12 radio">
|
|
|
|
<form name="myform">
|
|
Method For Combining Points
|
|
<input type="radio" checked name="column" value="1"
|
|
onClick="changeMetric('filestable_avg')" />Average of bitrates difference
|
|
<input type="radio" name="column" value="2"
|
|
onClick="changeMetric('filestable_dsnr')" />BDSNR
|
|
<input type="radio" name="column" value="3"
|
|
onClick="changeMetric('filestable_drate')" />BDRATE
|
|
</form>
|
|
|
|
<form id="metrics" name="myform">
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="grid_12 main">
|
|
|
|
<div class="grid_5 alpha cliplist">
|
|
<div id="bettertable"></div>
|
|
</div>
|
|
|
|
<div class="grid_5 chartarea">
|
|
<div id="metricgraph"></div>
|
|
</div>
|
|
|
|
<div class="grid_2 omega indicators">
|
|
<div class="content">
|
|
<h5>Indicators</h5>
|
|
<hr>
|
|
<div id="status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|