2017-10-30 12:35:49 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" / >
< title > HTML5 Speedtest< / title >
< style type = "text/css" >
html , body {
border : none ; padding : 0 ; margin : 0 ;
background : #FFFFFF ;
color : #202020 ;
}
body {
text-align : center ;
font-family : "Roboto" , sans-serif ;
}
h1 {
color : #404040 ;
}
# startStopBtn {
display : inline-block ;
margin : 0 auto ;
color : #6060AA ;
background-color : rgba ( 0 , 0 , 0 , 0 ) ;
border : 0.15 em solid #6060FF ;
border-radius : 0.3 em ;
transition : all 0.3 s ;
box-sizing : border-box ;
width : 8 em ; height : 3 em ;
line-height : 2.7 em ;
cursor : pointer ;
box-shadow : 0 0 0 rgba ( 0 , 0 , 0 , 0.1 ) , inset 0 0 0 rgba ( 0 , 0 , 0 , 0.1 ) ;
}
# startStopBtn : hover {
box-shadow : 0 0 2 em rgba ( 0 , 0 , 0 , 0.1 ) , inset 0 0 1 em rgba ( 0 , 0 , 0 , 0.1 ) ;
}
# startStopBtn . running {
background-color : #FF3030 ;
border-color : #FF6060 ;
color : #FFFFFF ;
}
# startStopBtn : before {
content : "Start" ;
}
# startStopBtn . running : before {
content : "Abort" ;
}
# test {
margin-top : 2 em ;
margin-bottom : 12 em ;
}
div . testArea {
display : inline-block ;
width : 14 em ;
height : 9 em ;
position : relative ;
box-sizing : border-box ;
}
div . testName {
position : absolute ;
top : 0.1 em ; left : 0 ;
width : 100 % ;
font-size : 1.4 em ;
z-index : 9 ;
}
div . meterText {
position : absolute ;
bottom : 1.5 em ; left : 0 ;
width : 100 % ;
font-size : 2.5 em ;
z-index : 9 ;
}
# dlText {
color : #6060AA ;
}
# ulText {
color : #309030 ;
}
# pingText , # jitText {
color : #AA6060 ;
}
div . meterText : empty : before {
color : #505050 !important ;
content : "0.00" ;
}
div . unit {
position : absolute ;
bottom : 2 em ; left : 0 ;
width : 100 % ;
z-index : 9 ;
}
div . testGroup {
display : inline-block ;
}
@ media all and ( max-width : 65em ) {
body {
font-size : 1.5 vw ;
}
}
@ media all and ( max-width : 40em ) {
body {
font-size : 0.8 em ;
}
div . testGroup {
display : block ;
margin : 0 auto ;
}
}
< / style >
< script type = "text/javascript" >
function I ( id ) { return document . getElementById ( id ) ; }
var w = null ; //speedtest worker
function startStop ( ) {
if ( w != null ) {
//speedtest is running, abort
w . postMessage ( 'abort' ) ;
w = null ;
I ( "startStopBtn" ) . className = "" ;
initUI ( ) ;
} else {
//test is not running, begin
w = new Worker ( 'speedtest_worker.min.js' ) ;
w . postMessage ( 'start {"telemetry_level":"basic"}' ) ; //Add optional parameters (see doc.md)
I ( "startStopBtn" ) . className = "running" ;
w . onmessage = function ( e ) {
2018-08-08 08:57:24 +02:00
var data = JSON . parse ( e . data ) ;
2018-08-08 09:03:06 +02:00
var status = data . testState
2017-10-30 12:35:49 +01:00
if ( status >= 4 ) {
//test completed
I ( "startStopBtn" ) . className = "" ;
w = null ;
}
2018-08-08 08:57:24 +02:00
I ( "ip" ) . textContent = data . clientIp ;
I ( "dlText" ) . textContent = ( status == 1 && data . dlStatus == 0 ) ? "..." : data . dlStatus ;
I ( "ulText" ) . textContent = ( status == 3 && data . ulStatus == 0 ) ? "..." : data . ulStatus ;
I ( "pingText" ) . textContent = data . pingStatus ;
I ( "jitText" ) . textContent = data . jitterStatus ;
2017-10-30 12:35:49 +01:00
} ;
}
}
//poll the status from the worker every 200ms (this will also update the UI)
setInterval ( function ( ) {
if ( w ) w . postMessage ( 'status' ) ;
} , 200 ) ;
//function to (re)initialize UI
function initUI ( ) {
I ( "dlText" ) . textContent = "" ;
I ( "ulText" ) . textContent = "" ;
I ( "pingText" ) . textContent = "" ;
I ( "jitText" ) . textContent = "" ;
I ( "ip" ) . textContent = "" ;
}
< / script >
< / head >
< body >
< h1 > HTML5 Speedtest - Telemetry example< / h1 >
< div id = "startStopBtn" onclick = "startStop()" > < / div >
< div id = "test" >
< div class = "testGroup" >
< div class = "testArea" >
< div class = "testName" > Download< / div >
< div id = "dlText" class = "meterText" > < / div >
< div class = "unit" > Mbps< / div >
< / div >
< div class = "testArea" >
< div class = "testName" > Upload< / div >
< div id = "ulText" class = "meterText" > < / div >
< div class = "unit" > Mbps< / div >
< / div >
< / div >
< div class = "testGroup" >
< div class = "testArea" >
< div class = "testName" > Ping< / div >
< div id = "pingText" class = "meterText" > < / div >
< div class = "unit" > ms< / div >
< / div >
< div class = "testArea" >
< div class = "testName" > Jitter< / div >
< div id = "jitText" class = "meterText" > < / div >
< div class = "unit" > ms< / div >
< / div >
< / div >
< div id = "ipArea" >
IP Address: < span id = "ip" > < / span >
< / div >
< / div >
2018-08-06 18:15:32 +02:00
< div > Basic telemetry is active; results will be saved in your database, without the full log. If the results don't appear, check the settings in telemetry_settings.php< / div >
2017-10-30 12:35:49 +01:00
< a href = "https://github.com/adolfintel/speedtest" > Source code< / a >
< script type = "text/javascript" > initUI ( ) ; < / script >
< / body >
< / html >
