customized frontend

speedtest/Dockerfile

@@ -1 +1,5 @@
-FROM adolfintel/speedtest
+FROM php:5.6-apache
+
+COPY ./speedtest /var/www/html
+
+ENTRYPOINT ["/usr/local/bin/apache2-foreground"]

speedtest/speedtest/empty.php

@@ -0,0 +1,7 @@
+<?php
+header( "HTTP/1.1 200 OK" );
+header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+header("Connection: keep-alive");
+?>

speedtest/speedtest/garbage.php

@@ -0,0 +1,27 @@
+<?php
+// Disable Compression
+@ini_set('zlib.output_compression', 'Off');
+@ini_set('output_buffering', 'Off');
+@ini_set('output_handler', '');
+// Headers
+header('HTTP/1.1 200 OK');
+// Download follows...
+header('Content-Description: File Transfer');
+header('Content-Type: application/octet-stream');
+header('Content-Disposition: attachment; filename=random.dat');
+header('Content-Transfer-Encoding: binary');
+// Never cache me
+header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
+header('Cache-Control: post-check=0, pre-check=0', false);
+header('Pragma: no-cache');
+// Generate data
+$data=openssl_random_pseudo_bytes(1048576);
+// Deliver chunks of 1048576 bytes
+$chunks=isset($_GET['ckSize']) ? intval($_GET['ckSize']) : 4;
+if(empty($chunks)){$chunks = 4;}
+if($chunks>100){$chunks = 100;}
+for($i=0;$i<$chunks;$i++){
+    echo $data;
+    flush();
+}
+?>

speedtest/speedtest/getIP.php

