Updated examples with layout closer to the android app

example-multipleServers-full.html

@@ -59,9 +59,7 @@ function initServers(){
 
 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
@@ -94,8 +92,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
@@ -143,14 +144,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);
@@ -166,8 +165,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="";
@@ -253,36 +250,57 @@ 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;
+		display:block;
+        margin: 0 auto;
 	}
 	#shareArea{
 		width:95%;
@@ -296,14 +314,6 @@ function initUI(){
 		height:auto;
 		margin: 0.25em 0;
 	}
-	div.visible{
-		animation: fadeIn 0.4s;
-		display:block;
-	}
-	div.hidden{
-		animation: fadeOut 0.4s;
-		display:none;
-	}
 	#privacyPolicy{
         position:fixed;
         top:2em;
@@ -325,6 +335,19 @@ function initUI(){
         color:#808080;
         display:block;
 	}
+	@media all and (max-width:40em){
+		body{
+			font-size:0.8em;
+		}
+	}
+	div.visible{
+		animation: fadeIn 0.4s;
+		display:block;
+	}
+	div.hidden{
+		animation: fadeOut 0.4s;
+		display:none;
+	}
 	@keyframes fadeIn{
 		0%{
 			opacity:0;
@@ -343,20 +366,6 @@ function initUI(){
 			opacity:0;
 		}
 	}
-	@media all and (max-width:65em){
-		body{
-			font-size:1.5vw;
-		}
-	}
-	@media all and (max-width:40em){
-		body{
-			font-size:0.8em;
-		}
-		div.testGroup{
-			display:block;
-			margin: 0 auto;
-		}
-	}
 </style>
 <title>HTML5 Speedtest</title>
 </head>
@@ -372,6 +381,18 @@ function initUI(){
 		Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select>
 	</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>
@@ -386,22 +407,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 id="shareArea" style="display:none">
 			<h3>Share results</h3>

example-singleServer-full.html

@@ -13,9 +13,7 @@ s.setParameter("telemetry_level","basic"); //enable telemetry
 
 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
@@ -48,8 +46,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
@@ -94,14 +95,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);
@@ -117,8 +116,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="";
@@ -178,36 +175,57 @@ 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;
+		display:block;
+        margin: 0 auto;
 	}
 	#shareArea{
 		width:95%;
@@ -242,19 +260,10 @@ function initUI(){
         color:#808080;
         display:block;
 	}
-	@media all and (max-width:65em){
-		body{
-			font-size:1.5vw;
-		}
-	}
 	@media all and (max-width:40em){
 		body{
 			font-size:0.8em;
 		}
-		div.testGroup{
-			display:block;
-			margin: 0 auto;
-		}
 	}
 </style>
 <title>HTML5 Speedtest</title>
@@ -265,6 +274,18 @@ function initUI(){
 	<div id="startStopBtn" onclick="startStop()"></div><br/>
 	<a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
 	<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>
@@ -279,22 +300,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 id="shareArea" style="display:none">
 			<h3>Share results</h3>

example-singleServer-gauges.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>