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

updated client

Browse Source
This commit is contained in:
Zakary Timson
2026-06-21 22:28:29 -04:00
parent 533aec8ba2
commit 65184d65c5
5 changed files with 4012 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3804
client/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
client/package.json
View File

@@ -15,10 +15,14 @@
"@types/node": "^24.13.2",
"@vitejs/plugin-vue": "^6.0.7",
"@vue/tsconfig": "^0.9.1",
"chart.js": "^4.5.1",
"npm-run-all2": "^9.0.2",
"ol": "^10.9.0",
"sass-embedded": "^1.100.0",
"typescript": "~6.0.0",
"vite": "^8.0.16",
"vite-plugin-vue-devtools": "^8.1.2",
"vue-chartjs": "^5.3.3",
"vue-tsc": "^3.3.5"
},
"engines": {

12
client/src/assets/main.css
View File

@@ -1,9 +1,9 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
width: 100%;
margin: 0;
padding: 0;
font-weight: normal;
}
@@ -26,10 +26,4 @@ a,
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

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

@@ -3,26 +3,68 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import CircleGeom from 'ol/geom/Circle'
import { fromLonLat } from 'ol/proj'
import { Style, Fill, Stroke, Circle as CircleStyle } from 'ol/style'
import { current } from '../services/weather'
import 'ol/ol.css'
const props = defineProps<{ dark: boolean }>()
const mapEl = ref<HTMLDivElement>()
let map: Map
const OWM_KEY = import.meta.env.VITE_OWM_API_KEY || ''
// Nautical miles to meters
const NM = 1852
const OVERLAYS = [
{ id: 'clouds', label: 'Clouds', icon: '☁️', url: (ts: number) => `https://tilecache.rainviewer.com/v2/coverage/0/256/{z}/{x}/{y}/1/1_1.png` },
{ id: 'rain', label: 'Rain', icon: '🌧️', url: (ts: number) => `https://tilecache.rainviewer.com/v2/radar/${ts}/256/{z}/{x}/{y}/4/1_1.png` },
{ id: 'wind', label: 'Wind', icon: '💨', url: (_: number) => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=demo` },
{ id: 'temp', label: 'Temperature', icon: '🌡️', url: (_: number) => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=demo` },
{ id: 'pressure', label: 'Pressure', icon: '📊', url: (_: number) => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=demo` },
{
id: 'rain',
label: 'Rain',
icon: '🌧️',
url: (ts: number) => `https://tilecache.rainviewer.com/v2/radar/${ts}/256/{z}/{x}/{y}/4/1_1.png`,
needsTs: true,
},
{
id: 'clouds',
label: 'Clouds',
icon: '☁️',
url: () => `https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
{
id: 'wind',
label: 'Wind',
icon: '💨',
url: () => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
{
id: 'temp',
label: 'Temp',
icon: '🌡️',
url: () => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
{
id: 'pressure',
label: 'Pressure',
icon: '📊',
url: () => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
needsTs: false,
},
]
const activeOverlays = ref<Set<string>>(new Set(['rain']))
const radarTs = ref(Math.floor(Date.now() / 1000))
const overlayLayers = new Map<string, TileLayer<XYZ>>()
let map: Map
let stationLayer: VectorLayer<VectorSource>
let radarInterval: ReturnType<typeof setInterval>
function buildBaseLayer(dark: boolean) {
@@ -33,6 +75,7 @@ function buildBaseLayer(dark: boolean) {
: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
attributions: '© Stadia Maps © OpenMapTiles © OpenStreetMap',
}),
zIndex: 0,
})
}
@@ -41,10 +84,51 @@ function buildOverlayLayer(id: string): TileLayer<XYZ> {
return new TileLayer({
source: new XYZ({ url: def.url(radarTs.value), attributions: '' }),
opacity: 0.6,
zIndex: 10,
zIndex: 5,
})
}
function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer<VectorSource> {
const center = fromLonLat([lon, lat])
const source = new VectorSource()
const ringColor = dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.18)'
const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'
// Rings at 50, 100, 150, 200 nm
for (const nm of [50, 100, 150, 200]) {
const ring = new Feature(new CircleGeom(center, nm * NM))
ring.setStyle(new Style({
stroke: new Stroke({ color: ringStroke, width: 1, lineDash: [6, 4] }),
fill: new Fill({ color: 'transparent' }),
}))
source.addFeature(ring)
}
// Station dot
const dot = new Feature(new Point(center))
dot.setStyle(new Style({
image: new CircleStyle({
radius: 7,
fill: new Fill({ color: dark ? '#ffffff' : '#000000' }),
stroke: new Stroke({ color: dark ? '#000000' : '#ffffff', width: 2 }),
}),
}))
source.addFeature(dot)
// Pulsing outer ring — just a slightly larger static ring for now
const pulse = new Feature(new Point(center))
pulse.setStyle(new Style({
image: new CircleStyle({
radius: 13,
fill: new Fill({ color: 'transparent' }),
stroke: new Stroke({ color: dark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.3)', width: 1.5 }),
}),
}))
source.addFeature(pulse)
return new VectorLayer({ source, zIndex: 20 })
}
function toggleOverlay(id: string) {
if (activeOverlays.value.has(id)) {
activeOverlays.value.delete(id)
@@ -62,17 +146,15 @@ onMounted(() => {
const lat = (current.value.gps_lat as number) || 0
const lon = (current.value.gps_lon as number) || 0
stationLayer = buildStationLayer(lat, lon, props.dark)
map = new Map({
target: mapEl.value!,
layers: [buildBaseLayer(props.dark)],
view: new View({
center: fromLonLat([lon, lat]),
zoom: 9,
}),
layers: [buildBaseLayer(props.dark), stationLayer],
view: new View({ center: fromLonLat([lon, lat]), zoom: 7 }),
controls: [],
})
// Add default active overlays
for (const id of activeOverlays.value) {
const layer = buildOverlayLayer(id)
overlayLayers.set(id, layer)
@@ -84,16 +166,22 @@ onMounted(() => {
radarTs.value = Math.floor(Date.now() / 1000)
const layer = overlayLayers.get('rain')
if (layer) {
layer.setSource(new XYZ({ url: OVERLAYS.find(o => o.id === 'rain')!.url(radarTs.value) }))
const def = OVERLAYS.find(o => o.id === 'rain')!
layer.setSource(new XYZ({ url: def.url(radarTs.value) }))
}
}, 5 * 60 * 1000)
})
onUnmounted(() => clearInterval(radarInterval))
watch(() => props.dark, (dark) => {
const layers = map.getLayers()
layers.setAt(0, buildBaseLayer(dark))
watch(() => props.dark, dark => {
map.getLayers().setAt(0, buildBaseLayer(dark))
// Rebuild station layer with correct colors
map.removeLayer(stationLayer)
const lat = (current.value.gps_lat as number) || 0
const lon = (current.value.gps_lon as number) || 0
stationLayer = buildStationLayer(lat, lon, dark)
map.addLayer(stationLayer)
})
</script>
@@ -123,6 +211,7 @@ watch(() => props.dark, (dark) => {
border-radius: 99px;
padding: 6px 10px;
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
backdrop-filter: blur(8px);
}
.overlay-btn {
@@ -145,9 +234,7 @@ watch(() => props.dark, (dark) => {
color: #fff;
}
&:hover:not(.active) {
background: var(--hover);
}
&:hover:not(.active) { background: var(--hover); }
}
</style>

1
client/tsconfig.app.json
View File

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