diff options
Diffstat (limited to 'third_party/aom/test/metrics_template.html')
| -rw-r--r-- | third_party/aom/test/metrics_template.html | 422 |
1 files changed, 422 insertions, 0 deletions
diff --git a/third_party/aom/test/metrics_template.html b/third_party/aom/test/metrics_template.html new file mode 100644 index 0000000000..b57c62314a --- /dev/null +++ b/third_party/aom/test/metrics_template.html @@ -0,0 +1,422 @@ +<!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> |