test/metrics_template.html - aom - Git at Google

 <!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>
	<!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>