From ebd016977339e896f73346be5997ecd031e38c9c Mon Sep 17 00:00:00 2001
From: lesteff <sgrosser@thesky.ch>
Date: Tue, 28 Nov 2017 16:04:18 +0100
Subject: [PATCH] Create example-telemetryEnabled_andHistory.html

Another Example with Speedtest history (from json)
---
 example-telemetryEnabled_andHistory.html | 246 +++++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 example-telemetryEnabled_andHistory.html
diff --git a/example-telemetryEnabled_andHistory.html b/example-telemetryEnabled_andHistory.html
new file mode 100644
index 0000000..10a6643
--- /dev/null
+++ b/example-telemetryEnabled_andHistory.html
@@ -0,0 +1,246 @@
+<!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>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+<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:#98A84A;
+		background-color:rgba(0,0,0,0);
+		border:0.15em solid #98A84A;
+		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:#98A84A;
+	}
+	#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;
+		}
+	}
+	#speedhtml-history-container table {
+		margin: 0 auto;
+	}
+	#speedhtml-history-container  th, td {
+	    text-align: left;
+	    padding: 4px;
+	}
+	#speedhtml-history-container  tr:nth-child(even){background-color: #f1f1f1}
+
+	#speedhtml-history-container  th {
+	    background-color: #DEE3C5;
+	}
+
+</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 {"telemetry_level":"basic"}'); //Add optional parameters (see doc.md)
+		I("startStopBtn").className="running";
+		w.onmessage=function(e){
+			var data=e.data.split(';');
+			var status=Number(data[0]);
+			if(status>=4){
+				//test completed
+				I("startStopBtn").className="";
+				w=null;
+			}
+			I("ip").textContent=data[4];
+			I("dlText").textContent=(status==1&&data[1]==0)?"...":data[1];
+			I("ulText").textContent=(status==3&&data[2]==0)?"...":data[2];
+			I("pingText").textContent=data[3];
+			I("jitText").textContent=data[5];
+		};
+	}
+}
+//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="";
+}
+$.getJSON("telemetry_history.php",             function (data) {
+	//Headers
+        var col = [];
+        for (var i = 0; i < data.length; i++) {
+            for (var key in data[i]) {
+                if (col.indexOf(key) === -1) {
+                    col.push(key);
+                }
+            }
+        }
+
+        var table = document.createElement("table");
+
+        var tr = table.insertRow(-1);                   // TABLE ROW.
+
+        for (var i = 0; i < col.length; i++) {
+            var th = document.createElement("th");      // TABLE HEADER.
+            th.innerHTML = col[i];
+            tr.appendChild(th);
+        }
+        for (var i = 0; i < data.length; i++) {
+
+            tr = table.insertRow(-1);
+
+            for (var j = 0; j < col.length; j++) {
+                var tabCell = tr.insertCell(-1);
+                tabCell.innerHTML = data[i][col[j]];
+            }
+        }
+        var divContainer = document.getElementById("speedhtml-history-container");
+        divContainer.innerHTML = "";
+        divContainer.appendChild(table);
+        });
+</script>
+</head>
+<body>
+<h1>HTML5 Speedtest - Telemetry example</h1>
+<div id="startStopBtn" onclick="startStop()"></div>
+<div id="test">
+	<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>
+
+	<h2>HTML5 Speedtest - History</h2>
+	<div id="speedhtml-history-container">
+	</div>
+
+
+</div>
+
+<div>Basic telemetry is active; results will be saved in your database, without the full log. If the results don't appear, check the settings in telemetry.php</div>
+<a href="https://github.com/adolfintel/speedtest">Source code</a>
+<script type="text/javascript">initUI();</script>
+</body>
+</html>
