kumi/speedtest
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
speedtest/example4.html

198 lines
6.1 KiB
HTML
Raw Normal View History

New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
<!DOCTYPE html>
<html>
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
<head>
<title>Speedtest</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
border: none;
text-align: center;
font-family: 'Open Sans';
}
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
div.meter {
display: inline-block;
height: 300px;
width: 400px;
text-align: center;
font-size: 6vw;
}
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
div#testArea {
display: flex;
justify-content: center;
flex-flow: row wrap;
}
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
a {
text-decoration: none;
}
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
.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';
}
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
#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])
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
}
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
w.postMessage('start {"time_ul": "10", "time_dl": "10", "count_ping": "50", "url_dl": "garbage.php", "url_ul": "empty.dat", "url_ping": "empty.dat", "url_getIp": "getIP.php"}')
}
function abortTest() {
if (w) w.postMessage('abort')
}
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
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'
]
})
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
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'
]
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
})
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
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'
]
})
})
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
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>
New example, "improved" garbage.php New example using justgage.js for nice displays, and Google Fonts for more awesomeness of this tool Changed garbage.php, now enforcing download (good for comparisons of measured speed vs. raw download speed) and disabling php buffering stuff
2016-10-22 13:21:16 +00:00
improvements and new example (#29) Merge with #29. Using standard js code style (ugh...); rewritten documentation in markdown; Added example6
2017-05-15 10:02:32 +00:00
<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>
Reference in a new issue Copy permalink