1
0

example4.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Speedtest</title>
  5. <style type="text/css">
  6. html,
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. border: none;
  11. text-align: center;
  12. font-family: 'Open Sans';
  13. }
  14. h1,
  15. h2,
  16. h3,
  17. h4,
  18. h5,
  19. h6 {
  20. font-family: 'Roboto', sans-serif;
  21. font-weight: 700;
  22. }
  23. div.meter {
  24. display: inline-block;
  25. height: 300px;
  26. width: 400px;
  27. text-align: center;
  28. font-size: 6vw;
  29. }
  30. div#testArea {
  31. display: flex;
  32. justify-content: center;
  33. flex-flow: row wrap;
  34. }
  35. a {
  36. text-decoration: none;
  37. }
  38. .button {
  39. display: inline-block;
  40. margin: 10px 5px 0 2px;
  41. padding: 16px 40px;
  42. border-radius: 5px;
  43. font-size: 18px;
  44. border: none;
  45. background: #34aadc;
  46. color: white;
  47. cursor: pointer;
  48. text-transform: uppercase;
  49. font-weight: 700;
  50. font-family: 'Roboto';
  51. }
  52. #ip {
  53. margin: 1em 0;
  54. font-size: 1.2em;
  55. }
  56. </style>
  57. <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
  58. <script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js"></script>
  59. <script type="text/javascript">
  60. var w = null
  61. var ggdl, ggul, ggping
  62. function runTest() {
  63. w = new Worker('speedtest_worker.min.js')
  64. var interval = setInterval(function () { w.postMessage('status') }, 100)
  65. document.getElementById('abortBtn').style.display = ''
  66. document.getElementById('startBtn').style.display = 'none'
  67. w.onmessage = function (event) {
  68. var data = event.data.split(';')
  69. var status = Number(data[0])
  70. if (status >= 4) {
  71. clearInterval(interval)
  72. document.getElementById('abortBtn').style.display = 'none'
  73. document.getElementById('startBtn').style.display = ''
  74. w = null
  75. }
  76. updateGauge(ggdl, data[1])
  77. updateGauge(ggul, data[2])
  78. updateGauge(ggping, data[3])
  79. document.getElementById('ip').textContent = 'Your IP: ' + data[4]
  80. updateGauge(ggjitter, data[5])
  81. }
  82. 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"}')
  83. }
  84. function abortTest() {
  85. if (w) w.postMessage('abort')
  86. }
  87. document.addEventListener('DOMContentLoaded', function (event) {
  88. ggdl = new JustGage({
  89. id: 'ggdl',
  90. title: 'Download',
  91. label: 'Mbit/s',
  92. titleFontFamily: 'Open Sans',
  93. valueFontFamily: 'Open Sans',
  94. refreshAnimationTime: 300,
  95. value: 0,
  96. min: 0,
  97. max: 10,
  98. decimals: 2,
  99. formatNumber: true,
  100. humanFriendly: false,
  101. levelColors: [
  102. '#999999',
  103. '#339933'
  104. ]
  105. })
  106. ggul = new JustGage({
  107. id: 'ggul',
  108. title: 'Upload',
  109. label: 'Mbit/s',
  110. titleFontFamily: 'Open Sans',
  111. valueFontFamily: 'Open Sans',
  112. refreshAnimationTime: 300,
  113. value: 0,
  114. min: 0,
  115. max: 10,
  116. decimals: 2,
  117. formatNumber: true,
  118. humanFriendly: false,
  119. levelColors: [
  120. '#999999',
  121. '#333399'
  122. ]
  123. })
  124. ggping = new JustGage({
  125. id: 'ggping',
  126. title: 'Ping',
  127. label: 'ms',
  128. titleFontFamily: 'Open Sans',
  129. valueFontFamily: 'Open Sans',
  130. refreshAnimationTime: 300,
  131. value: 0,
  132. min: 0,
  133. max: 100,
  134. decimals: 2,
  135. formatNumber: true,
  136. humanFriendly: false,
  137. levelColors: [
  138. '#999999',
  139. '#993333'
  140. ]
  141. })
  142. ggjitter = new JustGage({
  143. id: 'ggjitter',
  144. title: 'Jitter',
  145. label: 'ms',
  146. titleFontFamily: 'Open Sans',
  147. valueFontFamily: 'Open Sans',
  148. refreshAnimationTime: 300,
  149. value: 0,
  150. min: 0,
  151. max: 100,
  152. decimals: 2,
  153. formatNumber: true,
  154. humanFriendly: false,
  155. levelColors: [
  156. '#999999',
  157. '#993333'
  158. ]
  159. })
  160. })
  161. function updateGauge(gauge, value) {
  162. // Alway use next power of 2 as maximum
  163. var max = Math.max(Math.pow(2, Math.ceil(Math.log2(value))), gauge.config.max)
  164. // Refresh the gauge
  165. gauge.refresh(value, max)
  166. }
  167. </script>
  168. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Roboto:400,500,700" rel="stylesheet">
  169. </head>
  170. <body>
  171. <h1>Speed Test</h1>
  172. <div id="testArea">
  173. <div class="meter" id="ggdl"></div>
  174. <div class="meter" id="ggul"></div>
  175. <div class="meter" id="ggping"></div>
  176. <div class="meter" id="ggjitter"></div>
  177. </div>
  178. <div id="ip"></div>
  179. <div>
  180. <a href="javascript:runTest()" id="startBtn" class="button">Start</a>
  181. <a href="javascript:abortTest()" id="abortBtn" class="button" style="display:none;">Abort</a>
  182. </div>
  183. <p>Fonts: <a href="https://fonts.google.com/">Google Fonts</a> | Gauges: <a href="http://justgage.com/">justgage.com</a></p>
  184. </body>
  185. </html>