feat: klein grafiekje van het temperatuurverloop van vandaag

In de lege ruimte rechts van de grote buitentemperatuur staat nu het verloop van vandaag: onderschrift "Vandaag", de lijn, en tijdlabels op hele uren met "nu" rechts. Geen y-as, want de laagste en hoogste waarde van vandaag staan al onder de balk en dat is precies de schaal. Het getal en het grafiekje staan in een flexrij, zodat het grafiekje de resterende ruimte pakt en meebeweegt als het getal smaller of breder wordt. Vlak na middernacht zijn er nog geen twee meetpunten; dan blijft het blokje verborgen in plaats van een leeg kader te tonen. Data uit een extra getmeasure (scale=30min, type=Temperature, op de buitenmodule) vanaf middernacht lokale tijd, cache 15 minuten, in de payload als outdoor_history: {points, stale} zodat een storing daar de rest niet raakt. PressureHistory is generiek gemaakt tot MeasureSeries met de naam van het waardeveld als parameter, in plaats van er een bijna identieke tweede klasse naast te zetten. StationMapper geeft nu ook het id van de buitenmodule door. Onderweg gevonden: FixtureSource deed een modulo op een float, wat een PHP-deprecation vóór de JSON in de response zette. Dat verklaart de kapotte JSON die eerder in de browserconsole langskwam. Opgelost met intdiv. Servicewerker naar v10. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Merge feature/hele-uren: tijdlabels op hele uren bij de luchtdrukgrafiek
2026-09-13 11:50:40 +02:00 · 2026-09-13 11:33:14 +02:00 · 2026-09-13 11:33:14 +02:00 · 2026-09-13 11:30:15 +02:00 · 2026-09-13 11:30:11 +02:00 · 2026-09-13 11:13:32 +02:00
29 changed files with 940 additions and 96 deletions
@@ -31,7 +31,9 @@ return [
        'stations' => 300,
        'measure' => 900,
        'pressure' => 900,
+        'temperature' => 900,
        'forecast' => 3600,
+        'radar' => 240,
    ],

    // Map voor tokens en cache. Moet schrijfbaar zijn voor de webserver en buiten de docroot liggen.
@@ -251,6 +251,21 @@ De iconen `sun`, `partly`, `rain` en `showers` staan in de mockup. Maak `cloud`,
  - De temperatuur staat groot, met 1 decimaal ("16,4°"). Het label heeft een trend-aanduiding: `up` → "↗ stijgend", `down` → "↘ dalend", `stable` → "→ stabiel".
  - Daaronder de gradiëntbalk van `--cold` naar `--warm`. De marker staat op `(temp − min) / (max − min)`, begrensd op 0–100%. Bij `max == min` staat hij op 50%.
  - Onder de balk: "9,2° laagst om 06:10" en "19,8° hoogst om 13:05".
+  - Rechts van het grote getal een klein grafiekje van het temperatuurverloop van vandaag.
+    _Toegevoegd 2026-09-13: onderschrift "Vandaag", de lijn, en tijdlabels op hele uren met "nu" rechts
+    (zelfde `hourTicks` als de luchtdruk). Geen y-as: de laagste en hoogste waarde van vandaag staan al
+    onder de balk en dat is precies de schaal van de lijn. Data uit een extra `getmeasure`
+    (`scale=30min`, `type=Temperature`, buitenmodule) vanaf middernacht lokale tijd, in de payload als
+    `outdoor_history: {points, stale}`. Vlak na middernacht zijn er nog geen twee punten; dan blijft het
+    blokje verborgen in plaats van een leeg kader te tonen._
+  - Daaronder de luchtdruk: "Luchtdruk 1014 hPa ↗ stijgend" met een grafiek van de afgelopen 24 uur.
+    _Assen toegevoegd 2026-09-13: links de hoogste en laagste waarde van het venster in hele hPa, onder de
+    lijn tijdlabels op hele uren die op de klok zijn uitgelijnd (elke 6 uur vanaf middernacht, dus 00:00,
+    06:00, 12:00, 18:00) op hun echte tijdspositie, met "nu" op de rechterrand, plus drie lichte verticale
+    hulplijnen. Een markering te dicht bij het einde valt weg omdat "nu" daar staat. De losse tekst
+    "1009 – 1015 hPa in 24 u" in de kopregel is daarmee vervallen. Zie `hourTicks()` in `public/format.js`;
+    die loopt uur voor uur door het venster en raadpleegt telkens de lokale klok, zodat de zomertijdwissel
+    vanzelf goed gaat._
 - **Binnen (rechts):** 3 rijen met naam, temperatuur (1 decimaal) en "↓ min° ↑ max°". Een onbereikbare module toont "–" in `--muted`.
  _Toegevoegd 2026-09-13: een module is tikbaar. Een tik zet die module bovenaan de lijst (de overige twee
  behouden hun onderlinge volgorde) en vergroot alleen het temperatuurgetal van 50 naar 92px. Nogmaals tikken
@@ -260,6 +275,12 @@ De iconen `sun`, `partly`, `rain` en `showers` staan in de mockup. Maak `cloud`,
  - "Vandaag" groot, in mm met 1 decimaal.
  - Daarnaast 4 staafjes: de 3 vorige dagen (labels "Di", "Wo", "Do") en vandaag, uitgelicht. De hoogte is `mm / max(4 waarden) × 70px`, met een minimum van 2px. Zijn alle waarden 0, dan zijn alle staafjes 2px.
  - Daaronder "September 38,5 mm".
+  _Toegevoegd 2026-09-13: het regenblok is tikbaar en opent de regenradar van Buienradar (geanimeerde GIF,
+  550x512, met de tijd in het beeld), naast de regencijfers van vandaag, de 3 vorige dagen en het maandtotaal.
+  Sluit na 20 seconden of bij een tik. Het beeld loopt via `/api/radar.php` op onze eigen server (cache 4 min,
+  bij storing het laatst opgehaalde beeld), zodat de iPad niet zelf met een derde partij praat en het beeld
+  ook offline blijft staan. Bronvermelding "bron: Buienradar.nl" staat in de overlay; dat vraagt Buienradar
+  bij vrij gebruik. Zie `src/BuienradarClient.php` en `src/RadarService.php`._
 - **Verwachting (rechtsonder):** 6 kolommen met dagafkorting ("Za"), icoon (50px), "max° min°" als hele getallen (min in `--muted`) en "x,x mm" plus neerslagkans in %. Geen neerslag toont "0 mm". Eerste kolom is vandaag.
  _Toegevoegd 2026-09-13: elke dagkolom is tikbaar. Een tik opent een uuroverzicht voor die dag (temperatuur,
  regen en wind, elk om de 2 uur — 12 punten), dat na 20 seconden vanzelf sluit of eerder bij een tik erop.
@@ -355,6 +376,7 @@ Hangt af van de iPadOS-versie in §0:
 - [ ] Alle waarden komen overeen met de Netatmo-app: buiten, 3× binnen, min/max met tijdstippen, regen vandaag en de afgelopen 3 dagen, en het maandtotaal.
 - [ ] De verwachting toont 6 dagen (vandaag t/m 5 dagen verder) met het juiste icoon per WMO-code.
 - [ ] Tikken op een dag opent het uuroverzicht (temperatuur, regen, wind) en sluit na 20 seconden vanzelf of bij een tik erop.
+- [ ] Tikken op het regenblok opent de Buienradar-animatie en sluit op dezelfde manier.
 - [ ] De data ververst zichzelf. Na middernacht staat de nieuwe datum er binnen 5 minuten.
 - [ ] Wifi uit: de laatste data blijft staan, met een melding "geen verbinding sinds". Wifi aan: herstelt vanzelf.
 - [ ] De Netatmo-token ververst meerdere dagen achter elkaar zonder handmatig ingrijpen.
@@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+use Weerscherm\BuienradarClient;
+use Weerscherm\Config;
+use Weerscherm\Http;
+use Weerscherm\RadarService;
+
+$root = dirname(__DIR__, 2);
+
+require $root . '/src/autoload.php';
+
+header('X-Robots-Tag: noindex');
+
+$configFile = $root . '/config.php';
+if (!is_file($configFile)) {
+    http_response_code(500);
+    header('Content-Type: text/plain; charset=utf-8');
+    echo "config.php ontbreekt\n";
+    exit;
+}
+
+try {
+    $config = Config::load($configFile);
+    $ttl = $config->get('cache_ttl')['radar'] ?? 240;
+
+    $service = new RadarService(
+        // Buienradar leidt door naar een CDN, dus deze client volgt redirects.
+        new BuienradarClient(new Http(followRedirects: true)),
+        rtrim((string) $config->get('storage_path'), '/') . '/cache/radar.gif',
+        (int) $ttl,
+    );
+    $radar = $service->image();
+
+    header('Content-Type: image/gif');
+    header('Content-Length: ' . strlen($radar['bytes']));
+    // De browser mag het beeld hergebruiken tot de radar zelf ververst is.
+    header('Cache-Control: public, max-age=' . max(30, (int) $ttl - $radar['age']));
+    header('X-Radar-Stale: ' . ($radar['stale'] ? '1' : '0'));
+    echo $radar['bytes'];
+} catch (Throwable $e) {
+    error_log('weerscherm: radar: ' . $e->getMessage());
+    http_response_code(503);
+    header('Content-Type: text/plain; charset=utf-8');
+    header('Cache-Control: no-store');
+    echo "Radarbeeld niet beschikbaar\n";
+}
@@ -2,7 +2,7 @@ import {
  f1, fInt, fmm, markerPos, barHeights, wmoIcon, trendLabel,
  formatDate, formatTime, dayAbbr, monthName, isOlderThan, msUntil,
  co2Level, fPct, fHpa, seriesRange, sparklinePath,
-  windArrowDeg, fKmh, formatHour, formatFullDate, pinRoom,
+  windArrowDeg, fKmh, formatHour, formatFullDate, pinRoom, hourTicks,
 } from './format.js';
 import { icon, windArrow } from './icons.js';

