Merged with master
This commit is contained in:
dosse91
commit
4f8dc3d23f
|
|
@ -1,11 +1,10 @@
|
|||
# HTML5 Speedtest
|
||||
|
||||
This is a s nodeJS Port from [adolfintel's HTML5 Speedtest](https://github.com/adolfintel/speedtest)
|
||||
This is a nodeJS Port from [adolfintel's HTML5 Speedtest](https://github.com/adolfintel/speedtest)
|
||||
|
||||
## Installation
|
||||
For any instructions and support please check out the [Wiki](https://github.com/adolfintel/speedtest/wiki)
|
||||
|
||||
|
||||
## Support
|
||||
If you like this project and want to support our work you can either do pull requests or donate via [PayPal](https://paypal.me/dunklesToast)
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@ var s=new Speedtest(); //create speedtest object
|
|||
|
||||
var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
|
||||
var dlColor="#6060AA",
|
||||
ulColor="#309030",
|
||||
pingColor="#AA6060",
|
||||
jitColor="#AA6060";
|
||||
ulColor="#309030";
|
||||
var progColor=meterBk;
|
||||
|
||||
//CODE FOR GAUGES
|
||||
|
|
@ -47,8 +45,11 @@ function drawMeter(c,amount,bk,fg,progress,prog){
|
|||
function mbpsToAmount(s){
|
||||
return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
|
||||
}
|
||||
function msToAmount(s){
|
||||
return 1-(1/(Math.pow(1.08,Math.sqrt(s))));
|
||||
function format(d){
|
||||
d=Number(d);
|
||||
if(d<10) return d.toFixed(2);
|
||||
if(d<100) return d.toFixed(1);
|
||||
return d.toFixed(0);
|
||||
}
|
||||
|
||||
//UI CODE
|
||||
|
|
@ -79,14 +80,12 @@ function updateUI(forced){
|
|||
if(uiData==null) return;
|
||||
var status=uiData.testState;
|
||||
I("ip").textContent=uiData.clientIp;
|
||||
I("dlText").textContent=(status==1&&uiData.dlStatus==0)?"...":uiData.dlStatus;
|
||||
I("dlText").textContent=(status==1&&uiData.dlStatus==0)?"...":format(uiData.dlStatus);
|
||||
drawMeter(I("dlMeter"),mbpsToAmount(Number(uiData.dlStatus*(status==1?oscillate():1))),meterBk,dlColor,Number(uiData.dlProgress),progColor);
|
||||
I("ulText").textContent=(status==3&&uiData.ulStatus==0)?"...":uiData.ulStatus;
|
||||
I("ulText").textContent=(status==3&&uiData.ulStatus==0)?"...":format(uiData.ulStatus);
|
||||
drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
|
||||
I("pingText").textContent=uiData.pingStatus;
|
||||
drawMeter(I("pingMeter"),msToAmount(Number(uiData.pingStatus*(status==2?oscillate():1))),meterBk,pingColor,Number(uiData.pingProgress),progColor);
|
||||
I("jitText").textContent=uiData.jitterStatus;
|
||||
drawMeter(I("jitMeter"),msToAmount(Number(uiData.jitterStatus*(status==2?oscillate():1))),meterBk,jitColor,Number(uiData.pingProgress),progColor);
|
||||
I("pingText").textContent=format(uiData.pingStatus);
|
||||
I("jitText").textContent=format(uiData.jitterStatus);
|
||||
}
|
||||
function oscillate(){
|
||||
return 1+0.02*Math.sin(Date.now()/100);
|
||||
|
|
@ -102,8 +101,6 @@ frame(); //start frame loop
|
|||
function initUI(){
|
||||
drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
|
||||
drawMeter(I("ulMeter"),0,meterBk,ulColor,0);
|
||||
drawMeter(I("pingMeter"),0,meterBk,pingColor,0);
|
||||
drawMeter(I("jitMeter"),0,meterBk,jitColor,0);
|
||||
I("dlText").textContent="";
|
||||
I("ulText").textContent="";
|
||||
I("pingText").textContent="";
|
||||
|
|
@ -163,50 +160,62 @@ function initUI(){
|
|||
position:relative;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
div.testName{
|
||||
div.testArea2{
|
||||
display:inline-block;
|
||||
width:14em;
|
||||
height:7em;
|
||||
position:relative;
|
||||
box-sizing:border-box;
|
||||
text-align:center;
|
||||
}
|
||||
div.testArea div.testName{
|
||||
position:absolute;
|
||||
top:0.1em; left:0;
|
||||
width:100%;
|
||||
font-size:1.4em;
|
||||
z-index:9;
|
||||
}
|
||||
div.meterText{
|
||||
div.testArea2 div.testName{
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:1.4em;
|
||||
}
|
||||
div.testArea div.meterText{
|
||||
position:absolute;
|
||||
bottom:1.55em; left:0;
|
||||
width:100%;
|
||||
font-size:2.5em;
|
||||
z-index:9;
|
||||
}
|
||||
div.testArea2 div.meterText{
|
||||
display:inline-block;
|
||||
font-size:2.5em;
|
||||
}
|
||||
div.meterText:empty:before{
|
||||
content:"0.00";
|
||||
}
|
||||
div.unit{
|
||||
div.testArea div.unit{
|
||||
position:absolute;
|
||||
bottom:2em; left:0;
|
||||
width:100%;
|
||||
z-index:9;
|
||||
}
|
||||
div.testArea2 div.unit{
|
||||
display:inline-block;
|
||||
}
|
||||
div.testArea canvas{
|
||||
position:absolute;
|
||||
top:0; left:0; width:100%; height:100%;
|
||||
z-index:1;
|
||||
}
|
||||
div.testGroup{
|
||||
display:inline-block;
|
||||
}
|
||||
@media all and (max-width:65em){
|
||||
body{
|
||||
font-size:1.5vw;
|
||||
}
|
||||
display:block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media all and (max-width:40em){
|
||||
body{
|
||||
font-size:0.8em;
|
||||
}
|
||||
div.testGroup{
|
||||
display:block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<title>HTML5 Speedtest</title>
|
||||
|
|
@ -216,6 +225,18 @@ function initUI(){
|
|||
<div id="testWrapper">
|
||||
<div id="startStopBtn" onclick="startStop()"></div>
|
||||
<div id="test">
|
||||
<div class="testGroup">
|
||||
<div class="testArea2">
|
||||
<div class="testName">Ping</div>
|
||||
<div id="pingText" class="meterText"></div>
|
||||
<div class="unit">ms</div>
|
||||
</div>
|
||||
<div class="testArea2">
|
||||
<div class="testName">Jitter</div>
|
||||
<div id="jitText" class="meterText"></div>
|
||||
<div class="unit">ms</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testGroup">
|
||||
<div class="testArea">
|
||||
<div class="testName">Download</div>
|
||||
|
|
@ -230,22 +251,8 @@ function initUI(){
|
|||
<div class="unit">Mbps</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testGroup">
|
||||
<div class="testArea">
|
||||
<div class="testName">Ping</div>
|
||||
<canvas id="pingMeter" class="meter"></canvas>
|
||||
<div id="pingText" class="meterText"></div>
|
||||
<div class="unit">ms</div>
|
||||
</div>
|
||||
<div class="testArea">
|
||||
<div class="testName">Jitter</div>
|
||||
<canvas id="jitMeter" class="meter"></canvas>
|
||||
<div id="jitText" class="meterText"></div>
|
||||
<div class="unit">ms</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ipArea">
|
||||
IP Address: <span id="ip"></span>
|
||||
<span id="ip"></span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://github.com/adolfintel/speedtest">Source code</a>
|
||||
|
|
|
|||
|
|
@ -631,7 +631,7 @@ function pingTest(done) {
|
|||
var instjitter = Math.abs(instspd - prevInstspd);
|
||||
if (i === 1) ping = instspd;
|
||||
/* first ping, can't tell jitter yet*/ else {
|
||||
ping = instspd < ping ? instspd : ping * 0.8 + instspd * 0.2; // update ping, weighted average. if the instant ping is lower than the current average, it is set to that value instead of averaging
|
||||
if (instspd < ping) ping = instspd; // update ping, if the instant ping is lower
|
||||
if (i === 2) jitter = instjitter;
|
||||
//discard the first jitter measurement because it might be much higher than it should be
|
||||
else jitter = instjitter > jitter ? jitter * 0.3 + instjitter * 0.7 : jitter * 0.8 + instjitter * 0.2; // update jitter, weighted average. spikes in ping values are given more weight.
|
||||
|
|
|
|||
Loading…
Reference in a new issue