Improve live track display.

vicb · vicb · commit 01ba523883a2 · 2020-07-28T16:42:05.000-07:00
fixes #38
diff --git a/frontend/src/viewer/components/tracking-element.ts b/frontend/src/viewer/components/tracking-element.ts
@@ -1,3 +1,4 @@
+import { toRad } from 'geolib';
 import { CSSResult, customElement, html, internalProperty, LitElement, TemplateResult } from 'lit-element';
 import { connect } from 'pwa-helpers';
 
@@ -8,6 +9,9 @@ import { Units } from '../reducers/map';
 import { RootState, store } from '../store';
 import { controlHostStyle } from './control-style';
 
+const SPEECH_BUBBLE =
+  'M2.5 2C1.7 2 1 2.7 1 3.5 l 0 8 c0 .8.7 1.5 1.5 1.5 H4 l 0 2.4 L 7.7 13 l 4.8 0 c.8 0 1.5 -.7 1.5 -1.5 l 0 -8 c 0 -.8 -.7 -1.5 -1.5 -1.5 z';
+
 @customElement('tracking-element')
 export class TrackingElement extends connect(store)(LitElement) {
   @internalProperty()
@@ -114,22 +118,53 @@ export class TrackingElement extends connect(store)(LitElement) {
         let zIndex = 10;
         const age_hours = (now - ts) / (3600 * 1000);
         let opacity = age_hours > 12 ? 0.3 : 0.9;
-        let scale = 0.3;
+
+        // Small circle by default.
+        let scale = 3;
+        let rotation = 0;
+        let path: google.maps.SymbolPath | string = google.maps.SymbolPath.CIRCLE;
+        let labelOrigin = new google.maps.Point(0, 3);
+        let anchor: google.maps.Point | undefined;
+
+        // Display an arrow when we have a bearing (last point).
+        if (feature.getProperty('bearing') != null) {
+          rotation = Number(feature.getProperty('bearing'));
+          scale = 3;
+          const ANCHOR_Y = 2;
+          anchor = new google.maps.Point(0, ANCHOR_Y);
+          path = google.maps.SymbolPath.FORWARD_CLOSED_ARROW;
+          const rad = toRad(-rotation);
+          // x1 = x0cos(θ) – y0sin(θ)
+          // y1 = x0sin(θ) + y0cos(θ)
+          const x = -5 * Math.sin(rad);
+          const y = 5 * Math.cos(rad);
+          labelOrigin = new google.maps.Point(x, y + ANCHOR_Y);
+        }
+
+        // Display speech bubble for messages and emergency.
         if (feature.getProperty('msg')) {
-          scale = 0.6;
+          scale = 1;
+          anchor = new google.maps.Point(7, 9);
+          labelOrigin = new google.maps.Point(0, 32);
+          path = SPEECH_BUBBLE;
           opacity = 1;
           color = 'yellow';
           zIndex += 10;
         }
+
         if (feature.getProperty('emergency')) {
-          scale = 0.6;
+          scale = 1;
+          anchor = new google.maps.Point(7, 9);
+          labelOrigin = new google.maps.Point(0, 32);
+          path = SPEECH_BUBBLE;
           opacity = 1;
           color = 'red';
           zIndex += 10;
         }
+
+        // Display pilot name.
         let label: google.maps.MarkerLabel | null = null;
         if (feature.getProperty('is_last_fix') === true) {
-          scale = 0.6;
           if (this.displayNames) {
             const minutesOld = Math.round((now - ts) / (60 * 1000));
             const age =
@@ -154,14 +189,15 @@ export class TrackingElement extends connect(store)(LitElement) {
           zIndex,
           cursor: 'zoom-in',
           icon: {
-            path: 'M 0,10 A 10,10 0 0 0 20,10 A 10,10 0 0 0 0,10',
+            path,
+            rotation,
             fillColor: color,
             fillOpacity: opacity,
             strokeColor: 'black',
             strokeWeight: 1,
             strokeOpacity: opacity,
-            anchor: new google.maps.Point(10, 10),
-            labelOrigin: new google.maps.Point(10, 40),
+            anchor,
+            labelOrigin,
             scale,
           },
         } as google.maps.Data.StyleOptions;
diff --git a/run/src/trackers/inreach.ts b/run/src/trackers/inreach.ts
@@ -1,7 +1,7 @@
 import request from 'request-zero';
 import { DOMParser } from 'xmldom';
 
-import { LineString, Point, REFRESH_EVERY_MINUTES } from './trackers';
+import { createFeatures, Point, REFRESH_EVERY_MINUTES } from './trackers';
 
 // Queries the datastore for the devices that have not been updated in REFRESH_EVERY_MINUTES.
 // Queries the feeds until the timeout is reached and store the data back into the datastore.
@@ -21,7 +21,6 @@ export async function refresh(datastore: any, hour: number, timeoutSecs: number)
   let numActiveDevices = 0;
   for (; numDevices < devices.length; numDevices++) {
     const points: Point[] = [];
-    const lineStrings: LineString[] = [];
     const device = devices[numDevices];
     let url: string = device.inreach;
     // Automatically inserts "Feed/Share" when missing in url.
@@ -54,7 +53,7 @@ export async function refresh(datastore: any, hour: number, timeoutSecs: number)
           const timestamp = getChildNode(placemark.childNodes, 'TimeStamp.when');
           const dataNode = getChildNode(placemark.childNodes, 'ExtendedData');
           const data = dataNode ? getData(dataNode) : null;
-          const msg = getChildNode(placemark.childNodes, 'description')?.firstChild?.nodeValue || '';
+          const msg = getChildNode(placemark.childNodes, 'description')?.firstChild?.nodeValue ?? '';
           if (coords && timestamp && data && coords.firstChild?.nodeValue && timestamp.firstChild?.nodeValue) {
             const [lon, lat, alt] = coords.firstChild.nodeValue
               .trim()
@@ -74,20 +73,14 @@ export async function refresh(datastore: any, hour: number, timeoutSecs: number)
             });
           }
         }
-        if (points.length) {
-          // points[0] is the oldest fix.
-          points[points.length - 1].is_last_fix = true;
-          const line = points.map((point) => [point.lon, point.lat]);
-          lineStrings.push({ line, first_ts: points[0].ts });
-        }
       } else {
         console.log(
           `Error refreshing inreach @ ${url}. HTTP code = ${response.code}, length = ${response.body.length}`,
         );
       }
     }
 
-    device.features = JSON.stringify([...points, ...lineStrings]);
+    device.features = JSON.stringify(createFeatures(points));
     device.updated = Date.now();
     device.active = points.length > 0;
 
diff --git a/run/src/trackers/spot.ts b/run/src/trackers/spot.ts
@@ -1,6 +1,6 @@
 import request from 'request-zero';
 
-import { LineString, Point, REFRESH_EVERY_MINUTES } from './trackers';
+import { createFeatures, Point, REFRESH_EVERY_MINUTES } from './trackers';
 
 // Queries the datastore for the devices that have not been updated in REFRESH_EVERY_MINUTES.
 // Queries the feeds until the timeout is reached and store the data back into the datastore.
@@ -20,41 +20,34 @@ export async function refresh(datastore: any, hour: number, timeoutSecs: number)
   let numActiveDevices = 0;
   for (; numDevices < devices.length; numDevices++) {
     const points: Point[] = [];
-    const lineStrings: LineString[] = [];
     const device = devices[numDevices];
     const id: string = device.spot;
     if (/^\w+$/i.test(id)) {
       const url = `https://api.findmespot.com/spot-main-web/consumer/rest-api/2.0/public/feed/${id}/message.json?startDate=${startDate}`;
       const response = await request(url);
       if (response.code == 200) {
         console.log(`Refreshing spot @ ${id}`);
-        const messages = JSON.parse(response.body)?.response?.feedMessageResponse?.messages?.message;
-        if (messages && Array.isArray(messages)) {
+        const fixes = JSON.parse(response.body)?.response?.feedMessageResponse?.messages?.message;
+        if (fixes && Array.isArray(fixes)) {
           numActiveDevices++;
-          messages.forEach((m: any) => {
+          fixes.forEach((f: any) => {
             points.push({
-              lon: m.longitude,
-              lat: m.latitude,
-              ts: m.unixTime * 1000,
-              alt: m.altitude,
-              name: m.messengerName,
-              emergency: m.messageType == 'HELP',
-              msg: m.messageContent,
+              lon: f.longitude,
+              lat: f.latitude,
+              ts: f.unixTime * 1000,
+              alt: f.altitude,
+              name: f.messengerName,
+              emergency: f.messageType == 'HELP',
+              msg: f.messageContent,
             });
           });
         }
       } else {
         console.log(`Error refreshing spot @ ${id}`);
       }
-      if (points.length) {
-        // points[0] is the most recent fix.
-        points[0].is_last_fix = true;
-        const line = points.map((point) => [point.lon, point.lat]);
-        lineStrings.push({ line, first_ts: points[points.length - 1].ts });
-      }
     }
 
-    device.features = JSON.stringify([...points, ...lineStrings]);
+    device.features = JSON.stringify(createFeatures(points));
     device.updated = Date.now();
     device.active = points.length > 0;
 
diff --git a/run/src/trackers/trackers.ts b/run/src/trackers/trackers.ts
@@ -1,3 +1,5 @@
+import { getRhumbLineBearing } from 'geolib';
+
 // Only refreshes tracker after 3 minutes.
 export const REFRESH_EVERY_MINUTES = 3;
 
@@ -7,6 +9,12 @@ export const REFRESH_MAX_HOURS = 24;
 // Do not fetch for more than 40 seconds.
 export const REFRESH_TIMEOUT_SECONDS = 40;
 
+// Break lines if gap is more than.
+const TRACK_GAP_MINUTES = 60;
+
+// Do not keep points that are less than apart.
+const MIN_POINT_GAP_MINUTES = 2;
+
 export interface Point {
   lat: number;
   lon: number;
@@ -15,13 +23,16 @@ export interface Point {
   ts: number;
   name: string;
   emergency: boolean;
-  msg: string;
+  msg?: string;
   // speed is supported by inreach only.
   speed?: number;
   // Whether the gps fix is valid - inreach only.
   valid?: boolean;
   // Is this the last fix for the tracker ?
   is_last_fix?: boolean;
+  // Direction in degree from the last point.
+  // Populated for the the last point only.
+  bearing?: number;
 }
 
 export interface LineString {
@@ -30,3 +41,63 @@ export interface LineString {
   // Timestamp of the oldest fix in milliseconds.
   first_ts: number;
 }
+
+// Creates GeoJson features for a list of points:
+// - Order the points by ascending timestamps,
+// - Remove points that are to close to each other,
+// - Compute properties specific to the last point,
+// - Create a line for each split.
+export function createFeatures(points: Point[]): Array<Point | LineString> {
+  if (points.length == 0) {
+    return [];
+  }
+  // Sort points with older TS first.
+  points.sort((a, b) => (a.ts > b.ts ? 1 : -1));
+  // Remove points that are too close to each other.
+  // Keep the first, last, and any protected point.
+  let previousTs: number | undefined = points[0].ts;
+  const simplifiedPoints: Point[] = [points[0]];
+  for (let i = 1; i < points.length - 2; i++) {
+    const point = points[i];
+    if (isProtectedPoint(point) || point.ts - previousTs > MIN_POINT_GAP_MINUTES * 60 * 1000) {
+      simplifiedPoints.push(point);
+      previousTs = point.ts;
+    }
+  }
+  simplifiedPoints.push(points[points.length - 1]);
+  points = simplifiedPoints;
+  // Add extra info to the very last point.
+  const numPoints = points.length;
+  points[numPoints - 1].is_last_fix = true;
+  if (points.length >= 2) {
+    points[numPoints - 1].bearing = Math.round(getRhumbLineBearing(points[numPoints - 2], points[numPoints - 1]));
+  }
+  // Group points by track (split if the gap is too large).
+  const lines: LineString[] = [];
+  previousTs = undefined;
+  let currentLine: LineString | undefined;
+  points.forEach((point) => {
+    const ts = point.ts;
+    // Create a new line at the beginning and at each gap.
+    if (previousTs == null || ts - previousTs > TRACK_GAP_MINUTES * 60 * 1000) {
+      if (currentLine != null) {
+        lines.push(currentLine);
+      }
+      currentLine = { line: [], first_ts: ts };
+    }
+    // Accumulate fixes.
+    currentLine?.line.push([point.lon, point.lat]);
+    previousTs = ts;
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return [...points, ...lines];
+}
+
+// Returns wether a point should not be removed.
+// Points with emergency or messages must not be removed.
+function isProtectedPoint(point: Point): boolean {
+  return point.emergency == true || (point.msg != null && point.msg.length > 0);
+}
