beenull/speedtest
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Updated examples with layout closer to the android app

Browse source
This commit is contained in:
dosse91 2019-09-24 09:35:22 +02:00
parent f059aa20d9
commit d5aed8e9b6
3 changed files with 157 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
example-multipleServers-full.html
View file

@ -59,9 +59,7 @@ function initServers(){
var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040"; var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
var dlColor="#6060AA", var dlColor="#6060AA",
ulColor="#309030", ulColor="#309030";
pingColor="#AA6060",
jitColor="#AA6060";
var progColor=meterBk; var progColor=meterBk;
//CODE FOR GAUGES //CODE FOR GAUGES
@ -94,8 +92,11 @@ function drawMeter(c,amount,bk,fg,progress,prog){
function mbpsToAmount(s){ function mbpsToAmount(s){
return 1-(1/(Math.pow(1.3,Math.sqrt(s)))); return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
} }
function msToAmount(s){ function format(d){
return 1-(1/(Math.pow(1.08,Math.sqrt(s)))); d=Number(d);
if(d<10) return d.toFixed(2);
if(d<100) return d.toFixed(1);
return d.toFixed(0);
} }
//UI CODE //UI CODE
@ -143,14 +144,12 @@ function updateUI(forced){
if(uiData==null) return; if(uiData==null) return;
var status=uiData.testState; var status=uiData.testState;
I("ip").textContent=uiData.clientIp; 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); 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); drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
I("pingText").textContent=uiData.pingStatus; I("pingText").textContent=format(uiData.pingStatus);
drawMeter(I("pingMeter"),msToAmount(Number(uiData.pingStatus*(status==2?oscillate():1))),meterBk,pingColor,Number(uiData.pingProgress),progColor); I("jitText").textContent=format(uiData.jitterStatus);
I("jitText").textContent=uiData.jitterStatus;
drawMeter(I("jitMeter"),msToAmount(Number(uiData.jitterStatus*(status==2?oscillate():1))),meterBk,jitColor,Number(uiData.pingProgress),progColor);
} }
function oscillate(){ function oscillate(){
return 1+0.02*Math.sin(Date.now()/100); return 1+0.02*Math.sin(Date.now()/100);
@ -166,8 +165,6 @@ frame(); //start frame loop
function initUI(){ function initUI(){
drawMeter(I("dlMeter"),0,meterBk,dlColor,0); drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
drawMeter(I("ulMeter"),0,meterBk,ulColor,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("dlText").textContent="";
I("ulText").textContent=""; I("ulText").textContent="";
I("pingText").textContent=""; I("pingText").textContent="";
@ -253,36 +250,57 @@ function initUI(){
position:relative; position:relative;
box-sizing:border-box; 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; position:absolute;
top:0.1em; left:0; top:0.1em; left:0;
width:100%; width:100%;
font-size:1.4em; font-size:1.4em;
z-index:9; z-index:9;
} }
div.meterText{ div.testArea2 div.testName{
display:block;
text-align:center;
font-size:1.4em;
}
div.testArea div.meterText{
position:absolute; position:absolute;
bottom:1.55em; left:0; bottom:1.55em; left:0;
width:100%; width:100%;
font-size:2.5em; font-size:2.5em;
z-index:9; z-index:9;
} }
div.testArea2 div.meterText{
display:inline-block;
font-size:2.5em;
}
div.meterText:empty:before{ div.meterText:empty:before{
content:"0.00"; content:"0.00";
} }
div.unit{ div.testArea div.unit{
position:absolute; position:absolute;
bottom:2em; left:0; bottom:2em; left:0;
width:100%; width:100%;
z-index:9; z-index:9;
} }
div.testArea2 div.unit{
display:inline-block;
}
div.testArea canvas{ div.testArea canvas{
position:absolute; position:absolute;
top:0; left:0; width:100%; height:100%; top:0; left:0; width:100%; height:100%;
z-index:1; z-index:1;
} }
div.testGroup{ div.testGroup{
display:inline-block; display:block;
margin: 0 auto;
} }
#shareArea{ #shareArea{
width:95%; width:95%;
@ -296,14 +314,6 @@ function initUI(){
height:auto; height:auto;
margin: 0.25em 0; margin: 0.25em 0;
} }
div.visible{
animation: fadeIn 0.4s;
display:block;
}
div.hidden{
animation: fadeOut 0.4s;
display:none;
}
#privacyPolicy{ #privacyPolicy{
position:fixed; position:fixed;
top:2em; top:2em;
@ -325,6 +335,19 @@ function initUI(){
color:#808080; color:#808080;
display:block; 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{ @keyframes fadeIn{
0%{ 0%{
opacity:0; opacity:0;
@ -343,20 +366,6 @@ function initUI(){
opacity:0; 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> </style>
<title>HTML5 Speedtest</title> <title>HTML5 Speedtest</title>
</head> </head>
@ -372,6 +381,18 @@ function initUI(){
Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select> Server: <select id="server" onchange="s.setSelectedServer(SPEEDTEST_SERVERS[this.value])"></select>
</div> </div>
<div id="test"> <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="testGroup">
<div class="testArea"> <div class="testArea">
<div class="testName">Download</div> <div class="testName">Download</div>
@ -386,22 +407,8 @@ function initUI(){
<div class="unit">Mbps</div> <div class="unit">Mbps</div>
</div> </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"> <div id="ipArea">
IP Address: <span id="ip"></span> <span id="ip"></span>
</div> </div>
<div id="shareArea" style="display:none"> <div id="shareArea" style="display:none">
<h3>Share results</h3> <h3>Share results</h3>

89
example-singleServer-full.html
View file

@ -13,9 +13,7 @@ s.setParameter("telemetry_level","basic"); //enable telemetry
var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040"; var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
var dlColor="#6060AA", var dlColor="#6060AA",
ulColor="#309030", ulColor="#309030";
pingColor="#AA6060",
jitColor="#AA6060";
var progColor=meterBk; var progColor=meterBk;
//CODE FOR GAUGES //CODE FOR GAUGES
@ -48,8 +46,11 @@ function drawMeter(c,amount,bk,fg,progress,prog){
function mbpsToAmount(s){ function mbpsToAmount(s){
return 1-(1/(Math.pow(1.3,Math.sqrt(s)))); return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
} }
function msToAmount(s){ function format(d){
return 1-(1/(Math.pow(1.08,Math.sqrt(s)))); d=Number(d);
if(d<10) return d.toFixed(2);
if(d<100) return d.toFixed(1);
return d.toFixed(0);
} }
//UI CODE //UI CODE
@ -94,14 +95,12 @@ function updateUI(forced){
if(uiData==null) return; if(uiData==null) return;
var status=uiData.testState; var status=uiData.testState;
I("ip").textContent=uiData.clientIp; 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); 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); drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
I("pingText").textContent=uiData.pingStatus; I("pingText").textContent=format(uiData.pingStatus);
drawMeter(I("pingMeter"),msToAmount(Number(uiData.pingStatus*(status==2?oscillate():1))),meterBk,pingColor,Number(uiData.pingProgress),progColor); I("jitText").textContent=format(uiData.jitterStatus);
I("jitText").textContent=uiData.jitterStatus;
drawMeter(I("jitMeter"),msToAmount(Number(uiData.jitterStatus*(status==2?oscillate():1))),meterBk,jitColor,Number(uiData.pingProgress),progColor);
} }
function oscillate(){ function oscillate(){
return 1+0.02*Math.sin(Date.now()/100); return 1+0.02*Math.sin(Date.now()/100);
@ -117,8 +116,6 @@ frame(); //start frame loop
function initUI(){ function initUI(){
drawMeter(I("dlMeter"),0,meterBk,dlColor,0); drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
drawMeter(I("ulMeter"),0,meterBk,ulColor,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("dlText").textContent="";
I("ulText").textContent=""; I("ulText").textContent="";
I("pingText").textContent=""; I("pingText").textContent="";
@ -178,36 +175,57 @@ function initUI(){
position:relative; position:relative;
box-sizing:border-box; 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; position:absolute;
top:0.1em; left:0; top:0.1em; left:0;
width:100%; width:100%;
font-size:1.4em; font-size:1.4em;
z-index:9; z-index:9;
} }
div.meterText{ div.testArea2 div.testName{
display:block;
text-align:center;
font-size:1.4em;
}
div.testArea div.meterText{
position:absolute; position:absolute;
bottom:1.55em; left:0; bottom:1.55em; left:0;
width:100%; width:100%;
font-size:2.5em; font-size:2.5em;
z-index:9; z-index:9;
} }
div.testArea2 div.meterText{
display:inline-block;
font-size:2.5em;
}
div.meterText:empty:before{ div.meterText:empty:before{
content:"0.00"; content:"0.00";
} }
div.unit{ div.testArea div.unit{
position:absolute; position:absolute;
bottom:2em; left:0; bottom:2em; left:0;
width:100%; width:100%;
z-index:9; z-index:9;
} }
div.testArea2 div.unit{
display:inline-block;
}
div.testArea canvas{ div.testArea canvas{
position:absolute; position:absolute;
top:0; left:0; width:100%; height:100%; top:0; left:0; width:100%; height:100%;
z-index:1; z-index:1;
} }
div.testGroup{ div.testGroup{
display:inline-block; display:block;
margin: 0 auto;
} }
#shareArea{ #shareArea{
width:95%; width:95%;
@ -242,19 +260,10 @@ function initUI(){
color:#808080; color:#808080;
display:block; display:block;
} }
@media all and (max-width:65em){
body{
font-size:1.5vw;
}
}
@media all and (max-width:40em){ @media all and (max-width:40em){
body{ body{
font-size:0.8em; font-size:0.8em;
} }
div.testGroup{
display:block;
margin: 0 auto;
}
} }
</style> </style>
<title>HTML5 Speedtest</title> <title>HTML5 Speedtest</title>
@ -265,6 +274,18 @@ function initUI(){
<div id="startStopBtn" onclick="startStop()"></div><br/> <div id="startStopBtn" onclick="startStop()"></div><br/>
<a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a> <a class="privacy" href="#" onclick="I('privacyPolicy').style.display=''">Privacy</a>
<div id="test"> <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="testGroup">
<div class="testArea"> <div class="testArea">
<div class="testName">Download</div> <div class="testName">Download</div>
@ -279,22 +300,8 @@ function initUI(){
<div class="unit">Mbps</div> <div class="unit">Mbps</div>
</div> </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"> <div id="ipArea">
IP Address: <span id="ip"></span> <span id="ip"></span>
</div> </div>
<div id="shareArea" style="display:none"> <div id="shareArea" style="display:none">
<h3>Share results</h3> <h3>Share results</h3>

89
example-singleServer-gauges.html
View file

@ -12,9 +12,7 @@ var s=new Speedtest(); //create speedtest object
var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040"; var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
var dlColor="#6060AA", var dlColor="#6060AA",
ulColor="#309030", ulColor="#309030";
pingColor="#AA6060",
jitColor="#AA6060";
var progColor=meterBk; var progColor=meterBk;
//CODE FOR GAUGES //CODE FOR GAUGES
@ -47,8 +45,11 @@ function drawMeter(c,amount,bk,fg,progress,prog){
function mbpsToAmount(s){ function mbpsToAmount(s){
return 1-(1/(Math.pow(1.3,Math.sqrt(s)))); return 1-(1/(Math.pow(1.3,Math.sqrt(s))));
} }
function msToAmount(s){ function format(d){
return 1-(1/(Math.pow(1.08,Math.sqrt(s)))); d=Number(d);
if(d<10) return d.toFixed(2);
if(d<100) return d.toFixed(1);
return d.toFixed(0);
} }
//UI CODE //UI CODE
@ -79,14 +80,12 @@ function updateUI(forced){
if(uiData==null) return; if(uiData==null) return;
var status=uiData.testState; var status=uiData.testState;
I("ip").textContent=uiData.clientIp; 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); 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); drawMeter(I("ulMeter"),mbpsToAmount(Number(uiData.ulStatus*(status==3?oscillate():1))),meterBk,ulColor,Number(uiData.ulProgress),progColor);
I("pingText").textContent=uiData.pingStatus; I("pingText").textContent=format(uiData.pingStatus);
drawMeter(I("pingMeter"),msToAmount(Number(uiData.pingStatus*(status==2?oscillate():1))),meterBk,pingColor,Number(uiData.pingProgress),progColor); I("jitText").textContent=format(uiData.jitterStatus);
I("jitText").textContent=uiData.jitterStatus;
drawMeter(I("jitMeter"),msToAmount(Number(uiData.jitterStatus*(status==2?oscillate():1))),meterBk,jitColor,Number(uiData.pingProgress),progColor);
} }
function oscillate(){ function oscillate(){
return 1+0.02*Math.sin(Date.now()/100); return 1+0.02*Math.sin(Date.now()/100);
@ -102,8 +101,6 @@ frame(); //start frame loop
function initUI(){ function initUI(){
drawMeter(I("dlMeter"),0,meterBk,dlColor,0); drawMeter(I("dlMeter"),0,meterBk,dlColor,0);
drawMeter(I("ulMeter"),0,meterBk,ulColor,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("dlText").textContent="";
I("ulText").textContent=""; I("ulText").textContent="";
I("pingText").textContent=""; I("pingText").textContent="";
@ -163,50 +160,62 @@ function initUI(){
position:relative; position:relative;
box-sizing:border-box; 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; position:absolute;
top:0.1em; left:0; top:0.1em; left:0;
width:100%; width:100%;
font-size:1.4em; font-size:1.4em;
z-index:9; z-index:9;
} }
div.meterText{ div.testArea2 div.testName{
display:block;
text-align:center;
font-size:1.4em;
}
div.testArea div.meterText{
position:absolute; position:absolute;
bottom:1.55em; left:0; bottom:1.55em; left:0;
width:100%; width:100%;
font-size:2.5em; font-size:2.5em;
z-index:9; z-index:9;
} }
div.testArea2 div.meterText{
display:inline-block;
font-size:2.5em;
}
div.meterText:empty:before{ div.meterText:empty:before{
content:"0.00"; content:"0.00";
} }
div.unit{ div.testArea div.unit{
position:absolute; position:absolute;
bottom:2em; left:0; bottom:2em; left:0;
width:100%; width:100%;
z-index:9; z-index:9;
} }
div.testArea2 div.unit{
display:inline-block;
}
div.testArea canvas{ div.testArea canvas{
position:absolute; position:absolute;
top:0; left:0; width:100%; height:100%; top:0; left:0; width:100%; height:100%;
z-index:1; z-index:1;
} }
div.testGroup{ div.testGroup{
display:inline-block; display:block;
} margin: 0 auto;
@media all and (max-width:65em){
body{
font-size:1.5vw;
}
} }
@media all and (max-width:40em){ @media all and (max-width:40em){
body{ body{
font-size:0.8em; font-size:0.8em;
} }
div.testGroup{
display:block;
margin: 0 auto;
}
} }
</style> </style>
<title>HTML5 Speedtest</title> <title>HTML5 Speedtest</title>
@ -216,6 +225,18 @@ function initUI(){
<div id="testWrapper"> <div id="testWrapper">
<div id="startStopBtn" onclick="startStop()"></div> <div id="startStopBtn" onclick="startStop()"></div>
<div id="test"> <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="testGroup">
<div class="testArea"> <div class="testArea">
<div class="testName">Download</div> <div class="testName">Download</div>
@ -230,22 +251,8 @@ function initUI(){
<div class="unit">Mbps</div> <div class="unit">Mbps</div>
</div> </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"> <div id="ipArea">
IP Address: <span id="ip"></span> <span id="ip"></span>
</div> </div>
</div> </div>
<a href="https://github.com/adolfintel/speedtest">Source code</a> <a href="https://github.com/adolfintel/speedtest">Source code</a>