nate/weather
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix wind direction rose invisible on iOS (Retina DPR bug)

Browse Source 
drawWindRose used canvas.width (physical pixels) for coordinates while
the context was already pre-scaled by devicePixelRatio. On iPhones
(dpr=2/3) this placed the entire rose off-screen. Fix by dividing by
dpr to get CSS dimensions before computing cx/cy/R.

Also make sWindDir stat always show a value ('—' fallback when winddir
is null) and add null guards on sEventRainTile/sTotalRainTile to
prevent a silent throw from aborting updateLatest() early.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 4.6 committed 2026-08-24 15:38:16 -04:00
1 parent 0d00c7f6ab
commit 2986301599
1 file changed
+8 -4
Download Patch File Download Diff File Expand all files Collapse all files
app/public/dashboard.html
+8 -4
View File
@@ -630,7 +630,9 @@ function drawWindRose(canvas, readings) {
} }
const max = Math.max(...buckets, 1); const max = Math.max(...buckets, 1);
const c = canvas.getContext('2d'); const c = canvas.getContext('2d');
const W = canvas.width, H = canvas.height; // Context is pre-scaled by DPR — use CSS dimensions for all coordinates
const dpr = window.devicePixelRatio || 1;
const W = canvas.width / dpr, H = canvas.height / dpr;
const cx = W / 2, cy = H / 2; const cx = W / 2, cy = H / 2;
const R = Math.min(cx, cy) - 24; const R = Math.min(cx, cy) - 24;
const style = getComputedStyle(document.documentElement); const style = getComputedStyle(document.documentElement);
@@ -871,11 +873,13 @@ async function updateLatest() {
// Ambient rain accumulators // Ambient rain accumulators
if (d.eventrainin != null && d.eventrainin > 0) { if (d.eventrainin != null && d.eventrainin > 0) {
set('sEventRain', d.eventrainin, 2); set('sEventRain', d.eventrainin, 2);
document.getElementById('sEventRainTile').style.display = ''; const evTile = document.getElementById('sEventRainTile');
if (evTile) evTile.style.display = '';
} }
if (d.totalrainin != null) { if (d.totalrainin != null) {
set('sTotalRain', d.totalrainin, 2); set('sTotalRain', d.totalrainin, 2);
document.getElementById('sTotalRainTile').style.display = ''; const totTile = document.getElementById('sTotalRainTile');
if (totTile) totTile.style.display = '';
} }
// Hero wind line // Hero wind line
@@ -888,7 +892,7 @@ async function updateLatest() {
} }
// Wind direction on secondary tile // Wind direction on secondary tile
const windDirEl = document.getElementById('sWindDir'); const windDirEl = document.getElementById('sWindDir');
if (windDirEl && d.winddir != null) windDirEl.textContent = cardinal(d.winddir); if (windDirEl) windDirEl.textContent = d.winddir != null ? cardinal(d.winddir) : '—';
colorTiles(d); colorTiles(d);