Speed test
basicspeedtest
Console
URL speed test example
speedtest.html
1<!DOCTYPE >
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=10">
7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9 <!-- Include PMA.UI required libraries downloaded or from CDN -->
10 <script src="./pma.ui/jquery-3.1.0.js"></script>
11 <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13 <!-- Include optional libraries downloaded or from CDN -->
14 <link rel="stylesheet" href="./pma.ui/bootstrap.min.css">
15 <script src="./pma.ui/bootstrap.bundle.min.js"></script>
16
17 <!-- Include PMA.UI script & css -->
18 <script src="./pma.ui/pma.ui.js"></script>
19 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
20
21 <!-- Include custom script & css -->
22 <script src="./js/speedtest.js"></script>
23 <link href="./css/speedtest.css" type="text/css" rel="stylesheet">
24
25 <title>Speed test</title>
26</head>
27
28<body>
29 <div class="container-fluid">
30 <table>
31 <tr>
32 <td class="first-column-padding">
33 <p>PMA.core URL</p>
34 </td>
35 <td>
36 <p><input type="text" id="url-address" class="form-control col-6 pt-2" size="55" placeholder="enter the server url"></p>
37 </td>
38 <td id="error-symbol" class="connection-warning hidden"><span>⚠</span></td>
39 <td class="connection-warning hidden">
40 Warning<br>
41 <span id="error-message"></span>
42 </td>
43 </tr>
44 <tr>
45 <td></td>
46 <td>
47 <p><input type="button" id="test-button" class="btn btn-light btn-sm" value="Test connection" onclick="speedTest()"></p>
48 </td>
49 </tr>
50 <tr class="result-output hidden">
51 <td></td>
52 <td>
53 <u>Result</u><br>
54 <b>Round trip:</b> <span id="ping-label"></span><br>
55 <b>Download speed:</b> <span id="download-label"></span>
56 </td>
57 </tr>
58 </table>
59 </div>
60</body>
61
62</html>speedtest.css
1.first-column-padding {
2 padding-right: 15px;
3}
4
5#test-button {
6 width: 125px;
7 text-align: center;
8}
9
10#error-symbol {
11 vertical-align: top;
12}
13
14.result-output.hidden {
15 display: none !important;
16}
17
18.connection-warning.hidden {
19 display: none !important;
20}
speedtest.js
1function showDiv() {
2 var urlAddress = $("#url-address").val()
3
4 if (urlAddress) {
5 $(".result-output").removeClass("hidden");
6 }
7}
8
9function round(value, precision) {
10 var multiplier = Math.pow(10, precision || 0);
11 return Math.round(value * multiplier) / multiplier;
12}
13
14async function speedTest() {
15 $(".result-output").addClass("hidden");
16 $(".connection-warning").addClass("hidden");
17 $(".error-message").html("");
18
19 document.getElementById("ping-label").innerHTML = "";
20 document.getElementById("download-label").innerHTML = "";
21
22 var context = new PMA.UI.Components.Context({ caller: "test" });
23 var urlAddress = $("#url-address").val();
24
25 if (urlAddress) {
26 var button = document.getElementById("test-button");
27 button.disabled = true;
28 button.value = "testing ..."
29
30 var results = await context.evaluateConnection(urlAddress);
31
32 showDiv();
33
34 if (results.roundTrip === null) {
35 document.getElementById("ping-label").innerHTML = "-";
36 document.getElementById("download-label").innerHTML = "-";
37
38 $(".connection-warning").removeClass("hidden");
39 document.getElementById("error-message").innerHTML = "Connection failed";
40 }
41 else if (results.roundTrip !== null && results.downloadSpeed === null) {
42 var pingLabel;
43 if (results.roundTrip > 1000) {
44 pingLabel = `${round(results.roundTrip / 1000, 0)} sec`;
45 }
46 else {
47 pingLabel = `${round(results.roundTrip, 0)} ms`;
48 }
49
50 document.getElementById("ping-label").innerHTML = pingLabel;
51 document.getElementById("download-label").innerHTML = "-";
52
53 $(".connection-warning").removeClass("hidden");
54 document.getElementById("error-message").innerHTML = "Download failed";
55 }
56 else {
57 var pingLabel;
58 if (results.roundTrip > 1000) {
59 pingLabel = `${round(results.roundTrip / 1000, 0)} sec`;
60 }
61 else {
62 pingLabel = `${round(results.roundTrip, 0)} ms`;
63 }
64
65 var v, downloadLabel;
66 if (results.downloadSpeed > 1024 * 1024) {
67 v = round(results.downloadSpeed / (1024 * 1024), 2);
68 downloadLabel = `${round(v, 2)} MB/sec`;
69 }
70 else if (results.downloadSpeed > 1024) {
71 v = round(results.downloadSpeed / 1024, 2);
72 downloadLabel = `${round(v, 2)} KB/sec`;
73 }
74 else {
75 downloadLabel = `${round(results.downloadSpeed, 2)} bytes/sec`;
76 }
77
78 document.getElementById("ping-label").innerHTML = pingLabel;
79 document.getElementById("download-label").innerHTML = downloadLabel;
80 }
81
82 button.value = "Test connection";
83 button.disabled = false;
84 }
85}