From 298630159955371c0f54b8ac554e536f92941e59 Mon Sep 17 00:00:00 2001 From: Nate Emmert Date: Mon, 24 Aug 2026 15:38:16 -0400 Subject: [PATCH] Fix wind direction rose invisible on iOS (Retina DPR bug) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/public/dashboard.html | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/app/public/dashboard.html b/app/public/dashboard.html index 7c0cdc7..08ec42c 100644 --- a/app/public/dashboard.html +++ b/app/public/dashboard.html @@ -630,7 +630,9 @@ function drawWindRose(canvas, readings) { } const max = Math.max(...buckets, 1); 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 R = Math.min(cx, cy) - 24; const style = getComputedStyle(document.documentElement); @@ -871,11 +873,13 @@ async function updateLatest() { // Ambient rain accumulators if (d.eventrainin != null && d.eventrainin > 0) { set('sEventRain', d.eventrainin, 2); - document.getElementById('sEventRainTile').style.display = ''; + const evTile = document.getElementById('sEventRainTile'); + if (evTile) evTile.style.display = ''; } if (d.totalrainin != null) { set('sTotalRain', d.totalrainin, 2); - document.getElementById('sTotalRainTile').style.display = ''; + const totTile = document.getElementById('sTotalRainTile'); + if (totTile) totTile.style.display = ''; } // Hero wind line @@ -888,7 +892,7 @@ async function updateLatest() { } // Wind direction on secondary tile 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);