From f059aa20d9080eb3d8124ac4fe129e717cba67cc Mon Sep 17 00:00:00 2001 From: dosse91 Date: Wed, 11 Sep 2019 19:01:40 +0200 Subject: [PATCH 1/3] Updated README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index d3c330f..fc3441e 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,9 @@ Works with mobile versions too. ## Installation videos * [Quick start installation guide for Ubuntu Server 19.04](https://fdossena.com/?p=speedtest/quickstart_v5_ubuntu.frag) +## Android app +A template to build an Android client for your HTML5 Speedtest installation is available [here](https://github.com/adolfintel/speedtest-android). + ## Docker Please see the `docker` branch From d5aed8e9b6d5901acbb1e488c84214ecbdbadcec Mon Sep 17 00:00:00 2001 From: dosse91 Date: Tue, 24 Sep 2019 09:35:22 +0200 Subject: [PATCH 2/3] Updated examples with layout closer to the android app --- example-multipleServers-full.html | 115 ++++++++++++++++-------------- example-singleServer-full.html | 89 ++++++++++++----------- example-singleServer-gauges.html | 89 ++++++++++++----------- 3 files changed, 157 insertions(+), 136 deletions(-) diff --git a/example-multipleServers-full.html b/example-multipleServers-full.html index 5d25031..345cd8a 100644 --- a/example-multipleServers-full.html +++ b/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; - } - } HTML5 Speedtest @@ -372,6 +381,18 @@ function initUI(){ Server:
+
+
+
Ping
+
+
ms
+
+
+
Jitter
+
+
ms
+
+
Download
@@ -386,22 +407,8 @@ function initUI(){
Mbps
-
-
-
Ping
- -
-
ms
-
-
-
Jitter
- -
-
ms
-
-
- IP Address: +