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