xref: /aosp_15_r20/external/libaom/test/metrics_template.html (revision 77c1e3ccc04c968bd2bc212e87364f250e820521)
1*77c1e3ccSAndroid Build Coastguard Worker<!DOCTYPE html>
2*77c1e3ccSAndroid Build Coastguard Worker<html lang="en">
3*77c1e3ccSAndroid Build Coastguard Worker<head>
4*77c1e3ccSAndroid Build Coastguard Worker<meta charset="utf-8">
5*77c1e3ccSAndroid Build Coastguard Worker<title>Video Codec Test Results</title>
6*77c1e3ccSAndroid Build Coastguard Worker<style type="text/css">
7*77c1e3ccSAndroid Build Coastguard Worker<!-- Begin 960 reset -->
8*77c1e3ccSAndroid Build Coastguard Workera,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,c
9*77c1e3ccSAndroid Build Coastguard Workerode,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h
10*77c1e3ccSAndroid Build Coastguard Worker3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,
11*77c1e3ccSAndroid Build Coastguard Workeroutput,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbo
12*77c1e3ccSAndroid Build Coastguard Workerdy,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,b
13*77c1e3ccSAndroid Build Coastguard Workerody{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{displa
14*77c1e3ccSAndroid Build Coastguard Workery:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interp
15*77c1e3ccSAndroid Build Coastguard Workerolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;borde
16*77c1e3ccSAndroid Build Coastguard Workerr-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:befo
17*77c1e3ccSAndroid Build Coastguard Workerre,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relati
18*77c1e3ccSAndroid Build Coastguard Workerve;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}
19*77c1e3ccSAndroid Build Coastguard Worker<!-- End 960 reset -->
20*77c1e3ccSAndroid Build Coastguard Worker<!-- Begin 960 text -->
21*77c1e3ccSAndroid Build Coastguard Workerbody{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}pre,code{font-family
22*77c1e3ccSAndroid Build Coastguard Worker:'DejaVu Sans Mono',Menlo,Consolas,monospace}hr{border:0 #ccc solid;border-top-width:1px;clear:both;
23*77c1e3ccSAndroid Build Coastguard Workerheight:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h
24*77c1e3ccSAndroid Build Coastguard Worker6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5
25*77c1e3ccSAndroid Build Coastguard Worker,h6,ol,ul,pre,table,address,fieldset,figure{margin-bottom:20px}
26*77c1e3ccSAndroid Build Coastguard Worker<!-- End 960 text -->
27*77c1e3ccSAndroid Build Coastguard Worker<!-- Begin 960 grid (fluid variant)
28*77c1e3ccSAndroid Build Coastguard Worker     12 columns, 1152px total width
29*77c1e3ccSAndroid Build Coastguard Worker     http://960.gs/ | http://grids.heroku.com/ -->
30*77c1e3ccSAndroid Build Coastguard Worker.container_12{width:92%;margin-left:4%;margin-right:4%}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid
31*77c1e3ccSAndroid Build Coastguard Worker_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;ma
32*77c1e3ccSAndroid Build Coastguard Workerrgin-left:1%;margin-right:1%}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:
33*77c1e3ccSAndroid Build Coastguard Worker6.333%}.container_12 .grid_2{width:14.667%}.container_12 .grid_3{width:23.0%}.container_12 .grid_4{w
34*77c1e3ccSAndroid Build Coastguard Workeridth:31.333%}.container_12 .grid_5{width:39.667%}.container_12 .grid_6{width:48.0%}.container_12 .gr
35*77c1e3ccSAndroid Build Coastguard Workerid_7{width:56.333%}.container_12 .grid_8{width:64.667%}.container_12 .grid_9{width:73.0%}.container_
36*77c1e3ccSAndroid Build Coastguard Worker12 .grid_10{width:81.333%}.container_12 .grid_11{width:89.667%}.container_12 .grid_12{width:98.0%}.c
37*77c1e3ccSAndroid Build Coastguard Workerontainer_12 .prefix_1{padding-left:8.333%}.container_12 .prefix_2{padding-left:16.667%}.container_12
38*77c1e3ccSAndroid Build Coastguard Worker .prefix_3{padding-left:25.0%}.container_12 .prefix_4{padding-left:33.333%}.container_12 .prefix_5{p
39*77c1e3ccSAndroid Build Coastguard Workeradding-left:41.667%}.container_12 .prefix_6{padding-left:50.0%}.container_12 .prefix_7{padding-left:
40*77c1e3ccSAndroid Build Coastguard Worker58.333%}.container_12 .prefix_8{padding-left:66.667%}.container_12 .prefix_9{padding-left:75.0%}.con
41*77c1e3ccSAndroid Build Coastguard Workertainer_12 .prefix_10{padding-left:83.333%}.container_12 .prefix_11{padding-left:91.667%}.container_1
42*77c1e3ccSAndroid Build Coastguard Worker2 .suffix_1{padding-right:8.333%}.container_12 .suffix_2{padding-right:16.667%}.container_12 .suffix
43*77c1e3ccSAndroid Build Coastguard Worker_3{padding-right:25.0%}.container_12 .suffix_4{padding-right:33.333%}.container_12 .suffix_5{padding
44*77c1e3ccSAndroid Build Coastguard Worker-right:41.667%}.container_12 .suffix_6{padding-right:50.0%}.container_12 .suffix_7{padding-right:58.
45*77c1e3ccSAndroid Build Coastguard Worker333%}.container_12 .suffix_8{padding-right:66.667%}.container_12 .suffix_9{padding-right:75.0%}.cont
46*77c1e3ccSAndroid Build Coastguard Workerainer_12 .suffix_10{padding-right:83.333%}.container_12 .suffix_11{padding-right:91.667%}.container_
47*77c1e3ccSAndroid Build Coastguard Worker12 .push_1{left:8.333%}.container_12 .push_2{left:16.667%}.container_12 .push_3{left:25.0%}.containe
48*77c1e3ccSAndroid Build Coastguard Workerr_12 .push_4{left:33.333%}.container_12 .push_5{left:41.667%}.container_12 .push_6{left:50.0%}.conta
49*77c1e3ccSAndroid Build Coastguard Workeriner_12 .push_7{left:58.333%}.container_12 .push_8{left:66.667%}.container_12 .push_9{left:75.0%}.co
50*77c1e3ccSAndroid Build Coastguard Workerntainer_12 .push_10{left:83.333%}.container_12 .push_11{left:91.667%}.container_12 .pull_1{left:-8.3
51*77c1e3ccSAndroid Build Coastguard Worker33%}.container_12 .pull_2{left:-16.667%}.container_12 .pull_3{left:-25.0%}.container_12 .pull_4{left
52*77c1e3ccSAndroid Build Coastguard Worker:-33.333%}.container_12 .pull_5{left:-41.667%}.container_12 .pull_6{left:-50.0%}.container_12 .pull_
53*77c1e3ccSAndroid Build Coastguard Worker7{left:-58.333%}.container_12 .pull_8{left:-66.667%}.container_12 .pull_9{left:-75.0%}.container_12
54*77c1e3ccSAndroid Build Coastguard Worker.pull_10{left:-83.333%}.container_12 .pull_11{left:-91.667%}.clear{clear:both;display:block;overflow
55*77c1e3ccSAndroid Build Coastguard Worker:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font
56*77c1e3ccSAndroid Build Coastguard Worker-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clea
57*77c1e3ccSAndroid Build Coastguard Workerrfix{height:1%}.clearfix{display:block}
58*77c1e3ccSAndroid Build Coastguard Worker<!-- End 960 grid -->
59*77c1e3ccSAndroid Build Coastguard Worker
60*77c1e3ccSAndroid Build Coastguard Workerdiv.metricgraph {
61*77c1e3ccSAndroid Build Coastguard Worker
62*77c1e3ccSAndroid Build Coastguard Worker}
63*77c1e3ccSAndroid Build Coastguard Worker
64*77c1e3ccSAndroid Build Coastguard Workerbody {
65*77c1e3ccSAndroid Build Coastguard Worker
66*77c1e3ccSAndroid Build Coastguard Worker}
67*77c1e3ccSAndroid Build Coastguard Worker
68*77c1e3ccSAndroid Build Coastguard Workerdiv.header {
69*77c1e3ccSAndroid Build Coastguard Worker  font-family: Arial, sans-serif;
70*77c1e3ccSAndroid Build Coastguard Worker}
71*77c1e3ccSAndroid Build Coastguard Worker
72*77c1e3ccSAndroid Build Coastguard Workerdiv.header h2 {
73*77c1e3ccSAndroid Build Coastguard Worker  margin: .5em auto;
74*77c1e3ccSAndroid Build Coastguard Worker}
75*77c1e3ccSAndroid Build Coastguard Worker
76*77c1e3ccSAndroid Build Coastguard Workerdiv.radio {
77*77c1e3ccSAndroid Build Coastguard Worker  font-family: Arial, sans-serif;
78*77c1e3ccSAndroid Build Coastguard Worker  margin-bottom: 1em;
79*77c1e3ccSAndroid Build Coastguard Worker}
80*77c1e3ccSAndroid Build Coastguard Worker
81*77c1e3ccSAndroid Build Coastguard Workerdiv.main {
82*77c1e3ccSAndroid Build Coastguard Worker
83*77c1e3ccSAndroid Build Coastguard Worker}
84*77c1e3ccSAndroid Build Coastguard Worker
85*77c1e3ccSAndroid Build Coastguard Workerdiv.cliplist {
86*77c1e3ccSAndroid Build Coastguard Worker  font-family: Arial, sans-serif;
87*77c1e3ccSAndroid Build Coastguard Worker  margin-top: 6px;
88*77c1e3ccSAndroid Build Coastguard Worker}
89*77c1e3ccSAndroid Build Coastguard Worker
90*77c1e3ccSAndroid Build Coastguard Workerdiv.chartarea {
91*77c1e3ccSAndroid Build Coastguard Worker  font-family: Arial, sans-serif;
92*77c1e3ccSAndroid Build Coastguard Worker}
93*77c1e3ccSAndroid Build Coastguard Worker
94*77c1e3ccSAndroid Build Coastguard Workerdiv.indicators {
95*77c1e3ccSAndroid Build Coastguard Worker  font-family: Arial, sans-serif;
96*77c1e3ccSAndroid Build Coastguard Worker  font-size: 13px;
97*77c1e3ccSAndroid Build Coastguard Worker  margin-top: 6px;
98*77c1e3ccSAndroid Build Coastguard Worker  min-height: 600px;
99*77c1e3ccSAndroid Build Coastguard Worker  background-color: #f7f7f7;
100*77c1e3ccSAndroid Build Coastguard Worker}
101*77c1e3ccSAndroid Build Coastguard Worker
102*77c1e3ccSAndroid Build Coastguard Workerdiv.indicators div.content {
103*77c1e3ccSAndroid Build Coastguard Worker  margin: 1em;
104*77c1e3ccSAndroid Build Coastguard Worker}
105*77c1e3ccSAndroid Build Coastguard Worker
106*77c1e3ccSAndroid Build Coastguard Workerdiv.indicators div.content h5 {
107*77c1e3ccSAndroid Build Coastguard Worker  font-size: 13px;
108*77c1e3ccSAndroid Build Coastguard Worker  text-align: center;
109*77c1e3ccSAndroid Build Coastguard Worker  margin: 0;
110*77c1e3ccSAndroid Build Coastguard Worker}
111*77c1e3ccSAndroid Build Coastguard Worker
112*77c1e3ccSAndroid Build Coastguard Workerdiv.indicators div.content ul {
113*77c1e3ccSAndroid Build Coastguard Worker  margin-left: 0;
114*77c1e3ccSAndroid Build Coastguard Worker  padding-left: 0;
115*77c1e3ccSAndroid Build Coastguard Worker  margin-top: 0;
116*77c1e3ccSAndroid Build Coastguard Worker}
117*77c1e3ccSAndroid Build Coastguard Worker
118*77c1e3ccSAndroid Build Coastguard Workerdiv.indicators div.content ul li {
119*77c1e3ccSAndroid Build Coastguard Worker  margin-left: 1.5em;
120*77c1e3ccSAndroid Build Coastguard Worker}
121*77c1e3ccSAndroid Build Coastguard Worker
122*77c1e3ccSAndroid Build Coastguard Workerdiv.indicators div.content p:first-child {
123*77c1e3ccSAndroid Build Coastguard Worker  margin-bottom: .5em;
124*77c1e3ccSAndroid Build Coastguard Worker}
125*77c1e3ccSAndroid Build Coastguard Worker
126*77c1e3ccSAndroid Build Coastguard Workerspan.google-visualization-table-sortind {
127*77c1e3ccSAndroid Build Coastguard Worker  color: #000;
128*77c1e3ccSAndroid Build Coastguard Worker}
129*77c1e3ccSAndroid Build Coastguard Worker.header-style {
130*77c1e3ccSAndroid Build Coastguard Worker  font-weight: bold;
131*77c1e3ccSAndroid Build Coastguard Worker  border: 1px solid #fff;
132*77c1e3ccSAndroid Build Coastguard Worker  background-color: #ccc;
133*77c1e3ccSAndroid Build Coastguard Worker}
134*77c1e3ccSAndroid Build Coastguard Worker
135*77c1e3ccSAndroid Build Coastguard Workertd.header-style+td {
136*77c1e3ccSAndroid Build Coastguard Worker
137*77c1e3ccSAndroid Build Coastguard Worker}
138*77c1e3ccSAndroid Build Coastguard Worker
139*77c1e3ccSAndroid Build Coastguard Worker.orange-background {
140*77c1e3ccSAndroid Build Coastguard Worker  background-color: orange;
141*77c1e3ccSAndroid Build Coastguard Worker}
142*77c1e3ccSAndroid Build Coastguard Worker
143*77c1e3ccSAndroid Build Coastguard Worker.light-gray-background {
144*77c1e3ccSAndroid Build Coastguard Worker  background-color: #f0f0f0;
145*77c1e3ccSAndroid Build Coastguard Worker}
146*77c1e3ccSAndroid Build Coastguard Worker</style>
147*77c1e3ccSAndroid Build Coastguard Worker<script type="text/javascript" src="https://www.google.com/jsapi"></script>
148*77c1e3ccSAndroid Build Coastguard Worker<script type="text/javascript">
149*77c1e3ccSAndroid Build Coastguard Workervar chart_left   = 40;
150*77c1e3ccSAndroid Build Coastguard Workervar chart_top    = 6;
151*77c1e3ccSAndroid Build Coastguard Workervar chart_height = document.documentElement.clientHeight-100;
152*77c1e3ccSAndroid Build Coastguard Workervar chart_width  = "100%";
153*77c1e3ccSAndroid Build Coastguard Workerftable='filestable_avg'
154*77c1e3ccSAndroid Build Coastguard Workervar snrs = [];
155*77c1e3ccSAndroid Build Coastguard Workervar filestable_dsnr = [];
156*77c1e3ccSAndroid Build Coastguard Workervar filestable_drate = [];
157*77c1e3ccSAndroid Build Coastguard Workervar filestable_avg = [];
158*77c1e3ccSAndroid Build Coastguard Worker
159*77c1e3ccSAndroid Build Coastguard Worker// Python template code replaces the following 2 lines.
160*77c1e3ccSAndroid Build Coastguard Worker//%%metrics_js%%//
161*77c1e3ccSAndroid Build Coastguard Worker//%%filestable_dpsnr%%//
162*77c1e3ccSAndroid Build Coastguard Worker//%%filestable_avg%%//
163*77c1e3ccSAndroid Build Coastguard Worker//%%filestable_drate%%//
164*77c1e3ccSAndroid Build Coastguard Worker//%%snrs%%//
165*77c1e3ccSAndroid Build Coastguard Worker
166*77c1e3ccSAndroid Build Coastguard Workervar selected = 0
167*77c1e3ccSAndroid Build Coastguard Workervar imagestr = '';
168*77c1e3ccSAndroid Build Coastguard Workervar bettertable=0;
169*77c1e3ccSAndroid Build Coastguard Workervar chart=0;
170*77c1e3ccSAndroid Build Coastguard Workervar better=0;
171*77c1e3ccSAndroid Build Coastguard Workervar metricdata=0;
172*77c1e3ccSAndroid Build Coastguard Workervar metricView=0;
173*77c1e3ccSAndroid Build Coastguard Workervar column=1;
174*77c1e3ccSAndroid Build Coastguard Workervar formatter=0;
175*77c1e3ccSAndroid Build Coastguard Worker
176*77c1e3ccSAndroid Build Coastguard Workerfunction changeColumn(col) {
177*77c1e3ccSAndroid Build Coastguard Worker  column = col;
178*77c1e3ccSAndroid Build Coastguard Worker  console.log(col)
179*77c1e3ccSAndroid Build Coastguard Worker  draw_files();
180*77c1e3ccSAndroid Build Coastguard Worker}
181*77c1e3ccSAndroid Build Coastguard Worker
182*77c1e3ccSAndroid Build Coastguard Workerfunction changeMetric(m) {
183*77c1e3ccSAndroid Build Coastguard Worker  ftable=m
184*77c1e3ccSAndroid Build Coastguard Worker  draw_files()
185*77c1e3ccSAndroid Build Coastguard Worker}
186*77c1e3ccSAndroid Build Coastguard Worker
187*77c1e3ccSAndroid Build Coastguard Workerfunction setup_vis() {
188*77c1e3ccSAndroid Build Coastguard Worker  chart = new google.visualization.ScatterChart(
189*77c1e3ccSAndroid Build Coastguard Worker      document.getElementById("metricgraph"));
190*77c1e3ccSAndroid Build Coastguard Worker
191*77c1e3ccSAndroid Build Coastguard Worker  bettertable = new google.visualization.Table(
192*77c1e3ccSAndroid Build Coastguard Worker      document.getElementById("bettertable"));
193*77c1e3ccSAndroid Build Coastguard Worker
194*77c1e3ccSAndroid Build Coastguard Worker  draw_files();
195*77c1e3ccSAndroid Build Coastguard Worker  build_metrics_radio();
196*77c1e3ccSAndroid Build Coastguard Worker}
197*77c1e3ccSAndroid Build Coastguard Worker
198*77c1e3ccSAndroid Build Coastguard Workerfunction build_metrics_radio() {
199*77c1e3ccSAndroid Build Coastguard Worker  for (metric=1; metric < metrics.length; metric++) {
200*77c1e3ccSAndroid Build Coastguard Worker    var rb = document.createElement('input');
201*77c1e3ccSAndroid Build Coastguard Worker    var l = document.createElement('label');
202*77c1e3ccSAndroid Build Coastguard Worker    rb.setAttribute('type','radio');
203*77c1e3ccSAndroid Build Coastguard Worker    rb.setAttribute('name','metric');
204*77c1e3ccSAndroid Build Coastguard Worker    rb.setAttribute('onClick', "changeColumn('"+metric.toString()+"')");
205*77c1e3ccSAndroid Build Coastguard Worker    l.innerHTML = metrics[metric];
206*77c1e3ccSAndroid Build Coastguard Worker    document.getElementById('metrics').appendChild(rb);
207*77c1e3ccSAndroid Build Coastguard Worker    document.getElementById('metrics').appendChild(l);
208*77c1e3ccSAndroid Build Coastguard Worker  }
209*77c1e3ccSAndroid Build Coastguard Worker}
210*77c1e3ccSAndroid Build Coastguard Worker
211*77c1e3ccSAndroid Build Coastguard Workerfunction draw_files() {
212*77c1e3ccSAndroid Build Coastguard Worker  var options = {'allowHtml': true, 'width': "100%", 'height': "50%"};
213*77c1e3ccSAndroid Build Coastguard Worker  if (better != 0) delete better;
214*77c1e3ccSAndroid Build Coastguard Worker
215*77c1e3ccSAndroid Build Coastguard Worker  col=eval(ftable+'[column]')
216*77c1e3ccSAndroid Build Coastguard Worker  better = new google.visualization.DataTable(col)
217*77c1e3ccSAndroid Build Coastguard Worker
218*77c1e3ccSAndroid Build Coastguard Worker  // Python Template code replaces the following line with a list of
219*77c1e3ccSAndroid Build Coastguard Worker  // formatters.
220*77c1e3ccSAndroid Build Coastguard Worker  if (ftable == 'filestable_dsnr')
221*77c1e3ccSAndroid Build Coastguard Worker    formatter = new google.visualization.NumberFormat(
222*77c1e3ccSAndroid Build Coastguard Worker      {fractionDigits: 4, suffix:" db"});
223*77c1e3ccSAndroid Build Coastguard Worker  else
224*77c1e3ccSAndroid Build Coastguard Worker    formatter = new google.visualization.NumberFormat(
225*77c1e3ccSAndroid Build Coastguard Worker       {fractionDigits: 4, suffix:"%"});
226*77c1e3ccSAndroid Build Coastguard Worker
227*77c1e3ccSAndroid Build Coastguard Worker  //%%formatters%%//
228*77c1e3ccSAndroid Build Coastguard Worker
229*77c1e3ccSAndroid Build Coastguard Worker  bettertable.draw(better,options);
230*77c1e3ccSAndroid Build Coastguard Worker  google.visualization.events.addListener(bettertable, 'select',
231*77c1e3ccSAndroid Build Coastguard Worker                                          selectBetterHandler);
232*77c1e3ccSAndroid Build Coastguard Worker  query_file()
233*77c1e3ccSAndroid Build Coastguard Worker}
234*77c1e3ccSAndroid Build Coastguard Worker
235*77c1e3ccSAndroid Build Coastguard Workerfunction query_file() {
236*77c1e3ccSAndroid Build Coastguard Worker  imagestr = better.getFormattedValue(selected, 0)
237*77c1e3ccSAndroid Build Coastguard Worker  var metricjson = eval('(' + snrs[column][selected] + ')');
238*77c1e3ccSAndroid Build Coastguard Worker  metricdata = new google.visualization.DataTable(metricjson, 0.6);
239*77c1e3ccSAndroid Build Coastguard Worker  if( metricView != 0 ) delete metricView;
240*77c1e3ccSAndroid Build Coastguard Worker  metricView = new google.visualization.DataView(metricdata);
241*77c1e3ccSAndroid Build Coastguard Worker
242*77c1e3ccSAndroid Build Coastguard Worker  chart.draw(metricView, {curveType:'function',
243*77c1e3ccSAndroid Build Coastguard Worker      explorer: {},
244*77c1e3ccSAndroid Build Coastguard Worker      chartArea:{left:chart_left, top:chart_top, width:chart_width,
245*77c1e3ccSAndroid Build Coastguard Worker      height:chart_height-90},
246*77c1e3ccSAndroid Build Coastguard Worker      hAxis:{title:"Datarate in kbps"},
247*77c1e3ccSAndroid Build Coastguard Worker      vAxis:{title:"Quality in decibels", format: '##.0', textPosition: 'in'},
248*77c1e3ccSAndroid Build Coastguard Worker      legend:{position:"in"}, title:imagestr, pointSize:2, lineWidth:1,
249*77c1e3ccSAndroid Build Coastguard Worker      width:chart_width, height:chart_height-50 });
250*77c1e3ccSAndroid Build Coastguard Worker
251*77c1e3ccSAndroid Build Coastguard Worker  google.visualization.events.addListener(chart, 'select', chartSelect);
252*77c1e3ccSAndroid Build Coastguard Worker  google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
253*77c1e3ccSAndroid Build Coastguard Worker  google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);
254*77c1e3ccSAndroid Build Coastguard Worker}
255*77c1e3ccSAndroid Build Coastguard Worker
256*77c1e3ccSAndroid Build Coastguard Workerfunction chartMouseOut(e) {
257*77c1e3ccSAndroid Build Coastguard Worker  statusbar = document.getElementById('status');
258*77c1e3ccSAndroid Build Coastguard Worker  statusbar.style.display = 'none';
259*77c1e3ccSAndroid Build Coastguard Worker}
260*77c1e3ccSAndroid Build Coastguard Worker
261*77c1e3ccSAndroid Build Coastguard Workerfunction chartMouseOver(e) {
262*77c1e3ccSAndroid Build Coastguard Worker  pointDifference(e.row, e.column)
263*77c1e3ccSAndroid Build Coastguard Worker}
264*77c1e3ccSAndroid Build Coastguard Worker
265*77c1e3ccSAndroid Build Coastguard Workerfunction pointDifference(row, col) {
266*77c1e3ccSAndroid Build Coastguard Worker  if(!row || !col)
267*77c1e3ccSAndroid Build Coastguard Worker    return;
268*77c1e3ccSAndroid Build Coastguard Worker
269*77c1e3ccSAndroid Build Coastguard Worker  var cols = metricdata.getNumberOfColumns();
270*77c1e3ccSAndroid Build Coastguard Worker  var rows = metricdata.getNumberOfRows();
271*77c1e3ccSAndroid Build Coastguard Worker
272*77c1e3ccSAndroid Build Coastguard Worker  var sel_bitrate = metricView.getValue(row, 0 );
273*77c1e3ccSAndroid Build Coastguard Worker  var sel_metric = metricView.getValue(row, col);
274*77c1e3ccSAndroid Build Coastguard Worker
275*77c1e3ccSAndroid Build Coastguard Worker  var message = '<ul>' + metricView.getColumnLabel(col) +
276*77c1e3ccSAndroid Build Coastguard Worker     ' (' + sel_bitrate.toFixed(0) + ' kbps, ' + sel_metric.toFixed(2) + ')' + ' is ';
277*77c1e3ccSAndroid Build Coastguard Worker
278*77c1e3ccSAndroid Build Coastguard Worker
279*77c1e3ccSAndroid Build Coastguard Worker  // col 0 is datarate
280*77c1e3ccSAndroid Build Coastguard Worker  for( var i=1;i<cols;++i) {
281*77c1e3ccSAndroid Build Coastguard Worker
282*77c1e3ccSAndroid Build Coastguard Worker    var metric_greatest_thats_less = 0;
283*77c1e3ccSAndroid Build Coastguard Worker    var rate_greatest_thats_less = 0;
284*77c1e3ccSAndroid Build Coastguard Worker    var metric_smallest_thats_greater = 999;
285*77c1e3ccSAndroid Build Coastguard Worker    var rate_smallest_thats_greater = 0;
286*77c1e3ccSAndroid Build Coastguard Worker
287*77c1e3ccSAndroid Build Coastguard Worker    if(i==col)
288*77c1e3ccSAndroid Build Coastguard Worker      continue;
289*77c1e3ccSAndroid Build Coastguard Worker
290*77c1e3ccSAndroid Build Coastguard Worker    // Find the lowest metric for the column that's greater than sel_metric and
291*77c1e3ccSAndroid Build Coastguard Worker    // the highest metric for this column that's less than the metric.
292*77c1e3ccSAndroid Build Coastguard Worker    for(var line_count = 0; line_count < rows; ++line_count) {
293*77c1e3ccSAndroid Build Coastguard Worker      this_metric = metricdata.getValue(line_count, i)
294*77c1e3ccSAndroid Build Coastguard Worker      this_rate = metricdata.getValue(line_count, 0)
295*77c1e3ccSAndroid Build Coastguard Worker      if(!this_metric)
296*77c1e3ccSAndroid Build Coastguard Worker        continue;
297*77c1e3ccSAndroid Build Coastguard Worker
298*77c1e3ccSAndroid Build Coastguard Worker      if(this_metric > metric_greatest_thats_less &&
299*77c1e3ccSAndroid Build Coastguard Worker         this_metric <= sel_metric) {
300*77c1e3ccSAndroid Build Coastguard Worker        metric_greatest_thats_less = this_metric;
301*77c1e3ccSAndroid Build Coastguard Worker        rate_greatest_thats_less = this_rate;
302*77c1e3ccSAndroid Build Coastguard Worker      }
303*77c1e3ccSAndroid Build Coastguard Worker      if(this_metric < metric_smallest_thats_greater &&
304*77c1e3ccSAndroid Build Coastguard Worker        this_metric > sel_metric) {
305*77c1e3ccSAndroid Build Coastguard Worker        metric_smallest_thats_greater = this_metric;
306*77c1e3ccSAndroid Build Coastguard Worker        rate_smallest_thats_greater = this_rate;
307*77c1e3ccSAndroid Build Coastguard Worker      }
308*77c1e3ccSAndroid Build Coastguard Worker    }
309*77c1e3ccSAndroid Build Coastguard Worker
310*77c1e3ccSAndroid Build Coastguard Worker    if(rate_smallest_thats_greater == 0 || rate_greatest_thats_less == 0) {
311*77c1e3ccSAndroid Build Coastguard Worker      message = message + " <li> Couldn't find a point on both sides.</li>"
312*77c1e3ccSAndroid Build Coastguard Worker    } else {
313*77c1e3ccSAndroid Build Coastguard Worker      metric_slope = ( rate_smallest_thats_greater - rate_greatest_thats_less) /
314*77c1e3ccSAndroid Build Coastguard Worker          ( metric_smallest_thats_greater - metric_greatest_thats_less);
315*77c1e3ccSAndroid Build Coastguard Worker
316*77c1e3ccSAndroid Build Coastguard Worker      projected_rate = ( sel_metric - metric_greatest_thats_less) *
317*77c1e3ccSAndroid Build Coastguard Worker          metric_slope + rate_greatest_thats_less;
318*77c1e3ccSAndroid Build Coastguard Worker
319*77c1e3ccSAndroid Build Coastguard Worker      difference = 100 * (projected_rate / sel_bitrate - 1);
320*77c1e3ccSAndroid Build Coastguard Worker
321*77c1e3ccSAndroid Build Coastguard Worker
322*77c1e3ccSAndroid Build Coastguard Worker      if (difference > 0)
323*77c1e3ccSAndroid Build Coastguard Worker        message = message + "<li>  " + difference.toFixed(2) +
324*77c1e3ccSAndroid Build Coastguard Worker                  "% smaller than <em>" +
325*77c1e3ccSAndroid Build Coastguard Worker                  metricdata.getColumnLabel(i) + "</em></li> "
326*77c1e3ccSAndroid Build Coastguard Worker      else
327*77c1e3ccSAndroid Build Coastguard Worker        message = message + "<li>  " + -difference.toFixed(2) +
328*77c1e3ccSAndroid Build Coastguard Worker                  "% bigger than <em>" +
329*77c1e3ccSAndroid Build Coastguard Worker                  metricdata.getColumnLabel(i) + "</em></li> "
330*77c1e3ccSAndroid Build Coastguard Worker    }
331*77c1e3ccSAndroid Build Coastguard Worker
332*77c1e3ccSAndroid Build Coastguard Worker  }
333*77c1e3ccSAndroid Build Coastguard Worker  message = message + "</ul>"
334*77c1e3ccSAndroid Build Coastguard Worker  statusbar = document.getElementById('status');
335*77c1e3ccSAndroid Build Coastguard Worker  statusbar.innerHTML = "<p>" + message + "</p>";
336*77c1e3ccSAndroid Build Coastguard Worker  statusbar.style.display = 'block';
337*77c1e3ccSAndroid Build Coastguard Worker}
338*77c1e3ccSAndroid Build Coastguard Worker
339*77c1e3ccSAndroid Build Coastguard Workerfunction chartSelect() {
340*77c1e3ccSAndroid Build Coastguard Worker  var selection = chart.getSelection();
341*77c1e3ccSAndroid Build Coastguard Worker  var message = '';
342*77c1e3ccSAndroid Build Coastguard Worker  var min = metricView.getFormattedValue(selection[0].row, 0);
343*77c1e3ccSAndroid Build Coastguard Worker  var max = metricView.getFormattedValue(selection[selection.length-1].row, 0);
344*77c1e3ccSAndroid Build Coastguard Worker  var val = metricView.getFormattedValue(selection[0].row,selection[0].column);
345*77c1e3ccSAndroid Build Coastguard Worker
346*77c1e3ccSAndroid Build Coastguard Worker  pointDifference(selection[0].row, selection[0].column)
347*77c1e3ccSAndroid Build Coastguard Worker  min = min / 3
348*77c1e3ccSAndroid Build Coastguard Worker  max = max * 3
349*77c1e3ccSAndroid Build Coastguard Worker  metricView.setRows(metricdata.getFilteredRows(
350*77c1e3ccSAndroid Build Coastguard Worker      [{column: 0,minValue: min, maxValue:max}]));
351*77c1e3ccSAndroid Build Coastguard Worker
352*77c1e3ccSAndroid Build Coastguard Worker  chart.draw(metricView, {curveType:'function',
353*77c1e3ccSAndroid Build Coastguard Worker      chartArea:{left:40, top:10, width:chart_width, height:chart_height - 110},
354*77c1e3ccSAndroid Build Coastguard Worker      hAxis:{title:"datarate in kbps"}, vAxis:{title:"quality in decibels"},
355*77c1e3ccSAndroid Build Coastguard Worker      legend:{position:"in"}, title:imagestr, pointSize:2, lineWidth:1,
356*77c1e3ccSAndroid Build Coastguard Worker      width:chart_width, height:chart_height - 50});
357*77c1e3ccSAndroid Build Coastguard Worker}
358*77c1e3ccSAndroid Build Coastguard Worker
359*77c1e3ccSAndroid Build Coastguard Workerfunction selectBetterHandler() {
360*77c1e3ccSAndroid Build Coastguard Worker  var selection = bettertable.getSelection();
361*77c1e3ccSAndroid Build Coastguard Worker  for (var i = 0; i < selection.length; i++) {
362*77c1e3ccSAndroid Build Coastguard Worker    item = selection[i];
363*77c1e3ccSAndroid Build Coastguard Worker  }
364*77c1e3ccSAndroid Build Coastguard Worker  selected = item.row
365*77c1e3ccSAndroid Build Coastguard Worker  query_file()
366*77c1e3ccSAndroid Build Coastguard Worker}
367*77c1e3ccSAndroid Build Coastguard Worker
368*77c1e3ccSAndroid Build Coastguard Worker
369*77c1e3ccSAndroid Build Coastguard Workergoogle.load('visualization', '1', {'packages' : ['corechart','table']});
370*77c1e3ccSAndroid Build Coastguard Workergoogle.setOnLoadCallback(setup_vis);
371*77c1e3ccSAndroid Build Coastguard Worker</script>
372*77c1e3ccSAndroid Build Coastguard Worker</head>
373*77c1e3ccSAndroid Build Coastguard Worker
374*77c1e3ccSAndroid Build Coastguard Worker<body>
375*77c1e3ccSAndroid Build Coastguard Worker
376*77c1e3ccSAndroid Build Coastguard Worker  <div class="container_12">
377*77c1e3ccSAndroid Build Coastguard Worker
378*77c1e3ccSAndroid Build Coastguard Worker    <div class="grid_12 header">
379*77c1e3ccSAndroid Build Coastguard Worker      <h2>Codec Comparison Results</h2>
380*77c1e3ccSAndroid Build Coastguard Worker    </div>
381*77c1e3ccSAndroid Build Coastguard Worker
382*77c1e3ccSAndroid Build Coastguard Worker    <div class="grid_12 radio">
383*77c1e3ccSAndroid Build Coastguard Worker
384*77c1e3ccSAndroid Build Coastguard Worker      <form name="myform">
385*77c1e3ccSAndroid Build Coastguard Worker        Method For Combining Points
386*77c1e3ccSAndroid Build Coastguard Worker        <input type="radio" checked name="column" value="1"
387*77c1e3ccSAndroid Build Coastguard Worker          onClick="changeMetric('filestable_avg')" />Average of bitrates difference
388*77c1e3ccSAndroid Build Coastguard Worker        <input type="radio" name="column" value="2"
389*77c1e3ccSAndroid Build Coastguard Worker          onClick="changeMetric('filestable_dsnr')" />BDSNR
390*77c1e3ccSAndroid Build Coastguard Worker        <input type="radio" name="column" value="3"
391*77c1e3ccSAndroid Build Coastguard Worker          onClick="changeMetric('filestable_drate')" />BDRATE
392*77c1e3ccSAndroid Build Coastguard Worker      </form>
393*77c1e3ccSAndroid Build Coastguard Worker
394*77c1e3ccSAndroid Build Coastguard Worker      <form id="metrics" name="myform">
395*77c1e3ccSAndroid Build Coastguard Worker      </form>
396*77c1e3ccSAndroid Build Coastguard Worker
397*77c1e3ccSAndroid Build Coastguard Worker    </div>
398*77c1e3ccSAndroid Build Coastguard Worker
399*77c1e3ccSAndroid Build Coastguard Worker    <div class="grid_12 main">
400*77c1e3ccSAndroid Build Coastguard Worker
401*77c1e3ccSAndroid Build Coastguard Worker      <div class="grid_5 alpha cliplist">
402*77c1e3ccSAndroid Build Coastguard Worker        <div id="bettertable"></div>
403*77c1e3ccSAndroid Build Coastguard Worker      </div>
404*77c1e3ccSAndroid Build Coastguard Worker
405*77c1e3ccSAndroid Build Coastguard Worker      <div class="grid_5 chartarea">
406*77c1e3ccSAndroid Build Coastguard Worker        <div id="metricgraph"></div>
407*77c1e3ccSAndroid Build Coastguard Worker      </div>
408*77c1e3ccSAndroid Build Coastguard Worker
409*77c1e3ccSAndroid Build Coastguard Worker      <div class="grid_2 omega indicators">
410*77c1e3ccSAndroid Build Coastguard Worker        <div class="content">
411*77c1e3ccSAndroid Build Coastguard Worker          <h5>Indicators</h5>
412*77c1e3ccSAndroid Build Coastguard Worker          <hr>
413*77c1e3ccSAndroid Build Coastguard Worker          <div id="status"></div>
414*77c1e3ccSAndroid Build Coastguard Worker        </div>
415*77c1e3ccSAndroid Build Coastguard Worker      </div>
416*77c1e3ccSAndroid Build Coastguard Worker
417*77c1e3ccSAndroid Build Coastguard Worker    </div>
418*77c1e3ccSAndroid Build Coastguard Worker
419*77c1e3ccSAndroid Build Coastguard Worker  </div>
420*77c1e3ccSAndroid Build Coastguard Worker
421*77c1e3ccSAndroid Build Coastguard Worker</body>
422*77c1e3ccSAndroid Build Coastguard Worker</html>
423