Merged with master

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) 
 

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;
-		}
 	}
 </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>

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.