Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/third_party/aom/test/   (Browser von der Mozilla Stiftung Version 136.0.1©)  Datei vom 10.2.2025 mit Größe 13 kB image not shown  

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">
<!-- 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 = '
    ' + 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 + "
  • Couldn't find a point on both sides.
    • "
        } 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 + "
  • " + difference.toFixed(2) +
                      "% smaller than " +
                      metricdata.getColumnLabel(i) + "
    • "
          else
            message = message + "
  • " + -difference.toFixed(2) +
                      "% bigger than " +
                      metricdata.getColumnLabel(i) + "
    • "
        }

      }
      message = message + "
"
  statusbar = document.getElementById('status');
  statusbar.innerHTML = "

" + message + "

";
  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
C=95 H=91 G=92

¤ Dauer der Verarbeitung: 0.14 Sekunden  (vorverarbeitet)  ¤

*© Formatika GbR, Deutschland




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.