2016-10-09 09:13:36 +02:00
<!DOCTYPE html>
< html >
2016-10-22 15:39:16 +02:00
< head >
< title > Speedtest</ title >
< style type = "text/css" >
html , body {
margin : 0 ;
padding : 0 ;
border : none ;
text-align : center ;
}
div . test {
display : inline-block ;
2017-03-02 17:58:40 +01:00
margin : 1 em ;
2016-10-22 15:39:16 +02:00
text-align : center ;
}
div . testName , div . meterUnit {
font-size : 3 vw ;
}
div . meter {
font-size : 6 vw ;
line-height : 1.5 em ;
height : 1.5 em !important ;
}
. flash {
animation : flash 0.6 s linear infinite ;
}
@ keyframes flash {
0 % { opacity : 0.6 ;}
50 % { opacity : 1 ;}
}
2016-10-09 09:13:36 +02:00
2016-10-22 15:39:16 +02:00
</ style >
</ head >
< body >
< h1 > Speedtest</ h1 >
< div class = "test" >
< div class = "testName" > Download</ div >
< div class = "meter" > < span id = "download" ></ span > </ div >
< div class = "meterUnit" > Mbit/s</ div >
</ div >
< div class = "test" >
< div class = "testName" > Upload</ div >
< div class = "meter" > < span id = "upload" ></ span > </ div >
< div class = "meterUnit" > Mbit/s</ div >
</ div >
< div class = "test" >
< div class = "testName" > Latency</ div >
< div class = "meter" > < span id = "ping" ></ span > </ div >
< div class = "meterUnit" > ms</ div >
2017-03-02 17:58:40 +01:00
</ div >
< div class = "test" >
< div class = "testName" > Jitter</ div >
< div class = "meter" > < span id = "jitter" ></ span > </ div >
< div class = "meterUnit" > ms</ div >
2016-10-22 15:39:16 +02:00
</ div >
2017-02-26 12:15:51 +01:00
< div id = "ip" ></ div >
2016-10-22 15:39:16 +02:00
< script type = "text/javascript" >
2017-03-02 17:58:40 +01:00
var w = new Worker ( "speedtest_worker.min.js" );
2016-10-22 15:39:16 +02:00
var interval = setInterval ( function (){ w . postMessage ( "status" );}. bind ( this ), 100 );
w . onmessage = function ( event ){
var data = event . data . split ( ";" );
var status = Number ( data [ 0 ]);
2017-03-02 17:58:40 +01:00
var dl = document . getElementById ( "download" ), ul = document . getElementById ( "upload" ), ping = document . getElementById ( "ping" ), ip = document . getElementById ( "ip" ), jitter = document . getElementById ( "jitter" );
dl . className = status == 1 ? "flash" : "" ; ping . className = status == 2 ? "flash" : "" ; jitter . className = ul . className = status == 3 ? "flash" : "" ;
2016-10-22 15:39:16 +02:00
if ( status >= 4 ){
clearInterval ( interval );
}
dl . innerHTML = data [ 1 ];
ul . innerHTML = data [ 2 ];
ping . innerHTML = data [ 3 ];
2017-03-02 17:58:40 +01:00
jitter . innerHTML = data [ 5 ];
2017-02-26 12:15:51 +01:00
ip . innerHTML = "Your IP: " + data [ 4 ];
2016-10-22 15:39:16 +02:00
}. bind ( this );
2016-10-23 19:47:55 +02:00
w . postMessage ( 'start {"url_dl":"garbage.php","url_ul":"empty.dat","url_ping":"empty.dat","time_dl":"10","time_ul":"15","count_ping":"30"}' ); //start with custom parameters. paths are relative to js file. you can omit parameters that you don't want to change
2016-10-22 15:39:16 +02:00
</ script >
</ body >
2016-10-09 09:13:36 +02:00
</ html >