@@ -0,0 +1,127 @@
+<?php
+/*
+	This script detects the client's IP address and fetches ISP info from ipinfo.io/
+	Output from this script is a JSON string composed of 2 objects: a string called processedString which contains the combined IP, ISP, Contry and distance as it can be presented to the user; and an object called rawIspInfo which contains the raw data from ipinfo.io (will be empty if isp detection is disabled).
+	Client side, the output of this script can be treated as JSON or as regular text. If the output is regular text, it will be shown to the user as is.
+*/
+error_reporting(0);
+$ip = "";
+header('Content-Type: application/json; charset=utf-8');
+if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
+    $ip = $_SERVER['HTTP_CLIENT_IP'];
+} elseif (!empty($_SERVER['X-Real-IP'])) {
+    $ip = $_SERVER['X-Real-IP'];
+} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
+    $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
+    $ip = preg_replace("/,.*/", "", $ip); # hosts are comma-separated, client is first
+} else {
+    $ip = $_SERVER['REMOTE_ADDR'];
+}
+
+$ip = preg_replace("/^::ffff:/", "", $ip);
+
+if ($ip == "::1") { // ::1/128 is the only localhost ipv6 address. there are no others, no need to strpos this
+    echo json_encode(['processedString' => $ip . " - localhost IPv6 access", 'rawIspInfo' => ""]);
+    die();
+}
+if (stripos($ip, 'fe80:') === 0) { // simplified IPv6 link-local address (should match fe80::/10)
+    echo json_encode(['processedString' => $ip . " - link-local IPv6 access", 'rawIspInfo' => ""]);
+    die();
+}
+if (strpos($ip, '127.') === 0) { //anything within the 127/8 range is localhost ipv4, the ip must start with 127.0
+    echo json_encode(['processedString' => $ip . " - localhost IPv4 access", 'rawIspInfo' => ""]);
+    die();
+}
+if (strpos($ip, '10.') === 0) { // 10/8 private IPv4
+    echo json_encode(['processedString' => $ip . " - private IPv4 access", 'rawIspInfo' => ""]);
+    die();
+}
+if (preg_match('/^172\.(1[6-9]|2\d|3[01])\./', $ip) === 1) { // 172.16/12 private IPv4
+    echo json_encode(['processedString' => $ip . " - private IPv4 access", 'rawIspInfo' => ""]);
+    die();
+}
+if (strpos($ip, '192.168.') === 0) { // 192.168/16 private IPv4
+    echo json_encode(['processedString' => $ip . " - private IPv4 access", 'rawIspInfo' => ""]);
+    die();
+}
+if (strpos($ip, '169.254.') === 0) { // IPv4 link-local
+    echo json_encode(['processedString' => $ip . " - link-local IPv4 access", 'rawIspInfo' => ""]);
+    die();
+}
+
+/**
+ * Optimized algorithm from http://www.codexworld.com
+ *
+ * @param float $latitudeFrom
+ * @param float $longitudeFrom
+ * @param float $latitudeTo
+ * @param float $longitudeTo
+ *
+ * @return float [km]
+ */
+function distance($latitudeFrom, $longitudeFrom, $latitudeTo, $longitudeTo) {
+    $rad = M_PI / 180;
+    $theta = $longitudeFrom - $longitudeTo;
+    $dist = sin($latitudeFrom * $rad) * sin($latitudeTo * $rad) + cos($latitudeFrom * $rad) * cos($latitudeTo * $rad) * cos($theta * $rad);
+    return acos($dist) / $rad * 60 * 1.853;
+}
+
+if (isset($_GET["isp"])) {
+    $isp = "";
+	$rawIspInfo=null;
+    try {
+        $json = file_get_contents("https://ipinfo.io/" . $ip . "/json");
+        $details = json_decode($json, true);
+		$rawIspInfo=$details;
+        if (array_key_exists("org", $details)){
+            $isp .= $details["org"];
+			$isp=preg_replace("/AS\d{1,}\s/","",$isp); //Remove AS##### from ISP name, if present
+		}else{
+            $isp .= "Unknown ISP";
+		}
+		if (array_key_exists("country", $details)){
+			$isp .= ", " . $details["country"];
+		}
+        $clientLoc = NULL;
+        $serverLoc = NULL;
+        if (array_key_exists("loc", $details)){
+            $clientLoc = $details["loc"];
+		}
+        if (isset($_GET["distance"])) {
+            if ($clientLoc) {
+                $json = file_get_contents("https://ipinfo.io/json");
+                $details = json_decode($json, true);
+                if (array_key_exists("loc", $details)){
+                    $serverLoc = $details["loc"];
+				}
+                if ($serverLoc) {
+                    try {
+                        $clientLoc = explode(",", $clientLoc);
+                        $serverLoc = explode(",", $serverLoc);
+                        $dist = distance($clientLoc[0], $clientLoc[1], $serverLoc[0], $serverLoc[1]);
+                        if ($_GET["distance"] == "mi") {
+                            $dist /= 1.609344;
+                            $dist = round($dist, -1);
+                            if ($dist < 15)
+                                $dist = "<15";
+                            $isp .= " (" . $dist . " mi)";
+                        }else if ($_GET["distance"] == "km") {
+                            $dist = round($dist, -1);
+                            if ($dist < 20)
+                                $dist = "<20";
+                            $isp .= " (" . $dist . " km)";
+                        }
+                    } catch (Exception $e) {
+                        
+                    }
+                }
+            }
+        }
+    } catch (Exception $ex) {
+        $isp = "Unknown ISP";
+    }
+    echo json_encode(['processedString' => $ip . " - " . $isp, 'rawIspInfo' => $rawIspInfo]);
+} else {
+    echo json_encode(['processedString' => $ip, 'rawIspInfo' => ""]);
+}
+?>

