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, 0 insertions, 422 deletions
diff --git a/third_party/aom/test/metrics_template.html b/third_party/aom/test/metrics_template.html deleted file mode 100644 index b57c62314..000000000 --- a/third_party/aom/test/metrics_template.html +++ /dev/null @@ -1,422 +0,0 @@ -<!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> |