<!DOCTYPE html>
<html>
<head>
<title>Speedtest</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
text-align:center;
}
#startBtn{
display:inline-block;
border:0.15em solid #000000;
padding:0.3em 0.5em;
margin:0.6em;
color:#000000;
text-decoration:none;
}
#ip{
margin:0.8em 0;
font-size:1.2em;
}
#chart1Area, #chart2Area{
width:100%;
max-width:30em;
height:10em;
display:block;
margin:0 auto;
}
</style>
<script src="example5_data/Chart.bundle.min.js"></script>
<script type="text/javascript">
var w=null;
function runTest(){
var chart1ctx=document.getElementById("chart1Area").getContext('2d'),
chart2ctx=document.getElementById("chart2Area").getContext('2d');
var dlDataset={
label: "Download",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0],
spanGaps: false,
},
ulDataset={
label: "Upload",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(192,192,75,0.4)",
borderColor: "rgba(192,192,75,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(192,192,75,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(192,192,75,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0],
spanGaps: false,
},
pingDataset={
label: "Ping",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,220,75,0.4)",
borderColor: "rgba(75,220,75,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,220,75,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,220,75,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [],
spanGaps: false,
},
jitterDataset={
label: "Jitter",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(220,75,75,0.4)",
borderColor: "rgba(220,75,75,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(220,75,75,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(220,75,75,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [],
spanGaps: false,
}
;
var chart1Options={
type: 'line',
data: {
datasets: [dlDataset,ulDataset]
},
options:{
responsive: true,
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
},
ticks:{
beginAtZero: true
}
}],
yAxes: [{
display: true,
scaleLabel: "Speed",
ticks:{
beginAtZero: true
}
}]
}
}
},
chart2Options={
type: 'line',
data: {
datasets: [pingDataset,jitterDataset]
},
options:{
responsive: true,
legend: {
position: 'bottom',
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
},
ticks:{
beginAtZero: true
}
}],
yAxes: [{
display: true,
scaleLabel: "Latency",
ticks:{
beginAtZero: true
}
}]
}
}
};
var chart1 = new Chart(chart1ctx, chart1Options),
chart2 = new Chart(chart2ctx, chart2Options);
document.getElementById("startBtn").style.display="none";
document.getElementById("testArea").style.display="";
document.getElementById("abortBtn").style.display="";
w=new Worker("speedtest_worker.min.js");
var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
w.onmessage=function(event){
var data=event.data.split(";");
var status=Number(data[0]);
if(status>=4){
clearInterval(interval);
document.getElementById("abortBtn").style.display="none";
document.getElementById("startBtn").style.display="";
w=null;
}
if(status==5){
document.getElementById("testArea").style.display="none";
}
if(status==1&&Number(data[1])>0){
chart1.data.datasets[0].data.push(Number(data[1]));
chart1.data.labels[chart1.data.datasets[0].data.length-1]="";
chart1.update();
}
if(status==3&&Number(data[2])>0){
chart1.data.datasets[1].data.push(Number(data[2]));
chart1.data.labels[chart1.data.datasets[1].data.length-1]="";
chart1.update();
}
if(status==2&&Number(data[3])>0){
chart2.data.datasets[0].data.push(Number(data[3]));
chart2.data.datasets[1].data.push(Number(data[5]));
chart2.data.labels[chart2.data.datasets[0].data.length-1]="";
chart2.data.labels[chart2.data.datasets[1].data.length-1]="";
chart2.update();
}
ip.innerHTML=data[4];
}.bind(this);
w.postMessage("start");
}
function abortTest(){
if(w)w.postMessage("abort");
}
</script>
</head>
<body>
<h1>Speedtest</h1>
<div id="testArea" style="display:none">
<div id="ip">Please wait...</div>
<h2>Speed</h2>
<canvas id="chart1Area"></canvas>
<h2>Latency</h2>
<canvas id="chart2Area"></canvas>
<br/>
<a href="javascript:abortTest()" id="abortBtn">Abort</a>
</div>
<a href="javascript:runTest()" id="startBtn">Run speedtest</a>
<br/><br/>
Charts by <a href="http://www.chartjs.org/">Chart.js</a>
</body>
</html>