418bce5ccc
A table on the top of the page displays the test configurations of the input files present. The displayed string in the legend of each graph is now fetched from test configuration name instead of using the filename. Review URL: http://webrtc-codereview.appspot.com/279006 git-svn-id: http://webrtc.googlecode.com/svn/trunk@1104 4adac7df-926f-26a2-2b94-8c16560cd09d
91 lines
3.3 KiB
HTML
91 lines
3.3 KiB
HTML
<html>
|
|
<!--
|
|
Copyright (c) 2011 The WebRTC project authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by a BSD-style license
|
|
that can be found in the LICENSE file in the root of the source
|
|
tree. An additional intellectual property rights grant can be found
|
|
in the file PATENTS. All contributing project authors may
|
|
be found in the AUTHORS file in the root of the source tree.
|
|
|
|
Template file to be used to generate Charts for Video Quality Metrics.
|
|
-->
|
|
<head>
|
|
<link href="http://code.google.com/css/codesite.pack.04102009.css"
|
|
rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
|
|
<script>
|
|
google.load('visualization', '1', {packages:['table', 'corechart']});
|
|
|
|
google.setOnLoadCallback(drawTable);
|
|
function drawTable() {
|
|
/* Build data tables and views */
|
|
var configurations_data_table =
|
|
new google.visualization.DataTable(%(json_configurations)s);
|
|
var ssim_data_table =
|
|
new google.visualization.DataTable(%(json_ssim_data)s);
|
|
var psnr_data_table =
|
|
new google.visualization.DataTable(%(json_psnr_data)s);
|
|
var packet_loss_data_table =
|
|
new google.visualization.DataTable(%(json_packet_loss_data)s);
|
|
var bit_rate_data_table =
|
|
new google.visualization.DataTable(%(json_bit_rate_data)s);
|
|
|
|
/* Display tables and charts */
|
|
var configurations_table = new google.visualization.Table(
|
|
document.getElementById('table_div_configurations'));
|
|
configurations_table.draw(configurations_data_table, {
|
|
height: 200
|
|
});
|
|
|
|
var ssim_chart = new google.visualization.LineChart(
|
|
document.getElementById('table_div_ssim'));
|
|
ssim_chart.draw(ssim_data_table, {
|
|
colors: ['blue', 'red', 'lightblue', 'pink'],
|
|
vAxis: {title: 'SSIM'},
|
|
hAxis: {title: 'Frame'},
|
|
width: 1200, height: 300,
|
|
});
|
|
|
|
var psnr_chart = new google.visualization.LineChart(
|
|
document.getElementById('table_div_psnr'));
|
|
psnr_chart.draw(psnr_data_table, {
|
|
colors: ['blue', 'red', 'lightblue', 'pink'],
|
|
vAxis: {title: 'PSNR (dB)'},
|
|
hAxis: {title: 'Frame'},
|
|
width: 1200, height: 300,
|
|
});
|
|
|
|
var packet_loss_chart = new google.visualization.LineChart(
|
|
document.getElementById('table_div_packet_loss'));
|
|
packet_loss_chart.draw(packet_loss_data_table, {
|
|
colors: ['blue', 'red', 'lightblue', 'pink'],
|
|
vAxis: {title: 'Packets dropped'},
|
|
hAxis: {title: 'Frame'},
|
|
width: 1200, height: 300,
|
|
});
|
|
|
|
var bit_rate_chart = new google.visualization.LineChart(
|
|
document.getElementById('table_div_bit_rate'));
|
|
bit_rate_chart.draw(bit_rate_data_table, {
|
|
colors: ['blue', 'red', 'lightblue', 'pink', 'green'],
|
|
vAxis: {title: 'Bit rate'},
|
|
hAxis: {title: 'Frame'},
|
|
width: 1200, height: 300,
|
|
});
|
|
}
|
|
</script>
|
|
<body>
|
|
<h3>Test Configurations:</h3>
|
|
<div id="table_div_configurations"></div>
|
|
<h3>Messages:</h3>
|
|
<pre>%(messages)s</pre>
|
|
<h3>Metrics measured per frame:</h3>
|
|
<div id="table_div_ssim"></div>
|
|
<div id="table_div_psnr"></div>
|
|
<div id="table_div_packet_loss"></div>
|
|
<div id="table_div_bit_rate"></div>
|
|
</body>
|
|
</html>
|