80 lines
2.8 KiB
HTML
80 lines
2.8 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 table and views */
|
||
|
|
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 ssim_chart = new google.visualization.LineChart(
|
||
|
|
document.getElementById('table_div_ssim'));
|
||
|
|
ssim_chart.draw(ssim_data_table, {
|
||
|
|
colors: ['blue', 'orange'],
|
||
|
|
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', 'orange'],
|
||
|
|
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', 'orange'],
|
||
|
|
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', 'orange', 'red'],
|
||
|
|
vAxis: {title: 'Bit rate'},
|
||
|
|
hAxis: {title: 'Frame'},
|
||
|
|
width: 1200, height: 300,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<body>
|
||
|
|
<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>
|