Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
M
mp-web
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Iterations
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Code Review
Repository
Value Stream
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Maalepaaler
mp-web
Commits
6cea7133
Commit
6cea7133
authored
Aug 01, 2014
by
Olav Kvittem
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
yt added plot of browser progress reports
parent
17d42b3c
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
221 additions
and
40 deletions
+221
-40
yt/jsbandwidth-body.html
yt/jsbandwidth-body.html
+26
-12
yt/jsbandwidth-bs.php
yt/jsbandwidth-bs.php
+1
-0
yt/jsbandwidth.js
yt/jsbandwidth.js
+194
-28
No files found.
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
)
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment