diff --git a/README.md b/README.md index 4b4639f..45d7ac1 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/src/public/index.html b/src/public/index.html index f401333..4f3313e 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -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; - } } HTML5 Speedtest @@ -216,6 +225,18 @@ function initUI(){
+
+
+
Ping
+
+
ms
+
+
+
Jitter
+
+
ms
+
+
Download
@@ -230,22 +251,8 @@ function initUI(){
Mbps
-
-
-
Ping
- -
-
ms
-
-
-
Jitter
- -
-
ms
-
-
- IP Address: +
Source code diff --git a/src/public/speedtest_worker.js b/src/public/speedtest_worker.js index 74dbaac..0577045 100644 --- a/src/public/speedtest_worker.js +++ b/src/public/speedtest_worker.js @@ -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.