Reactive sonde icon

client/src/services/sondes.ts

@@ -12,6 +12,7 @@ import SondePopup from '@/components/WeatherBalloon.vue';
 import {bringToFront} from './zindex';
 
 const API = BASE + '/api';
+const SONDE_STALE_TTL = 60_000;
 
 interface SondeReading {
 	timestamp: number;
@@ -23,17 +24,15 @@ interface SondeReading {
 	altitude: number;
 	heading: number;
 	speed: number;
-	vertical_speed: number;
+	climb: number;
 	sats: number;
 	battery: number;
 	temperature: number;
 	humidity: number;
 	pressure: number;
-	frequency: number;
-	frequency_hz: number;
+	freqMHz: number;
 	snr: number;
 	ppm: number;
-	aprsid: string;
 }
 
 interface Sonde extends SondeReading {
@@ -175,8 +174,8 @@ export class SondesLayer {
 			marker.set('sondeData', sonde);
 			marker.setStyle(new Style({
 				image: new Icon({
-					src: '/sonde.png',
-					scale: 0.1,
+					src: this._getIcon(sonde),
+					scale: 0.75,
 					anchor: [0.5, 0.5],
 				}),
 			}));
@@ -185,6 +184,25 @@ export class SondesLayer {
 		}
 	}
 
+	private _getIcon(sonde: Sonde): string {
+		const opacity = (Date.now() - sonde.timestamp > SONDE_STALE_TTL) ? 0.5 : 1;
+		const descending = sonde.climb < 0;
+
+		const svg = descending
+			? `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="${opacity}">
+               <path d="M8 20a16 16 0 0 1 32 0Z" fill="#FFAA00" stroke-width="2" stroke="black"/>
+               <path d="M8 20l10 12M40 20L30 32" fill="#FFAA00" stroke-width="2" stroke="black"/>
+               <rect x="16" y="32" width="16" height="11" rx="2" fill="#FFAA00"/>
+            </svg>`
+			: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="${opacity}">
+               <circle cx="24" cy="13" r="12" fill="#FFAA00"/>
+               <path d="M24 27v5" fill="#FFAA00" stroke-width="2" stroke="black" />
+               <rect x="16" y="32" width="16" height="11" rx="2" fill="#FFAA00"/>
+            </svg>`;
+
+		return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
+	}
+
 	private _distance(lat1: number, lng1: number, lat2: number, lng2: number): number {
 		const toRad = (d: number) => d * Math.PI / 180;
 		const dLat = toRad(lat2 - lat1);