Source code
Revision control
Copy as Markdown
Other Tools
<!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">
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>