ztimson/weather-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sats

Browse Source
This commit is contained in:
Zakary Timson
2026-09-10 22:52:44 -04:00
parent 2c25251864
commit 79acad8c07
9 changed files with 314 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
client/src/components/MapView.vue
View File

@@ -32,11 +32,13 @@ const showWind = ref(false)
const windSrc = ref('')
const OVERLAYS = [
{ id: 'traffic', label: 'Traffic', icon: '✈️' },
{ id: 'sats', label: 'Sats', icon: '🛰️' },
{ id: 'rain', label: 'Rain', icon: '🌧️' },
{ id: 'wind', label: 'Wind', icon: '💨' },
]
const activeOverlays = ref<Set<string>>(new Set(['rain']))
const activeOverlays = ref<Set<string>>(new Set(['traffic', 'rain']))
const overlayLayers: { [key: string]: any } = {}
let map: Map
@@ -108,20 +110,21 @@ async function refreshRain() {
map.addLayer(layer)
}
function toggleAT() {
if (atActive.value) {
aisLayer.hide()
airTraffic.hide()
range.hide()
} else {
aisLayer.show()
airTraffic.show()
range.show()
}
atActive.value = !atActive.value
}
function toggleOverlay(id: string) {
if (id === 'traffic') {
if (activeOverlays.value.has('traffic')) {
activeOverlays.value.delete('traffic');
aisLayer.hide()
airTraffic.hide()
range.hide()
} else {
activeOverlays.value.add('traffic');
aisLayer.show()
airTraffic.show()
range.show()
}
}
if (id === 'wind') {
if (activeOverlays.value.has('wind')) {
activeOverlays.value.delete('wind')
@@ -340,9 +343,6 @@ watch(() => props.dark, dark => {
/>
<div class="overlay-toggles desktop">
<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
✈️ Traffic
</button>
<button
v-for="o in OVERLAYS" :key="o.id"
class="overlay-btn"
@@ -358,9 +358,6 @@ watch(() => props.dark, dark => {
⚙️ Layers
</button>
<div v-if="showOverlays" class="layers-dropdown">
<button class="overlay-btn" :class="{ active: atActive }" @click="toggleAT">
✈️ Traffic
</button>
<button
v-for="o in OVERLAYS" :key="o.id"
class="overlay-btn"

48
client/src/components/Satellite.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import { computed } from 'vue'
const emit = defineEmits(['bringToFront']);
const props = defineProps<{ history: any[]; position: { x: number, y: number }; onClose: () => void }>()
const latest = computed(() => props.history[props.history.length - 1])
/** Center = zenith (el 90), edge = horizon (el 0). */
function polarPoint(az: number, el: number, radius = 100) {
const r = radius * (1 - el / 90)
const rad = (az - 90) * Math.PI / 180
return { x: 120 + r * Math.cos(rad), y: 120 + r * Math.sin(rad) }
}
const trackPoints = computed(() => props.history.map(r => polarPoint(r.az, r.el)).map(p => `${p.x},${p.y}`).join(' '))
</script>
<style scoped lang="scss">
.tinygs-popup { position: fixed; width: 340px; background: var(--surface); border-radius: 12px; padding: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.3); z-index: 1000; }
.close { position: absolute; top: 8px; right: 8px; background: none; border: none; cursor: pointer; }
.fields { width: 100%; font-size: 13px; margin-bottom: 8px; td { padding: 2px 4px; } }
.ok { color: #3fdb6d; }
.bad { color: #e0475a; }
.radar { width: 100%; }
.ring, .axis { fill: none; stroke: var(--border); stroke-width: 1; }
.track { fill: none; stroke: #d4a4ff; stroke-width: 1.5; }
.current { fill: #d4a4ff; }
</style>
<template>
<div class="tinygs-popup" :style="{ left: position.x + 'px', top: position.y + 'px' }" @mousedown="emit('bringToFront')">
<button class="close" @click="onClose">✕</button>
<h3>{{ latest?.satellite || 'Unknown' }}</h3>
<table class="fields">
<tr><td>Frequency</td><td>{{ latest?.freqMHz }} MHz</td></tr>
<tr><td>Packet RSSI</td><td>{{ latest?.packetRssi }} dBm</td></tr>
<tr><td>SNR</td><td>{{ latest?.packetSnr }} dB</td></tr>
<tr><td>Freq error</td><td>{{ latest?.freqError }} Hz</td></tr>
<tr><td>CRC</td><td :class="latest?.crcOk ? 'ok' : 'bad'">{{ latest?.crcOk ? 'OK' : 'ERROR' }}</td></tr>
</table>
<svg viewBox="0 0 240 240" class="radar">
<circle cx="120" cy="120" r="100" class="ring" /><circle cx="120" cy="120" r="66" class="ring" /><circle cx="120" cy="120" r="33" class="ring" />
<line x1="120" y1="20" x2="120" y2="220" class="axis" /><line x1="20" y1="120" x2="220" y2="120" class="axis" />
<polyline :points="trackPoints" class="track" />
<circle v-if="latest" v-bind="polarPoint(latest.az, latest.el)" r="4" class="current" />
</svg>
</div>
</template>

12
client/src/components/Seismic.vue
View File

@@ -79,11 +79,11 @@ function drawTrace(ctx: CanvasRenderingContext2D, t: (typeof traces)[number], co
ctx.lineJoin = 'round';
for (let i = 0; i < settledCount; i++) {
const p = buf[i];
const p = <any>buf[i];
i === 0 ? ctx.moveTo(p.x + slide, p.y) : ctx.lineTo(p.x + slide, p.y);
}
const animPoints = [anchor, ...buf.slice(settledCount)];
const animPoints = <any>[anchor, ...buf.slice(settledCount)];
for (let i = 1; i <= animFloor && i < animPoints.length; i++) {
ctx.lineTo(animPoints[i].x + slide, animPoints[i].y);
@@ -116,9 +116,9 @@ function draw(timestamp: number) {
// Axis label — top-left of each band
ctx.font = '16px monospace';
ctx.fillStyle = AXES[i].color;
ctx.fillStyle = (<any>AXES)[i].color;
ctx.globalAlpha = 0.6;
ctx.fillText(AXES[i].label, W - 20, i * BAND + 14);
ctx.fillText((<any>AXES)[i].label, W - 20, i * BAND + 14);
ctx.globalAlpha = 1;
// Center line per band — full width
@@ -129,7 +129,7 @@ function draw(timestamp: number) {
ctx.lineTo(W, mid);
ctx.stroke();
drawTrace(ctx, traces[i], AXES[i].color);
drawTrace(ctx, <any>traces[i], (<any>AXES)[i].color);
});
rafId = requestAnimationFrame(draw);
@@ -138,7 +138,7 @@ function draw(timestamp: number) {
async function poll() {
d.value = await api.current('seismic_magnitude,seismic_x,seismic_y,seismic_z');
AXES.forEach((axis, i) => {
const t = traces[i];
const t = <any>traces[i];
t.history.push(d.value[axis.key] ?? 0);
if (t.history.length > MAX_PTS) t.history.shift();
buildBuffer(t, i);

162
client/src/services/sats.ts Normal file
View File

@@ -0,0 +1,162 @@
import { BASE } from '@/services/api.ts'
import { createApp, ref } from 'vue'
import Map from 'ol/Map'
import { Feature } from 'ol'
import { LineString, Point } from 'ol/geom'
import { fromLonLat } from 'ol/proj'
import { Style, Stroke, Fill, Circle as CircleStyle, Text } from 'ol/style'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import { adjustedInterval } from '@ztimson/utils'
import TinyGSPopup from '@/components/Satellite.vue'
import { bringToFront } from './zindex'
const API = BASE + '/api'
interface TinyGSReading {
timestamp: number
freqMHz: number
satellite: string
latitude: number
longitude: number
az: number
el: number
packetRssi: number
packetSnr: number
freqError: number
crcOk: boolean
}
interface TinyGSSatellite extends TinyGSReading {
history: TinyGSReading[]
}
export class TinyGSLayer {
private map: Map
private layer!: VectorLayer<VectorSource>
private popups: any = {}
private data: TinyGSSatellite[] = []
private clickHandler: ((e: any) => void) | null = null
private refreshTimer: any = null
visible = false
constructor(map: Map) { this.map = map }
async show() {
if (this.visible) return
this.visible = true
this.layer = new VectorLayer({ source: new VectorSource(), zIndex: 105 })
this.map.addLayer(this.layer)
await this._fetch()
this._draw()
this._attachClick()
this.refreshTimer = adjustedInterval(async () => {
try {
await this._fetch()
this._draw()
this._refreshPopups()
} catch (err) {
console.error(err)
}
}, 5_000)
}
hide() {
if (!this.visible) return
this.visible = false
if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null }
if (this.clickHandler) { this.map.un('singleclick', this.clickHandler); this.clickHandler = null }
for (const name of Object.keys(this.popups)) this._closePopup(name)
this.map.removeLayer(this.layer)
}
private async _fetch() {
this.data = await fetch(`${API}/tinygs`).then(r => r.json()) || []
}
private _draw() {
const source = this.layer.getSource()!
source.clear()
for (const sat of this.data) {
if (sat.latitude == null || sat.longitude == null) continue
const points = <any>[...sat.history, sat].map(r => fromLonLat([r.longitude, r.latitude]))
if (points.length > 1) {
const trail = new Feature({ geometry: new LineString(points) })
trail.setStyle(new Style({ stroke: new Stroke({ color: 'rgba(212,164,255,0.5)', width: 2, lineDash: [6, 4] }) }))
source.addFeature(trail)
}
const marker = new Feature({ geometry: new Point(points[points.length - 1]) })
marker.set('satellite', sat.satellite)
marker.set('satData', sat)
marker.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({ color: sat.crcOk ? '#3fdb6d' : '#e0475a' }),
stroke: new Stroke({ color: '#000', width: 1.5 }),
}),
text: new Text({
text: sat.satellite,
font: '12px sans-serif',
fill: new Fill({ color: '#d4a4ff' }),
stroke: new Stroke({ color: '#000000', width: 2 }),
offsetY: -14,
}),
}))
source.addFeature(marker)
}
}
private _calcPopupPos(sat: TinyGSSatellite): { x: number; y: number } {
const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([sat.longitude, sat.latitude]))
if (!pixel) return { x: 10, y: 60 }
const rect = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
return { x: rect.left + pixel[0] + 16, y: rect.top + pixel[1] - 16 }
}
private _openPopup(sat: TinyGSSatellite) {
if (this.popups[sat.satellite]) return
const satRef = ref(sat)
const container = document.createElement('div')
document.body.appendChild(container)
const mobile = window.innerWidth <= 768
const app = createApp(TinyGSPopup, {
satellite: satRef.value,
position: mobile ? { x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16 } : { x: window.innerWidth - 360 - 16, y: 16 },
onClose: () => this._closePopup(sat.satellite),
onBringToFront: () => bringToFront(container),
})
app.mount(container)
this.popups[sat.satellite] = { satRef, unmount: () => { app.unmount(); container.remove() } }
}
private _closePopup(name: string) {
const popup = this.popups[name]
if (popup) { popup.unmount(); delete this.popups[name] }
}
private _refreshPopups() {
for (const name of Object.keys(this.popups)) {
const sat = this.data.find(s => s.satellite === name)
if (!sat) { this._closePopup(name); continue }
this.popups[name].satRef.value = sat
}
}
private _attachClick() {
this.clickHandler = (evt) => {
const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('satData') ? f : null)
if (!f) return
const sat = f.get('satData') as TinyGSSatellite
if (this.popups[sat.satellite]) { this._closePopup(sat.satellite); return }
this._openPopup(sat)
}
this.map.on('singleclick', this.clickHandler)
}
}

1
client/tsconfig.app.json
View File

@@ -6,6 +6,7 @@
// Extra safety for array and object lookups, but may have false positives.
"noUncheckedIndexedAccess": true,
"skipLibCheck": true,
"noImplicitAny": false,
// Path mapping for cleaner imports.
"paths": {