Make it better.
This commit is contained in:
Klaus-Uwe Mitterer
parent
6e1a199a31
commit
87df493aa6
12 changed files with 75 additions and 836 deletions
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 charset="utf-8" />
|
||||||
<meta name="referrer" content="no-referrer" />
|
<meta name="referrer" content="no-referrer" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
|
<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">
|
<style type="text/css">
|
||||||
.st-block {
|
.st-block {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-12 mb-3">
|
<div class="col-sm-12 mb-3">
|
||||||
<p class="h1">
|
<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-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>
|
<button id="st-stop" class="btn btn-danger st-btn" onclick="stopTest()" hidden="true">Stop</button>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -78,6 +78,7 @@
|
||||||
|
|
||||||
var data = event.data.split(';')
|
var data = event.data.split(';')
|
||||||
var status = Number(data[0])
|
var status = Number(data[0])
|
||||||
|
console.log(status)
|
||||||
if (status >= 4) {
|
if (status >= 4) {
|
||||||
clearInterval(interval)
|
clearInterval(interval)
|
||||||
document.getElementById('st-start').hidden = false
|
document.getElementById('st-start').hidden = false
|
||||||
|
|
@ -87,7 +88,18 @@
|
||||||
if (status === 5) {
|
if (status === 5) {
|
||||||
// speedtest cancelled, clear output data
|
// speedtest cancelled, clear output data
|
||||||
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]
|
download.textContent = (status==1&&data[1]==0)?"Starting":data[1]
|
||||||
upload.textContent = (status==3&&data[2]==0)?"Starting":data[2]
|
upload.textContent = (status==3&&data[2]==0)?"Starting":data[2]
|
||||||
ping.textContent = data[3]
|
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