From fc6090e235819c52b0600e4390a96557d7b17dae Mon Sep 17 00:00:00 2001 From: deb-cod Date: Mon, 29 Jul 2024 12:15:53 +0530 Subject: [PATCH 1/4] patch for upload speed color --- docker/standalone.php | 10 +++++++++- index.html | 11 +++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/docker/standalone.php b/docker/standalone.php index 02ef11254..7dc38c9e5 100755 --- a/docker/standalone.php +++ b/docker/standalone.php @@ -52,6 +52,14 @@ function classifySpeed(value) { if (value >= 10) return 2; return 1; + } + + function classifySpeedUl(value) { + if (value=="") return 0; + if (value > 20) return 3; + if (value >= 5) return 2; + return 1; + } function updateDlColor(value) { @@ -76,7 +84,7 @@ function updateDlColor(value) { function updateUlColor(value) { const ul_text_element = document.getElementById("ulText"); - const speed_classification = classifySpeed(value); + const speed_classification = classifySpeedUl(value); switch (speed_classification){ case 3: ul_text_element.style.color = "#16A34A"; diff --git a/index.html b/index.html index fde7f2d11..0f91b07bc 100755 --- a/index.html +++ b/index.html @@ -45,6 +45,14 @@ if (value >= 10) return 2; return 1; + } + + function classifySpeedUl(value) { + if (value=="") return 0; + if (value > 20) return 3; + if (value >= 5) return 2; + return 1; + } function updateDlColor(value) { @@ -69,7 +77,7 @@ function updateUlColor(value) { const ul_text_element = document.getElementById("ulText"); - const speed_classification = classifySpeed(value); + const speed_classification = classifySpeedUl(value); switch (speed_classification){ case 3: ul_text_element.style.color = "#16A34A"; @@ -202,7 +210,6 @@ updateUlColor(uiData.ulStatus); } - updatePingColor(uiData.pingStatus); updateJitterColor(uiData.jitterStatus); From 17f4ea8b7dbe881a39338892e56ad6ed62e60ff9 Mon Sep 17 00:00:00 2001 From: deb-cod Date: Mon, 29 Jul 2024 14:45:22 +0530 Subject: [PATCH 2/4] change in function name to avoid confusio from review --- docker/standalone.php | 4 ++-- index.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docker/standalone.php b/docker/standalone.php index 7dc38c9e5..a155b9af6 100755 --- a/docker/standalone.php +++ b/docker/standalone.php @@ -54,7 +54,7 @@ function classifySpeed(value) { } - function classifySpeedUl(value) { + function classifySpeedUpload(value) { if (value=="") return 0; if (value > 20) return 3; if (value >= 5) return 2; @@ -84,7 +84,7 @@ function updateDlColor(value) { function updateUlColor(value) { const ul_text_element = document.getElementById("ulText"); - const speed_classification = classifySpeedUl(value); + const speed_classification = classifySpeedUpload(value); switch (speed_classification){ case 3: ul_text_element.style.color = "#16A34A"; diff --git a/index.html b/index.html index 0f91b07bc..c2acc1c40 100755 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@ } - function classifySpeedUl(value) { + function classifySpeedUpload(value) { if (value=="") return 0; if (value > 20) return 3; if (value >= 5) return 2; @@ -77,7 +77,7 @@ function updateUlColor(value) { const ul_text_element = document.getElementById("ulText"); - const speed_classification = classifySpeedUl(value); + const speed_classification = classifySpeedUpload(value); switch (speed_classification){ case 3: ul_text_element.style.color = "#16A34A"; From 3c6b7fabbd59027c7482a09487398e446721cca6 Mon Sep 17 00:00:00 2001 From: deb-cod Date: Mon, 29 Jul 2024 18:09:53 +0530 Subject: [PATCH 3/4] change in formating --- docker/standalone.php | 1247 +++++++++++++++++++++-------------------- index.html | 1103 ++++++++++++++++++------------------ 2 files changed, 1178 insertions(+), 1172 deletions(-) diff --git a/docker/standalone.php b/docker/standalone.php index a155b9af6..d0a8d2353 100755 --- a/docker/standalone.php +++ b/docker/standalone.php @@ -8,639 +8,640 @@ - - - - - - Talview Speedtest + function I(i){return document.getElementById(i);} + //INITIALIZE SPEED TEST + var s=new Speedtest(); //create speed test object + + s.setParameter("telemetry_level","basic"); + + + s.setParameter("getIp_ispInfo",false); + + + s.setParameter("getIp_ispInfo_distance",""); + + + var s = new Speedtest(); //create speedtest object + s.setParameter("telemetry_level", "basic"); //enable telemetry + + var meterBk = /Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent) ? "#EAEAEA" : "#80808040"; + var dlColor = "#6060AA", + ulColor = "#616161"; + var progColor = meterBk; + + + function mbpsToAmount(s) { + return 1 - (1 / (Math.pow(1.3, Math.sqrt(s)))); + } + function format(d) { + d = Number(d); + if (d < 10) return d.toFixed(2); + if (d < 100) return d.toFixed(1); + return d.toFixed(0); + } + + + // 3: Good + // 2: Average + // 1: Poor + // "": Empty + + function classifySpeed(value) { + if (value == "") return 0; + if (value > 50) return 3; + if (value >= 10) return 2; + return 1; + + } + + function classifySpeedUpload(value) { + if (value == "") return 0; + if (value > 20) return 3; + if (value >= 5) return 2; + return 1; + + } + + function updateDlColor(value) { + const dl_text_element = document.getElementById("dlText"); + const speed_classification = classifySpeed(value); + + switch (speed_classification) { + case 3: dl_text_element.style.color = "#16A34A"; + break; + case 2: dl_text_element.style.color = "#CA8A04"; + break; + case 1: dl_text_element.style.color = "#DC2626"; + break; + case 0: dl_text_element.style.color = "#111827"; + break; + + default: dl_text_element.style.color = "#111827"; + } + } + + function updateUlColor(value) { + const ul_text_element = document.getElementById("ulText"); + const speed_classification = classifySpeedUpload(value); + + switch (speed_classification) { + case 3: ul_text_element.style.color = "#16A34A"; + break; + case 2: ul_text_element.style.color = "#CA8A04"; + break; + case 1: ul_text_element.style.color = "#DC2626"; + break; + case 0: ul_text_element.style.color = "#111827"; + break; + + default: ul_element.style.color = "#111827"; + } + } + + function classifyPing(value) { + if (value == "") return 0; + if (value > 100) return 1; + if (value >= 20) return 2; + return 3; + } + + function updatePingColor(value) { + const ping_element = document.getElementById("pingText"); + const ping_classification = classifyPing(value) + + + switch (ping_classification) { + case 3: ping_element.style.color = "#16A34A"; + break; + case 2: ping_element.style.color = "#CA8A04"; + break; + case 1: ping_element.style.color = "#DC2626"; + break; + case 0: ping_element.style.color = "#111827"; + break; + + default: ping_element.style.color = "#111827"; + } + } + + function classifyJitter(value) { + if (value == "") return 0; + if (value > 20) return 1; + if (value >= 5) return 2; + return 3; + } + + function updateJitterColor(value) { + const jitter_element = document.getElementById("jitText"); + const jitter_classification = classifyJitter(value); + + // jitter_classification === 2?jitter_element.style.color = "#16A34A":(jitter_classification === 1?jitter_element.style.color = "#CA8A04":jitter_element.style.color = "#DC2626"); + + switch (jitter_classification) { + case 3: jitter_element.style.color = "#16A34A"; + break; + case 2: jitter_element.style.color = "#CA8A04"; + break; + case 1: jitter_element.style.color = "#DC2626"; + break; + case 0: jitter_element.style.color = "#111827"; + break; + + default: jitter_element.style.color = "#111827"; + } + } + + //UI CODE + var uiData = null; + function startStop() { + if (s.getState() == 3) { + //speedtest is running, abort + s.abort(); + data = null; + I("startStopBtn").className = ""; + initUI(); + } else { + //test is not running, begin + I("startStopBtn").className = "running"; + I("shareArea").style.display = "none"; + s.onupdate = function (data) { + uiData = data; + }; + s.onend = function (aborted) { + I("startStopBtn").className = ""; + updateUI(true); + if (!aborted) { + //if testId is present, show sharing panel, otherwise do nothing + // I("startStopBtn").textContent = "Try Again"; + I("startStopBtn").className = "new-class"; + try { + var testId = uiData.testId; + if (testId != null) { + var shareURL = window.location.href.substring(0, window.location.href.lastIndexOf("/")) + "/results/?id=" + testId; + console.log("ShareURL: ", shareURL); + // I("resultsImg").src = shareURL; + I("resultsURL").value = shareURL; + I("testId").innerHTML = testId; + I("shareArea").style.display = ""; + } + } catch (e) { } + } + }; + s.start(); + } + } + //this function reads the data sent back by the test and updates the UI + function updateUI(forced) { + if (!forced && s.getState() != 3) return; + if (uiData == null) return; + var status = uiData.testState; + // I("ip").textContent = uiData.clientIp; + + I("dlText").textContent = (status == 1 && uiData.dlStatus == 0) ? "..." : format(uiData.dlStatus); + // drawMeter(I("dlMeter"), mbpsToAmount(Number(uiData.dlStatus * (status == 1 ? oscillate() : 1))), meterBk, dlColor, Number(uiData.dlProgress), progColor); + I("ulText").textContent = (status == 3 && uiData.ulStatus == 0) ? "..." : format(uiData.ulStatus); + // drawMeter(I("ulMeter"), mbpsToAmount(Number(uiData.ulStatus * (status == 3 ? oscillate() : 1))), meterBk, ulColor, Number(uiData.ulProgress), progColor); + I("pingText").textContent = format(uiData.pingStatus); + I("jitText").textContent = format(uiData.jitterStatus); + + if (status == 1) { + updateDlColor(uiData.dlStatus); + // updateDlColor(30, "download"); + } else if (status == 3) { + updateUlColor(uiData.ulStatus); + } else { + updateDlColor(uiData.dlStatus); + updateUlColor(uiData.ulStatus); + } + + updatePingColor(uiData.pingStatus); + updateJitterColor(uiData.jitterStatus); + + } + function oscillate() { + return 1 + 0.02 * Math.sin(Date.now() / 100); + } + //update the UI every frame + window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || (function (callback, element) { setTimeout(callback, 1000 / 60); }); + function frame() { + requestAnimationFrame(frame); + updateUI(); + } + frame(); //start frame loop + //function to (re)initialize UI + function initUI() { + I("dlText").textContent = ""; + I("ulText").textContent = ""; + I("pingText").textContent = ""; + I("jitText").textContent = ""; + } + + + + + + +Talview Speedtest -
-
-
+
+
+
-
- -
- -
Internet Speed Test
- - - -
- -
-
-
Ping
-
-
ms
-
-
-
Jitter
-
-
ms
-
-
-
-
-
Download
- -
-
Mbit/s
-
-
-
Upload
- -
-
Mbit/s
-
-
- -
- - - - - - -
- -
-
- - - - - +
-
+
+
Internet Speed Test
+ +
+ +
+
+
Ping
+
+
ms
+
+
+
Jitter
+
+
ms
+
- +
+
+
Download
+ +
+
Mbit/s
+
+
+
Upload
+ +
+
Mbit/s
+
+
+ +
+ + + + + + +
+ +
+
+ + + + + + +
+ + + +
+ diff --git a/index.html b/index.html index c2acc1c40..2bf62bccf 100755 --- a/index.html +++ b/index.html @@ -2,637 +2,642 @@ - - - - + + + + - + } + function classifyPing(value) { + if (value == "") return 0; + if (value > 100) return 1; + if (value >= 20) return 2; + return 3; + } - - div.testArea, div.testArea2 { - display: flex; - width:100%; - max-width: 250px; - padding: 24px 33px 24px 24px; - flex-direction: column; - align-items: flex-start; - gap: 12px; +Talview Speedtest + - border-radius: 16px; - border: 1px solid var(--Monochrome-Grey-7, #D1D5DB); - background: var(--Monochrome-White, #FFF); - } + - #testWrapper { - display: flex; - flex-direction: column; - } +
+
+
- .title-class{ - display:flex; - top: 3.6%; - color: #1F2937; - font-family: Roboto; - font-size: 32px; - font-style: normal; - font-weight: 600; - line-height: normal; - } +
- div.testName { - color: var(--Monochrome-Grey-4, #4B5563); - font-family: Roboto; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - } +
+
Internet Speed Test
- div.meterText { - color: var(--Gray-900, #111827); - font-family: Roboto; - font-size: 30px; - font-style: normal; - font-weight: 600; - line-height: 36px; - } - div.meterText:empty:before { - content: "0.00"; - - } + +
- div.unit { - color: var(--Monochrome-Grey-4, #4B5563); - font-family: Roboto; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; +
+
+
Ping
+
+
ms
+
+
+
Jitter
+
+
ms
+
+
+
+
+
Download
- } +
+
Mbit/s
+
+
+
Upload
+ +
+
Mbit/s
+
+
- #shareArea { - padding-top: 20px; - width: 95%; - max-width: 40em; - margin: 0 auto; - border-radius: 8px; - } +
- #shareArea>* { - display: block; - width: 100%; - height: auto; - margin: 0.25em 0; - } + - @media (max-width: 768px) { - .testGroup { - flex-direction: row; - gap: 12px; - } - - } - - @media (max-width: 750px) { - .container .testArea, - .container .testArea2 { - padding: 12px; - border-radius: 8px; - gap: 6px; - } - .container .title-class { - font-size: 24px; - } - .container { - padding: 10px; - } - } +
- @media (max-height: 620px){ - .child-container{ - height:auto; - } - } - +
+
- Talview Speedtest - - -
-
-
-
- -
- -
Internet Speed Test
- - - -
- -
-
-
Ping
-
-
ms
-
-
-
Jitter
-
-
ms
-
-
-
-
-
Download
- -
-
Mbit/s
-
-
-
Upload
- -
-
Mbit/s
-
-
- -
- - - - - - -
- -
-
- - - - - -
- + +
+ From 779e7ca25e78dada6b9de96d76d04be87f997e70 Mon Sep 17 00:00:00 2001 From: deb-cod Date: Wed, 25 Sep 2024 19:15:37 +0530 Subject: [PATCH 4/4] UI Color patch and added verbiage --- docker/standalone.php | 1357 +++++++++++++++++++++------------------- index.html | 1377 ++++++++++++++++++++++------------------- 2 files changed, 1458 insertions(+), 1276 deletions(-) diff --git a/docker/standalone.php b/docker/standalone.php index d0a8d2353..ed714faf8 100755 --- a/docker/standalone.php +++ b/docker/standalone.php @@ -1,648 +1,737 @@ + - - - - - - - - - - - - -Talview Speedtest + + + + + + + + + + + Talview Speedtest - -
-
-
- -
- -
- -
Internet Speed Test
- - - -
- -
-
-
Ping
-
-
ms
-
-
-
Jitter
-
-
ms
+
+
+
-
-
-
Download
-
-
Mbit/s
+
+
+
Internet Speed Test
+ +
+

+ Before you begin your assessment or interview, please ensure your + internet connection meets the minimum requirement for a smooth + experience: +

+
    +
  1. Click “Start” to check your current network performance.
    2. +
  2. + Once the test is complete, review the results displayed on the + screen. +
    3. +
  3. + Ensure all network metrics meet the requirements listed above. +
    4. +
+
+ + +
+
+
+
+
Ping
+
+
+
ms
+
+
+

Recommended: 50ms

+
+ +
+
+
Jitter
+
+
+
ms
+
+
+

Recommended: 30ms

+
+
+
+
+
+
Download
+
+
+
Mbps
+
+
+

Minimum: 5 Mbps

+
+ +
+
+
Upload
+
+
+
Mbps
+
+
+

Minimum: 5 Mbps

+
+
+
+ + + +
+
+
+ +
-
-
Upload
- -
-
Mbit/s
-
-
- -
- - - - - - -
- -
-
- - - - - - -
- - - -
- - + \ No newline at end of file diff --git a/index.html b/index.html index 2bf62bccf..7cca020c0 100755 --- a/index.html +++ b/index.html @@ -1,644 +1,737 @@ - - - - - - - - - - - - - -Talview Speedtest - - - - -
-
-
- -
- -
- -
Internet Speed Test
- - - -
- -
-
-
Ping
-
-
ms
-
-
-
Jitter
-
-
ms
-
-
-
-
-
Download
- -
-
Mbit/s
-
-
-
Upload
- -
-
Mbit/s
-
-
- -
- - - - - - -
- -
-
- - - - - - -
- - - -
- - - - - \ No newline at end of file + + + + + + + + + + + Talview Speedtest + + + +
+
+ +
+
+ +
+
+
Internet Speed Test
+ +
+

+ Before you begin your assessment or interview, please ensure your + internet connection meets the minimum requirement for a smooth + experience: +

+
    +
  1. Click "Start" to check your current network performance.
    2. +
  2. + Once the test is complete, review the results displayed on the + screen. +
    3. +
  3. + Ensure all network metrics meet the requirements listed above. +
    4. +
+
+ + +
+
+
+
+
Ping
+
+
+
ms
+
+
+

Recommended: 50ms

+
+ +
+
+
Jitter
+
+
+
ms
+
+
+

Recommended: 30ms

+
+
+
+
+
+
Download
+
+
+
Mbps
+
+
+

Minimum: 5 Mbps

+
+ +
+
+
Upload
+
+
+
Mbps
+
+
+

Minimum: 5 Mbps

+
+
+
+ + + +
+
+
+ + +
+
+ + +