Skip to content

GitLab

M
mp-web
Commit 6cea7133 authored by Olav Kvittem's avatar Olav Kvittem
Browse files
Options

yt added plot of browser progress reports

parent 17d42b3c
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 40 deletions
yt/jsbandwidth-body.html
View file @ 6cea7133
......@@ -25,23 +25,26 @@ at about <td><form name="speedtest" id="speedform">
<table class="uninett-color-white uninett-padded gutter" border=1 bgcolor=linen><tr><th>What<th>Mbit/s<th>Transfer Time<th>Throughput bar
<table id="result" class="uninett-color-white uninett-padded gutter" border=1 bgcolor=linen style=width:100%>
<tr><th id=what>What<th>Mbit/s<th>Transfer Time<th>Throughput bar
<!--
<tr><td>Reference*<td><span id=reftxt><td><span id=webrtt></span>
<td><img id="refbar" src="bar-green.gif" width="1px" height="10">
-->
<tr><td>Download<td><span id=dlspeed><td><span id=dldiff></span>
<td><img id="dlbar" src="bar-salmon.gif" style="width: 1px; height: 10px;">
<tr><td> - average<td><span id=dlspeedavg><td><span id=dldiffavg></span>
<td><img id="dlbaravg" src="bar-salmon.gif" style="width: 1px; height: 10px;">
<tr><td>Upload<td><span id=ulspeed><td><span id=uldiff></span>
<td><img id="ulbar" src="bar-blue.gif" style="width: 1px; height: 10px;">
<tr><td> - average<td><span id=ulspeedavg><td><span id=uldiffavg></span>
<td><img id="ulbaravg" src="bar-blue.gif" style="width: 1px; height: 10px;">
<tr><td>Download<td id=dlspeed><td id=dldiff>
<td><img id="dlbar" src="down.png" style="width: 1px; height: 10px;">
<tr><td> - average<td id=dlspeedavg><td id=dldiffavg>
<td><img id="dlbaravg" src="down.png" style="width: 1px; height: 10px;">
<tr><td>Upload<td id=ulspeed><td id=uldiff>
<td><img id="ulbar" src="up.png" style="width: 1px; height: 10px;">
<tr><td> - average<td id=ulspeedavg><td id=uldiffavg>
<td><img id="ulbaravg" src="up.png" style="width: 1px; height: 10px;">
</table>
<span id=response></span>
<div id=graf style=width:100%></div>
<!--
<button id="result" style="background-color:lightgreen">
Upload results
......@@ -73,7 +76,18 @@ more indepth and accurate measurement go to the
<p>This test transfers files to and from the server increasing from 25 Kbytes to 25 Mbytes by a factor of 10 until it lasts 0.5-5 seconds.<br>
<!-- It should take about 2 seconds if the chosen speed is right. -->
<p>
<b>Transfer time</b> column show transfer time in seconds.<br>
<b>Mbit/s</b> column show the throughput i megabits per second computed as the web file transfer size by time.<br>
<b>Web Response Time</b> is the time for minimal sized image to be returned.
<ul>
<li><b>Transfer time</b> column show transfer time in seconds.<br>
<li><b>Mbit/s</b> column show the throughput i megabits per second computed as the web file transfer size by time.<br>
<li><b>Web Response Time</b> is the time for minimal sized image to be returned.
<li>The graph points show performance from the browsers progress reports per interval.
<li>The table and graph avg lines show the average speed for the whole transfer.
<li>Click on the curve names to hide/show.
<li>Select a square to zoom in
</ul>
<h4>Versjon 1.1</h4>
<ul><li>Added plot of progress reports</ul>
<p>
</div>
yt/jsbandwidth-bs.php
View file @ 6cea7133
......@@ -3,6 +3,7 @@
<?php include '../head-bs.html'?>
<!-- <script type="text/javascript" src="../js/jquery-ui-1.10.3/jquery-1.9.1.js"></script> -->
<script type="text/javascript" src="../js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<script type="text/javascript" src="../js/Highcharts/js/highcharts.js"></script>
<!--
<script type="text/javascript" src="../js/jquery-ui-1.11.0-beta.2.custom/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.11.0-beta.2.custom/jquery-ui.js"></script>
......
yt/jsbandwidth.js
View file @ 6cea7133
......@@ -5,7 +5,10 @@ var opera=navigator.userAgent.match(/^Opera/) != null;
var firefox=navigator.userAgent.match(/Firefox/) != null;
var min_test_length= 0.5; // minimum testing period seconds
var min_progress_interval = 30; // min interval to be used for estimates
var min_progress_interval = 10; // min interval to be used for estimates
var test_period=10000; // interrup test after ms
var testno=0;
var start = 0;
var end = 0;
......@@ -18,10 +21,24 @@ var ulspeed=0, dlspeed=0, dldiff=0;
var ulsum=0, uldiffsum=0, ulno=0;
var dlsum=0, dldiffsum=0, dlno=0 ;
var dlavg=0, ulavg=0;
var dlseriesavg, ulseriesavg;
var speeds=["100k", "1M", "10M", "100M"];
var sizesk=[28, 252, 2500, 25000];
var grafno=0;
var tablewidth=0;
var upcolor='#000374';
var downcolor='#00612b';
//var series=[{ 'name':'Download', data:[], type: 'scatter' , color: downcolor },
// { 'name':'Upload', data:[], type: 'scatter' , color: upcolor }];
var curseries;
var seriesno=0;
var chart;
function get_progress(e, pregress) { // to be called onprogress in ajax
if (e.lengthComputable) {
if (e.lengthComputable || e.loaded > 0) {
var now=new Date().getTime();
// var now=e.timeStamp;
// if ( firefox) { // bug in firefox returns microseconds
......@@ -29,7 +46,6 @@ function get_progress(e, pregress) { // to be called onprogress in ajax
// now=new Date().getTime(); // bug in fire
// console.log('firefox event time ' + e.timeStamp + ' clock ' + now + ' diff ' + (e.timeStamp/1000 - now) );
// }
var dt=now-pregress.start;
var loaded=e.loaded;
if ( opera && pregress.dir == "down" ) { loaded = loaded / 2;} // bug in Opera
......@@ -37,21 +53,28 @@ function get_progress(e, pregress) { // to be called onprogress in ajax
if ( dt > min_progress_interval ){
var dload=loaded-pregress.loaded;
var mbps = dload*8/dt/1000;
pregress.pslope= pregress.slope;
pregress.slope= mbps/pregress.nmbps;
if (! pregress.total) pregress.total=e.total;
console.log( 'Progress log ' + mbps.toFixed(2) + 'mbps ' + dt + 'ms ' + (loaded / e.total * 100).toFixed(2) + '%' + ' slope ' + pregress.slope.toFixed(2) + ' - ' + loaded + ' - ' + e.total + ' now ' + now + ' then ' + pregress.start);
console.log( 'Progress log ' + mbps.toFixed(2) + 'mbps ' + dt + 'ms ' + (loaded / pregress.total * 100).toFixed(2) + '%' + ' slope ' + pregress.slope.toFixed(2) + ' - ' + loaded + ' - ' + pregress.total + ' now ' + now + ' then ' + pregress.start);
if ( pregress.nmbps > 0 ){ // try for the next to last one
pregress.mbps=pregress.nmbps;
} else { // first one and only ?
pregress.mbps=mbps;
}
var span=now-pregress.start;
curseries.addPoint([span/1000, mbps]);
pregress.nmbps= mbps;
pregress.n++;
pregress.loaded=loaded;
pregress.start=now;
pregress.interval=dt;
} else {
console.log( 'progress err ' + dt + 'ms ' + (loaded / e.total * 100).toFixed(2) + '%' + ' - ' + loaded + ' - ' + e.total + ' now ' + e.timeStamp + ' then ' + pregress.start);
}
......@@ -87,42 +110,69 @@ function TestDownload(speedclass) {
start: start,
mbps: 0,
nmbps: 0,
n: 0
n: 0,
series:[],
}
if (! chart){ // creat new chart
chart=tegn_graf('graf', 'Bandwidth graph', 'With '+ document.location.hostname, [], '', 0 );
}
if ( speedclass == 0 ){ // make new series
seriesno++;
curseries=chart.addSeries( { 'name':'Download ' + seriesno, data:[], type: 'scatter' , color: downcolor });
}
pregress.total=sizesk[speedclass]*1000;
$("#dlspeed").html('<img src=busy.gif>');
// speedclasse=speeds.indexOf(speedclass)+1;
console.log('### start download ' + speeds[speedclass]);
$.ajax({
type: "GET",
url: "bigfile-" + speeds[speedclass] + ".bin?id=" + start,
// url: "bigfile-" + speeds[speedclass] + ".bin?id=" + start,
url: 'deliver-file.pl?duration=5&bytes='+sizesk[speedclass]*1000,
dataType: 'text',
xhrFields: {
onprogress: function(e) { get_progress(e, pregress); return 0;}
xhr: function(xhrin){ // to get upload progress events
var xhr = $.ajaxSettings.xhr() ;
xhr.onprogress = function(e) {progress_last= get_progress(e, pregress); return 0; };
return xhr ;
},
success: function(msg) {
download_success(msg);
},
complete: function(xhr, textStatus) {
download_complete(xhr);
},
timeout: test_period,
error: function(xhr, textStatus, errorThrown){
if ( false && textStatus === 'timeout'){
download_success(xhr.responseText);
download_complete(xhr);
} else {
alert( 'Download failed: ' +textStatus + ' - ' + errorThrown);
}
}
});
function download_success(msg){
binfile[speedclass] = msg;
end = new Date().getTime();
dldiff = (end - start) / 1000;
bytes = msg.length;
dlspeed = (bytes * 8 / dldiff) / 1000/ 1000;
dlspeed = progress_speed( pregress, dlspeed );
$("#dlspeed").html( dlspeed );
$("#dlspeed").html( dlspeed.toPrecision(4) );
}
},
complete: function(xhr, textStatus) {
if ( dldiff > min_test_length || (speedclass+1) >= (speeds.length) ){
console.log( 'class ' + speedclass + ' down time ' + dldiff);
TestUpload(0);
} else {
TestDownload(speedclass+1);
}
},
error: function(xhr, textStatus, errorThrown){
alert( 'Download failed: ' +textStatus + ' - ' + errorThrown);
function download_complete(xhr){
if ( dldiff > min_test_length || (speedclass+1) >= (speeds.length) ){
console.log( 'class ' + speedclass + ' down time ' + dldiff);
TestUpload(0);
} else {
TestDownload(speedclass+1);
}
});
}
}
......@@ -135,9 +185,15 @@ function TestUpload(speedclass) {
start: start,
mbps: 0,
nmbps: 0,
series:[],
n: 0
}
if ( speedclass == 0 ){
curseries=chart.addSeries( { 'name':'Upload '+ seriesno, data:[],
type: 'scatter' , color: upcolor } );
}
console.log('### start upload ' + speeds[speedclass]);
$.ajax({
......@@ -176,33 +232,58 @@ function TestUpload(speedclass) {
var speed=Math.max(ulavg, dlavg);
refv = speed.toPrecision(1);
pixsz = $(window).width() / 2 / refv;
// pixsz = $(window).width() / 2 / refv;
if ( tablewidth == 0 ){
tablewidth=$("#result").width();
}
$('#response').html( '<p>Did ' + testno + ' tests' + ' with average <b>Web Response Time</b> ' + (rttavg/1000).toFixed(3) + ' secs.');
// $('#dlspeed').html(Math.(dlspeed*10)/10);
$('#dlspeed').html(dlspeed.toPrecision(4));
$('#dldiff').html(dldiff.toFixed(3) + ' s');
$('#dlbar').css('width', Math.round(dlspeed * pixsz)+'px');
$('#ulspeed').html(ulspeed.toPrecision(4));
$('#uldiff').html(uldiff.toFixed(3) + ' s');
$('#ulbar').css('width', Math.round(ulspeed * pixsz)+'px');
$('#dlspeedavg').html(dlavg.toPrecision(4));
$('#dldiffavg').html( (dldiffsum/dlno).toFixed(3) + ' s');
$('#dlbaravg').css('width', Math.round(dlsum/dlno * pixsz)+'px');
$('#ulspeedavg').html(ulavg.toPrecision(4));
$('#uldiffavg').html( (uldiffsum/ulno).toFixed(3) + ' s');
var th=$('#result tr:eq(0) th');
var thruwidth = tablewidth - $(th).eq(0).width() - $(th).eq(1).width() - $(th).eq(2).width();
// var thruwidth = tablewidth - $("#what").width() - $('#dlspeed').width() - $('#dldiff').width();
console.log( "tablewidth " + tablewidth + " what " + $("#what").width() + " dlspeed " + $('#dlspeed').width() + " dldiff " + $('#dldiff').width() + " thruwidth " + thruwidth );
pixsz = thruwidth / refv;
$('#dlbar').css('width', Math.round(dlspeed * pixsz)+'px');
$('#ulbar').css('width', Math.round(ulspeed * pixsz)+'px');
$('#dlbaravg').css('width', Math.round(dlsum/dlno * pixsz)+'px');
$('#ulbaravg').css('width', Math.round(ulsum/ulno * pixsz)+'px');
// $('#uldiffavg').html( speed + ', ' + refv + 'log ' + (Math.log(555)/Math.log(10)));
// var dlavgline=chart.yAxis[0].addPlotLine({ id:'Download avg', color: downcolor, value:dlavg } );
// var ulavgline=chart.yAxis[0].addPlotLine({ id:'Upload avg', color: upcolor, value:ulavg } );
var dldata= [ [0, dlavg], [chart.xAxis[0].max, dlavg] ];
var uldata= [ [0, ulavg], [chart.xAxis[0].max, ulavg] ];
if ( dlseriesavg){
dlseriesavg.update({data: dldata});
ulseriesavg.update({data: uldata});
} else {
dlseriesavg=chart.addSeries({name:'Download avg', data : dldata, color: downcolor }, true);
ulseriesavg=chart.addSeries({name:'Upload avg', data : uldata, color: upcolor }, true);
}
ResultsUpload(dlspeed, ulspeed, rtt);
}
},
timeout: test_period,
error: function(xhr, textStatus, errorThrown){
alert( 'Download failed: ' +textStatus + ' - ' + errorThrown);
}
......@@ -262,3 +343,88 @@ function test_performance(){
testno++;
// });
}
//------------------------------------------------------------------------------
//
function tegn_graf( div, tittel, subtittel, tider, leg_band, grafno, width ){
var divid=div+(grafno);
if ( $('#' + divid).length <= null ){
$('#'+div).prepend('<div id=' + divid + '></div><p> <hr>');
// debug_log('div created: ' + divid );
}
// $.highcharts({
// $('#graf').highcharts({x
// $('#graf'+grafno).highcharts({
var grafen = new Highcharts.Chart({
chart: {
renderTo : divid,
zoomType: 'xy',
// width: width
},
title: {
text: tittel
},
subtitle: {
text: subtittel
},
xAxis: {
title : {text: 'Seconds'},
minorTickInterval : 1
// plotBands: leg_band
},
yAxis: [
{ labels: {format: '{value}Mbit/s'}, // min:0,
title: { text: 'Bandwidth'}, minorTickInterval : 'auto',
plotLines: [{ value: 0, width: 2, color: '#808080' }]
},
/* { labels: {format: '{value}MByte'}, min:0,
title: { text: 'Data'}, minorTickInterval : 'auto',
opposite: true
} */
],
tooltip: { formatter: tooltip_xy,
shared: false},
legend: { // title:{ text: 'Parameters',itemStyle: {fontSize: '18px'} },
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
// x: 70, y:-100,
borderWidth: 0,
itemStyle: {
// color: '#000000',
// fontWeight: 'bold',
// paddingBottom: '2px',
// fontSize: '12px'
}
},
plotOptions: { series: {marker: { enabled: true, states: { hover: { enabled: true}}}}},
series: tider
});
$('#'+divid).show();
return grafen;
} // of tegn_graf
//--------------------------------------------------------------------------------
function tooltip_ms(){
var s= '<b>' + x_name[this.x] + '</b>';
$.each( this.points, function(i, point){
var unit ='ms';
if ( point.series.name == 'Loss') {unit='%'};
s += ' <br>' + point.series.name + ': ' + point.y.toFixed(1) + unit;
});
return s;
}
function tooltip_pc(){
var unit ='Mbit/s';
if ( this.series.name == "Loss") {unit='%'};
return '<b>' + x_name[0] + '</b>' + ' <br>' + this.series.name + ': ' + this.y.toFixed(1) + unit;
}
function tooltip_xy(){
return this.x.toFixed(3) + ', ' + this.y.toFixed(1) ;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment