From 77c7f20eaef27fc319ab32dffaae0d51cb03d413 Mon Sep 17 00:00:00 2001 From: Sven Steudte Date: Mon, 8 Oct 2018 23:36:29 +0200 Subject: [PATCH] Added raw page for webserver --- decoder/html/Raw.class.php | 11 +++++ decoder/html/Tracker.class.php | 27 ++++++++++++ decoder/html/ajax/telemetry.php | 1 + decoder/html/images.php | 23 +--------- decoder/html/raw.php | 32 ++++++++++++++ decoder/html/script.js | 75 ++++++++++++++++++++++++++++----- decoder/html/sidebar.inc.php | 5 ++- decoder/html/style.css | 21 ++++++--- decoder/html/telemetry.php | 17 +------- decoder/html/topbar.inc.php | 31 ++++++++++++++ 10 files changed, 188 insertions(+), 55 deletions(-) create mode 100644 decoder/html/Raw.class.php create mode 100644 decoder/html/raw.php create mode 100644 decoder/html/topbar.inc.php diff --git a/decoder/html/Raw.class.php b/decoder/html/Raw.class.php new file mode 100644 index 00000000..6372868e --- /dev/null +++ b/decoder/html/Raw.class.php @@ -0,0 +1,11 @@ +rxtime = (int)$sqlResult['rxtime']; + $this->call = $sqlResult['call']; + $this->data = $sqlResult['data']; + $this->meta = json_decode($sqlResult['meta']); + } +} +?> + diff --git a/decoder/html/Tracker.class.php b/decoder/html/Tracker.class.php index 7000478d..3b940672 100644 --- 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 ( diff --git a/decoder/html/ajax/telemetry.php b/decoder/html/ajax/telemetry.php index a229f2c7..67137715 100644 --- 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(), diff --git a/decoder/html/images.php b/decoder/html/images.php index 210b8f2e..3a56acc9 100644 --- a/decoder/html/images.php +++ b/decoder/html/images.php @@ -18,29 +18,10 @@ function loadImages() { - - - - -
-  Range: - 1h - 3h - 6h - 12h - 24h - 2d - 3d - 5d - 7d - 14d - 21d - 30d -
- -
+
diff --git a/decoder/html/raw.php b/decoder/html/raw.php new file mode 100644 index 00000000..46d792d1 --- /dev/null +++ b/decoder/html/raw.php @@ -0,0 +1,32 @@ + + + + + + + + +
+ + + + + diff --git a/decoder/html/script.js b/decoder/html/script.js index a0471c09..3a96f8bc 100644 --- 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("
" + "
" - + "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" + "
ImageID " + number_format(data['imageID']) + ", ServerID " + number_format(data['id']) + "
"); }); @@ -713,6 +727,45 @@ function updateData() { + ""); } + // 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("     ↓
"); + $('#raw').prepend("Gap " + (data.rxtime-lastraw) + " seconds
"); + $('#raw').prepend("     ↑
"); + } + + if(data['meta'] != null) { + var meta = ""; + switch(data['meta'].type) { + case 'img': + meta += " Image packet "; + meta += data['meta'].error ? "Error: " + data['meta'].error + "
" : "No error
"; + meta += "Meta: imageID=" + data['meta'].imageID + " packetID=" + data['meta'].packetID + " serverID=" + data['meta'].serverID; + break; + case 'pos': + meta += " Position packet
"; + meta += "Meta: reset=" + data['meta'].reset + " id=" + data['meta'].id; + break; + } + $('#raw').prepend("

" + time_format(data['rxtime']*1000, true) + "" + meta + "
" + data['data'].replace(//g, ">") + "

"); + } else { + $('#raw').prepend("

" + time_format(data['rxtime']*1000, true) + " no meta data from server
" + data['data'] + "

"); + } + + lastraw = data.rxtime; + }); + } + }); } diff --git a/decoder/html/sidebar.inc.php b/decoder/html/sidebar.inc.php index 07eab31c..c13bd61f 100644 --- a/decoder/html/sidebar.inc.php +++ b/decoder/html/sidebar.inc.php @@ -30,10 +30,11 @@ $amonthago = true; } - echo "
+ echo "
getCall() . "\">" . $tr->getCall() . " ... getCall() . "\">Map - getCall() . "\">Images
+ getCall() . "\">Images + getCall() . "\">Raw
Last Activity: " . time_format($act) . "
"; if($act <= 3600) { diff --git a/decoder/html/style.css b/decoder/html/style.css index c336c7b4..9379d62d 100644 --- 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; } diff --git a/decoder/html/telemetry.php b/decoder/html/telemetry.php index bd331cde..420cf78b 100644 --- a/decoder/html/telemetry.php +++ b/decoder/html/telemetry.php @@ -28,6 +28,7 @@ google.charts.setOnLoadCallback(drawChart); @@ -163,22 +164,6 @@ include "sidebar.inc.php";
-
-  Range: - 1h - 3h - 6h - 12h - 24h - 2d - 3d - 5d - 7d - 14d - 21d - 30d -
-
Power
diff --git a/decoder/html/topbar.inc.php b/decoder/html/topbar.inc.php new file mode 100644 index 00000000..34f1ac04 --- /dev/null +++ b/decoder/html/topbar.inc.php @@ -0,0 +1,31 @@ +
+ + + + + + + + + + + +
Range: + " . ($r < 3600 ? ($r/60)."m" : ($r <= 86400 ? ($r/3600)."h" : ($r/86400)."d")) . " "; + ?> +
Packet Type Filter: + " . strtoupper($f) . " "; + echo "none "; + ?> +
+