Added raw page for webserver

2018-10-08 23:36:29 +02:00 · 2018-10-08 23:36:29 +02:00 · 77c7f20eae
commit 77c7f20eae
--- a/decoder/html/Raw.class.php
+++ b/decoder/html/Raw.class.php
@ -0,0 +1,11 @@
+<?php
+class Raw {
+	function __construct($sqlResult) {
+		$this->rxtime = (int)$sqlResult['rxtime'];
+		$this->call = $sqlResult['call'];
+		$this->data = $sqlResult['data'];
+		$this->meta = json_decode($sqlResult['meta']);
+	}
+}
+?>
+
--- a/decoder/html/Tracker.class.php
+++ b/decoder/html/Tracker.class.php
@ -2,6 +2,7 @@
 require_once "Database.class.php";
 require_once "Telemetry.class.php";
 require_once "Image.class.php";
+require_once "Raw.class.php";

 class Tracker {

@ -113,6 +114,32 @@ class Tracker {

 		return $datasets;
 	}
+	function getRaw($from, $to=NULL) {
+		if(is_null($to))
+			$to = time() + 1;
+
+		if($from > $to)
+			return array(); // Error $from is larger than $to
+
+		if($to - $from > 64281600)
+			$from = $to - 64281600; // Max. 744 days (2 non leap years + 14 weeks)
+
+		$query = Database::getInstance()->query("
+			SELECT *
+			FROM `raw`
+			WHERE " . intval($from) . " <= `rxtime`
+			AND `rxtime` <= " . intval($to) . "
+			AND `call` = '" . Database::getInstance()->escape_string($this->call) . "'
+			ORDER BY `rxtime` ASC
+		");
+
+		$datasets = array();
+		while($row = $query->fetch_assoc()) {
+			$datasets[] = new Raw($row);
+		}
+
+		return $datasets;
+	}
 	function getPacketCount() {
 		$query = Database::getInstance()->query("SELECT *
 			FROM (
--- a/decoder/html/ajax/telemetry.php
+++ b/decoder/html/ajax/telemetry.php
@ -9,6 +9,7 @@ header("Content-Type: application/json");
 $tracker = new Tracker($_GET['call']);
 echo json_encode(array(
 	"telemetry"    => $tracker->getTelemetry($_GET['from']),
+	"raw"          => isset($_GET['withraw']) ? $tracker->getRaw($_GET['from']) : "[]",
 	"images"       => $tracker->getPictures($_GET['from']),
 	"lastActivity" => $tracker->getLastActivity(),
 	"packetCount"  => $tracker->getPacketCount(),
--- a/decoder/html/images.php
+++ b/decoder/html/images.php
@ -18,29 +18,10 @@ function loadImages() {

 <?php
 include "sidebar.inc.php";
+include "topbar.inc.php";
 ?>

-<table>
-	<tr>
-		<td>
-			&nbsp;Range:
-			<a href="?call=<?=$_GET['call']?>&range=3600">1h</a>
-			<a href="?call=<?=$_GET['call']?>&range=10800">3h</a>
-			<a href="?call=<?=$_GET['call']?>&range=21600">6h</a>
-			<a href="?call=<?=$_GET['call']?>&range=43200">12h</a>
-			<a href="?call=<?=$_GET['call']?>&range=86400">24h</a>
-			<a href="?call=<?=$_GET['call']?>&range=172800">2d</a>
-			<a href="?call=<?=$_GET['call']?>&range=259200">3d</a>
-			<a href="?call=<?=$_GET['call']?>&range=432000">5d</a>
-			<a href="?call=<?=$_GET['call']?>&range=604800">7d</a>
-			<a href="?call=<?=$_GET['call']?>&range=1209600">14d</a>
-			<a href="?call=<?=$_GET['call']?>&range=1814400">21d</a>
-			<a href="?call=<?=$_GET['call']?>&range=2592000">30d</a>
-		</td>
-	</tr>
-</table>
-
-<div style="width:1330px;float:left;" id="images"></div>
+<div id="images"></div>

 </body>
 </html>
--- a/decoder/html/raw.php
+++ b/decoder/html/raw.php
@ -0,0 +1,32 @@
+<?php
+include "header.inc.php";
+?>
+<script type="text/javascript">
+
+lastrxtime = <?=time()-$range?>;
+range = <?=$range?>;
+call = '<?=$_GET['call']?>';
+filter = '<?=$_GET['filter']?>';
+
+function loadImages() {
+	updateData(true);
+	setInterval(function(){updateData(true);}, 1000);
+}
+</script>
+<script type="text/javascript" src="script.js"></script>
+</head>
+<body onload="loadImages()">
+
+<?php
+include "sidebar.inc.php";
+include "topbar.inc.php";
+?>
+
+<div style="width:1330px;float:left;" id="raw"></div>
+
+</body>
+</html>
+<?php
+include "footer.inc.php";
+?>
+
--- a/decoder/html/script.js
+++ b/decoder/html/script.js
@ -12,6 +12,7 @@ var scroll = {axis: 'horizontal', keepInBounds: true, maxZoomIn: 20.0};
 var lastChartUpdate = 0;
 var last = null;
 var init = false;
+var lastraw = null;

 // Chart 1
 var batteryChart;
@ -283,14 +284,23 @@ function time_ago(time) {
 		return Math.floor(time/3600) + "h" + Math.floor((time/60)%60) + "m ago";
 }

-function time_format(time) {
+function time_format(time, date) {
 	if(time == undefined)
-		return "never";
+		return "undefined";

-	if(time < 3600)
-		return Math.floor(time/60) + "m" + (time%60) + "s ago";
-	else
-		return Math.floor(time/3600) + "h" + Math.floor((time/60)%60) + "m ago";
+	var t = new Date(time);
+	var h = ('0' + t.getUTCHours()).slice(-2);
+	var m = ('0' + t.getUTCMinutes()).slice(-2);
+	var i = ('0' + t.getUTCSeconds()).slice(-2);
+
+	if(!date) {
+		return h + ':' + m + ':' + i;
+	} else {
+		var y = t.getUTCFullYear();
+		var m = ('0' + t.getUTCMonth()).slice(-2);
+		var d = ('0' + t.getUTCDay()).slice(-2);
+		return y + '-' + m + '-' + d + ' ' + h + ':' + m + ':' + i;
+	}
 }

 function get_alt(p) {
@ -308,7 +318,7 @@ function get_alt(p) {
 	return p_height;
 }

-function updateData() {
+function updateData(withraw = false) {

 	if(!init && typeof google !== 'undefined') {
 		// Chart 1
@ -387,14 +397,17 @@ function updateData() {
 		init = true;
 	}

-	$.getJSON("ajax/telemetry.php?call=" + call + "&from=" + lastrxtime, function(json) {
+	withraw = withraw ? '&withraw=1' : '';
+	$.getJSON("ajax/telemetry.php?call=" + call + "&from=" + lastrxtime + withraw, function(json) {

 		images = json['images'];
 		tel = json['telemetry'];
+		raw = json['raw'];

 		// Update telemetry
 		if(tel.length) {
-			lastrxtime = tel[tel.length-1].rxtime+1;
+			if(lastrxtime < tel[tel.length-1].rxtime+1)
+				lastrxtime = tel[tel.length-1].rxtime+1;

 			$.each(tel[tel.length-1], function(key, d) {
 				switch(key) {
@ -694,7 +707,8 @@ function updateData() {

 		// Update images
 		if(images.length) {
-			lastrxtime = images[images.length-1].time_last+1;
+			if(lastrxtime < images[images.length-1].time_last+1)
+				lastrxtime = images[images.length-1].time_last+1;

 			$.each(images, function(key, data) {
 				// Remove old div
@ -703,7 +717,7 @@ function updateData() {
 				// Process images
 				$('#images').prepend("<div class=\"pic\" id=\"img_" + data['id'] + "\">"
 				 + "<img src=\"images/" + data['call'].replace('-','') + "-" + data['id'] + ".jpg?packetID=" + data['packetID'] + "\"><br>"
-				 + "Last packet " + time_format(json['time']-data['time_last']) + ", " + number_format(data['count']) + " packets, "
+				 + "Last packet " + time_format(json['time']-data['time_last'], false) + ", " + number_format(data['count']) + " packets, "
 				 + number_format(data['packetID']-data['count']+1) + " lost" + "<br>ImageID " + number_format(data['imageID']) + ", ServerID "
 				 + number_format(data['id']) + "</div>");
 			});
@ -713,6 +727,45 @@ function updateData() {
 				+ "<img src=\"images/" + images[images.length-1]['call'].replace('-','') + "-" + images[images.length-1]['id'] + ".jpg?packetID=" + data['packetID'] + "\"></a>");
 		}

+		// Update raw
+		if(raw.length) {
+			if(lastrxtime < raw[raw.length-1].rxtime+1)
+				lastrxtime = raw[raw.length-1].rxtime+1;
+
+			$.each(raw, function(key, data) {
+				// Filter
+				if((filter != '' && data['meta'].type != filter) || !data['meta'].type)
+					return;
+
+				// Process raw packet
+				if(lastraw != null && data.rxtime-lastraw >= 20) {
+					$('#raw').prepend("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&darr;<br>");
+					$('#raw').prepend("Gap " + (data.rxtime-lastraw) + " seconds<br>");
+					$('#raw').prepend("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;<br>");
+				}
+
+				if(data['meta'] != null) {
+					var meta = "";
+					switch(data['meta'].type) {
+						case 'img':
+							meta += " <b>Image packet</b> ";
+							meta += data['meta'].error ? "Error: " + data['meta'].error + "<br>" : "<i>No error</i><br>";
+							meta += "<b>Meta:</b> imageID=" + data['meta'].imageID + " packetID=" + data['meta'].packetID + " serverID=" + data['meta'].serverID;
+							break;
+						case 'pos':
+							meta += " <b>Position packet</b><br>";
+							meta += "<b>Meta:</b> reset=" + data['meta'].reset + " id=" + data['meta'].id;
+							break;
+					}
+					$('#raw').prepend("<p class=\"bluish raw\"><b>" + time_format(data['rxtime']*1000, true) + "</b>" + meta + "<br style=\"margin-bottom:8px;\">" + data['data'].replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</p>");
+				} else {
+					$('#raw').prepend("<p class=\"bluish raw\"><b>" + time_format(data['rxtime']*1000, true) +  "</b> <i>no meta data from server</i><br>" + data['data'] + "</p>");
+				}
+
+				lastraw = data.rxtime;
+			});
+		}
+
 	});

 }
--- a/decoder/html/sidebar.inc.php
+++ b/decoder/html/sidebar.inc.php
@ -30,10 +30,11 @@
 			$amonthago = true;
 		}

-		echo "<div class=\"call\">
+		echo "<div class=\"bluish\">
 		<b><a href=\"telemetry.php?call=" . $tr->getCall() . "\">" . $tr->getCall() . "</a> ...
 		<a href=\"map.php?call=" . $tr->getCall() . "\">Map</a>
-		<a href=\"images.php?call=" . $tr->getCall() . "\">Images</a></b><br>
+		<a href=\"images.php?call=" . $tr->getCall() . "\">Images</a>
+		<a href=\"raw.php?call=" . $tr->getCall() . "\">Raw</a></b><br>
 		Last Activity: " . time_format($act) . "<br>";

 		if($act <= 3600) {
--- a/decoder/html/style.css
+++ b/decoder/html/style.css
@ -8,11 +8,14 @@ html, body {
 	margin: 3px;
 	border: solid 1px #666666;
 }
-.call {
+.bluish {
 	background-color: #ccdaec;
 	padding: 5px;
 	margin: 4px 0;
 }
+.raw {
+	overflow-wrap: break-word;
+}
 a {
 	text-decoration: none;
 }
@ -58,7 +61,9 @@ telemetry div img {
 }

 .wrapper {
-	display: flex;  
+	display: flex;
+	width: 1330px;
+	float: left;
 	flex-flow: row wrap;
 }
 .subheader {
@ -69,19 +74,25 @@ telemetry div img {
 	background-color: #ccdaec;
 }

-.wrapper > * {
-	flex: 1 100%;
+.wrapper {
+	width: calc(100vw - 280px);
+	float: left;
 }

 telemetry {
 	width: 600px;
-	margin: 0;
 }

 .side {
 	padding: 3px;
 }

+.bigright {
+	width: calc(100vw - 302px);
+	float: left;
+	padding: 3px;
+}
+
@media all and (min-width: 800px) {
 	.side { order: 1; width: 250px; float: left; }
 	.telemetry { order: 2; flex: 3 0px; min-width: 456px; max-width: 456px; }
--- a/decoder/html/telemetry.php
+++ b/decoder/html/telemetry.php
@ -28,6 +28,7 @@ google.charts.setOnLoadCallback(drawChart);

 <?php
 include "sidebar.inc.php";
+include "topbar.inc.php";
 ?>


@ -163,22 +164,6 @@ include "sidebar.inc.php";
 			</table>
 		</div>
 	</telemetry>
-	<div class="range">
-		&nbsp;Range:
-		<a href="?call=<?=$_GET['call']?>&range=3600">1h</a>
-		<a href="?call=<?=$_GET['call']?>&range=10800">3h</a>
-		<a href="?call=<?=$_GET['call']?>&range=21600">6h</a>
-		<a href="?call=<?=$_GET['call']?>&range=43200">12h</a>
-		<a href="?call=<?=$_GET['call']?>&range=86400">24h</a>
-		<a href="?call=<?=$_GET['call']?>&range=172800">2d</a>
-		<a href="?call=<?=$_GET['call']?>&range=259200">3d</a>
-		<a href="?call=<?=$_GET['call']?>&range=432000">5d</a>
-		<a href="?call=<?=$_GET['call']?>&range=604800">7d</a>
-		<a href="?call=<?=$_GET['call']?>&range=1209600">14d</a>
-		<a href="?call=<?=$_GET['call']?>&range=1814400">21d</a>
-		<a href="?call=<?=$_GET['call']?>&range=2592000">30d</a>
-	</div>
-
 	<div class="inner chart">
 		<div class="subheader">Power</div>
 		<div id="batteryDiv"></div>
--- a/decoder/html/topbar.inc.php
+++ b/decoder/html/topbar.inc.php
@ -0,0 +1,31 @@
+<div class="inner bigright">
+	<table>
+		<tr>
+			<td>Range:</td>
+			<td>
+				<?php
+				$ranges = array(600,1800,3600,10800,21600,43200,86400,259200,604800,2592000);
+				foreach($ranges as $r)
+					echo "<a href=\"?call=$_GET[call]&range=" . $r . (isset($_GET['filter']) ? "&filter=" . $_GET['filter'] : "") . "\">" . ($r < 3600 ? ($r/60)."m" : ($r <= 86400 ? ($r/3600)."h" : ($r/86400)."d")) . "</a> ";
+				?>
+			</td>
+		</tr>
+		<?php
+		if(explode(".php", $_SERVER['REQUEST_URI'])[0] == "/raw") {
+		?>
+		<tr>
+			<td>Packet Type Filter:</td>
+			<td>
+				<?php
+				$filters = array("pos", "dir", "img", "log");
+				foreach($filters as $f)
+					echo "<a href=\"?call=$_GET[call]&range=$_GET[range]&filter=$f\">" . strtoupper($f) . "</a> ";
+				echo "<a href=\"?call=$_GET[call]&range=$_GET[range]\">none</a> ";
+				?>
+			</td>
+		</tr>
+		<?php
+		}
+		?>
+	</table>
+</div>