| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Comparative 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"> |
| google.load('visualization', '1.1', {'packages':['table']}); |
| var chart_left = 60; |
| 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. |
| //%%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; |
| 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(); |
| } |
| |
| function draw_files() { |
| var cssClassNames = { |
| 'headerRow': 'blue-font small-font bold-font small-margin', |
| 'tableRow': 'small-font small-margin', |
| 'oddTableRow': 'light-gray-background small-font small-margin', |
| 'selectedTableRow': 'orange-background small-font', |
| 'hoverTableRow': 'small-font header-style', |
| 'headerCell': 'header-style small-margin', |
| 'tableCell': 'small-margin'}; |
| |
| var options = {'allowHtml': true}; |
| 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', |
| chartArea:{left:chart_left, top:chart_top, width:chart_width, |
| height:chart_height-90}, |
| 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 }); |
| |
| 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 = "At " + sel_metric.toFixed(2) + " decibels, <em>" |
| message = message + metricdata.getColumnLabel(col) + "</em> is <ul>" |
| |
| // 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>VP8 Results</h2> |
| </div> |
| |
| <div class="grid_12 radio"> |
| |
| <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> |