@@ -14,7 +14,8 @@ const FETCH_TIMEOUT_MS = 10000;
 const STALE_MINUTES = 30;
 const RELOAD_HOUR = 4;
 const FALLBACK_TZ = 'Europe/Berlin';
-const HOURLY_OVERLAY_MS = 20000;
+const OVERLAY_MS = 20000;      // hoe lang een overlay blijft staan zonder tik
+const RADAR_BUCKET_MS = 240000; // hergebruikvenster voor het radarbeeld, gelijk aan de servercache
 const HOURLY_WIDTH = 1045; // = stage-breedte 1133 min 2x 44px padding, zelfde marge als de rest van het scherm

 const $ = (id) => document.getElementById(id);
@@ -71,6 +72,27 @@ function renderOutdoor(o) {
  setText('max-at', `hoogst om ${formatTime(o.max_at, state.tz)}`);
 }

+/** Verloop van vandaag naast het grote getal. Met minder dan twee punten valt er niets te tekenen. */
+function renderTodayChart(history) {
+  const block = $('today-chart');
+  const points = history?.points || [];
+  if (points.length < 2) {
+    block.hidden = true;
+    return;
+  }
+  block.hidden = false;
+  $('today-path').setAttribute('d', sparklinePath(points.map((p) => p.temp), 200, 96, 4));
+
+  const ticks = hourTicks(points[0].at, points[points.length - 1].at, state.tz);
+  $('today-hours').innerHTML = ticks
+    .map((t) => {
+      const style = t.percent < 6 ? 'left:0' : `left:${t.percent.toFixed(1)}%;transform:translateX(-50%)`;
+      return `<span style="${style}">${formatTime(t.at, state.tz)}</span>`;
+    })
+    .concat(['<span style="right:0">nu</span>'])
+    .join('');
+}
+
 function renderRooms(rooms) {
  const ordered = pinRoom(rooms, state.pinnedRoomId);
  const html = ordered.map((r) => {
@@ -103,10 +125,25 @@ function renderRain(rain, now) {
 function renderPressure(p) {
  setText('press', fHpa(p.current));
  setText('press-trend', trendLabel(p.trend));
+
  const values = p.history.map((h) => h.hpa);
  const range = seriesRange(values);
-  setText('press-range', range ? `${Math.round(range.min)} – ${Math.round(range.max)} hPa in 24 u` : '');
+  setText('press-max', range ? String(Math.round(range.max)) : '–');
+  setText('press-min', range ? String(Math.round(range.min)) : '–');
  $('press-path').setAttribute('d', sparklinePath(values, 560, 56));
+
+  // Hele uren op hun echte tijdspositie, plus "nu" op de rechterrand.
+  const first = p.history[0];
+  const last = p.history[p.history.length - 1];
+  const ticks = first && last ? hourTicks(first.at, last.at, state.tz) : [];
+  $('press-hours').innerHTML = ticks
+    .map((t) => {
+      // Een markering vlak op de linkerrand niet centreren, anders steekt het label buiten de grafiek.
+      const style = t.percent < 3 ? 'left:0' : `left:${t.percent.toFixed(1)}%;transform:translateX(-50%)`;
+      return `<span style="${style}">${formatTime(t.at, state.tz)}</span>`;
+    })
+    .concat(last ? ['<span style="right:0">nu</span>'] : [])
+    .join('');
 }

 function renderForecast(days) {
@@ -120,7 +157,8 @@ function renderForecast(days) {

 /* ---------- uuroverzicht per dag ---------- */

-let hourlyOverlayTimer = null;
+let overlayTimer = null;
+let openOverlayId = null;

 function renderHourlyCharts(hourly) {
  const temps = hourly.map((h) => h.temp);
@@ -147,25 +185,81 @@ function openHourOverlay(date) {
  const day = (state.data?.forecast || []).find((d) => d.date === date);
  if (!day) return;

-  clearTimeout(hourlyOverlayTimer);
  setText('ho-date', formatFullDate(day.date, state.tz));
  renderHourlyCharts(day.hourly || []);
+  showOverlay('hour-overlay', 'ho-bar-fill');
+}

-  const fill = $('ho-bar-fill');
+/* ---------- regenradar ---------- */
+
+function renderRainDetails(rain) {
+  setText('ro-today', f1(rain.today));
+  $('ro-days').innerHTML = rain.previous_days
+    .map((p) => `<p><span>${dayAbbr(p.date, state.tz)}</span><b class="num">${fmm(p.mm)}</b></p>`)
+    .join('');
+  setText('ro-month', `${monthName(new Date(), state.tz)} ${f1(rain.month_total)} mm`);
+}
+
+/**
+ * Zet het radarbeeld klaar. De bucket in de URL verandert elke RADAR_BUCKET_MS, zodat de browser
+ * binnen dat venster het al geladen beeld hergebruikt (tik = meteen zichtbaar) en daarna vanzelf
+ * een verser beeld ophaalt. Er wordt niets op de achtergrond geladen zolang niemand kijkt.
+ */
+function loadRadarImage() {
+  const img = $('ro-img');
+  const status = $('ro-status');
+  const src = `api/radar.php?t=${Math.floor(Date.now() / RADAR_BUCKET_MS)}`;
+  if (img.getAttribute('src') === src && img.complete && img.naturalWidth > 0) {
+    return;
+  }
+
+  status.textContent = 'Radar laden…';
+  status.hidden = false;
+  img.hidden = true;
+  img.onload = () => {
+    status.hidden = true;
+    img.hidden = false;
+  };
+  img.onerror = () => {
+    status.textContent = 'Radar niet beschikbaar';
+    status.hidden = false;
+    img.hidden = true;
+  };
+  img.setAttribute('src', src);
+}
+
+function openRadarOverlay() {
+  if (!state.data) return;
+  renderRainDetails(state.data.rain);
+  loadRadarImage();
+  showOverlay('radar-overlay', 'ro-bar-fill');
+}
+
+/* ---------- gedeelde overlay-machinerie ---------- */
+
+/** Toont een overlay, start de 20s-balk opnieuw en zet de sluittimer. */
+function showOverlay(id, barFillId) {
+  closeOverlay();
+
+  const fill = $(barFillId);
  fill.style.transition = 'none';
  fill.style.transform = 'scaleX(1)';
  fill.getBoundingClientRect(); // forceer reflow zodat de volgende transitie opnieuw start
-  fill.style.transition = `transform ${HOURLY_OVERLAY_MS}ms linear`;
+  fill.style.transition = `transform ${OVERLAY_MS}ms linear`;
  fill.style.transform = 'scaleX(0)';

-  $('hour-overlay').hidden = false;
-  hourlyOverlayTimer = setTimeout(closeHourOverlay, HOURLY_OVERLAY_MS);
+  $(id).hidden = false;
+  openOverlayId = id;
+  overlayTimer = setTimeout(closeOverlay, OVERLAY_MS);
 }

-function closeHourOverlay() {
-  clearTimeout(hourlyOverlayTimer);
-  hourlyOverlayTimer = null;
-  $('hour-overlay').hidden = true;
+function closeOverlay() {
+  clearTimeout(overlayTimer);
+  overlayTimer = null;
+  if (openOverlayId !== null) {
+    $(openOverlayId).hidden = true;
+    openOverlayId = null;
+  }
 }

 function renderBanner() {
@@ -198,6 +292,7 @@ function render() {
  if (d) {
    renderMeasurement(now);
    renderOutdoor(d.outdoor);
+    renderTodayChart(d.outdoor_history);
    renderRooms(d.indoor);
    renderRain(d.rain, now);
    renderPressure(d.pressure || { current: null, trend: null, history: [] });
@@ -319,7 +414,9 @@ $('forecast').addEventListener('click', (e) => {
  const day = e.target.closest('.a-day');
  if (day) openHourOverlay(day.dataset.date);
 });
-$('hour-overlay').addEventListener('click', closeHourOverlay);
+$('hour-overlay').addEventListener('click', closeOverlay);
+$('radar-overlay').addEventListener('click', closeOverlay);
+$('rain-block').addEventListener('click', openRadarOverlay);

 $('rooms').addEventListener('click', (e) => {
  const room = e.target.closest('.a-room');
@@ -219,3 +219,30 @@ export function pinRoom(rooms, pinnedId) {
  copy.unshift(pinned);
  return copy;
 }
+
+/**
+ * Markeringen op hele uren binnen een tijdvenster, uitgelijnd op de klok: elke `stepHours` uur
+ * gerekend vanaf middernacht in de gegeven tijdzone, dus 00:00, 06:00, 12:00, 18:00 bij een stap van 6.
+ * Per markering het tijdstip en de positie in procenten van het venster.
+ *
+ * Er wordt uur voor uur door het venster gelopen en telkens de lokale klok geraadpleegd, zodat de
+ * zomertijdwissel vanzelf goed gaat: een dag van 23 of 25 uur levert gewoon de juiste hele uren op.
+ * Markeringen binnen `minGapPercent` van het einde vallen weg; daar staat het label "nu".
+ */
+export function hourTicks(startIso, endIso, tz, stepHours = 6, minGapPercent = 9) {
+  const t0 = new Date(startIso).getTime();
+  const t1 = new Date(endIso).getTime();
+  if (Number.isNaN(t0) || Number.isNaN(t1) || t1 <= t0) return [];
+
+  const hourMs = 3600000;
+  const span = t1 - t0;
+  const ticks = [];
+  for (let t = Math.ceil(t0 / hourMs) * hourMs; t <= t1; t += hourMs) {
+    const at = new Date(t).toISOString();
+    if (Number(formatHour(at, tz)) % stepHours !== 0) continue;
+    const percent = ((t - t0) / span) * 100;
+    if (percent > 100 - minGapPercent) break;
+    ticks.push({ at, percent });
+  }
+  return ticks;
+}
@@ -27,7 +27,17 @@

    <section class="a-hero">
      <p class="a-label">Buiten <span class="a-trend" id="trend"></span><span class="a-hum" id="out-hum"></span></p>
-      <p class="a-temp num" id="temp">–</p>
+      <div class="a-temprow">
+        <p class="a-temp num" id="temp">–</p>
+        <div class="a-today" id="today-chart" hidden>
+          <p class="a-tcap">Vandaag</p>
+          <svg class="a-tspark" viewBox="0 0 200 96" preserveAspectRatio="none" aria-hidden="true">
+            <line class="a-spark-base" x1="0" y1="95.5" x2="200" y2="95.5"/>
+            <path class="a-spark-line" id="today-path" d=""/>
+          </svg>
+          <div class="a-px num" id="today-hours"></div>
+        </div>
+      </div>
      <div class="a-range">
        <div class="a-track"><span class="a-mark" id="mark" style="left:50%"></span></div>
        <div class="a-ends num">
@@ -36,18 +46,26 @@
        </div>
      </div>
      <div class="a-pressure">
-        <p class="a-plabel">Luchtdruk <b class="num" id="press">–</b><span class="a-trend" id="press-trend"></span><span class="a-prange num" id="press-range"></span></p>
-        <svg class="a-spark" viewBox="0 0 560 56" preserveAspectRatio="none" aria-hidden="true">
-          <line class="a-spark-base" x1="0" y1="55.5" x2="560" y2="55.5"/>
-          <path class="a-spark-line" id="press-path" d=""/>
-        </svg>
+        <p class="a-plabel">Luchtdruk <b class="num" id="press">–</b><span class="a-trend" id="press-trend"></span></p>
+        <div class="a-pgrid">
+          <div class="a-py num"><span id="press-max">–</span><span id="press-min">–</span></div>
+          <svg class="a-spark" viewBox="0 0 560 56" preserveAspectRatio="none" aria-hidden="true">
+            <line class="a-spark-grid" x1="140" y1="0" x2="140" y2="56"/>
+            <line class="a-spark-grid" x1="280" y1="0" x2="280" y2="56"/>
+            <line class="a-spark-grid" x1="420" y1="0" x2="420" y2="56"/>
+            <line class="a-spark-base" x1="0" y1="55.5" x2="560" y2="55.5"/>
+            <path class="a-spark-line" id="press-path" d=""/>
+          </svg>
+          <div></div>
+          <div class="a-px num" id="press-hours"></div>
+        </div>
      </div>
    </section>

    <section class="a-inside" id="rooms"></section>

    <section class="a-bottom">
-      <div>
+      <div id="rain-block">
        <p class="a-sub">Regen</p>
        <div class="a-rainrow">
          <div>
@@ -63,7 +81,7 @@

    <div class="banner" id="banner">Gegevens laden…</div>

-    <div class="hour-overlay" id="hour-overlay" hidden>
+    <div class="overlay" id="hour-overlay" hidden>
      <div class="ho-bar"><i id="ho-bar-fill"></i></div>
      <header class="ho-head">
        <span class="ho-date" id="ho-date"></span>
@@ -79,6 +97,27 @@
      <div class="ho-grid ho-wind" id="ho-wind"></div>
      <div class="ho-grid ho-hours" id="ho-hours"></div>
    </div>
+
+    <div class="overlay" id="radar-overlay" hidden>
+      <div class="ho-bar"><i id="ro-bar-fill"></i></div>
+      <header class="ho-head">
+        <span class="ho-date">Regen</span>
+        <span class="ho-hint">tik om te sluiten</span>
+      </header>
+      <div class="ro-body">
+        <div class="ro-map">
+          <p class="ro-status" id="ro-status">Radar laden…</p>
+          <img class="ro-img" id="ro-img" alt="Regenradar" hidden>
+        </div>
+        <div class="ro-side">
+          <p class="ro-big"><span class="num" id="ro-today">–</span> mm</p>
+          <p class="ro-sub">vandaag</p>
+          <div class="ro-days" id="ro-days"></div>
+          <p class="ro-month num" id="ro-month">–</p>
+          <p class="ro-source">bron: Buienradar.nl</p>
+        </div>
+      </div>
+    </div>
  </main>
 </div>
 <div id="rotate">Draai de iPad een kwartslag</div>
@@ -80,7 +80,14 @@ html, body {
 .a-hero { align-self: center; }
 .a-label { font-size: 22px; color: var(--muted); font-weight: 500; display: flex; gap: 14px; align-items: baseline; }
 .a-trend { font-size: 17px; font-weight: 400; }
-.a-temp { font-size: 200px; font-weight: 200; letter-spacing: -.045em; line-height: .95; margin: 4px 0 18px -8px; }
+.a-temprow { display: flex; align-items: center; gap: 28px; margin: 4px 0 10px 0; }
+.a-temp { font-size: 200px; font-weight: 200; letter-spacing: -.045em; line-height: .95; margin-left: -8px; }
+
+/* Temperatuurverloop van vandaag, in de ruimte rechts van het grote getal */
+.a-today { flex: 1; min-width: 0; }
+.a-today[hidden] { display: none; }
+.a-tcap { font-size: 15px; color: var(--muted); margin-bottom: 4px; }
+.a-tspark { display: block; width: 100%; height: 96px; overflow: visible; }
 .a-hum { font-size: 17px; font-weight: 400; }
 .a-hum:not(:empty)::before { content: "·"; margin-right: 14px; }
 .a-range { width: 560px; }
@@ -89,13 +96,17 @@ html, body {
 .a-ends { display: flex; justify-content: space-between; margin-top: 14px; font-size: 17px; color: var(--muted); }
 .a-ends b { font-size: 24px; font-weight: 600; margin-right: 6px; }

-/* Luchtdruk, 24 uur */
-.a-pressure { width: 560px; margin-top: 18px; }
+/* Luchtdruk, 24 uur. Grafiek met een y-as (hoogste/laagste waarde) en tijdlabels op de x-as. */
+.a-pressure { width: 560px; margin-top: 14px; }
 .a-plabel { font-size: 17px; color: var(--muted); display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
 .a-plabel b { font-size: 20px; font-weight: 600; color: var(--ink); }
-.a-prange { margin-left: auto; font-size: 14px; }
-.a-spark { display: block; width: 560px; height: 56px; overflow: visible; }
+.a-pgrid { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; row-gap: 3px; }
+.a-py { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 13px; color: var(--muted); line-height: 1; padding: 1px 0; }
+.a-px { position: relative; height: 17px; font-size: 13px; color: var(--muted); }
+.a-px span { position: absolute; top: 0; white-space: nowrap; }
+.a-spark { display: block; width: 100%; height: 56px; overflow: visible; }
 .a-spark-base { stroke: var(--line); stroke-width: 1; }
+.a-spark-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; }
 .a-spark-line { fill: none; stroke: var(--rain); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

 /* Binnen */
@@ -163,8 +174,9 @@ html, body {
 }
 .banner small { display: block; margin-top: 16px; font-size: 20px; color: var(--muted); }

-/* Uuroverzicht per dag: tik op een dagkolom om te openen, tik erop of wacht 20s om te sluiten. */
-.hour-overlay {
+/* Overlays (uuroverzicht, regenradar): tik om te openen, tik erop of wacht 20s om te sluiten.
+   De .ho-*-chrome (balk, kop) wordt door beide overlays gedeeld. */
+.overlay {
  position: absolute;
  left: 44px;
  right: 44px;
@@ -180,7 +192,7 @@ html, body {
  box-shadow: 0 12px 32px rgba(27, 42, 53, .12);
  z-index: 5;
 }
-.hour-overlay[hidden] { display: none; }
+.overlay[hidden] { display: none; }

 .ho-bar { margin: 0 30px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
 .ho-bar i { display: block; width: 100%; height: 100%; background: var(--rain); transform-origin: left; }
@@ -207,6 +219,21 @@ html, body {

 .ho-hours span { font-size: 16px; color: var(--muted); }

+/* Regenradar */
+.ro-body { display: flex; gap: 56px; margin: 0 30px; min-height: 0; }
+.ro-map { display: flex; align-items: center; justify-content: center; width: 560px; flex: none; }
+.ro-img { height: 512px; width: auto; display: block; border-radius: 10px; }
+.ro-status { font-size: 22px; color: var(--muted); }
+
+.ro-side { display: flex; flex-direction: column; justify-content: center; }
+.ro-big { font-size: 26px; color: var(--rain); }
+.ro-big span { font-size: 76px; font-weight: 300; line-height: 1; }
+.ro-sub { font-size: 19px; color: var(--muted); margin-bottom: 26px; }
+.ro-days p { display: flex; justify-content: space-between; width: 260px; font-size: 21px; color: var(--muted); padding: 7px 0; border-top: 1px solid var(--line); }
+.ro-days b { color: var(--ink); font-weight: 600; }
+.ro-month { width: 260px; font-size: 19px; color: var(--muted); margin-top: 18px; }
+.ro-source { font-size: 15px; color: var(--muted); margin-top: auto; padding-top: 22px; }
+
 #rotate {
  display: none;
  position: fixed;
@@ -1,6 +1,6 @@
 /* Service worker: app-shell cache-first, API network-first met timeout en fallback op de laatste response. */

-const VERSION = 'weerscherm-v6';
+const VERSION = 'weerscherm-v10';
 const SHELL = [
  './',
  './index.html',
@@ -14,7 +14,8 @@ const SHELL = [
  './icons/icon-192.png',
  './icons/icon-512.png',
 ];
-const API_PATH = '/api/data.php';
+const API_PREFIX = '/api/';
+const DATA_PATH = '/api/data.php';
 const API_TIMEOUT_MS = 8000;

 self.addEventListener('install', (event) => {
@@ -37,7 +38,7 @@ self.addEventListener('fetch', (event) => {
  const url = new URL(req.url);
  if (url.origin !== self.location.origin) return;

-  if (url.pathname.endsWith(API_PATH)) {
+  if (url.pathname.includes(API_PREFIX)) {
    event.respondWith(networkFirst(req));
  } else {
    event.respondWith(cacheFirst(req));
@@ -46,25 +47,32 @@ self.addEventListener('fetch', (event) => {

 async function networkFirst(req) {
  const cache = await caches.open(VERSION);
+  const url = new URL(req.url);
+  // Sleutel zonder querystring: het radarbeeld krijgt elke paar minuten een andere ?t=, en zonder
+  // normaliseren zou de cache vollopen met varianten en zou offline nooit een treffer geven.
+  const key = url.origin + url.pathname;
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), API_TIMEOUT_MS);
  try {
    const res = await fetch(req, { signal: controller.signal, cache: 'no-store' });
    if (res.ok) {
-      cache.put(req, res.clone());
+      cache.put(key, res.clone());
    }
    return res;
  } catch (err) {
-    const cached = await cache.match(req);
+    const cached = await cache.match(key);
    if (cached) {
      const headers = new Headers(cached.headers);
      headers.set('X-From-Cache', '1');
      return new Response(await cached.arrayBuffer(), { status: 200, statusText: 'OK', headers });
    }
-    return new Response(JSON.stringify({ errors: ['offline'] }), {
-      status: 503,
-      headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' },
-    });
+    if (url.pathname.endsWith(DATA_PATH)) {
+      return new Response(JSON.stringify({ errors: ['offline'] }), {
+        status: 503,
+        headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' },
+      });
+    }
+    return new Response('offline', { status: 503, headers: { 'Cache-Control': 'no-store' } });
  } finally {
    clearTimeout(timer);
  }
@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+/**
+ * Haalt de geanimeerde regenradar op bij Buienradar. Vrij te gebruiken met bronvermelding;
+ * de frontend toont daarom "bron: Buienradar.nl" bij het beeld.
+ *
+ * De endpoint leidt door naar een CDN, dus de meegegeven HttpClient moet redirects volgen.
+ * Het beeld is 550 x 512 met de tijd erin gebrand; opgegeven afmetingen worden genegeerd.
+ */
+final class BuienradarClient
+{
+    private const URL = 'https://image.buienradar.nl/2.0/image/animation/RadarmapRainNL';
+
+    public function __construct(private readonly HttpClient $http)
+    {
+    }
+
+    /** @return string de ruwe bytes van een geanimeerde GIF */
+    public function rainRadar(): string
+    {
+        $res = $this->http->get(self::URL, ['w' => 550, 'h' => 512], ['Accept: image/gif,image/*']);
+
+        if ($res->status !== 200) {
+            throw new UpstreamException("Buienradar: HTTP {$res->status}");
+        }
+        if (!str_starts_with($res->body, 'GIF8')) {
+            throw new UpstreamException('Buienradar: antwoord is geen GIF');
+        }
+        return $res->body;
+    }
+}
@@ -19,7 +19,9 @@ final class Config
            'stations' => 300,
            'measure' => 900,
            'pressure' => 900,
+            'temperature' => 900,
            'forecast' => 3600,
+            'radar' => 240,
        ],
        'storage_path' => null,
    ];
@@ -10,6 +10,8 @@ namespace Weerscherm;
 */
 final class DashboardService
 {
+    private const PRESSURE_HOURS = 24;
+
    private const ERR_NETATMO_AUTH = 'netatmo_auth';
    private const ERR_NETATMO = 'netatmo_unavailable';
    private const ERR_FORECAST = 'forecast_unavailable';
@@ -48,6 +50,7 @@ final class DashboardService

        $rain = $this->rain($station, $now);
        $pressure = $this->pressure($station, $now);
+        $outdoorHistory = $this->outdoorHistory($station, $now);
        $forecast = $this->forecast($station, $tz);

        return [
@@ -66,6 +69,7 @@ final class DashboardService
                'max_at' => $this->iso($station['outdoor']['max_at'], $tz),
                'humidity' => $station['outdoor']['humidity'],
            ],
+            'outdoor_history' => $outdoorHistory,
            'indoor' => $station['indoor'],
            'rain' => $rain,
            'pressure' => $pressure,
@@ -101,14 +105,37 @@ final class DashboardService
        if ($station['device_id'] === null) {
            return $base + ['history' => [], 'stale' => false];
        }
-        $begin = $now->getTimestamp() - PressureHistory::HOURS * 3600;
+        $begin = $now->getTimestamp() - self::PRESSURE_HOURS * 3600;
        $measure = $this->fetch(
            'pressure',
            fn() => $this->source->pressureHistory($station['device_id'], $begin, $now->getTimestamp()),
            self::ERR_NETATMO,
        );
        return $base + [
-            'history' => $measure['data'] === null ? [] : PressureHistory::map($measure['data'], $now->getTimezone()),
+            'history' => $measure['data'] === null ? [] : MeasureSeries::map($measure['data'], $now->getTimezone(), 'hpa'),
+            'stale' => $measure['stale'],
+        ];
+    }
+
+    /**
+     * Temperatuurverloop van vandaag: vanaf middernacht lokale tijd tot nu.
+     *
+     * @return array{points: list<array{at: string, temp: float}>, stale: bool}
+     */
+    private function outdoorHistory(array $station, \DateTimeImmutable $now): array
+    {
+        $moduleId = $station['outdoor_module_id'];
+        if ($station['device_id'] === null || $moduleId === null) {
+            return ['points' => [], 'stale' => false];
+        }
+        $begin = $now->setTime(0, 0, 0)->getTimestamp();
+        $measure = $this->fetch(
+            'temperature',
+            fn() => $this->source->temperatureHistory($station['device_id'], $moduleId, $begin, $now->getTimestamp()),
+            self::ERR_NETATMO,
+        );
+        return [
+            'points' => $measure['data'] === null ? [] : MeasureSeries::map($measure['data'], $now->getTimezone(), 'temp'),
            'stale' => $measure['stale'],
        ];
    }
@@ -61,12 +61,30 @@ final class FixtureSource implements WeatherSource
    {
        $body = [];
        for ($ts = $begin - ($begin % 1800); $ts <= $end; $ts += 1800) {
-            $i = ($end - $ts) / 1800;
+            // Hele halfuren sinds het einde; intdiv houdt $i een int, zodat de modulo hieronder geen
+            // deprecation geeft (en de waarschuwing niet vóór de JSON in de response belandt).
+            $i = intdiv($end - $ts, 1800);
            $body[(string) $ts] = [round(1012 + 3 * sin($i / 8) + ($i % 5) * 0.1, 1)];
        }
        return $body;
    }

+    public function temperatureHistory(string $deviceId, string $moduleId, int $begin, int $end): array
+    {
+        // Dagcurve tussen de min en max uit stationsData(): koudst rond 06:00, warmst rond 15:00.
+        $body = [];
+        for ($ts = $begin - ($begin % 1800); $ts <= $end; $ts += 1800) {
+            if ($ts < $begin) {
+                continue;
+            }
+            $at = (new \DateTimeImmutable('@' . $ts))->setTimezone($this->now->getTimezone());
+            $hour = (int) $at->format('G') + (int) $at->format('i') / 60;
+            $t = 9.2 + (19.8 - 9.2) * (0.5 + 0.5 * sin((($hour - 10) / 24) * 2 * M_PI));
+            $body[(string) $ts] = [round($t, 1)];
+        }
+        return $body;
+    }
+
    public function forecast(float $lat, float $lon, string $timezone): array
    {
        $tmin = [11.0, 10.1, 11.3, 12.0, 9.4, 8.1];
@@ -7,8 +7,16 @@ namespace Weerscherm;
 /** Dunne curl-wrapper met korte timeouts. Netwerkfouten worden UpstreamException. */
 final class Http implements HttpClient
 {
-    public function __construct(private readonly int $timeout = 8, private readonly int $connectTimeout = 5)
-    {
+    /**
+     * @param bool $followRedirects standaard uit: de API's die we aanroepen horen direct te antwoorden, en een
+     *                              stille omleiding naar een andere host wil je niet. De beeld-API van Buienradar
+     *                              leidt bewust door naar een CDN, dus die client zet dit expliciet aan.
+     */
+    public function __construct(
+        private readonly int $timeout = 8,
+        private readonly int $connectTimeout = 5,
+        private readonly bool $followRedirects = false,
+    ) {
    }

    public function get(string $url, array $query = [], array $headers = []): HttpResponse
@@ -33,7 +41,8 @@ final class Http implements HttpClient
        }
        curl_setopt_array($ch, [
            CURLOPT_RETURNTRANSFER => true,
-            CURLOPT_FOLLOWLOCATION => false,
+            CURLOPT_FOLLOWLOCATION => $this->followRedirects,
+            CURLOPT_MAXREDIRS => 3,
            CURLOPT_CONNECTTIMEOUT => $this->connectTimeout,
            CURLOPT_TIMEOUT => $this->timeout,
            CURLOPT_HTTPHEADER => array_merge(['Accept: application/json', 'User-Agent: weerscherm/1.0'], $headers),
@@ -39,6 +39,11 @@ final class LiveSource implements WeatherSource
        return $this->netatmo->getPressureHistory($deviceId, $begin, $end);
    }

+    public function temperatureHistory(string $deviceId, string $moduleId, int $begin, int $end): array
+    {
+        return $this->netatmo->getTemperatureHistory($deviceId, $moduleId, $begin, $end);
+    }
+
    public function forecast(float $lat, float $lon, string $timezone): array
    {
        return $this->openMeteo->forecast($lat, $lon, $timezone);
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+/**
+ * Zet een getmeasure-body (één waarde per tijdstip, bv. scale=30min met type=Pressure of Temperature)
+ * om naar een chronologisch gesorteerde reeks punten. De naam van het waardeveld verschilt per meting,
+ * zodat de payload "hpa" of "temp" kan heten.
+ */
+final class MeasureSeries
+{
+    /**
+     * @param array<string|int, mixed> $body
+     * @return list<array{at: string, ...}> elk punt heeft "at" en het veld $valueKey
+     */
+    public static function map(array $body, \DateTimeZone $tz, string $valueKey): array
+    {
+        $points = [];
+        foreach ($body as $timestamp => $values) {
+            if (!is_numeric($timestamp) || !is_array($values) || !isset($values[0]) || !is_numeric($values[0])) {
+                continue;
+            }
+            $points[(int) $timestamp] = (float) $values[0];
+        }
+        ksort($points);
+
+        $out = [];
+        foreach ($points as $ts => $value) {
+            $out[] = [
+                'at' => (new \DateTimeImmutable('@' . $ts))->setTimezone($tz)->format(\DATE_ATOM),
+                $valueKey => $value,
+            ];
+        }
+        return $out;
+    }
+}
@@ -60,17 +60,33 @@ final class NetatmoClient
    /** @return array<string|int, mixed> timestamp => [hPa], per 30 minuten, van het basisstation */
    public function getPressureHistory(string $deviceId, int $begin, int $end): array
    {
-        $json = $this->apiGet('getmeasure', [
-            'device_id' => $deviceId,
+        return $this->measureSeries('Pressure', ['device_id' => $deviceId], $begin, $end);
+    }
+
+    /** @return array<string|int, mixed> timestamp => [°C], per 30 minuten, van de opgegeven module */
+    public function getTemperatureHistory(string $deviceId, string $moduleId, int $begin, int $end): array
+    {
+        return $this->measureSeries('Temperature', ['device_id' => $deviceId, 'module_id' => $moduleId], $begin, $end);
+    }
+
+    /**
+     * Eén meetreeks per 30 minuten ophalen. $target bevat device_id en eventueel module_id.
+     *
+     * @param array<string, string> $target
+     * @return array<string|int, mixed>
+     */
+    private function measureSeries(string $type, array $target, int $begin, int $end): array
+    {
+        $json = $this->apiGet('getmeasure', $target + [
            'scale' => '30min',
-            'type' => 'Pressure',
+            'type' => $type,
            'date_begin' => $begin,
            'date_end' => $end,
            'optimize' => 'false',
            'real_time' => 'false',
        ]);
        if (!is_array($json['body'] ?? null)) {
-            throw new UpstreamException('getmeasure (Pressure): geen body in antwoord');
+            throw new UpstreamException("getmeasure ($type): geen body in antwoord");
        }
        return $json['body'];
    }
@@ -1,33 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Weerscherm;
-
-/** Zet een getmeasure-body (scale=30min, type=Pressure) om naar een gesorteerde reeks punten. */
-final class PressureHistory
-{
-    public const HOURS = 24;
-
-    /**
-     * @param array<string|int, mixed> $body
-     * @return list<array{at: string, hpa: float}>
-     */
-    public static function map(array $body, \DateTimeZone $tz): array
-    {
-        $points = [];
-        foreach ($body as $timestamp => $values) {
-            if (!is_numeric($timestamp) || !is_array($values) || !isset($values[0]) || !is_numeric($values[0])) {
-                continue;
-            }
-            $points[(int) $timestamp] = (float) $values[0];
-        }
-        ksort($points);
-
-        $out = [];
-        foreach ($points as $ts => $hpa) {
-            $out[] = ['at' => (new \DateTimeImmutable('@' . $ts))->setTimezone($tz)->format(\DATE_ATOM), 'hpa' => $hpa];
-        }
-        return $out;
-    }
-}
@@ -0,0 +1,75 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+/**
+ * Serveert het radarbeeld met een eigen bestandscache. De radar ververst ongeveer elke 5 minuten,
+ * dus een TTL van 4 minuten houdt het beeld actueel zonder het CDN van Buienradar onnodig te belasten.
+ *
+ * Bij een storing komt het laatst opgehaalde beeld terug, gemarkeerd als verouderd. Alleen als er
+ * helemaal niets in de cache staat, faalt de aanroep. Zo blijft het scherm ook zonder verbinding iets tonen.
+ */
+final class RadarService
+{
+    /** @var \Closure(): int */
+    private readonly \Closure $now;
+
+    public function __construct(
+        private readonly BuienradarClient $client,
+        private readonly string $file,
+        private readonly int $ttl = 240,
+        ?\Closure $now = null,
+    ) {
+        $this->now = $now ?? static fn(): int => time();
+    }
+
+    /** @return array{bytes: string, stale: bool, age: int} */
+    public function image(): array
+    {
+        $cached = $this->readCache();
+        if ($cached !== null && $cached['age'] < $this->ttl) {
+            return ['bytes' => $cached['bytes'], 'stale' => false, 'age' => $cached['age']];
+        }
+
+        try {
+            $bytes = $this->client->rainRadar();
+            $this->writeCache($bytes);
+            return ['bytes' => $bytes, 'stale' => false, 'age' => 0];
+        } catch (\Throwable $e) {
+            error_log('weerscherm: radar: ' . $e->getMessage());
+            if ($cached !== null) {
+                return ['bytes' => $cached['bytes'], 'stale' => true, 'age' => $cached['age']];
+            }
+            throw new UpstreamException('Radarbeeld niet beschikbaar en niets in de cache', 0, $e);
+        }
+    }
+
+    /** @return array{bytes: string, age: int}|null */
+    private function readCache(): ?array
+    {
+        if (!is_file($this->file)) {
+            return null;
+        }
+        $bytes = file_get_contents($this->file);
+        $mtime = filemtime($this->file);
+        if ($bytes === false || $bytes === '' || $mtime === false) {
+            return null;
+        }
+        return ['bytes' => $bytes, 'age' => max(0, ($this->now)() - $mtime)];
+    }
+
+    private function writeCache(string $bytes): void
+    {
+        $dir = dirname($this->file);
+        if (!is_dir($dir) && !mkdir($dir, 0750, true) && !is_dir($dir)) {
+            throw new \RuntimeException("Cachemap kan niet worden aangemaakt: $dir");
+        }
+        $tmp = $this->file . '.tmp.' . uniqid('', true);
+        if (file_put_contents($tmp, $bytes, LOCK_EX) === false || !rename($tmp, $this->file)) {
+            @unlink($tmp);
+            throw new \RuntimeException("Radarbeeld kan niet worden opgeslagen: {$this->file}");
+        }
+    }
+}
@@ -20,7 +20,7 @@ final class StationMapper
     *   outdoor: array{temp: ?float, trend: ?string, min: ?float, min_at: ?int, max: ?float, max_at: ?int, humidity: ?float},
     *   indoor: list<array{id: string, name: string, temp: ?float, min: ?float, max: ?float, humidity: ?float, co2: ?int, reachable: bool}>,
     *   pressure: array{current: ?float, trend: ?string},
-     *   rain_module_id: ?string, sum_rain_24: ?float}
+     *   outdoor_module_id: ?string, rain_module_id: ?string, sum_rain_24: ?float}
     */
    public static function map(array $body, ?string $deviceId, array $indoorModules): array
    {
@@ -29,7 +29,7 @@ final class StationMapper
            return [
                'timezone' => null, 'lat' => null, 'lon' => null, 'device_id' => null, 'measured_at' => null,
                'outdoor' => self::EMPTY_OUTDOOR, 'indoor' => [], 'pressure' => self::EMPTY_PRESSURE,
-                'rain_module_id' => null, 'sum_rain_24' => null,
+                'outdoor_module_id' => null, 'rain_module_id' => null, 'sum_rain_24' => null,
            ];
        }

@@ -50,6 +50,7 @@ final class StationMapper
                'current' => self::floatOrNull(self::dashboard($device)['Pressure'] ?? null),
                'trend' => self::stringOrNull(self::dashboard($device)['pressure_trend'] ?? null),
            ],
+            'outdoor_module_id' => $outdoor === null ? null : self::stringOrNull($outdoor['_id'] ?? null),
            'rain_module_id' => $rain === null ? null : self::stringOrNull($rain['_id'] ?? null),
            'sum_rain_24' => self::floatOrNull(self::dashboard($rain)['sum_rain_24'] ?? null),
        ];
@@ -16,6 +16,9 @@ interface WeatherSource
    /** @return array<string|int, mixed> de "body" van Netatmo getmeasure (timestamp => [hPa]) voor het basisstation */
    public function pressureHistory(string $deviceId, int $begin, int $end): array;

+    /** @return array<string|int, mixed> de "body" van Netatmo getmeasure (timestamp => [°C]) voor de buitenmodule */
+    public function temperatureHistory(string $deviceId, string $moduleId, int $begin, int $end): array;
+
    /** @return array{daily: array<string, mixed>, hourly: array<string, mixed>} de "daily"- en "hourly"-blokken van Open-Meteo */
    public function forecast(float $lat, float $lon, string $timezone): array;
 }
@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use PHPUnit\Framework\TestCase;
+use Weerscherm\BuienradarClient;
+use Weerscherm\UpstreamException;
+
+final class BuienradarClientTest extends TestCase
+{
+    private const GIF = "GIF89a\x01\x00\x01\x00fake-animatie";
+
+    public function testFetchesTheAnimatedRadarImage(): void
+    {
+        $http = (new FakeHttp())->queue(200, self::GIF);
+
+        $bytes = (new BuienradarClient($http))->rainRadar();
+
+        self::assertSame(self::GIF, $bytes);
+        self::assertSame('https://image.buienradar.nl/2.0/image/animation/RadarmapRainNL', $http->requests[0]['url']);
+        self::assertSame(['w' => 550, 'h' => 512], $http->requests[0]['params']);
+    }
+
+    public function testErrorStatusIsUpstreamException(): void
+    {
+        $http = (new FakeHttp())->queue(503, '');
+
+        $this->expectException(UpstreamException::class);
+        $this->expectExceptionMessage('HTTP 503');
+        (new BuienradarClient($http))->rainRadar();
+    }
+
+    public function testNonGifResponseIsUpstreamException(): void
+    {
+        // Bijvoorbeeld een foutpagina of een redirect die als HTML binnenkomt.
+        $http = (new FakeHttp())->queue(200, '<!doctype html><title>Oeps</title>');
+
+        $this->expectException(UpstreamException::class);
+        $this->expectExceptionMessage('geen GIF');
+        (new BuienradarClient($http))->rainRadar();
+    }
+}
@@ -28,7 +28,7 @@ final class ConfigTest extends TestCase

        self::assertSame('Europe/Berlin', $config->get('timezone'));
        self::assertSame('fixture', $config->get('data_source'));
-        self::assertSame(['stations' => 300, 'measure' => 900, 'pressure' => 900, 'forecast' => 3600], $config->get('cache_ttl'));
+        self::assertSame(['stations' => 300, 'measure' => 900, 'pressure' => 900, 'temperature' => 900, 'forecast' => 3600, 'radar' => 240], $config->get('cache_ttl'));
        self::assertSame([], $config->get('indoor_modules'));
        self::assertNull($config->get('netatmo_device_id'));
    }
@@ -39,7 +39,7 @@ final class ConfigTest extends TestCase
        $config = Config::load($this->file);

        self::assertSame('Europe/Amsterdam', $config->get('timezone'));
-        self::assertSame(['stations' => 60, 'measure' => 900, 'pressure' => 900, 'forecast' => 3600], $config->get('cache_ttl'));
+        self::assertSame(['stations' => 60, 'measure' => 900, 'pressure' => 900, 'temperature' => 900, 'forecast' => 3600, 'radar' => 240], $config->get('cache_ttl'));
    }

    public function testUnknownKeyReturnsGivenDefault(): void
@@ -32,7 +32,7 @@ final class DashboardServiceTest extends TestCase
        return new DashboardService(
            $this->source,
            new Cache($this->dir),
-            ['stations' => 300, 'measure' => 900, 'pressure' => 900, 'forecast' => 3600],
+            ['stations' => 300, 'measure' => 900, 'pressure' => 900, 'temperature' => 900, 'forecast' => 3600],
            'Europe/Amsterdam',
            $lat,
            $lon,
@@ -46,7 +46,7 @@ final class DashboardServiceTest extends TestCase
    {
        $p = $this->service()->build();

-        self::assertSame(['generated_at', 'timezone', 'station', 'outdoor', 'indoor', 'rain', 'pressure', 'forecast', 'forecast_stale', 'errors'], array_keys($p));
+        self::assertSame(['generated_at', 'timezone', 'station', 'outdoor', 'outdoor_history', 'indoor', 'rain', 'pressure', 'forecast', 'forecast_stale', 'errors'], array_keys($p));
        self::assertSame('2026-09-11T14:32:05+02:00', $p['generated_at']);
        self::assertSame('Europe/Berlin', $p['timezone']);
        self::assertSame(['measured_at' => '2026-09-11T14:30:12+02:00', 'stale' => false], $p['station']);
@@ -83,6 +83,32 @@ final class DashboardServiceTest extends TestCase
        self::assertSame((new \DateTimeImmutable('2026-09-11 12:32:05 UTC'))->getTimestamp(), $end);
    }

+    public function testOutdoorHistoryCoversTodayFromLocalMidnight(): void
+    {
+        $p = $this->service()->build();
+
+        [$deviceId, $moduleId, $begin, $end] = $this->source->lastArgs['temperature'];
+        self::assertSame('70:ee:50:00:00:01', $deviceId);
+        self::assertSame('02:00:00:00:00:01', $moduleId, 'de buitenmodule, niet het basisstation');
+        self::assertSame((new \DateTimeImmutable('2026-09-11 00:00', new \DateTimeZone('Europe/Berlin')))->getTimestamp(), $begin);
+        self::assertSame((new \DateTimeImmutable('2026-09-11 12:32:05 UTC'))->getTimestamp(), $end);
+
+        self::assertNotEmpty($p['outdoor_history']['points']);
+        self::assertSame(['at', 'temp'], array_keys($p['outdoor_history']['points'][0]));
+        self::assertFalse($p['outdoor_history']['stale']);
+    }
+
+    public function testOutdoorHistoryFailureLeavesTheRestIntact(): void
+    {
+        $this->source->responses['temperature'] = new UpstreamException('500');
+
+        $p = $this->service()->build();
+
+        self::assertSame(['points' => [], 'stale' => true], $p['outdoor_history']);
+        self::assertSame(16.4, $p['outdoor']['temp'], 'de actuele waarden komen uit stationsdata en blijven staan');
+        self::assertSame(['netatmo_unavailable'], $p['errors']);
+    }
+
    public function testPressureHistoryIsRequestedForLast24Hours(): void
    {
        $this->service()->build();
@@ -130,6 +156,8 @@ final class DashboardServiceTest extends TestCase
        self::assertNull($p['rain']['today']);
        self::assertSame(0, $this->source->calls['measure'], 'zonder regenmeter-id geen getmeasure-call');
        self::assertSame(0, $this->source->calls['pressure'], 'zonder device-id geen luchtdruk-call');
+        self::assertSame(0, $this->source->calls['temperature'], 'zonder buitenmodule geen temperatuur-call');
+        self::assertSame(['points' => [], 'stale' => false], $p['outdoor_history']);
        self::assertSame(['current' => null, 'trend' => null, 'history' => [], 'stale' => false], $p['pressure']);
        self::assertSame('Europe/Amsterdam', $p['timezone'], 'fallback-tijdzone uit config');
        self::assertSame(['netatmo_unavailable', 'forecast_unavailable'], $p['errors']);
@@ -203,7 +231,7 @@ final class DashboardServiceTest extends TestCase
        $this->service()->build();
        $this->service('2026-09-11 12:36:05 UTC')->build();

-        self::assertSame(['stations' => 1, 'measure' => 1, 'pressure' => 1, 'forecast' => 1], $this->source->calls);
+        self::assertSame(['stations' => 1, 'measure' => 1, 'pressure' => 1, 'temperature' => 1, 'forecast' => 1], $this->source->calls);

        $this->service('2026-09-11 12:38:05 UTC')->build();
        self::assertSame(2, $this->source->calls['stations'], 'stations na 5 min opnieuw');
@@ -13,7 +13,7 @@ final class FakeSource implements WeatherSource
    public array $responses = [];

    /** @var array<string, int> */
-    public array $calls = ['stations' => 0, 'measure' => 0, 'pressure' => 0, 'forecast' => 0];
+    public array $calls = ['stations' => 0, 'measure' => 0, 'pressure' => 0, 'temperature' => 0, 'forecast' => 0];

    /** @var array<string, array> */
    public array $lastArgs = [];
@@ -25,6 +25,7 @@ final class FakeSource implements WeatherSource
            'stations' => json_decode((string) file_get_contents(__DIR__ . '/fixtures/getstationsdata.json'), true)['body'],
            'measure' => json_decode((string) file_get_contents(__DIR__ . '/fixtures/getmeasure.json'), true)['body'],
            'pressure' => json_decode((string) file_get_contents(__DIR__ . '/fixtures/getmeasure-pressure.json'), true)['body'],
+            'temperature' => json_decode((string) file_get_contents(__DIR__ . '/fixtures/getmeasure-temperature.json'), true)['body'],
            'forecast' => array_intersect_key(
                json_decode((string) file_get_contents(__DIR__ . '/fixtures/forecast.json'), true),
                ['daily' => null, 'hourly' => null],
@@ -48,6 +49,11 @@ final class FakeSource implements WeatherSource
        return $this->answer('pressure', func_get_args());
    }

+    public function temperatureHistory(string $deviceId, string $moduleId, int $begin, int $end): array
+    {
+        return $this->answer('temperature', func_get_args());
+    }
+
    public function forecast(float $lat, float $lon, string $timezone): array
    {
        return $this->answer('forecast', func_get_args());
@@ -5,16 +5,16 @@ declare(strict_types=1);
 namespace Weerscherm\Tests;

 use PHPUnit\Framework\TestCase;
-use Weerscherm\PressureHistory;
+use Weerscherm\MeasureSeries;

-final class PressureHistoryTest extends TestCase
+final class MeasureSeriesTest extends TestCase
 {
    public function testMapsAndSortsPoints(): void
    {
        $body = json_decode((string) file_get_contents(__DIR__ . '/fixtures/getmeasure-pressure.json'), true)['body'];
        $shuffled = array_reverse($body, true);

-        $points = PressureHistory::map($shuffled, new \DateTimeZone('Europe/Berlin'));
+        $points = MeasureSeries::map($shuffled, new \DateTimeZone('Europe/Berlin'), 'hpa');

        self::assertCount(49, $points);
        self::assertSame('2026-09-10T14:30:00+02:00', $points[0]['at']);
@@ -25,8 +25,19 @@ final class PressureHistoryTest extends TestCase

    public function testSkipsGarbage(): void
    {
-        $points = PressureHistory::map(['abc' => [1000.0], '1789129800' => ['x'], '1789133400' => [1013.5]], new \DateTimeZone('UTC'));
+        $points = MeasureSeries::map(['abc' => [1000.0], '1789129800' => ['x'], '1789133400' => [1013.5]], new \DateTimeZone('UTC'), 'hpa');

        self::assertSame([['at' => '2026-09-11T13:30:00+00:00', 'hpa' => 1013.5]], $points);
    }
+
+    public function testTheValueFieldIsNamedPerMeasurement(): void
+    {
+        $body = ['1789129800' => [16.4], '1789131600' => [16.9]];
+
+        $temps = MeasureSeries::map($body, new \DateTimeZone('Europe/Berlin'), 'temp');
+
+        self::assertSame(['at', 'temp'], array_keys($temps[0]));
+        self::assertSame(16.4, $temps[0]['temp']);
+        self::assertSame(16.9, $temps[1]['temp']);
+    }
 }
@@ -0,0 +1,118 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use PHPUnit\Framework\TestCase;
+use Weerscherm\BuienradarClient;
+use Weerscherm\RadarService;
+use Weerscherm\UpstreamException;
+
+final class RadarServiceTest extends TestCase
+{
+    private const NOW = 1_800_000_000;
+    private const GIF = "GIF89a\x01\x00\x01\x00vers";
+    private const OLD_GIF = "GIF89a\x01\x00\x01\x00oud";
+
+    private string $dir;
+    private string $file;
+
+    protected function setUp(): void
+    {
+        $this->dir = sys_get_temp_dir() . '/weerscherm-radar-' . uniqid();
+        $this->file = $this->dir . '/radar.gif';
+    }
+
+    protected function tearDown(): void
+    {
+        array_map('unlink', glob($this->dir . '/*') ?: []);
+        @rmdir($this->dir);
+    }
+
+    private function service(FakeHttp $http, int $ttl = 240): RadarService
+    {
+        return new RadarService(
+            new BuienradarClient($http),
+            $this->file,
+            $ttl,
+            static fn(): int => self::NOW,
+        );
+    }
+
+    /** Legt een cachebestand neer met een gegeven leeftijd in seconden. */
+    private function seedCache(string $bytes, int $ageSeconds): void
+    {
+        mkdir($this->dir, 0700, true);
+        file_put_contents($this->file, $bytes);
+        touch($this->file, self::NOW - $ageSeconds);
+    }
+
+    public function testFetchesAndCachesWhenNothingIsStored(): void
+    {
+        $http = (new FakeHttp())->queue(200, self::GIF);
+
+        $result = $this->service($http)->image();
+
+        self::assertSame(['bytes' => self::GIF, 'stale' => false, 'age' => 0], $result);
+        self::assertStringEqualsFile($this->file, self::GIF);
+        self::assertSame([], glob($this->dir . '/*.tmp.*') ?: [], 'geen tijdelijke bestanden achtergelaten');
+    }
+
+    public function testFreshCacheIsServedWithoutFetching(): void
+    {
+        $this->seedCache(self::OLD_GIF, 100);
+        $http = new FakeHttp(); // geen response gepland: een fetch zou de test laten falen
+
+        $result = $this->service($http)->image();
+
+        self::assertSame(self::OLD_GIF, $result['bytes']);
+        self::assertFalse($result['stale']);
+        self::assertSame(100, $result['age']);
+        self::assertSame([], $http->requests);
+    }
+
+    public function testExpiredCacheIsRefetched(): void
+    {
+        $this->seedCache(self::OLD_GIF, 300);
+        $http = (new FakeHttp())->queue(200, self::GIF);
+
+        $result = $this->service($http)->image();
+
+        self::assertSame(self::GIF, $result['bytes']);
+        self::assertFalse($result['stale']);
+        self::assertCount(1, $http->requests);
+        self::assertStringEqualsFile($this->file, self::GIF);
+    }
+
+    public function testUpstreamFailureFallsBackToTheCachedImageMarkedStale(): void
+    {
+        $this->seedCache(self::OLD_GIF, 3600);
+        $http = (new FakeHttp())->queue(500, '');
+
+        $result = $this->service($http)->image();
+
+        self::assertSame(self::OLD_GIF, $result['bytes'], 'ongeacht de leeftijd: liever een oud beeld dan niets');
+        self::assertTrue($result['stale']);
+        self::assertSame(3600, $result['age']);
+    }
+
+    public function testUpstreamFailureWithoutCacheThrows(): void
+    {
+        $http = (new FakeHttp())->queue(500, '');
+
+        $this->expectException(UpstreamException::class);
+        $this->service($http)->image();
+    }
+
+    public function testEmptyCacheFileIsIgnored(): void
+    {
+        $this->seedCache('', 10);
+        $http = (new FakeHttp())->queue(200, self::GIF);
+
+        $result = $this->service($http)->image();
+
+        self::assertSame(self::GIF, $result['bytes']);
+        self::assertCount(1, $http->requests, 'een leeg cachebestand telt niet als geldige cache');
+    }
+}
@@ -0,0 +1,95 @@
+{
+    "body": {
+        "1789077600": [
+            11.9
+        ],
+        "1789079400": [
+            11.9
+        ],
+        "1789081200": [
+            10.8
+        ],
+        "1789083000": [
+            10.8
+        ],
+        "1789084800": [
+            9.9
+        ],
+        "1789086600": [
+            9.9
+        ],
+        "1789088400": [
+            9.4
+        ],
+        "1789090200": [
+            9.4
+        ],
+        "1789092000": [
+            9.2
+        ],
+        "1789093800": [
+            9.2
+        ],
+        "1789095600": [
+            9.4
+        ],
+        "1789097400": [
+            9.4
+        ],
+        "1789099200": [
+            9.9
+        ],
+        "1789101000": [
+            9.9
+        ],
+        "1789102800": [
+            10.8
+        ],
+        "1789104600": [
+            10.8
+        ],
+        "1789106400": [
+            11.9
+        ],
+        "1789108200": [
+            11.9
+        ],
+        "1789110000": [
+            13.1
+        ],
+        "1789111800": [
+            13.1
+        ],
+        "1789113600": [
+            14.5
+        ],
+        "1789115400": [
+            14.5
+        ],
+        "1789117200": [
+            15.9
+        ],
+        "1789119000": [
+            15.9
+        ],
+        "1789120800": [
+            17.2
+        ],
+        "1789122600": [
+            17.2
+        ],
+        "1789124400": [
+            18.2
+        ],
+        "1789126200": [
+            18.2
+        ],
+        "1789128000": [
+            19.1
+        ],
+        "1789129800": [
+            19.1
+        ]
+    },
+    "status": "ok"
+}
@@ -121,7 +121,7 @@ test('msUntil computes the wait until the next local time', () => {

 import {
  co2Level, fPct, fHpa, seriesRange, sparklinePath, sparklinePoints,
-  windArrowDeg, fKmh, formatHour, formatFullDate, pinRoom,
+  windArrowDeg, fKmh, formatHour, formatFullDate, pinRoom, hourTicks,
 } from '../../public/format.js';

 test('co2Level uses the Netatmo thresholds', () => {
@@ -208,3 +208,39 @@ test('pinRoom does not mutate the input array', () => {
  pinRoom(rooms, 'c');
  assert.deepEqual(rooms, original);
 });
+
+
+test('hourTicks puts marks on clock-aligned whole hours inside the window', () => {
+  const ticks = hourTicks('2026-09-12T11:41:00+02:00', '2026-09-13T11:41:00+02:00', TZ);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['12:00', '18:00', '00:00', '06:00']);
+  assert.deepEqual(ticks.map((t) => Number(t.percent.toFixed(2))), [1.32, 26.32, 51.32, 76.32]);
+});
+
+test('hourTicks drops a mark that would collide with the "nu" label', () => {
+  // Venster eindigt om 12:05, dus de markering van 12:00 zit op 99,7% en valt weg.
+  const ticks = hourTicks('2026-09-12T12:05:00+02:00', '2026-09-13T12:05:00+02:00', TZ);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['18:00', '00:00', '06:00']);
+});
+
+test('hourTicks stays on local whole hours across the daylight saving change', () => {
+  // 25 oktober 2026: de klok gaat om 03:00 terug naar 02:00, dus dat venster duurt 25 uur.
+  // Zonder de lokale klok te raadplegen zou 00:00 hier op 01:00 uitkomen.
+  const ticks = hourTicks('2026-10-24T12:00:00+02:00', '2026-10-25T12:00:00+01:00', TZ);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['12:00', '18:00', '00:00', '06:00']);
+  assert.equal(ticks[0].percent, 0, 'een venster dat precies op een heel uur begint krijgt daar een markering');
+});
+
+test('hourTicks honours a different step', () => {
+  const ticks = hourTicks('2026-09-13T09:30:00+02:00', '2026-09-13T21:30:00+02:00', TZ, 3);
+
+  assert.deepEqual(ticks.map((t) => formatTime(t.at, TZ)), ['12:00', '15:00', '18:00']);
+});
+
+test('hourTicks gives nothing for an empty or invalid window', () => {
+  assert.deepEqual(hourTicks('2026-09-13T10:00:00+02:00', '2026-09-13T10:00:00+02:00', TZ), []);
+  assert.deepEqual(hourTicks('kapot', '2026-09-13T10:00:00+02:00', TZ), []);
+  assert.deepEqual(hourTicks(undefined, undefined, TZ), []);
+});
@@ -9,7 +9,8 @@ function loadServiceWorker({ fetchImpl }) {
  const store = new Map();
  const cache = {
    async addAll(urls) { urls.forEach((u) => store.set(new URL(u, 'http://x/').href, new Response('shell'))); },
-    async put(req, res) { store.set(req.url, res); },
+    // De echte Cache API accepteert zowel een Request als een URL-string als sleutel.
+    async put(req, res) { store.set(typeof req === 'string' ? req : req.url, res); },
    async match(req) { return store.get(typeof req === 'string' ? req : req.url) || undefined; },
    async keys() { return [...store.keys()].map((u) => new Request(u)); },
  };
@@ -96,3 +97,42 @@ test('cross-origin and non-GET requests are left alone', () => {
  listeners.fetch({ request: new Request('http://x/api/data.php', { method: 'POST' }), respondWith: () => { handled = true; } });
  assert.equal(handled, false);
 });
+
+test('the radar image is network-first and cached under a key without querystring', async () => {
+  const { listeners, store } = loadServiceWorker({
+    fetchImpl: async () => new Response('GIF89a', { status: 200, headers: { 'Content-Type': 'image/gif' } }),
+  });
+
+  const res = await dispatchFetch(listeners, 'http://x/api/radar.php?t=123');
+
+  assert.equal(res.status, 200);
+  assert.ok(store.has('http://x/api/radar.php'), 'sleutel zonder ?t=, anders loopt de cache vol met varianten');
+  assert.equal(store.has('http://x/api/radar.php?t=123'), false);
+});
+
+test('an offline radar request falls back to the cached image, even with a different querystring', async () => {
+  let online = true;
+  const { listeners } = loadServiceWorker({
+    fetchImpl: async () => {
+      if (!online) throw new TypeError('Failed to fetch');
+      return new Response('GIF89a', { status: 200, headers: { 'Content-Type': 'image/gif' } });
+    },
+  });
+
+  await dispatchFetch(listeners, 'http://x/api/radar.php?t=1');
+  online = false;
+  const res = await dispatchFetch(listeners, 'http://x/api/radar.php?t=2');
+
+  assert.equal(res.status, 200);
+  assert.equal(res.headers.get('X-From-Cache'), '1');
+  assert.equal(await res.text(), 'GIF89a');
+});
+
+test('an offline radar request without any cache gives a plain 503, not JSON', async () => {
+  const { listeners } = loadServiceWorker({ fetchImpl: async () => { throw new TypeError('offline'); } });
+
+  const res = await dispatchFetch(listeners, 'http://x/api/radar.php?t=1');
+
+  assert.equal(res.status, 503);
+  assert.equal(await res.text(), 'offline');
+});
Author	SHA1	Message	Date
theoandClaude Opus 5	107978b265	feat: klein grafiekje van het temperatuurverloop van vandaag In de lege ruimte rechts van de grote buitentemperatuur staat nu het verloop van vandaag: onderschrift "Vandaag", de lijn, en tijdlabels op hele uren met "nu" rechts. Geen y-as, want de laagste en hoogste waarde van vandaag staan al onder de balk en dat is precies de schaal. Het getal en het grafiekje staan in een flexrij, zodat het grafiekje de resterende ruimte pakt en meebeweegt als het getal smaller of breder wordt. Vlak na middernacht zijn er nog geen twee meetpunten; dan blijft het blokje verborgen in plaats van een leeg kader te tonen. Data uit een extra getmeasure (scale=30min, type=Temperature, op de buitenmodule) vanaf middernacht lokale tijd, cache 15 minuten, in de payload als outdoor_history: {points, stale} zodat een storing daar de rest niet raakt. PressureHistory is generiek gemaakt tot MeasureSeries met de naam van het waardeveld als parameter, in plaats van er een bijna identieke tweede klasse naast te zetten. StationMapper geeft nu ook het id van de buitenmodule door. Onderweg gevonden: FixtureSource deed een modulo op een float, wat een PHP-deprecation vóór de JSON in de response zette. Dat verklaart de kapotte JSON die eerder in de browserconsole langskwam. Opgelost met intdiv. Servicewerker naar v10. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-13 11:50:40 +02:00
theoandClaude Opus 5	5058bb850d	Merge feature/hele-uren: tijdlabels op hele uren bij de luchtdrukgrafiek Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-13 11:33:14 +02:00
theoandClaude Opus 5	5d61b6ec90	feat: tijdlabels op hele uren in plaats van de ruwe meettijden De labels toonden de werkelijke meettijdstippen van Netatmo (11:41, 17:41, 23:41), wat onrustig leest. Nu markeringen op hele uren die op de klok zijn uitgelijnd: elke 6 uur vanaf middernacht, dus 00:00, 06:00, 12:00, 18:00, elk op zijn echte tijdspositie in het venster. "nu" blijft op de rechterrand; een markering die daar te dicht bij komt valt weg. axisMarks() is vervangen door hourTicks(), die uur voor uur door het venster loopt en telkens de lokale klok raadpleegt. Daardoor blijven de labels ook op de zomertijdwissel hele lokale uren, waar optellen in vaste stappen er een uur naast zou zitten; daar is een test voor. Een label vlak op de linkerrand wordt niet gecentreerd, zodat het binnen de grafiek blijft. Servicewerker naar v9. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-13 11:33:14 +02:00
theoandClaude Opus 5	e2db301aef	Merge feature/luchtdruk-assen: x- en y-as bij de luchtdrukgrafiek Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-13 11:30:15 +02:00
theoandClaude Opus 5	c0715b7cc9	feat: assen bij de luchtdrukgrafiek De lijn had geen schaal, dus je kon niet zien hoeveel hPa de uitslag was of wanneer een dip viel. Nu links de hoogste en laagste waarde van het venster in hele hPa, uitgelijnd op boven- en onderkant van de lijn, en eronder vijf tijdlabels (0/25/50/75/100% van het venster) met "nu" rechts, ondersteund door drie lichte verticale hulplijnen. Posities komen uit de pure functie axisMarks(), met tests. De losse tekst "1009 – 1015 hPa in 24 u" in de kopregel vervalt: de y-as zegt hetzelfde en de x-as maakt het venster duidelijk. De extra labelrij past door de marge onder de grote temperatuur 8px te krappen; er blijft 5px speling boven en onder de hero. Servicewerker naar v8. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-13 11:30:11 +02:00
theoandClaude Opus 5	c95d198341	Merge feature/buienradar: regenradar-overlay bij een tik op het regenblok Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-13 11:13:32 +02:00
theoandClaude Opus 5	c542601d4e	feat: tik op het regenblok voor de Buienradar-animatie Het regenblok linksonder opent een overlay met de geanimeerde regenradar van Buienradar (550x512, tijd in het beeld), naast de regencijfers die we al hebben: vandaag, de 3 vorige dagen en het maandtotaal. Sluit na 20 seconden of bij een tik, net als het uuroverzicht. Het beeld loopt via onze eigen /api/radar.php in plaats van een <img> rechtstreeks naar Buienradar: de spec wil alles lokaal geserveerd, de iPad praat zo nooit met een derde partij, we cachen 4 minuten (de radar ververst elke 5) en de servicewerker kan het laatste beeld offline bewaren. Bij een storing komt het laatst opgehaalde beeld terug; pas als er niets is, een nette melding in plaats van een leeg vlak. Bronvermelding staat in de overlay, zoals Buienradar vraagt. Verder: de overlay-machinerie (20s-timer, balk, sluiten) staat nu een keer in plaats van per overlay, Http kan optioneel redirects volgen (de beeld-API leidt door naar een CDN), en alle /api/-paden zijn in de servicewerker network-first met een cachesleutel zonder querystring. Servicewerker naar v7. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-13 11:13:28 +02:00
theoandClaude Sonnet 5	2200a849f9	Merge feature/module-pinnen: tik op een module om bovenaan te zetten met groter font Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-09-13 10:27:14 +02:00