mozilla-release/third_party/aom/test/metrics_template.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>