| Tom Finegan | 9007d34 | 2017-12-14 07:47:13 -0800 | [diff] [blame] | 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> |
