test/metrics_template.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4 <meta charset="utf-8">
   5 <title>Video Codec Test Results</title>
   6 <style type="text/css">
   7 <!-- Begin 960 reset -->
   8 a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,c
   9 ode,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h
  10 3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,
  11 output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbo
  12 dy,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,b
  13 ody{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{displa
  14 y:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interp
  15 olation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;borde
  16 r-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:befo
  17 re,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relati
  18 ve;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}
  19 <!-- End 960 reset -->
  20 <!-- Begin 960 text -->
  21 body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}pre,code{font-family
  22 :'DejaVu Sans Mono',Menlo,Consolas,monospace}hr{border:0 #ccc solid;border-top-width:1px;clear:both;
  23 height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h
  24 6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5
  25 ,h6,ol,ul,pre,table,address,fieldset,figure{margin-bottom:20px}
  26 <!-- End 960 text -->
  27 <!-- Begin 960 grid (fluid variant)
  28      12 columns, 1152px total width
  29      http://960.gs/ | http://grids.heroku.com/ -->
  30 .container_12{width:92%;margin-left:4%;margin-right:4%}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid
  31 _6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;ma
  32 rgin-left:1%;margin-right:1%}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:
  33 6.333%}.container_12 .grid_2{width:14.667%}.container_12 .grid_3{width:23.0%}.container_12 .grid_4{w
  34 idth:31.333%}.container_12 .grid_5{width:39.667%}.container_12 .grid_6{width:48.0%}.container_12 .gr
  35 id_7{width:56.333%}.container_12 .grid_8{width:64.667%}.container_12 .grid_9{width:73.0%}.container_
  36 12 .grid_10{width:81.333%}.container_12 .grid_11{width:89.667%}.container_12 .grid_12{width:98.0%}.c
  37 ontainer_12 .prefix_1{padding-left:8.333%}.container_12 .prefix_2{padding-left:16.667%}.container_12
  38  .prefix_3{padding-left:25.0%}.container_12 .prefix_4{padding-left:33.333%}.container_12 .prefix_5{p
  39 adding-left:41.667%}.container_12 .prefix_6{padding-left:50.0%}.container_12 .prefix_7{padding-left:
  40 58.333%}.container_12 .prefix_8{padding-left:66.667%}.container_12 .prefix_9{padding-left:75.0%}.con
  41 tainer_12 .prefix_10{padding-left:83.333%}.container_12 .prefix_11{padding-left:91.667%}.container_1
  42 2 .suffix_1{padding-right:8.333%}.container_12 .suffix_2{padding-right:16.667%}.container_12 .suffix
  43 _3{padding-right:25.0%}.container_12 .suffix_4{padding-right:33.333%}.container_12 .suffix_5{padding
  44 -right:41.667%}.container_12 .suffix_6{padding-right:50.0%}.container_12 .suffix_7{padding-right:58.
  45 333%}.container_12 .suffix_8{padding-right:66.667%}.container_12 .suffix_9{padding-right:75.0%}.cont
  46 ainer_12 .suffix_10{padding-right:83.333%}.container_12 .suffix_11{padding-right:91.667%}.container_
  47 12 .push_1{left:8.333%}.container_12 .push_2{left:16.667%}.container_12 .push_3{left:25.0%}.containe
  48 r_12 .push_4{left:33.333%}.container_12 .push_5{left:41.667%}.container_12 .push_6{left:50.0%}.conta
  49 iner_12 .push_7{left:58.333%}.container_12 .push_8{left:66.667%}.container_12 .push_9{left:75.0%}.co
  50 ntainer_12 .push_10{left:83.333%}.container_12 .push_11{left:91.667%}.container_12 .pull_1{left:-8.3
  51 33%}.container_12 .pull_2{left:-16.667%}.container_12 .pull_3{left:-25.0%}.container_12 .pull_4{left
  52 :-33.333%}.container_12 .pull_5{left:-41.667%}.container_12 .pull_6{left:-50.0%}.container_12 .pull_
  53 7{left:-58.333%}.container_12 .pull_8{left:-66.667%}.container_12 .pull_9{left:-75.0%}.container_12
  54 .pull_10{left:-83.333%}.container_12 .pull_11{left:-91.667%}.clear{clear:both;display:block;overflow
  55 :hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font
  56 -size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clea
  57 rfix{height:1%}.clearfix{display:block}
  58 <!-- End 960 grid -->
  59
  60 div.metricgraph {
  61
  62 }
  63
  64 body {
  65
  66 }
  67
  68 div.header {
  69   font-family: Arial, sans-serif;
  70 }
  71
  72 div.header h2 {
  73   margin: .5em auto;
  74 }
  75
  76 div.radio {
  77   font-family: Arial, sans-serif;
  78   margin-bottom: 1em;
  79 }
  80
  81 div.main {
  82
  83 }
  84
  85 div.cliplist {
  86   font-family: Arial, sans-serif;
  87   margin-top: 6px;
  88 }
  89
  90 div.chartarea {
  91   font-family: Arial, sans-serif;
  92 }
  93
  94 div.indicators {
  95   font-family: Arial, sans-serif;
  96   font-size: 13px;
  97   margin-top: 6px;
  98   min-height: 600px;
  99   background-color: #f7f7f7;
 100 }
 101
 102 div.indicators div.content {
 103   margin: 1em;
 104 }
 105
 106 div.indicators div.content h5 {
 107   font-size: 13px;
 108   text-align: center;
 109   margin: 0;
 110 }
 111
 112 div.indicators div.content ul {
 113   margin-left: 0;
 114   padding-left: 0;
 115   margin-top: 0;
 116 }
 117
 118 div.indicators div.content ul li {
 119   margin-left: 1.5em;
 120 }
 121
 122 div.indicators div.content p:first-child {
 123   margin-bottom: .5em;
 124 }
 125
 126 span.google-visualization-table-sortind {
 127   color: #000;
 128 }
 129 .header-style {
 130   font-weight: bold;
 131   border: 1px solid #fff;
 132   background-color: #ccc;
 133 }
 134
 135 td.header-style+td {
 136
 137 }
 138
 139 .orange-background {
 140   background-color: orange;
 141 }
 142
 143 .light-gray-background {
 144   background-color: #f0f0f0;
 145 }
 146 </style>
 147 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 148 <script type="text/javascript">
 149 var chart_left   = 40;
 150 var chart_top    = 6;
 151 var chart_height = document.documentElement.clientHeight-100;
 152 var chart_width  = "100%";
 153 ftable='filestable_avg'
 154 var snrs = [];
 155 var filestable_dsnr = [];
 156 var filestable_drate = [];
 157 var filestable_avg = [];
 158
 159 // Python template code replaces the following 2 lines.
 160 //%%metrics_js%%//
 161 //%%filestable_dpsnr%%//
 162 //%%filestable_avg%%//
 163 //%%filestable_drate%%//
 164 //%%snrs%%//
 165
 166 var selected = 0
 167 var imagestr = '';
 168 var bettertable=0;
 169 var chart=0;
 170 var better=0;
 171 var metricdata=0;
 172 var metricView=0;
 173 var column=1;
 174 var formatter=0;
 175
 176 function changeColumn(col) {
 177   column = col;
 178   console.log(col)
 179   draw_files();
 180 }
 181
 182 function changeMetric(m) {
 183   ftable=m
 184   draw_files()
 185 }
 186
 187 function setup_vis() {
 188   chart = new google.visualization.ScatterChart(
 189       document.getElementById("metricgraph"));
 190
 191   bettertable = new google.visualization.Table(
 192       document.getElementById("bettertable"));
 193
 194   draw_files();
 195   build_metrics_radio();
 196 }
 197
 198 function build_metrics_radio() {
 199   for (metric=1; metric < metrics.length; metric++) {
 200     var rb = document.createElement('input');
 201     var l = document.createElement('label');
 202     rb.setAttribute('type','radio');
 203     rb.setAttribute('name','metric');
 204     rb.setAttribute('onClick', "changeColumn('"+metric.toString()+"')");
 205     l.innerHTML = metrics[metric];
 206     document.getElementById('metrics').appendChild(rb);
 207     document.getElementById('metrics').appendChild(l);
 208   }
 209 }
 210
 211 function draw_files() {
 212   var options = {'allowHtml': true, 'width': "100%", 'height': "50%"};
 213   if (better != 0) delete better;
 214
 215   col=eval(ftable+'[column]')
 216   better = new google.visualization.DataTable(col)
 217
 218   // Python Template code replaces the following line with a list of
 219   // formatters.
 220   if (ftable == 'filestable_dsnr')
 221     formatter = new google.visualization.NumberFormat(
 222       {fractionDigits: 4, suffix:" db"});
 223   else
 224     formatter = new google.visualization.NumberFormat(
 225        {fractionDigits: 4, suffix:"%"});
 226
 227   //%%formatters%%//
 228
 229   bettertable.draw(better,options);
 230   google.visualization.events.addListener(bettertable, 'select',
 231                                           selectBetterHandler);
 232   query_file()
 233 }
 234
 235 function query_file() {
 236   imagestr = better.getFormattedValue(selected, 0)
 237   var metricjson = eval('(' + snrs[column][selected] + ')');
 238   metricdata = new google.visualization.DataTable(metricjson, 0.6);
 239   if( metricView != 0 ) delete metricView;
 240   metricView = new google.visualization.DataView(metricdata);
 241
 242   chart.draw(metricView, {curveType:'function',
 243       explorer: {},
 244       chartArea:{left:chart_left, top:chart_top, width:chart_width,
 245       height:chart_height-90},
 246       hAxis:{title:"Datarate in kbps"},
 247       vAxis:{title:"Quality in decibels", format: '##.0', textPosition: 'in'},
 248       legend:{position:"in"}, title:imagestr, pointSize:2, lineWidth:1,
 249       width:chart_width, height:chart_height-50 });
 250
 251   google.visualization.events.addListener(chart, 'select', chartSelect);
 252   google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
 253   google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
 254 }
 255
 256 function chartMouseOut(e) {
 257   statusbar = document.getElementById('status');
 258   statusbar.style.display = 'none';
 259 }
 260
 261 function chartMouseOver(e) {
 262   pointDifference(e.row, e.column)
 263 }
 264
 265 function pointDifference(row, col) {
 266   if(!row || !col)
 267     return;
 268
 269   var cols = metricdata.getNumberOfColumns();
 270   var rows = metricdata.getNumberOfRows();
 271
 272   var sel_bitrate = metricView.getValue(row, 0 );
 273   var sel_metric = metricView.getValue(row, col);
 274
 275   var message = '<ul>' + metricView.getColumnLabel(col) +
 276      ' (' + sel_bitrate.toFixed(0) + ' kbps, ' + sel_metric.toFixed(2) + ')' + ' is ';
 277
 278
 279   // col 0 is datarate
 280   for( var i=1;i<cols;++i) {
 281
 282     var metric_greatest_thats_less = 0;
 283     var rate_greatest_thats_less = 0;
 284     var metric_smallest_thats_greater = 999;
 285     var rate_smallest_thats_greater = 0;
 286
 287     if(i==col)
 288       continue;
 289
 290     // Find the lowest metric for the column that's greater than sel_metric and
 291     // the highest metric for this column that's less than the metric.
 292     for(var line_count = 0; line_count < rows; ++line_count) {
 293       this_metric = metricdata.getValue(line_count, i)
 294       this_rate = metricdata.getValue(line_count, 0)
 295       if(!this_metric)
 296         continue;
 297
 298       if(this_metric > metric_greatest_thats_less &&
 299          this_metric <= sel_metric) {
 300         metric_greatest_thats_less = this_metric;
 301         rate_greatest_thats_less = this_rate;
 302       }
 303       if(this_metric < metric_smallest_thats_greater &&
 304         this_metric > sel_metric) {
 305         metric_smallest_thats_greater = this_metric;
 306         rate_smallest_thats_greater = this_rate;
 307       }
 308     }
 309
 310     if(rate_smallest_thats_greater == 0 || rate_greatest_thats_less == 0) {
 311       message = message + " <li> Couldn't find a point on both sides.</li>"
 312     } else {
 313       metric_slope = ( rate_smallest_thats_greater - rate_greatest_thats_less) /
 314           ( metric_smallest_thats_greater - metric_greatest_thats_less);
 315
 316       projected_rate = ( sel_metric - metric_greatest_thats_less) *
 317           metric_slope + rate_greatest_thats_less;
 318
 319       difference = 100 * (projected_rate / sel_bitrate - 1);
 320
 321
 322       if (difference > 0)
 323         message = message + "<li>  " + difference.toFixed(2) +
 324                   "% smaller than <em>" +
 325                   metricdata.getColumnLabel(i) + "</em></li> "
 326       else
 327         message = message + "<li>  " + -difference.toFixed(2) +
 328                   "% bigger than <em>" +
 329                   metricdata.getColumnLabel(i) + "</em></li> "
 330     }
 331
 332   }
 333   message = message + "</ul>"
 334   statusbar = document.getElementById('status');
 335   statusbar.innerHTML = "<p>" + message + "</p>";
 336   statusbar.style.display = 'block';
 337 }
 338
 339 function chartSelect() {
 340   var selection = chart.getSelection();
 341   var message = '';
 342   var min = metricView.getFormattedValue(selection[0].row, 0);
 343   var max = metricView.getFormattedValue(selection[selection.length-1].row, 0);
 344   var val = metricView.getFormattedValue(selection[0].row,selection[0].column);
 345
 346   pointDifference(selection[0].row, selection[0].column)
 347   min = min / 3
 348   max = max * 3
 349   metricView.setRows(metricdata.getFilteredRows(
 350       [{column: 0,minValue: min, maxValue:max}]));
 351
 352   chart.draw(metricView, {curveType:'function',
 353       chartArea:{left:40, top:10, width:chart_width, height:chart_height - 110},
 354       hAxis:{title:"datarate in kbps"}, vAxis:{title:"quality in decibels"},
 355       legend:{position:"in"}, title:imagestr, pointSize:2, lineWidth:1,
 356       width:chart_width, height:chart_height - 50});
 357 }
 358
 359 function selectBetterHandler() {
 360   var selection = bettertable.getSelection();
 361   for (var i = 0; i < selection.length; i++) {
 362     item = selection[i];
 363   }
 364   selected = item.row
 365   query_file()
 366 }
 367
 368
 369 google.load('visualization', '1', {'packages' : ['corechart','table']});
 370 google.setOnLoadCallback(setup_vis);
 371 </script>
 372 </head>
 373
 374 <body>
 375
 376   <div class="container_12">
 377
 378     <div class="grid_12 header">
 379       <h2>Codec Comparison Results</h2>
 380     </div>
 381
 382     <div class="grid_12 radio">
 383
 384       <form name="myform">
 385         Method For Combining Points
 386         <input type="radio" checked name="column" value="1"
 387           onClick="changeMetric('filestable_avg')" />Average of bitrates difference
 388         <input type="radio" name="column" value="2"
 389           onClick="changeMetric('filestable_dsnr')" />BDSNR
 390         <input type="radio" name="column" value="3"
 391           onClick="changeMetric('filestable_drate')" />BDRATE
 392       </form>
 393
 394       <form id="metrics" name="myform">
 395       </form>
 396
 397     </div>
 398
 399     <div class="grid_12 main">
 400
 401       <div class="grid_5 alpha cliplist">
 402         <div id="bettertable"></div>
 403       </div>
 404
 405       <div class="grid_5 chartarea">
 406         <div id="metricgraph"></div>
 407       </div>
 408
 409       <div class="grid_2 omega indicators">
 410         <div class="content">
 411           <h5>Indicators</h5>
 412           <hr>
 413           <div id="status"></div>
 414         </div>
 415       </div>
 416
 417     </div>
 418
 419   </div>
 420
 421 </body>
 422 </html>