Make it better.
This commit is contained in:
Klaus-Uwe Mitterer
parent
6e1a199a31
commit
87df493aa6
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1 +1 @@
|
|||
ugly.bat
|
||||
config.php
|
||||
|
|
|
|||
6
bootstrap.min.css
vendored
Normal file
6
bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
config.dist.php
Normal file
8
config.dist.php
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?php
|
||||
|
||||
$servername = "localhost";
|
||||
$username = "speedtest";
|
||||
$password = "";
|
||||
$dbname = "speedtest";
|
||||
|
||||
?>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Speedtest</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Speedtest</h1>
|
||||
|
||||
<h4>IP Address</h4>
|
||||
<p id="ip"></p>
|
||||
|
||||
<h4>Download</h4>
|
||||
<p id="download"></p>
|
||||
|
||||
<h4>Upload</h4>
|
||||
<p id="upload"></p>
|
||||
|
||||
<h4>Latency</h4>
|
||||
<p id="ping"></p>
|
||||
|
||||
<script type="text/javascript">
|
||||
var w = new Worker('speedtest_worker.min.js') // create new worker
|
||||
setInterval(function () { w.postMessage('status') }, 100) // ask for status every 100ms
|
||||
w.onmessage = function (event) { // when status is received, split the string and put the values in the appropriate fields
|
||||
var data = event.data.split(';') // string format: status;download;upload;ping (speeds are in mbit/s) (status: 0=not started, 1=downloading, 2=uploading, 3=ping, 4=done, 5=aborted)
|
||||
document.getElementById('download').textContent = data[1] + ' Mbit/s'
|
||||
document.getElementById('upload').textContent = data[2] + ' Mbit/s'
|
||||
document.getElementById('ping').textContent = data[3] + ' ms, ' + data[5] + ' ms jitter'
|
||||
document.getElementById('ip').textContent = data[4]
|
||||
}
|
||||
w.postMessage('start') // start the speedtest (default params. keep garbage.php and empty.dat in the same directory as the js file)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Speedtest</title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.test {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.testName,
|
||||
div.meterUnit {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
div.meter {
|
||||
font-size: 6vw;
|
||||
line-height: 1.5em;
|
||||
height: 1.5em !important;
|
||||
}
|
||||
|
||||
.flash {
|
||||
animation: flash 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Speedtest</h1>
|
||||
<div class="test">
|
||||
<div class="testName">Download</div>
|
||||
<div class="meter"> <span id="download"></span> </div>
|
||||
<div class="meterUnit">Mbit/s</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div class="testName">Upload</div>
|
||||
<div class="meter"> <span id="upload"></span> </div>
|
||||
<div class="meterUnit">Mbit/s</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div class="testName">Latency</div>
|
||||
<div class="meter"> <span id="ping"></span> </div>
|
||||
<div class="meterUnit">ms</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div class="testName">Jitter</div>
|
||||
<div class="meter"> <span id="jitter"></span> </div>
|
||||
<div class="meterUnit">ms</div>
|
||||
</div>
|
||||
<div id="ip"></div>
|
||||
<script type="text/javascript">
|
||||
var 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])
|
||||
var dl = document.getElementById('download')
|
||||
var ul = document.getElementById('upload')
|
||||
var ping = document.getElementById('ping')
|
||||
var ip = document.getElementById('ip')
|
||||
var jitter = document.getElementById('jitter')
|
||||
dl.className = status === 1 ? 'flash' : ''
|
||||
ping.className = status === 2 ? 'flash' : ''
|
||||
jitter.className = ul.className = status === 3 ? 'flash' : ''
|
||||
if (status >= 4) {
|
||||
clearInterval(interval)
|
||||
}
|
||||
dl.textContent = data[1]
|
||||
ul.textContent = data[2]
|
||||
ping.textContent = data[3]
|
||||
jitter.textContent = data[5]
|
||||
ip.textContent = 'Your IP: ' + data[4]
|
||||
}
|
||||
w.postMessage('start {"url_dl": "garbage.php", "url_ul": "empty.php", "url_ping": "empty.php", "time_dl": "10", "time_ul": "15", "count_ping": "30"}') // start with custom parameters. paths are relative to js file. you can omit parameters that you don't want to change
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
133
example3.html
133
example3.html
|
|
@ -1,133 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Speedtest</title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.test {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
font-size: 2vw;
|
||||
min-width: 20vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.testName,
|
||||
div.meterUnit {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
div.meter {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
height: 2em !important;
|
||||
}
|
||||
|
||||
.flash {
|
||||
animation: flash 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
a {
|
||||
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;
|
||||
}
|
||||
|
||||
@media all and (max-width: 50em) {
|
||||
div.test {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var w = null
|
||||
function runTest() {
|
||||
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])
|
||||
var dl = document.getElementById('download')
|
||||
var ul = document.getElementById('upload')
|
||||
var ping = document.getElementById('ping')
|
||||
var ip = document.getElementById('ip')
|
||||
var jitter = document.getElementById('jitter')
|
||||
dl.className = status === 1 ? 'flash' : ''
|
||||
ping.className = status === 2 ? 'flash' : ''
|
||||
jitter.className = ul.className = status === 3 ? 'flash' : ''
|
||||
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'
|
||||
}
|
||||
dl.textContent = data[1]
|
||||
ul.textContent = data[2]
|
||||
ping.textContent = data[3]
|
||||
jitter.textContent = data[5]
|
||||
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">
|
||||
<div id="ip">Please wait...</div>
|
||||
<div class="test">
|
||||
<div class="testName">Download</div>
|
||||
<div class="meter"> <span id="download"></span> </div>
|
||||
<div class="meterUnit">Mbit/s</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div class="testName">Upload</div>
|
||||
<div class="meter"> <span id="upload"></span> </div>
|
||||
<div class="meterUnit">Mbit/s</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div class="testName">Latency</div>
|
||||
<div class="meter"> <span id="ping"></span> </div>
|
||||
<div class="meterUnit">ms</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div class="testName">Jitter</div>
|
||||
<div class="meter"> <span id="jitter"></span> </div>
|
||||
<div class="meterUnit">ms</div>
|
||||
</div>
|
||||
<br/>
|
||||
<a href="javascript:abortTest()" id="abortBtn">Abort</a>
|
||||
</div>
|
||||
<a href="javascript:runTest()" id="startBtn">Run speedtest</a>
|
||||
</body>
|
||||
</html>
|
||||
197
example4.html
197
example4.html
|
|
@ -1,197 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Speedtest</title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
div.meter {
|
||||
display: inline-block;
|
||||
height: 300px;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
div#testArea {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 10px 5px 0 2px;
|
||||
padding: 16px 40px;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
background: #34aadc;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
|
||||
#ip {
|
||||
margin: 1em 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var w = null
|
||||
var ggdl, ggul, ggping
|
||||
function runTest() {
|
||||
w = new Worker('speedtest_worker.min.js')
|
||||
var interval = setInterval(function () { w.postMessage('status') }, 100)
|
||||
document.getElementById('abortBtn').style.display = ''
|
||||
document.getElementById('startBtn').style.display = 'none'
|
||||
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
|
||||
}
|
||||
updateGauge(ggdl, data[1])
|
||||
updateGauge(ggul, data[2])
|
||||
updateGauge(ggping, data[3])
|
||||
document.getElementById('ip').textContent = 'Your IP: ' + data[4]
|
||||
updateGauge(ggjitter, data[5])
|
||||
}
|
||||
w.postMessage('start {"time_ul": "10", "time_dl": "10", "count_ping": "50", "url_dl": "garbage.php", "url_ul": "empty.php", "url_ping": "empty.php", "url_getIp": "getIP.php"}')
|
||||
}
|
||||
function abortTest() {
|
||||
if (w) w.postMessage('abort')
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (event) {
|
||||
ggdl = new JustGage({
|
||||
id: 'ggdl',
|
||||
title: 'Download',
|
||||
label: 'Mbit/s',
|
||||
titleFontFamily: 'Open Sans',
|
||||
valueFontFamily: 'Open Sans',
|
||||
refreshAnimationTime: 300,
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 10,
|
||||
decimals: 2,
|
||||
formatNumber: true,
|
||||
humanFriendly: false,
|
||||
levelColors: [
|
||||
'#999999',
|
||||
'#339933'
|
||||
]
|
||||
})
|
||||
|
||||
ggul = new JustGage({
|
||||
id: 'ggul',
|
||||
title: 'Upload',
|
||||
label: 'Mbit/s',
|
||||
titleFontFamily: 'Open Sans',
|
||||
valueFontFamily: 'Open Sans',
|
||||
refreshAnimationTime: 300,
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 10,
|
||||
decimals: 2,
|
||||
formatNumber: true,
|
||||
humanFriendly: false,
|
||||
levelColors: [
|
||||
'#999999',
|
||||
'#333399'
|
||||
]
|
||||
|
||||
})
|
||||
|
||||
ggping = new JustGage({
|
||||
id: 'ggping',
|
||||
title: 'Ping',
|
||||
label: 'ms',
|
||||
titleFontFamily: 'Open Sans',
|
||||
valueFontFamily: 'Open Sans',
|
||||
refreshAnimationTime: 300,
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
decimals: 2,
|
||||
formatNumber: true,
|
||||
humanFriendly: false,
|
||||
levelColors: [
|
||||
'#999999',
|
||||
'#993333'
|
||||
]
|
||||
})
|
||||
ggjitter = new JustGage({
|
||||
id: 'ggjitter',
|
||||
title: 'Jitter',
|
||||
label: 'ms',
|
||||
titleFontFamily: 'Open Sans',
|
||||
valueFontFamily: 'Open Sans',
|
||||
refreshAnimationTime: 300,
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
decimals: 2,
|
||||
formatNumber: true,
|
||||
humanFriendly: false,
|
||||
levelColors: [
|
||||
'#999999',
|
||||
'#993333'
|
||||
]
|
||||
})
|
||||
})
|
||||
|
||||
function updateGauge(gauge, value) {
|
||||
// Alway use next power of 2 as maximum
|
||||
var max = Math.max(Math.pow(2, Math.ceil(Math.log2(value))), gauge.config.max)
|
||||
// Refresh the gauge
|
||||
gauge.refresh(value, max)
|
||||
}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Roboto:400,500,700" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Speed Test</h1>
|
||||
<div id="testArea">
|
||||
<div class="meter" id="ggdl"></div>
|
||||
<div class="meter" id="ggul"></div>
|
||||
<div class="meter" id="ggping"></div>
|
||||
<div class="meter" id="ggjitter"></div>
|
||||
</div>
|
||||
<div id="ip"></div>
|
||||
<div>
|
||||
<a href="javascript:runTest()" id="startBtn" class="button">Start</a>
|
||||
<a href="javascript:abortTest()" id="abortBtn" class="button" style="display:none;">Abort</a>
|
||||
</div>
|
||||
<p>Fonts: <a href="https://fonts.google.com/">Google Fonts</a> | Gauges: <a href="http://justgage.com/">justgage.com</a></p>
|
||||
</body>
|
||||
</html>
|
||||
256
example5.html
256
example5.html
|
|
@ -1,256 +0,0 @@
|
|||
<!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>
|
||||
119
example7.html
119
example7.html
|
|
@ -1,119 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
|
||||
<title>Speedtest</title>
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
.st-block {
|
||||
text-align: center;
|
||||
}
|
||||
.st-btn {
|
||||
margin-top: -0.5rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.st-value>span:empty::before {
|
||||
content: "0.00";
|
||||
color: #636c72;
|
||||
}
|
||||
#st-ip:empty::before {
|
||||
content: "___.___.___.___";
|
||||
color: #636c72;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="my-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 mb-3">
|
||||
<p class="h1">
|
||||
Speedtest
|
||||
<button id="st-start" class="btn btn-outline-primary st-btn" onclick="startTest()">Start</button>
|
||||
<button id="st-stop" class="btn btn-danger st-btn" onclick="stopTest()" hidden="true">Stop</button>
|
||||
</p>
|
||||
<p class="lead">
|
||||
Your IP: <span id="st-ip"></span>
|
||||
<input type="checkbox" id="st-ip-checkbox">
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-3 st-block">
|
||||
<h3>Download</h3>
|
||||
<p class="display-4 st-value"><span id="st-download"></span></p>
|
||||
<p class="lead">Mbit/s</p>
|
||||
<p><input type="checkbox" id="st-download-checkbox"></p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-3 st-block">
|
||||
<h3>Upload</h3>
|
||||
<p class="display-4 st-value"><span id="st-upload"></span></p>
|
||||
<p class="lead">Mbit/s</p>
|
||||
<p><input type="checkbox" id="st-upload-checkbox"></p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-3 st-block">
|
||||
<h3>Ping</h3>
|
||||
<p class="display-4 st-value"><span id="st-ping"></span></p>
|
||||
<p class="lead">ms</p>
|
||||
<p><input type="checkbox" id="st-ping-checkbox" checked></p>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-3 st-block">
|
||||
<h3>Jitter</h3>
|
||||
<p class="display-4 st-value"><span id="st-jitter"></span></p>
|
||||
<p class="lead">ms</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var worker = null
|
||||
function startTest() {
|
||||
document.getElementById('st-start').hidden = true
|
||||
document.getElementById('st-stop').hidden = false
|
||||
worker = new Worker('speedtest_worker.min.js')
|
||||
var interval = setInterval(function () { worker.postMessage('status') }, 100)
|
||||
worker.onmessage = function (event) {
|
||||
var download = document.getElementById('st-download')
|
||||
var upload = document.getElementById('st-upload')
|
||||
var ping = document.getElementById('st-ping')
|
||||
var jitter = document.getElementById('st-jitter')
|
||||
var ip = document.getElementById('st-ip')
|
||||
|
||||
var data = event.data.split(';')
|
||||
var status = Number(data[0])
|
||||
if (status >= 4) {
|
||||
clearInterval(interval)
|
||||
document.getElementById('st-start').hidden = false
|
||||
document.getElementById('st-stop').hidden = true
|
||||
w = null
|
||||
}
|
||||
if (status === 5) {
|
||||
// speedtest cancelled, clear output data
|
||||
data = []
|
||||
}
|
||||
download.textContent = (status==1&&data[1]==0)?"Starting":data[1]
|
||||
upload.textContent = (status==3&&data[2]==0)?"Starting":data[2]
|
||||
ping.textContent = data[3]
|
||||
ip.textContent = data[4]
|
||||
jitter.textContent = data[5]
|
||||
}
|
||||
var ip_checkbox = document.getElementById("st-ip-checkbox")
|
||||
var dl_checkbox = document.getElementById("st-download-checkbox")
|
||||
var ul_checkbox = document.getElementById("st-upload-checkbox")
|
||||
var ping_checkbox = document.getElementById("st-ping-checkbox")
|
||||
var str_parameters = []
|
||||
|
||||
if (!ip_checkbox.checked) {str_parameters.push('"url_getIp": "-1"')}
|
||||
if (!dl_checkbox.checked) {str_parameters.push('"url_dl": "-1"')}
|
||||
if (!ul_checkbox.checked) {str_parameters.push('"url_ul": "-1"')}
|
||||
if (!ping_checkbox.checked) {str_parameters.push('"url_ping": "-1"')}
|
||||
|
||||
worker.postMessage('start {' + str_parameters.join(",") + '}')
|
||||
}
|
||||
function stopTest() {
|
||||
if (worker) worker.postMessage('abort')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,9 +4,9 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
|
||||
<title>Speedtest</title>
|
||||
<title>Kumi's Connection Test</title>
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="bootstrap.min.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
.st-block {
|
||||
text-align: center;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12 mb-3">
|
||||
<p class="h1">
|
||||
Speedtest
|
||||
Kumi's Connection Test
|
||||
<button id="st-start" class="btn btn-outline-primary st-btn" onclick="startTest()">Start</button>
|
||||
<button id="st-stop" class="btn btn-danger st-btn" onclick="stopTest()" hidden="true">Stop</button>
|
||||
</p>
|
||||
|
|
@ -78,6 +78,7 @@
|
|||
|
||||
var data = event.data.split(';')
|
||||
var status = Number(data[0])
|
||||
console.log(status)
|
||||
if (status >= 4) {
|
||||
clearInterval(interval)
|
||||
document.getElementById('st-start').hidden = false
|
||||
|
|
@ -87,7 +88,18 @@
|
|||
if (status === 5) {
|
||||
// speedtest cancelled, clear output data
|
||||
data = []
|
||||
}
|
||||
}
|
||||
|
||||
if (status === 4) {
|
||||
var http = new XMLHttpRequest()
|
||||
p = 'ip='+ip.innerHTML+'&down='+download.innerHTML+'&up='+upload.innerHTML+'&ping='+ping.innerHTML+'&jitter='+jitter.innerHTML
|
||||
http.open("POST", "store.php", true)
|
||||
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
|
||||
http.setRequestHeader("Content-length", p.length)
|
||||
http.setRequestHeader("Connection", "close")
|
||||
http.send(p)
|
||||
}
|
||||
|
||||
download.textContent = (status==1&&data[1]==0)?"Starting":data[1]
|
||||
upload.textContent = (status==3&&data[2]==0)?"Starting":data[2]
|
||||
ping.textContent = data[3]
|
||||
17
setup.php
Normal file
17
setup.php
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<?php
|
||||
|
||||
require_once("config.php");
|
||||
|
||||
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
$sql = "CREATE TABLE IF NOT EXISTS `speedtest` ( `id` int(11) NOT NULL AUTO_INCREMENT, `ip` text NOT NULL, `ts` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `down` text NOT NULL, `up` text NOT NULL, `ping` text NOT NULL, `jitter` text NOT NULL, `ua` text, PRIMARY KEY (`id`) );"
|
||||
|
||||
if (!mysqli_query($conn, $sql)) die('Error: ' . mysqli_error($conn));
|
||||
|
||||
mysqli_close($conn);
|
||||
|
||||
echo "OK";
|
||||
27
store.php
Normal file
27
store.php
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?php
|
||||
|
||||
include("config.php")
|
||||
|
||||
if (isset($_POST["ip"]) && isset($_POST["down"]) && isset($_POST["up"]) && isset($_POST["ping"]) && isset($_POST["jitter"])) {
|
||||
|
||||
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
$sql = 'INSERT INTO speedtest(ip, down, up, ping, jitter, ua) VALUES ("' . mysqli_real_escape_string($conn, $_POST['ip']) . '", "' . mysqli_real_escape_string($conn, $_POST['down']) . '", "' . mysqli_real_escape_string($conn, $_POST['up']) . '", "' . mysqli_real_escape_string($conn, $_POST['ping']) . '", "' . mysqli_real_escape_string($conn, $_POST['jitter']) . '", "' . mysqli_real_escape_string($conn, $_SERVER['HTTP_USER_AGENT']) . '");';
|
||||
|
||||
if (!mysqli_query($conn, $sql)) {
|
||||
die('Error: ' . mysqli_error($conn));
|
||||
}
|
||||
|
||||
mysqli_close($conn);
|
||||
|
||||
echo "OK";
|
||||
|
||||
} else {
|
||||
|
||||
header('HTTP/1.0 400 Bad Request');
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue