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 --> 8a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,c 9ode,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h 103,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol, 11output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbo 12dy,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,b 13ody{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{displa 14y:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interp 15olation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;borde 16r-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:befo 17re,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relati 18ve;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden} 19<!-- End 960 reset --> 20<!-- Begin 960 text --> 21body{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; 23height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h 246{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 32rgin-left:1%;margin-right:1%}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width: 336.333%}.container_12 .grid_2{width:14.667%}.container_12 .grid_3{width:23.0%}.container_12 .grid_4{w 34idth:31.333%}.container_12 .grid_5{width:39.667%}.container_12 .grid_6{width:48.0%}.container_12 .gr 35id_7{width:56.333%}.container_12 .grid_8{width:64.667%}.container_12 .grid_9{width:73.0%}.container_ 3612 .grid_10{width:81.333%}.container_12 .grid_11{width:89.667%}.container_12 .grid_12{width:98.0%}.c 37ontainer_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 39adding-left:41.667%}.container_12 .prefix_6{padding-left:50.0%}.container_12 .prefix_7{padding-left: 4058.333%}.container_12 .prefix_8{padding-left:66.667%}.container_12 .prefix_9{padding-left:75.0%}.con 41tainer_12 .prefix_10{padding-left:83.333%}.container_12 .prefix_11{padding-left:91.667%}.container_1 422 .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. 45333%}.container_12 .suffix_8{padding-right:66.667%}.container_12 .suffix_9{padding-right:75.0%}.cont 46ainer_12 .suffix_10{padding-right:83.333%}.container_12 .suffix_11{padding-right:91.667%}.container_ 4712 .push_1{left:8.333%}.container_12 .push_2{left:16.667%}.container_12 .push_3{left:25.0%}.containe 48r_12 .push_4{left:33.333%}.container_12 .push_5{left:41.667%}.container_12 .push_6{left:50.0%}.conta 49iner_12 .push_7{left:58.333%}.container_12 .push_8{left:66.667%}.container_12 .push_9{left:75.0%}.co 50ntainer_12 .push_10{left:83.333%}.container_12 .push_11{left:91.667%}.container_12 .pull_1{left:-8.3 5133%}.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_ 537{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 57rfix{height:1%}.clearfix{display:block} 58<!-- End 960 grid --> 59 60div.metricgraph { 61 62} 63 64body { 65 66} 67 68div.header { 69 font-family: Arial, sans-serif; 70} 71 72div.header h2 { 73 margin: .5em auto; 74} 75 76div.radio { 77 font-family: Arial, sans-serif; 78 margin-bottom: 1em; 79} 80 81div.main { 82 83} 84 85div.cliplist { 86 font-family: Arial, sans-serif; 87 margin-top: 6px; 88} 89 90div.chartarea { 91 font-family: Arial, sans-serif; 92} 93 94div.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 102div.indicators div.content { 103 margin: 1em; 104} 105 106div.indicators div.content h5 { 107 font-size: 13px; 108 text-align: center; 109 margin: 0; 110} 111 112div.indicators div.content ul { 113 margin-left: 0; 114 padding-left: 0; 115 margin-top: 0; 116} 117 118div.indicators div.content ul li { 119 margin-left: 1.5em; 120} 121 122div.indicators div.content p:first-child { 123 margin-bottom: .5em; 124} 125 126span.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 135td.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"> 149var chart_left = 40; 150var chart_top = 6; 151var chart_height = document.documentElement.clientHeight-100; 152var chart_width = "100%"; 153ftable='filestable_avg' 154var snrs = []; 155var filestable_dsnr = []; 156var filestable_drate = []; 157var 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 166var selected = 0 167var imagestr = ''; 168var bettertable=0; 169var chart=0; 170var better=0; 171var metricdata=0; 172var metricView=0; 173var column=1; 174var formatter=0; 175 176function changeColumn(col) { 177 column = col; 178 console.log(col) 179 draw_files(); 180} 181 182function changeMetric(m) { 183 ftable=m 184 draw_files() 185} 186 187function 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 198function 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 211function 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 235function 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 256function chartMouseOut(e) { 257 statusbar = document.getElementById('status'); 258 statusbar.style.display = 'none'; 259} 260 261function chartMouseOver(e) { 262 pointDifference(e.row, e.column) 263} 264 265function 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 339function 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 359function 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 369google.load('visualization', '1', {'packages' : ['corechart','table']}); 370google.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> 423