speedtest/speedtest/index.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
+<title>HTML5 Speedtest</title>
+<style type="text/css">
+	html,body{
+		border:none; padding:0; margin:0;
+		background:#FFFFFF;
+		color:#202020;
+	}
+	body{
+		text-align:center;
+		font-family:"Roboto",sans-serif;
+	}
+	h1{
+		color:#404040;
+	}
+	#startStopBtn{
+		display:inline-block;
+		margin:0 auto;
+		color:#6060AA;
+		background-color:rgba(0,0,0,0);
+		border:0.15em solid #6060FF;
+		border-radius:0.3em;
+		transition:all 0.3s;
+		box-sizing:border-box;
+		width:8em; height:3em;
+		line-height:2.7em;
+		cursor:pointer;
+		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
+	}
+	#startStopBtn:hover{
+		box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
+	}
+	#startStopBtn.running{
+		background-color:#FF3030;
+		border-color:#FF6060;
+		color:#FFFFFF;
+	}
+	#startStopBtn:before{
+		content:"Start";
+	}
+	#startStopBtn.running:before{
+		content:"Abort";
+	}
+	#test{
+		margin-top:2em;
+		margin-bottom:12em;
+	}
+	div.testArea{
+		display:inline-block;
+		width:14em;
+		height:9em;
+		position:relative;
+		box-sizing:border-box;
+	}
+	div.testName{
+		position:absolute;
+		top:0.1em; left:0;
+		width:100%;
+		font-size:1.4em;
+		z-index:9;
+	}
+	div.meterText{
+		position:absolute;
+		bottom:1.5em; left:0;
+		width:100%;
+		font-size:2.5em;
+		z-index:9;
+	}
+	#dlText{
+		color:#6060AA;
+	}
+	#ulText{
+		color:#309030;
+	}
+	#pingText,#jitText{
+		color:#AA6060;
+	}
+	div.meterText:empty:before{
+		color:#505050 !important;
+		content:"0.00";
+	}
+	div.unit{
+		position:absolute;
+		bottom:2em; left:0;
+		width:100%;
+		z-index:9;
+	}
+	div.testGroup{
+		display:inline-block;
+	}
+	@media all and (max-width:65em){
+		body{
+			font-size:1.5vw;
+		}
+	}
+	@media all and (max-width:40em){
+		body{
+			font-size:0.8em;
+		}
+		div.testGroup{
+			display:block;
+			margin: 0 auto;
+		}
+	}
+	#progressBar{
+		width:90%;
+		height:0.3em;
+		background-color:#EEEEEE;
+		position:relative;
+		display:block;
+		margin:0 auto;
+		margin-bottom:2em;
+	}
+	#progress{
+		position:absolute;
+		top:0; left:0;
+		height:100%;
+		width:0%;
+		transition: width 2s;
+		background-color:#90BBFF;
+	}
+
+
+</style>
+<script type="text/javascript">
+function I(id){return document.getElementById(id);}
+
+var w=null; //speedtest worker
+function startStop(){
+	if(w!=null){
+		//speedtest is running, abort
+		w.postMessage('abort');
+		w=null;
+		I("startStopBtn").className="";
+		initUI();
+	}else{
+		//test is not running, begin
+		w=new Worker('speedtest_worker.min.js');
+                w.postMessage('start', {
+                  time_dl_max: 20,
+                  time_ul_max: 20,
+                  time_auto: false,
+                  getIp_ispInfo: false,
+                  getIp_ispInfo_distance: false
+                }); //Add optional parameters as a JSON object to this command
+		I("startStopBtn").className="running";
+		w.onmessage=function(e){
+			var data=JSON.parse(e.data);
+			var status=data.testState;
+			if(status>=4){
+				//test completed
+				I("startStopBtn").className="";
+				w=null;
+			}
+			I("ip").textContent=data.clientIp;
+			I("dlText").textContent=(status==1&&data.dlStatus==0)?"...":data.dlStatus;
+			I("ulText").textContent=(status==3&&data.ulStatus==0)?"...":data.ulStatus;
+			I("pingText").textContent=data.pingStatus;
+			I("jitText").textContent=data.jitterStatus;
+			var prog=(Number(data.dlProgress)*2+Number(data.ulProgress)*2+Number(data.pingProgress))/5;
+			I("progress").style.width=(100*prog)+"%";
+		};
+	}
+}
+//poll the status from the worker every 200ms (this will also update the UI)
+setInterval(function(){
+	if(w) w.postMessage('status');
+},200);
+//function to (re)initialize UI
+function initUI(){
+	I("dlText").textContent="";
+	I("ulText").textContent="";
+	I("pingText").textContent="";
+	I("jitText").textContent="";
+	I("ip").textContent="";
+	I("progress").style.width="";
+}
+
+</script>
+</head>
+<body>
+<h1>HTML5 Speedtest</h1>
+<div id="startStopBtn" onclick="startStop()"></div>
+<div id="test">
+	<div id="progressBar"><div id="progress"></div></div>
+	<div class="testGroup">
+		<div class="testArea">
+			<div class="testName">Download</div>
+			<div id="dlText" class="meterText"></div>
+			<div class="unit">Mbps</div>
+		</div>
+		<div class="testArea">
+			<div class="testName">Upload</div>
+			<div id="ulText" class="meterText"></div>
+			<div class="unit">Mbps</div>
+		</div>
+	</div>
+	<div class="testGroup">
+		<div class="testArea">
+			<div class="testName">Ping</div>
+			<div id="pingText" class="meterText"></div>
+			<div class="unit">ms</div>
+		</div>
+		<div class="testArea">
+			<div class="testName">Jitter</div>
+			<div id="jitText" class="meterText"></div>
+			<div class="unit">ms</div>
+		</div>
+	</div>
+	<div id="ipArea">
+		IP Address: <span id="ip"></span>
+	</div>
+</div>
+<a href="https://github.com/adolfintel/speedtest">Source code</a>
+<script type="text/javascript">initUI();</script>
+</body>
+</html>