Switched from influx to victoria metrics (more light weight for pi)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch} from 'vue';
|
||||
import {computed, nextTick, ref, watch} from 'vue';
|
||||
import {api} from '../services/api';
|
||||
|
||||
const props = defineProps<{metricKey: string | null}>();
|
||||
@@ -49,8 +49,9 @@ async function fetchData() {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
watch([() => props.metricKey, mode], () => {
|
||||
watch([() => props.metricKey, mode], async () => {
|
||||
setDefaults();
|
||||
await nextTick();
|
||||
fetchData();
|
||||
}, {immediate: true});
|
||||
|
||||
@@ -201,9 +202,11 @@ svg { width: 100%; overflow: visible; cursor: crosshair; }
|
||||
<button class="close-btn" @click="emit('close')">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="controls gap-0">
|
||||
<button :class="{active: mode === 'hourly'}" style="border-radius: 6px 0 0 6px" @click="mode = 'hourly'">Hourly</button>
|
||||
<button :class="{active: mode === 'daily'}" style="border-radius: 0 6px 6px 0" @click="mode = 'daily'">Daily</button>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button :class="{active: mode === 'hourly'}" @click="mode = 'hourly'">Hourly</button>
|
||||
<button :class="{active: mode === 'daily'}" @click="mode = 'daily'">Daily</button>
|
||||
<input :type="mode === 'hourly' ? 'datetime-local' : 'date'" v-model="customStart"/>
|
||||
<span style="font-size:11px;color:var(--text-muted)">to</span>
|
||||
<input :type="mode === 'hourly' ? 'datetime-local' : 'date'" v-model="customEnd"/>
|
||||
@@ -212,7 +215,6 @@ svg { width: 100%; overflow: visible; cursor: crosshair; }
|
||||
|
||||
<div v-if="chart.dot" class="current-val">
|
||||
<span>{{ (chart.dot.v as number).toFixed(2) }}</span>
|
||||
<span class="val-time">{{ new Date(chart.dot.t).toLocaleString() }}</span>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrap">
|
||||
|
||||
362
client/src/components/Ship.vue
Normal file
362
client/src/components/Ship.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const props = defineProps<{ boat: any; position: { x: number; y: number } }>()
|
||||
const emit = defineEmits<{ (e: 'close'): void; (e: 'bringToFront'): void }>()
|
||||
|
||||
const SPEED_UNITS = {
|
||||
knots: { label: 'KTS', convert: (v: number) => v.toFixed(1) },
|
||||
kph: { label: 'KPH', convert: (v: number) => (v * 1.852).toFixed(1) },
|
||||
mph: { label: 'MPH', convert: (v: number) => (v * 1.15078).toFixed(1) },
|
||||
}
|
||||
const UNIT_KEY = 'ais_units'
|
||||
function loadUnits() {
|
||||
const s = localStorage.getItem(UNIT_KEY)
|
||||
return s ? JSON.parse(s) : { speed: 'knots' }
|
||||
}
|
||||
const prefs = ref(loadUnits())
|
||||
function cycleSpeed() {
|
||||
const keys = Object.keys(SPEED_UNITS)
|
||||
const p = loadUnits()
|
||||
p.speed = keys[(keys.indexOf(p.speed) + 1) % keys.length]
|
||||
prefs.value = { ...p }
|
||||
localStorage.setItem(UNIT_KEY, JSON.stringify(p))
|
||||
}
|
||||
const speed = computed(() => SPEED_UNITS[prefs.value.speed as keyof typeof SPEED_UNITS])
|
||||
|
||||
// ── Derived data ──────────────────────────────────────────────────────────────
|
||||
const name = computed(() => props.boat.name?.trim() || props.boat.callsign?.trim() || `MMSI: ${props.boat.mmsi}`)
|
||||
const heading = computed(() => props.boat.heading ?? props.boat.course ?? 0)
|
||||
const speedVal = computed(() => speed.value.convert(props.boat.speed ?? 0))
|
||||
const rows = computed(() => [
|
||||
['MMSI', props.boat.mmsi],
|
||||
['Country', props.boat.country],
|
||||
['Callsign', props.boat.callsign || '-'],
|
||||
['IMO', props.boat.imo || '-'],
|
||||
['Ship Type', props.boat.ship_type ?? '-'],
|
||||
['Lat / Lon', `${props.boat.lat?.toFixed(5)}, ${props.boat.lon?.toFixed(5)}`],
|
||||
['Distance', props.boat.distance != null ? `${props.boat.distance.toFixed(2)} nmi` : '-'],
|
||||
['Bearing', props.boat.bearing != null ? `${props.boat.bearing}°` : '-'],
|
||||
['Destination', props.boat.destination || '-'],
|
||||
['ETA', props.boat.eta || '-'],
|
||||
['Draught', props.boat.draught != null ? `${props.boat.draught}m` : '-'],
|
||||
['RSSI', props.boat.rssi != null ? `${props.boat.rssi.toFixed(1)} dB` : '-'],
|
||||
['Channels', props.boat.channels || '-'],
|
||||
['Last Signal', props.boat.last_signal != null ? `${props.boat.last_signal}s ago` : '-'],
|
||||
])
|
||||
|
||||
// ── Compass HUD ───────────────────────────────────────────────────────────────
|
||||
const compass = computed(() => {
|
||||
const hdg = heading.value
|
||||
const spd = props.boat.speed ?? 0
|
||||
const course = props.boat.course ?? hdg
|
||||
const bearing = props.boat.bearing ?? 0
|
||||
|
||||
// Compass tape: show ±60° window
|
||||
const tapeTicks: string[] = []
|
||||
for (let offset = -60; offset <= 60; offset += 5) {
|
||||
const deg = ((hdg + offset) % 360 + 360) % 360
|
||||
const x = 100 + (offset / 60) * 90
|
||||
const major = offset % 30 === 0
|
||||
const mid = offset % 15 === 0
|
||||
|
||||
if (major) {
|
||||
const lbl = ({ 0: 'N', 45: 'NE', 90: 'E', 135: 'SE', 180: 'S', 225: 'SW', 270: 'W', 315: 'NW' } as any)[deg]
|
||||
?? String(deg).padStart(3, '0')
|
||||
tapeTicks.push(`
|
||||
<line x1="${x}" y1="22" x2="${x}" y2="38" stroke="#0ff" stroke-width="2"/>
|
||||
<text x="${x}" y="50" text-anchor="middle" fill="#0ff" font-size="11" font-weight="bold">${lbl}</text>
|
||||
`)
|
||||
} else if (mid) {
|
||||
tapeTicks.push(`<line x1="${x}" y1="26" x2="${x}" y2="38" stroke="#0ff" stroke-width="1.5"/>`)
|
||||
} else {
|
||||
tapeTicks.push(`<line x1="${x}" y1="30" x2="${x}" y2="38" stroke="#0ff" stroke-width="1"/>`)
|
||||
}
|
||||
}
|
||||
|
||||
// Depth/rudder gauge (visual only, based on course vs heading difference)
|
||||
const rudder = Math.max(-30, Math.min(30, ((course - hdg + 540) % 360) - 180))
|
||||
const rudX = 100 + (rudder / 30) * 40
|
||||
|
||||
// Speed arc (0–30 kts range)
|
||||
const spdPct = Math.min(spd / 30, 1)
|
||||
const arcEnd = 160 + spdPct * 140 // degrees on a 160–300° arc
|
||||
function polarToXY(cx: number, cy: number, r: number, deg: number) {
|
||||
const rad = (deg - 90) * Math.PI / 180
|
||||
return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
|
||||
}
|
||||
function describeArc(cx: number, cy: number, r: number, startDeg: number, endDeg: number) {
|
||||
const s = polarToXY(cx, cy, r, startDeg)
|
||||
const e = polarToXY(cx, cy, r, endDeg)
|
||||
const lg = endDeg - startDeg > 180 ? 1 : 0
|
||||
return `M ${s.x} ${s.y} A ${r} ${r} 0 ${lg} 1 ${e.x} ${e.y}`
|
||||
}
|
||||
const spdArcPath = describeArc(100, 145, 52, 160, Math.max(161, arcEnd))
|
||||
|
||||
// Course indicator needle angle (relative to up = heading)
|
||||
const courseRel = ((course - hdg + 540) % 360) - 180
|
||||
const courseRad = courseRel * Math.PI / 180
|
||||
const cNeedleX = 100 + 44 * Math.sin(courseRad)
|
||||
const cNeedleY = 145 - 44 * Math.cos(courseRad)
|
||||
|
||||
// Bearing indicator
|
||||
const bearRel = ((bearing - hdg + 540) % 360) - 180
|
||||
const bearRad = bearRel * Math.PI / 180
|
||||
const bNeedleX = 100 + 52 * Math.sin(bearRad)
|
||||
const bNeedleY = 145 - 52 * Math.cos(bearRad)
|
||||
|
||||
return `
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" style="background:#000;border-radius:4px">
|
||||
<!-- Compass tape -->
|
||||
<rect x="10" y="18" width="180" height="40" fill="rgba(0,20,40,0.95)" rx="3"/>
|
||||
<line x1="10" y1="18" x2="190" y2="18" stroke="#0ff" stroke-width="1"/>
|
||||
<line x1="10" y1="58" x2="190" y2="58" stroke="#0ff" stroke-width="1"/>
|
||||
${tapeTicks.join('')}
|
||||
<!-- Centre lubber line -->
|
||||
<polygon points="100,12 96,20 104,20" fill="#ff0"/>
|
||||
|
||||
<!-- Heading readout -->
|
||||
<rect x="72" y="60" width="56" height="20" fill="rgba(0,0,0,0.9)" stroke="#0ff" stroke-width="1" rx="2"/>
|
||||
<text x="100" y="75" text-anchor="middle" fill="#0ff" font-size="13" font-weight="bold">${String(Math.round(hdg)).padStart(3, '0')}°</text>
|
||||
|
||||
<!-- Rose ring -->
|
||||
<circle cx="100" cy="145" r="55" fill="rgba(0,20,40,0.6)" stroke="#0ff" stroke-width="1.5"/>
|
||||
<circle cx="100" cy="145" r="40" fill="none" stroke="rgba(0,255,255,0.15)" stroke-width="1"/>
|
||||
|
||||
<!-- Ring tick marks -->
|
||||
${Array.from({ length: 36 }, (_, i) => {
|
||||
const a = i * 10
|
||||
const rad = (a - 90) * Math.PI / 180
|
||||
const r1 = a % 30 === 0 ? 44 : 50
|
||||
const sw = a % 30 === 0 ? 2 : 1
|
||||
const x1 = 100 + r1 * Math.cos(rad)
|
||||
const y1 = 145 + r1 * Math.sin(rad)
|
||||
const x2 = 100 + 55 * Math.cos(rad)
|
||||
const y2 = 145 + 55 * Math.sin(rad)
|
||||
return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#0ff" stroke-width="${sw}" opacity="0.5"/>`
|
||||
}).join('')}
|
||||
|
||||
<!-- Cardinal labels -->
|
||||
${(['N','E','S','W'] as const).map((lbl, i) => {
|
||||
const a = i * 90
|
||||
const rad = (a - 90) * Math.PI / 180
|
||||
const x = 100 + 47 * Math.cos(rad)
|
||||
const y = 145 + 47 * Math.sin(rad) + 4
|
||||
return `<text x="${x}" y="${y}" text-anchor="middle" fill="#0ff" font-size="9" font-weight="bold" opacity="0.7">${lbl}</text>`
|
||||
}).join('')}
|
||||
|
||||
<!-- Course needle (green) -->
|
||||
<line x1="100" y1="145" x2="${cNeedleX}" y2="${cNeedleY}" stroke="#0f0" stroke-width="2.5"/>
|
||||
<circle cx="${cNeedleX}" cy="${cNeedleY}" r="3" fill="#0f0"/>
|
||||
|
||||
<!-- Bearing needle (yellow dashed) -->
|
||||
<line x1="100" y1="145" x2="${bNeedleX}" y2="${bNeedleY}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<circle cx="${bNeedleX}" cy="${bNeedleY}" r="2.5" fill="#ff0"/>
|
||||
|
||||
<!-- Ship symbol -->
|
||||
<polygon points="100,138 96,152 100,149 104,152" fill="#fff" stroke="#0ff" stroke-width="1"/>
|
||||
|
||||
<!-- Speed arc -->
|
||||
<path d="${spdArcPath}" fill="none" stroke="#0f0" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="${describeArc(100, 145, 52, 160, 300)}" fill="none" stroke="rgba(0,255,0,0.15)" stroke-width="4"/>
|
||||
|
||||
<!-- Speed readout -->
|
||||
<text x="100" y="190" text-anchor="middle" fill="#0f0" font-size="11" font-weight="bold">${speedVal.value} ${speed.value.label}</text>
|
||||
|
||||
<!-- Rudder bar -->
|
||||
<rect x="60" y="175" width="80" height="6" fill="rgba(0,40,60,0.9)" rx="3"/>
|
||||
<line x1="100" y1="173" x2="100" y2="183" stroke="#0ff" stroke-width="1" opacity="0.5"/>
|
||||
<rect x="${rudX - 4}" y="174" width="8" height="8" fill="#ff0" rx="1"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<line x1="12" y1="163" x2="24" y2="163" stroke="#0f0" stroke-width="2"/>
|
||||
<text x="27" y="167" fill="#888" font-size="9">COG</text>
|
||||
<line x1="12" y1="173" x2="24" y2="173" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<text x="27" y="177" fill="#888" font-size="9">BRG</text>
|
||||
</svg>
|
||||
`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ship-popup" :style="{ left: pos.x + 'px', top: pos.y + 'px' }">
|
||||
|
||||
<!-- Header -->
|
||||
<div ref="header" class="sp-header" @mousedown="onMouseDown" @touchstart.passive="onTouchStart">
|
||||
<h3 class="sp-name">
|
||||
🚢
|
||||
<span>{{ name.toUpperCase() }}</span>
|
||||
<span class="sp-mmsi"> / {{ boat.mmsi }}</span>
|
||||
</h3>
|
||||
<button class="sp-close" @click.stop="emit('close')">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Meta -->
|
||||
<div class="sp-meta">
|
||||
<div class="flex-c">
|
||||
<span>{{ boat.operator || boat.owner || '' }}</span>
|
||||
<span>{{ boat.country || 'Unknown Country' }}</span>
|
||||
</div>
|
||||
<div class="flex-c align-x-end">
|
||||
<span>{{ boat.ship_type || '' }}</span>
|
||||
<span style="text-transform:capitalize">{{ boat.type || 'Unknown' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="sp-body">
|
||||
<!-- Gauges -->
|
||||
<div class="sp-gauges">
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Speed</div>
|
||||
<div class="sp-gauge" @click.stop="cycleSpeed">
|
||||
<span class="sp-gauge-val">{{ speedVal }}</span>
|
||||
<span class="sp-gauge-unit">{{ speed.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Course</div>
|
||||
<div class="sp-gauge">
|
||||
<span class="sp-gauge-val">{{ boat.course != null ? boat.course.toFixed(0) : '-' }}</span>
|
||||
<span class="sp-gauge-unit">°</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Heading</div>
|
||||
<div class="sp-gauge">
|
||||
<span class="sp-gauge-val">{{ boat.heading != null ? boat.heading.toFixed(0) : '-' }}</span>
|
||||
<span class="sp-gauge-unit">°</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Distance</div>
|
||||
<div class="sp-gauge">
|
||||
<span class="sp-gauge-val">{{ boat.distance?.toFixed(1) ?? '-' }}</span>
|
||||
<span class="sp-gauge-unit">NMI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compass HUD -->
|
||||
<div class="sp-compass" v-html="compass"/>
|
||||
</div>
|
||||
|
||||
<!-- Details table -->
|
||||
<div class="sp-details">
|
||||
<div v-for="[label, val] in rows" :key="label" class="sp-detail-row">
|
||||
<span class="sp-detail-label">{{ label }}</span>
|
||||
<span class="sp-detail-val">{{ val ?? '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ship-popup {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
pointer-events: auto;
|
||||
background: rgba(0,10,20,0.92);
|
||||
border: 1px solid rgba(0,200,255,0.3);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.6);
|
||||
overflow: hidden;
|
||||
font-family: monospace;
|
||||
color: #ccc;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.sp-header {
|
||||
position: relative;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(0,200,255,0.2);
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
background: rgba(0,20,40,0.6);
|
||||
}
|
||||
|
||||
.sp-name {
|
||||
margin: 0 24px 0 0;
|
||||
color: #7eeee1;
|
||||
font-size: 16px;
|
||||
}
|
||||
.sp-mmsi { color: white; }
|
||||
|
||||
.sp-meta {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid rgba(0,200,255,0.15);
|
||||
}
|
||||
|
||||
.sp-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.sp-close:hover { background: rgba(255,255,255,0.25); }
|
||||
|
||||
.sp-body {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(0,200,255,0.15);
|
||||
}
|
||||
|
||||
.sp-gauges { flex: 0 0 110px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.sp-gauge-wrap {}
|
||||
|
||||
.sp-gauge-label {
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sp-gauge {
|
||||
padding: 5px 6px;
|
||||
background: rgba(0,0,0,0.95);
|
||||
border: 2px solid #0ff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.sp-gauge:hover { border-color: #0f0; }
|
||||
.sp-gauge-val { font-size: 18px; font-weight: bold; color: #0ff; }
|
||||
.sp-gauge-unit { font-size: 10px; color: #0ff; margin-bottom: 2px; }
|
||||
|
||||
.sp-compass { flex: 1; }
|
||||
|
||||
.sp-details {
|
||||
padding: 8px 16px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5px 16px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sp-detail-row { display: flex; flex-direction: column; }
|
||||
.sp-detail-label { color: #888; font-size: 9px; font-weight: bold; }
|
||||
.sp-detail-val { color: #0ff; font-size: 12px; }
|
||||
</style>
|
||||
@@ -45,7 +45,7 @@ const arc = computed(() => {
|
||||
const { x: cx, y: cy } = <any>pts[Math.min(splitIdx, 200)];
|
||||
|
||||
const traveledPts: any = pts.slice(0, splitIdx + 1);
|
||||
const filledPath = traveledPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ')
|
||||
const filledPath = traveledPts.map((p: any, i: any) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ')
|
||||
+ ` L${traveledPts[traveledPts.length - 1].x.toFixed(1)},${horizonY}`
|
||||
+ ` L${x1},${horizonY} Z`;
|
||||
|
||||
|
||||
@@ -1,30 +1,33 @@
|
||||
import {BASE} from '@/services/api.ts';
|
||||
import { BASE } from '@/services/api.ts'
|
||||
import { createApp, ref } from 'vue'
|
||||
import Map from 'ol/Map'
|
||||
import { Feature } from 'ol'
|
||||
import Point from 'ol/geom/Point'
|
||||
import { fromLonLat } from 'ol/proj'
|
||||
import { Style, Icon, Text, Fill, Stroke } from 'ol/style'
|
||||
import { Style, Icon } from 'ol/style'
|
||||
import { Vector as VectorLayer } from 'ol/layer'
|
||||
import { Vector as VectorSource } from 'ol/source'
|
||||
import { adjustedInterval } from '@ztimson/utils'
|
||||
import ShipPopup from '@/components/Ship.vue'
|
||||
|
||||
const API = BASE + '/api'
|
||||
|
||||
let highestZIndex = 1000
|
||||
|
||||
const SHIP_COLORS: Record<string, string> = {
|
||||
'Base Station': '#00aaff',
|
||||
'Class A': '#00ff00',
|
||||
'Class B': '#8450ea',
|
||||
'SAR Aircraft': '#ff6600',
|
||||
'Aid to Navigation': '#ffff00',
|
||||
'Class B CS': '#8450ea',
|
||||
'Sart/Epirb/MOB': '#ff0000',
|
||||
'SAR Aircraft': '#ff0000',
|
||||
'AtoN': '#00aaff',
|
||||
'Class B/CS': '#8450ea',
|
||||
'Sart/Epirb/MOB': '#00aaff',
|
||||
'Unknown': '#fad106',
|
||||
}
|
||||
|
||||
function buildBoatIcon(boat: any): string {
|
||||
const color = SHIP_COLORS[boat.type] || SHIP_COLORS['Unknown']
|
||||
|
||||
if (boat.type === 'Base Station') {
|
||||
if (['Base Station', 'AtoN'].includes(boat.type)) {
|
||||
return `data:image/svg+xml,${encodeURIComponent(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<polygon points="16,2 30,16 16,30 2,16" fill="${color}" stroke="#000" stroke-width="1.5"/>
|
||||
@@ -35,10 +38,9 @@ function buildBoatIcon(boat: any): string {
|
||||
</svg>
|
||||
`)}`
|
||||
}
|
||||
|
||||
return `data:image/svg+xml,${encodeURIComponent(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32">
|
||||
<polygon points="12,0 24,28 12,22 0,28" fill="${color}" stroke="#000" stroke-width="1.5"/>
|
||||
<polygon points="12,0 24,30 12,24 0,30" fill="${color}" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="12" r="1.5" fill="#000"/>
|
||||
<line x1="12" y1="12" x2="12" y2="22" stroke="#000" stroke-width="1.5"/>
|
||||
<line x1="8" y1="14" x2="16" y2="14" stroke="#000" stroke-width="1.5"/>
|
||||
@@ -47,57 +49,10 @@ function buildBoatIcon(boat: any): string {
|
||||
`)}`
|
||||
}
|
||||
|
||||
function buildPopupHtml(boat: any): string {
|
||||
const name = boat.name?.trim() || boat.callsign?.trim() || `MMSI: ${boat.mmsi}`
|
||||
const rows: [string, any][] = [
|
||||
['Type', boat.type],
|
||||
['MMSI', boat.mmsi],
|
||||
['Country', boat.country],
|
||||
['Callsign', boat.callsign || '-'],
|
||||
['IMO', boat.imo || '-'],
|
||||
['Ship Type', boat.ship_type ?? '-'],
|
||||
['Speed', boat.speed != null ? `${boat.speed} kts` : '-'],
|
||||
['Heading', boat.heading != null ? `${boat.heading}°` : '-'],
|
||||
['Course', boat.course != null ? `${boat.course}°` : '-'],
|
||||
['Lat / Lon', `${boat.lat?.toFixed(5)}, ${boat.lon?.toFixed(5)}`],
|
||||
['Distance', `${boat.distance?.toFixed(2)} nmi`],
|
||||
['Bearing', `${boat.bearing}°`],
|
||||
['Destination', boat.destination || '-'],
|
||||
['ETA', boat.eta || '-'],
|
||||
['Draught', boat.draught != null ? `${boat.draught}m` : '-'],
|
||||
['RSSI', `${boat.rssi?.toFixed(1)} dB`],
|
||||
['Drift', `${boat.drift?.toFixed(2)} ppm`],
|
||||
['Msg Types', boat.msg_type?.join(', ') || '-'],
|
||||
['Channels', boat.channels || '-'],
|
||||
['Sources', boat.sources],
|
||||
['Receiver', boat.receiver],
|
||||
['Count', boat.count],
|
||||
['Last Signal', boat.last_signal != null ? `${boat.last_signal}s ago` : '-'],
|
||||
['In Range', boat.in_range],
|
||||
]
|
||||
|
||||
return `
|
||||
<div style="font-family:monospace;color:#ccc;min-width:280px">
|
||||
<div style="padding:12px 16px;border-bottom:1px solid rgba(200,200,220,0.2)">
|
||||
<h3 style="margin:0;color:#7eeee1;font-size:16px">🚢 ${name}</h3>
|
||||
<div style="font-size:11px;color:#888;margin-top:4px">${boat.type || 'Unknown'}</div>
|
||||
</div>
|
||||
<div style="padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px">
|
||||
${rows.map(([label, val]) => `
|
||||
<div>
|
||||
<div style="color:#888;font-size:10px;font-weight:bold">${label}</div>
|
||||
<div style="color:#0f0;font-size:13px">${val ?? '-'}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
export class AISLayer {
|
||||
private map: Map
|
||||
private layer!: VectorLayer<VectorSource>
|
||||
private popups: Record<string, { el: HTMLDivElement, destroy: () => void }> = {}
|
||||
private popups: any = {}
|
||||
private data: any[] = []
|
||||
private clickHandler: ((e: any) => void) | null = null
|
||||
private refreshTimer: any = null
|
||||
@@ -105,19 +60,14 @@ export class AISLayer {
|
||||
|
||||
constructor(map: Map) { this.map = map }
|
||||
|
||||
// ── Public ────────────────────────────────────────────────────────────────
|
||||
|
||||
async show() {
|
||||
if (this.visible) return
|
||||
this.visible = true
|
||||
|
||||
this.layer = new VectorLayer({ source: new VectorSource(), zIndex: 100 })
|
||||
this.map.addLayer(this.layer)
|
||||
|
||||
await this._fetch()
|
||||
this._draw()
|
||||
this._attachClick()
|
||||
|
||||
this.refreshTimer = adjustedInterval(async () => {
|
||||
await this._fetch()
|
||||
this._draw()
|
||||
@@ -128,16 +78,12 @@ export class AISLayer {
|
||||
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 mmsi of Object.keys(this.popups)) this._closePopup(mmsi)
|
||||
this.map.removeLayer(this.layer)
|
||||
}
|
||||
|
||||
// ── Private ───────────────────────────────────────────────────────────────
|
||||
|
||||
private async _fetch() {
|
||||
this.data = await fetch(`${API}/ais`).then(r => r.json()) || []
|
||||
}
|
||||
@@ -145,7 +91,6 @@ export class AISLayer {
|
||||
private _draw() {
|
||||
const source = this.layer.getSource()!
|
||||
source.clear()
|
||||
|
||||
for (const boat of this.data) {
|
||||
if (boat.lat == null || boat.lon == null) continue
|
||||
const coord = fromLonLat([boat.lon, boat.lat])
|
||||
@@ -155,7 +100,7 @@ export class AISLayer {
|
||||
f.setStyle(new Style({
|
||||
image: new Icon({
|
||||
src: buildBoatIcon(boat),
|
||||
scale: 1,
|
||||
scale: 0.8,
|
||||
rotation: (boat.heading ?? boat.course ?? 0) * (Math.PI / 180),
|
||||
anchor: [0.5, 0.5],
|
||||
}),
|
||||
@@ -164,55 +109,51 @@ export class AISLayer {
|
||||
}
|
||||
}
|
||||
|
||||
private _calcPopupPos(boat: any): { x: number; y: number } {
|
||||
const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([boat.lon, boat.lat]))
|
||||
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(boat: any) {
|
||||
const mmsi = String(boat.mmsi)
|
||||
if (this.popups[mmsi]) return
|
||||
|
||||
const el = document.createElement('div')
|
||||
el.style.cssText = `
|
||||
position:absolute; z-index:9999; pointer-events:auto;
|
||||
background:rgba(0,0,0,0.88); border:1px solid rgba(200,200,220,0.3);
|
||||
border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,0.5); overflow:hidden;
|
||||
`
|
||||
const boatRef = ref(boat)
|
||||
const posRef = ref(this._calcPopupPos(boat))
|
||||
|
||||
const close = document.createElement('button')
|
||||
close.innerHTML = '✕'
|
||||
close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
|
||||
close.onclick = () => this._closePopup(mmsi)
|
||||
const container = document.createElement('div')
|
||||
document.body.appendChild(container)
|
||||
|
||||
el.innerHTML = buildPopupHtml(boat)
|
||||
el.appendChild(close)
|
||||
document.body.appendChild(el)
|
||||
this._positionPopup(el, boat)
|
||||
const app = createApp(ShipPopup, {
|
||||
boat: boatRef.value,
|
||||
position: posRef.value,
|
||||
onClose: () => this._closePopup(mmsi),
|
||||
onBringToFront: () => {
|
||||
highestZIndex++
|
||||
container.style.zIndex = String(highestZIndex)
|
||||
},
|
||||
})
|
||||
|
||||
this.popups[mmsi] = { el, destroy: () => el.remove() }
|
||||
app.mount(container)
|
||||
this.popups[mmsi] = {
|
||||
boatRef,
|
||||
posRef,
|
||||
unmount: () => { app.unmount(); container.remove() },
|
||||
}
|
||||
|
||||
private _positionPopup(el: HTMLDivElement, boat: any) {
|
||||
const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([boat.lon, boat.lat]))
|
||||
if (!pixel) return
|
||||
const rect = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
|
||||
el.style.left = `${rect.left + pixel[0] + 16}px`
|
||||
el.style.top = `${rect.top + pixel[1] - 16}px`
|
||||
}
|
||||
|
||||
private _closePopup(mmsi: string) {
|
||||
const popup = this.popups[mmsi]
|
||||
if (popup) { popup.destroy(); delete this.popups[mmsi] }
|
||||
if (popup) { popup.unmount(); delete this.popups[mmsi] }
|
||||
}
|
||||
|
||||
private _refreshPopups() {
|
||||
for (const mmsi of Object.keys(this.popups)) {
|
||||
const boat = this.data.find(b => String(b.mmsi) === mmsi)
|
||||
if (!boat) { this._closePopup(mmsi); continue }
|
||||
const { el } = <any>this.popups[mmsi]
|
||||
el.innerHTML = buildPopupHtml(boat)
|
||||
const close = document.createElement('button')
|
||||
close.innerHTML = '✕'
|
||||
close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
|
||||
close.onclick = () => this._closePopup(mmsi)
|
||||
el.appendChild(close)
|
||||
this._positionPopup(el, boat)
|
||||
this.popups[mmsi].boatRef.value = boat
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import time, math, board, smbus2, serial, psutil, pynmea2, bme680
|
||||
import adafruit_ltr390, threading, os, statistics
|
||||
import adafruit_ltr390, threading, os, statistics, requests
|
||||
from datetime import datetime, timezone
|
||||
from collections import deque
|
||||
from influxdb_client import InfluxDBClient, Point
|
||||
from influxdb_client.client.write_api import SYNCHRONOUS
|
||||
from dotenv import load_dotenv
|
||||
from pathlib import Path
|
||||
|
||||
@@ -16,9 +14,7 @@ def cfg():
|
||||
'LATITUDE': float(os.getenv('LATITUDE', '0.0')),
|
||||
'LONGITUDE': float(os.getenv('LONGITUDE', '0.0')),
|
||||
'ALTITUDE': float(os.getenv('ALTITUDE', '0.0')),
|
||||
'INFLUX_URL': os.getenv('INFLUX_URL', 'http://localhost:8086'),
|
||||
'INFLUX_TOKEN': os.getenv('INFLUX_TOKEN', ''),
|
||||
'INFLUX_ORG': os.getenv('INFLUX_ORG', 'weather'),
|
||||
'INFLUX_URL': os.getenv('INFLUX_URL', 'http://localhost:8428'),
|
||||
'INFLUX_BUCKET': os.getenv('INFLUX_BUCKET', 'station'),
|
||||
'GPS_PORT': os.getenv('GPS_PORT', '/dev/ttyS0'),
|
||||
'GPS_BAUD': int( os.getenv('GPS_BAUD', '9600')),
|
||||
@@ -49,31 +45,17 @@ def cfg():
|
||||
'CLOUD_LUX_WINDOW': int( os.getenv('CLOUD_LUX_WINDOW', '10')),
|
||||
}
|
||||
|
||||
# ── InfluxDB ──────────────────────────────────────────────────────────────────
|
||||
|
||||
_influx_client = None
|
||||
_influx_writer = None
|
||||
_influx_url = None
|
||||
_influx_token = None
|
||||
|
||||
def get_writer(c):
|
||||
global _influx_client, _influx_writer, _influx_url, _influx_token
|
||||
if c['INFLUX_URL'] != _influx_url or c['INFLUX_TOKEN'] != _influx_token:
|
||||
if _influx_client: _influx_client.close()
|
||||
_influx_client = InfluxDBClient(url=c['INFLUX_URL'], token=c['INFLUX_TOKEN'], org=c['INFLUX_ORG'])
|
||||
_influx_writer = _influx_client.write_api(write_options=SYNCHRONOUS)
|
||||
_influx_url, _influx_token = c['INFLUX_URL'], c['INFLUX_TOKEN']
|
||||
return _influx_writer
|
||||
# ── VictoriaMetrics ───────────────────────────────────────────────────────────
|
||||
|
||||
def write(c, measurement, fields, tags={}):
|
||||
try:
|
||||
p = Point(measurement).time(datetime.now(timezone.utc))
|
||||
for k, v in tags.items(): p = p.tag(k, v)
|
||||
for k, v in fields.items():
|
||||
if v is not None: p = p.field(k, float(v) if isinstance(v, (int, float)) else v)
|
||||
get_writer(c).write(bucket=c['INFLUX_BUCKET'], org=c['INFLUX_ORG'], record=p)
|
||||
except Exception as e:
|
||||
print(f"[InfluxDB] {measurement}: {e}")
|
||||
tag_str = ',' + ','.join(f"{k}={v}" for k, v in tags.items() if v) if tags else ''
|
||||
field_str = ','.join(
|
||||
f"{k}={'true' if v is True else 'false' if v is False else v}"
|
||||
for k, v in fields.items() if v is not None
|
||||
)
|
||||
if not field_str: return
|
||||
line = f"{measurement}{tag_str} {field_str}"
|
||||
requests.post(f"{c['INFLUX_URL']}/write", data=line, params={'db': c['INFLUX_BUCKET']}, timeout=2)
|
||||
|
||||
# ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -325,7 +307,6 @@ def get_expected_lux(c, solar_el):
|
||||
return round(baseline, 2)
|
||||
|
||||
def classify_clouds(c, lux, solar_el):
|
||||
# Resize window if config changed
|
||||
if _cloud_lux_window.maxlen != c['CLOUD_LUX_WINDOW']:
|
||||
_cloud_lux_window.__init__(maxlen=c['CLOUD_LUX_WINDOW'])
|
||||
_cloud_lux_window.append(lux)
|
||||
@@ -345,11 +326,11 @@ def classify_clouds(c, lux, solar_el):
|
||||
|
||||
vt = c['CLOUD_VOLATILITY_THRESH']
|
||||
if volatility is not None and volatility > vt and c['CLOUD_CLEAR_MAX'] < cloud_pct < c['CLOUD_CLOUDY_MAX']:
|
||||
label = 'Partly Cloudy'
|
||||
label = 'Partly_Cloudy'
|
||||
elif cloud_pct < c['CLOUD_CLEAR_MAX']:
|
||||
label = 'Clear'
|
||||
elif cloud_pct < c['CLOUD_MOSTLY_CLEAR_MAX']:
|
||||
label = 'Mostly Clear'
|
||||
label = 'Mostly_Clear'
|
||||
elif cloud_pct < c['CLOUD_CLOUDY_MAX']:
|
||||
label = 'Cloudy'
|
||||
else:
|
||||
@@ -370,7 +351,7 @@ def uv_index_label(uvi):
|
||||
if uvi < 3: return 'Low'
|
||||
elif uvi < 6: return 'Moderate'
|
||||
elif uvi < 8: return 'High'
|
||||
elif uvi < 11: return 'Very High'
|
||||
elif uvi < 11: return 'Very_High'
|
||||
else: return 'Extreme'
|
||||
|
||||
def read_ltr(c, sensor, solar_el, humidity=None):
|
||||
@@ -572,18 +553,12 @@ def solar_elevation(lat, lon):
|
||||
# ── Rain ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
def read_rain(c):
|
||||
try:
|
||||
write(c, 'rain', {'precipitation': 0}, tags={'raining': False})
|
||||
except Exception as e:
|
||||
print(f"[Rain] {e}")
|
||||
|
||||
# ── Wind ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
def read_wind(c):
|
||||
try:
|
||||
write(c, 'wind', {'wind_direction': 0, 'wind_speed': 0, 'wind_gusts': 0})
|
||||
except Exception as e:
|
||||
print(f"[Wind] {e}")
|
||||
|
||||
# ── System ────────────────────────────────────────────────────────────────────
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
influxdb-client
|
||||
requests
|
||||
python-dotenv
|
||||
smbus2
|
||||
adafruit-circuitpython-ltr390
|
||||
|
||||
62
server/package-lock.json
generated
62
server/package-lock.json
generated
@@ -8,7 +8,6 @@
|
||||
"name": "weather-station",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@influxdata/influxdb-client": "^1.33.2",
|
||||
"@scalar/express-api-reference": "^0.10.4",
|
||||
"@ztimson/utils": "^0.29.5",
|
||||
"adm-zip": "^0.5.17",
|
||||
@@ -18,20 +17,14 @@
|
||||
"yaml": "^2.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@influxdata/influxdb-client": {
|
||||
"version": "1.35.0",
|
||||
"resolved": "https://registry.npmjs.org/@influxdata/influxdb-client/-/influxdb-client-1.35.0.tgz",
|
||||
"integrity": "sha512-woWMi8PDpPQpvTsRaUw4Ig+nOGS/CWwAwS66Fa1Vr/EkW+NEwxI8YfPBsdBMn33jK2Y86/qMiiuX/ROHIkJLTw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@scalar/client-side-rendering": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/client-side-rendering/-/client-side-rendering-0.2.4.tgz",
|
||||
"integrity": "sha512-IQC39aQQXKsZXOqQw0LNiZ/gQ1WxHpF+WLTo/hurn0S/FmNHlBGUAhFyt1BeDSUYxics7ixgzQatKJDggafBTw==",
|
||||
"version": "0.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/client-side-rendering/-/client-side-rendering-0.2.6.tgz",
|
||||
"integrity": "sha512-wvnyBtNdYob6CdmpFqLSQoGM5q5Ra8bXyq713T/u8Nq1NXbULk1znz/LyR78u8g++0G8bkxnVzhvOf7s9FwHFw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@scalar/schemas": "0.5.0",
|
||||
"@scalar/types": "0.14.0",
|
||||
"@scalar/schemas": "0.7.0",
|
||||
"@scalar/types": "0.16.0",
|
||||
"@scalar/validation": "0.6.0"
|
||||
},
|
||||
"engines": {
|
||||
@@ -39,33 +32,33 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@scalar/express-api-reference": {
|
||||
"version": "0.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/express-api-reference/-/express-api-reference-0.10.4.tgz",
|
||||
"integrity": "sha512-/FkuP+B9ppWiQbf0Bhygx8CwoLXiEGFgS7OK14FM/JH0SeAaGfQiacUgPEpxJYI2qnqFHkrys8YH2jl400wDfg==",
|
||||
"version": "0.10.6",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/express-api-reference/-/express-api-reference-0.10.6.tgz",
|
||||
"integrity": "sha512-5gXV4Cv6EA8/hUo1e3ZMHKo5w5D45QTCzsA2Qvrf4OEe141iKdtSErYYxaZ/c2RIVidRUohDr3WC2HN+HRDosw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@scalar/client-side-rendering": "0.2.4"
|
||||
"@scalar/client-side-rendering": "0.2.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=22"
|
||||
}
|
||||
},
|
||||
"node_modules/@scalar/helpers": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/helpers/-/helpers-0.8.2.tgz",
|
||||
"integrity": "sha512-qNbqUjSB3S4Gr4A0oANcm5G1Ip+EqBxICYKhe9YzmnaBpbmW6shxqpiivApTvvuDf+uIhR3uMwWyVQbYcGLsxA==",
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/helpers/-/helpers-0.9.0.tgz",
|
||||
"integrity": "sha512-M34CLRCttqC1bXthI/QSzQj0s5C6nrU2PFWf/vOT3RpycbiGDGQbqR+5RfFzpOIQvRqbHfNdcRbeiZBw+vCbkQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=22"
|
||||
}
|
||||
},
|
||||
"node_modules/@scalar/schemas": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/schemas/-/schemas-0.5.0.tgz",
|
||||
"integrity": "sha512-aV0PWqFpQft9a6d4Z6HOTHKDaA+K4AquxSPfBDI1c5f6lMe5l3zViww/iBQA/Yw+V1+Y2iwSVzhuxaktC1UiMg==",
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/schemas/-/schemas-0.7.0.tgz",
|
||||
"integrity": "sha512-Roj0e7S29yTbGojwdx/b8C1H5arVN4h/VSPrtQ5vb9NT2ZAbrfPQVmpQYrF845rKOWX7kSzIvyBwrKNEMIAkxA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@scalar/helpers": "0.8.2",
|
||||
"@scalar/helpers": "0.9.0",
|
||||
"@scalar/validation": "0.6.0"
|
||||
},
|
||||
"engines": {
|
||||
@@ -73,12 +66,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@scalar/types": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/types/-/types-0.14.0.tgz",
|
||||
"integrity": "sha512-aS1FvHbKhBC51mWqXmhkPe6lmhCd9+u//DQ1YTiCWOz4/fXAdWfwHvW9UZ7AzzcGwGiCo9diE81xV+UvSI1qIg==",
|
||||
"version": "0.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@scalar/types/-/types-0.16.0.tgz",
|
||||
"integrity": "sha512-26OSrvZjKWZ7F236wWmJajBGDVFJuvXFJqKPFqbt/PxlgZKXQXfJsZorASRQmdNogT576nxYalQ7oaYWEnQwfw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@scalar/helpers": "0.8.2",
|
||||
"@scalar/helpers": "0.9.0",
|
||||
"nanoid": "^5.1.6",
|
||||
"type-fest": "^5.3.1",
|
||||
"zod": "^4.3.5"
|
||||
@@ -838,9 +831,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "5.1.15",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.15.tgz",
|
||||
"integrity": "sha512-kBg3RpGtIe+RpTbyXwoI6pk5yD7KUiI3sygUqgeBMRst42KmhB4RZC7eiO9Wa1HIpaCCtpE2DJ6OI4Wi5ebwFw==",
|
||||
"version": "5.1.16",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.16.tgz",
|
||||
"integrity": "sha512-kVrnsrJqMR8+oLJnGEmSWw9BivK5mt7H3FZatVRjrc5wGqFYuBxX1yG7+A7Gi5AefkX6t/oCkizcQgpu0cY1dQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@@ -981,12 +974,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.15.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
|
||||
"integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
|
||||
"version": "6.15.3",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
|
||||
"integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"side-channel": "^1.1.0"
|
||||
"es-define-property": "^1.0.1",
|
||||
"side-channel": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
"start": "node src/server.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@influxdata/influxdb-client": "^1.33.2",
|
||||
"@scalar/express-api-reference": "^0.10.4",
|
||||
"@ztimson/utils": "^0.29.5",
|
||||
"adm-zip": "^0.5.17",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
@@ -1,152 +1,107 @@
|
||||
import {InfluxDB} from '@influxdata/influxdb-client';
|
||||
import {cfg} from './config.mjs';
|
||||
|
||||
const MEASUREMENTS = ['accumulation', 'environment', 'light', 'lightning', 'rain', 'seismic', 'wind'];
|
||||
|
||||
let client, currentUrl, currentToken;
|
||||
|
||||
function getClient() {
|
||||
const c = cfg();
|
||||
if(c.INFLUX_URL !== currentUrl || c.INFLUX_TOKEN !== currentToken) {
|
||||
client = new InfluxDB({url: c.INFLUX_URL, token: c.INFLUX_TOKEN});
|
||||
currentUrl = c.INFLUX_URL;
|
||||
currentToken = c.INFLUX_TOKEN;
|
||||
}
|
||||
return {client, c};
|
||||
async function query(c, q) {
|
||||
const url = new URL('/api/v1/query_range', c.INFLUX_URL);
|
||||
url.searchParams.set('query', q);
|
||||
url.searchParams.set('step', '60s');
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
return json.data?.result || [];
|
||||
}
|
||||
|
||||
async function query(flux) {
|
||||
const {client, c} = getClient();
|
||||
const api = client.getQueryApi(c.INFLUX_ORG);
|
||||
const rows = [];
|
||||
return new Promise((resolve, reject) => {
|
||||
api.queryRows(flux, {
|
||||
next(row, meta) { rows.push(meta.toObject(row)); },
|
||||
error(err) { reject(err); },
|
||||
complete() { resolve(rows); },
|
||||
});
|
||||
});
|
||||
async function queryInstant(c, q) {
|
||||
const url = new URL('/api/v1/query', c.INFLUX_URL);
|
||||
url.searchParams.set('query', q);
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
return json.data?.result || [];
|
||||
}
|
||||
|
||||
function truncateToHour(iso) {
|
||||
const d = new Date(iso);
|
||||
d.setMinutes(0, 0, 0);
|
||||
const pad = n => String(n).padStart(2, '0');
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:00`;
|
||||
}
|
||||
|
||||
function truncateToDay(iso) {
|
||||
return new Date(iso).toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function extractRow(row) {
|
||||
function metricToFields(results) {
|
||||
const out = {};
|
||||
for(const [k, v] of Object.entries(row)) {
|
||||
if(!k.startsWith('_') && k !== 'result' && k !== 'table') out[k] = v;
|
||||
for (const r of results) {
|
||||
const field = r.metric.__name__ || r.metric.field;
|
||||
const val = r.value?.[1] ?? r.values?.at(-1)?.[1];
|
||||
if (val !== undefined) out[field] = parseFloat(val);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export async function queryCurrent() {
|
||||
const {c} = getClient();
|
||||
const flux = `
|
||||
from(bucket: "${c.INFLUX_BUCKET}")
|
||||
|> range(start: -1h)
|
||||
|> filter(fn: (r) => ${MEASUREMENTS.map(m => `r._measurement == "${m}"`).join(' or ')})
|
||||
|> last()
|
||||
|> pivot(rowKey: ["_time"], columnKey: ["_field"], valueColumn: "_value")
|
||||
`;
|
||||
const rows = await query(flux);
|
||||
const result = {time: new Date()};
|
||||
for(const row of rows) {
|
||||
Object.assign(result, extractRow(row));
|
||||
const c = cfg();
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const out = {time: new Date()};
|
||||
|
||||
for (const m of MEASUREMENTS) {
|
||||
const results = await queryInstant(c, `{measurement="${m}"}`);
|
||||
Object.assign(out, metricToFields(results));
|
||||
}
|
||||
return result;
|
||||
return out;
|
||||
}
|
||||
|
||||
export async function queryHourly(start, end) {
|
||||
const {c} = getClient();
|
||||
const flux = `
|
||||
from(bucket: "${c.INFLUX_BUCKET}")
|
||||
|> range(start: ${start.toISOString()}, stop: ${end.toISOString()})
|
||||
|> filter(fn: (r) => ${MEASUREMENTS.map(m => `r._measurement == "${m}"`).join(' or ')})
|
||||
|> group(columns: ["_field"])
|
||||
|> aggregateWindow(every: 1h, fn: mean, createEmpty: false)
|
||||
|> pivot(rowKey: ["_time"], columnKey: ["_field"], valueColumn: "_value")
|
||||
`;
|
||||
const rows = await query(flux);
|
||||
return rows.map(row => ({
|
||||
time: truncateToHour(row._time),
|
||||
...extractRow(row),
|
||||
}));
|
||||
const c = cfg();
|
||||
const s = Math.floor(start.getTime() / 1000);
|
||||
const e = Math.floor(end.getTime() / 1000);
|
||||
const byTime = {};
|
||||
|
||||
for (const m of MEASUREMENTS) {
|
||||
const results = await query(c, `avg_over_time({measurement="${m}"}[1h])`);
|
||||
results.forEach(r => {
|
||||
const field = r.metric.__name__;
|
||||
r.values.forEach(([ts, val]) => {
|
||||
const time = new Date(ts * 1000).toISOString().slice(0, 13) + ':00';
|
||||
if (!byTime[time]) byTime[time] = {time};
|
||||
byTime[time][field] = parseFloat(val);
|
||||
});
|
||||
});
|
||||
}
|
||||
return Object.values(byTime).sort((a, b) => a.time.localeCompare(b.time));
|
||||
}
|
||||
|
||||
export async function queryDaily(start, end) {
|
||||
const {c} = getClient();
|
||||
const measurements = ['accumulation', 'environment', 'light', 'lightning', 'seismic'];
|
||||
const results = {};
|
||||
const c = cfg();
|
||||
const byTime = {};
|
||||
|
||||
for(const m of measurements) {
|
||||
for (const m of ['accumulation', 'environment', 'light', 'lightning', 'seismic']) {
|
||||
const [means, mins, maxs] = await Promise.all([
|
||||
query(`
|
||||
from(bucket: "${c.INFLUX_BUCKET}")
|
||||
|> range(start: ${start.toISOString()}, stop: ${end.toISOString()})
|
||||
|> filter(fn: (r) => r._measurement == "${m}")
|
||||
|> group(columns: ["_field"])
|
||||
|> aggregateWindow(every: 1d, fn: mean, createEmpty: false)
|
||||
|> pivot(rowKey: ["_time"], columnKey: ["_field"], valueColumn: "_value")
|
||||
`),
|
||||
query(`
|
||||
from(bucket: "${c.INFLUX_BUCKET}")
|
||||
|> range(start: ${start.toISOString()}, stop: ${end.toISOString()})
|
||||
|> filter(fn: (r) => r._measurement == "${m}")
|
||||
|> group(columns: ["_field"])
|
||||
|> aggregateWindow(every: 1d, fn: min, createEmpty: false)
|
||||
|> pivot(rowKey: ["_time"], columnKey: ["_field"], valueColumn: "_value")
|
||||
`),
|
||||
query(`
|
||||
from(bucket: "${c.INFLUX_BUCKET}")
|
||||
|> range(start: ${start.toISOString()}, stop: ${end.toISOString()})
|
||||
|> filter(fn: (r) => r._measurement == "${m}")
|
||||
|> group(columns: ["_field"])
|
||||
|> aggregateWindow(every: 1d, fn: max, createEmpty: false)
|
||||
|> pivot(rowKey: ["_time"], columnKey: ["_field"], valueColumn: "_value")
|
||||
`),
|
||||
query(c, `avg_over_time({measurement="${m}"}[1d])`),
|
||||
query(c, `min_over_time({measurement="${m}"}[1d])`),
|
||||
query(c, `max_over_time({measurement="${m}"}[1d])`),
|
||||
]);
|
||||
|
||||
for(const row of means) {
|
||||
const time = truncateToDay(row._time);
|
||||
if(!results[time]) results[time] = {time};
|
||||
Object.assign(results[time], extractRow(row));
|
||||
}
|
||||
means.forEach(r => {
|
||||
r.values.forEach(([ts, val]) => {
|
||||
const time = new Date(ts * 1000).toISOString().slice(0, 10);
|
||||
if (!byTime[time]) byTime[time] = {time};
|
||||
byTime[time][r.metric.__name__] = parseFloat(val);
|
||||
});
|
||||
});
|
||||
|
||||
for(const row of mins) {
|
||||
const time = truncateToDay(row._time);
|
||||
if(!results[time]) results[time] = {time};
|
||||
if(row.temperature != null) results[time].env_temp_min_c = row.temperature;
|
||||
}
|
||||
for(const row of maxs) {
|
||||
const time = truncateToDay(row._time);
|
||||
if(!results[time]) results[time] = {time};
|
||||
if(row.temperature != null) results[time].env_temp_max_c = row.temperature;
|
||||
}
|
||||
}
|
||||
const applyMinMax = (results, suffix) => results.forEach(r => {
|
||||
if (r.metric.__name__ !== 'temperature') return;
|
||||
r.values.forEach(([ts, val]) => {
|
||||
const time = new Date(ts * 1000).toISOString().slice(0, 10);
|
||||
if (!byTime[time]) byTime[time] = {time};
|
||||
byTime[time][suffix] = parseFloat(val);
|
||||
});
|
||||
});
|
||||
|
||||
return Object.values(results).sort((a, b) => a.time.localeCompare(b.time));
|
||||
applyMinMax(mins, 'env_temp_min_c');
|
||||
applyMinMax(maxs, 'env_temp_max_c');
|
||||
}
|
||||
return Object.values(byTime).sort((a, b) => a.time.localeCompare(b.time));
|
||||
}
|
||||
|
||||
export async function getCoords() {
|
||||
const {c} = getClient();
|
||||
const flux = `
|
||||
from(bucket: "${c.INFLUX_BUCKET}")
|
||||
|> range(start: -24h)
|
||||
|> filter(fn: (r) => r._measurement == "gps")
|
||||
|> last()
|
||||
|> pivot(rowKey: ["_time"], columnKey: ["_field"], valueColumn: "_value")
|
||||
`;
|
||||
const rows = await query(flux);
|
||||
if(rows.length && rows[0].latitude && rows[0].longitude) {
|
||||
return {latitude: rows[0].latitude, longitude: rows[0].longitude, altitude: rows[0].altitude || c.ALTITUDE};
|
||||
const c = cfg();
|
||||
const results = await queryInstant(c, `{measurement="gps"}`);
|
||||
const fields = metricToFields(results);
|
||||
|
||||
if (fields.latitude && fields.longitude) {
|
||||
return {latitude: fields.latitude, longitude: fields.longitude, altitude: fields.altitude || c.ALTITUDE};
|
||||
}
|
||||
return {latitude: c.LATITUDE, longitude: c.LONGITUDE, altitude: c.ALTITUDE};
|
||||
}
|
||||
|
||||
97
setup.sh
97
setup.sh
@@ -3,22 +3,48 @@ set -e
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
USER_NAME="$(whoami)"
|
||||
VM_VERSION="1.99.0"
|
||||
VM_DIR="/opt/victoriametrics"
|
||||
|
||||
echo "🔧 Setting up Weather Station..."
|
||||
|
||||
# ── InfluxDB ──────────────────────────────────────────────────────────────────
|
||||
# ── VictoriaMetrics ───────────────────────────────────────────────────────────
|
||||
|
||||
if ! command -v influxd &> /dev/null; then
|
||||
echo "📦 Installing InfluxDB..."
|
||||
curl https://repos.influxdata.com/influxdata-archive.key | gpg --dearmor | sudo tee /usr/share/keyrings/influxdata-archive-keyring.gpg > /dev/null
|
||||
echo "deb [signed-by=/usr/share/keyrings/influxdata-archive-keyring.gpg] https://repos.influxdata.com/debian stable main" | sudo tee /etc/apt/sources.list.d/influxdata.list
|
||||
sudo apt update && sudo apt install -y influxdb2
|
||||
sudo systemctl enable --now influxdb
|
||||
if ! systemctl is-enabled --quiet victoriametrics 2>/dev/null; then
|
||||
echo "📦 Installing VictoriaMetrics..."
|
||||
sudo mkdir -p $VM_DIR/data
|
||||
|
||||
wget -qO /tmp/vm.tar.gz \
|
||||
"https://github.com/VictoriaMetrics/VictoriaMetrics/releases/download/v${VM_VERSION}/victoria-metrics-arm-v7-v${VM_VERSION}.tar.gz"
|
||||
sudo tar xf /tmp/vm.tar.gz -C $VM_DIR
|
||||
sudo chmod +x $VM_DIR/victoria-metrics-prod
|
||||
rm /tmp/vm.tar.gz
|
||||
|
||||
sudo tee /etc/systemd/system/victoriametrics.service > /dev/null <<EOF
|
||||
[Unit]
|
||||
Description=VictoriaMetrics
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
ExecStart=$VM_DIR/victoria-metrics-prod \
|
||||
-storageDataPath=$VM_DIR/data \
|
||||
-httpListenAddr=:8428 \
|
||||
-retentionPeriod=12
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
User=root
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
EOF
|
||||
|
||||
sudo systemctl daemon-reload
|
||||
sudo systemctl enable --now victoriametrics
|
||||
else
|
||||
echo "✅ InfluxDB already installed, skipping..."
|
||||
echo "✅ VictoriaMetrics already installed, skipping..."
|
||||
fi
|
||||
|
||||
# ── Node.js ───────────────────────────────────────────────────────────────────
|
||||
# ── Server / Node.js ──────────────────────────────────────────────────────────
|
||||
|
||||
if ! command -v node &> /dev/null; then
|
||||
echo "📦 Installing Node.js..."
|
||||
@@ -28,7 +54,47 @@ else
|
||||
echo "✅ Node.js already installed, skipping..."
|
||||
fi
|
||||
|
||||
# ── Python venv ───────────────────────────────────────────────────────────────
|
||||
if [ ! -d "$SCRIPT_DIR/server/public/index.html" ]; then
|
||||
echo "🌐 Building Client..."
|
||||
cd "$SCRIPT_DIR/client"
|
||||
npm ci
|
||||
npx vite build
|
||||
else
|
||||
echo "✅ Client installed, skipping..."
|
||||
fi
|
||||
|
||||
if [ ! -d "$SCRIPT_DIR/server/node_modules" ]; then
|
||||
echo "🌐 Installing Server..."
|
||||
cd "$SCRIPT_DIR/server"
|
||||
npm ci
|
||||
else
|
||||
echo "✅ Server installed, skipping..."
|
||||
fi
|
||||
|
||||
if ! systemctl is-enabled --quiet weather-station 2>/dev/null; then
|
||||
echo "⚙️ Installing server service..."
|
||||
sudo tee /etc/systemd/system/weather-station.service > /dev/null <<EOF
|
||||
[Unit]
|
||||
Description=Weather Station API
|
||||
After=network.target victoriametrics.service
|
||||
|
||||
[Service]
|
||||
WorkingDirectory=$SCRIPT_DIR/server
|
||||
ExecStart=npm run start
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
User=$USER_NAME
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
EOF
|
||||
sudo systemctl daemon-reload
|
||||
sudo systemctl enable --now weather-sensors
|
||||
else
|
||||
echo "✅ Server service already installed, skipping..."
|
||||
fi
|
||||
|
||||
# ── Sensors / Python venv ─────────────────────────────────────────────────────
|
||||
|
||||
if [ ! -d "$SCRIPT_DIR/sensors/venv" ]; then
|
||||
echo "🐍 Setting up Python environment..."
|
||||
@@ -40,14 +106,12 @@ else
|
||||
echo "✅ Python environment already set up, skipping..."
|
||||
fi
|
||||
|
||||
# ── Systemd service ───────────────────────────────────────────────────────────
|
||||
|
||||
if ! systemctl is-enabled --quiet weather-sensors 2>/dev/null; then
|
||||
echo "⚙️ Installing systemd service..."
|
||||
echo "⚙️ Installing sensor service..."
|
||||
sudo tee /etc/systemd/system/weather-sensors.service > /dev/null <<EOF
|
||||
[Unit]
|
||||
Description=Weather Station Sensors
|
||||
After=network.target
|
||||
After=network.target victoriametrics.service
|
||||
|
||||
[Service]
|
||||
WorkingDirectory=$SCRIPT_DIR/sensors
|
||||
@@ -62,10 +126,9 @@ EOF
|
||||
sudo systemctl daemon-reload
|
||||
sudo systemctl enable --now weather-sensors
|
||||
else
|
||||
echo "✅ Systemd service already installed, skipping..."
|
||||
echo "✅ Sensor service already installed, skipping..."
|
||||
fi
|
||||
|
||||
echo "✅ All done!"
|
||||
echo " InfluxDB UI: http://localhost:8086"
|
||||
echo " VictoriaMetrics UI: http://localhost:8428"
|
||||
echo " Sensor logs: journalctl -fu weather-sensors"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user