3f06ab1381
Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
257 lines
9.1 KiB
HTML
257 lines
9.1 KiB
HTML
<!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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
|
|
<script type="text/javascript">
|
|
var w = null
|
|
function runTest() {
|
|
var chart1ctx = document.getElementById('chart1Area').getContext('2d')
|
|
var 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
|
|
}
|
|
var 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
|
|
}
|
|
var 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
|
|
}
|
|
var 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
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
var 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)
|
|
var 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') }, 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.textContent = data[4]
|
|
}
|
|
w.postMessage('start')
|
|
}
|
|
function abortTest() {
|
|
if (w) w.postMessage('abort')
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Speedtest</h1>
|
|
<div id="testArea" style="display:none">
|
|
<p id="ip">Please wait...</p>
|
|
|
|
<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>
|