e5496fcf90
This just makes the links to the source code and Chart.js open in a new tab. The `rel="noopener noreferrer"` has been added to prevent security issues in older browsers. This is just an ease of use change that doesn't affect any of the core speedtest functionality in any way. Signed-off-by: Matthew Nickson <mnickson@sidingsmedia.com>
257 lines
9.3 KiB
HTML
Executable file
257 lines
9.3 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>LibreSpeed Example</title>
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<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> <!--THIS LIBRARY SUCKS!-->
|
|
<script src="speedtest.js"></script>
|
|
<script type="text/javascript">
|
|
var s = 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 = ''
|
|
s=new Speedtest();
|
|
s.onupdate = function (data) {
|
|
var status = data.testState
|
|
if (status === 1 && Number(data.dlStatus) > 0) {
|
|
for(var i=~~(20*Number(data.dlProgress));i<20;i++) chart1.data.datasets[0].data[i]=(Number(data.dlStatus))
|
|
chart1.data.labels[chart1.data.datasets[0].data.length - 1] = ''
|
|
chart1.update()
|
|
}
|
|
if (status === 3 && Number(data.ulStatus) > 0) {
|
|
for(var i=~~(20*Number(data.ulProgress));i<20;i++) chart1.data.datasets[1].data[i]=(Number(data.ulStatus))
|
|
chart1.data.labels[chart1.data.datasets[1].data.length - 1] = ''
|
|
chart1.update()
|
|
}
|
|
if (status === 2 && Number(data.pingStatus) > 0) {
|
|
chart2.data.datasets[0].data.push(Number(data.pingStatus))
|
|
chart2.data.datasets[1].data.push(Number(data.jitterStatus))
|
|
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.clientIp
|
|
}
|
|
s.onend=function(aborted){
|
|
document.getElementById('abortBtn').style.display = 'none'
|
|
document.getElementById('startBtn').style.display = ''
|
|
s = null
|
|
if (aborted) {
|
|
document.getElementById('testArea').style.display = 'none'
|
|
}
|
|
}
|
|
s.start();
|
|
}
|
|
function abortTest() {
|
|
if (s) s.abort();
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>LibreSpeed - Chart.js example</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/" target="_blank" rel="noopener noreferrer">Chart.js</a><br/><br/><a href="https://github.com/librespeed/speedtest" target="_blank" rel="noopener noreferrer">Source code</a>
|
|
</body>
|
|
</html>
|