Quelle metrics_template.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/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">

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}


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}


.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}


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>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.14 Sekunden (vorverarbeitet am 2026-04-26) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.