feat: toon vandaag ook in de 5-daagse verwachting (nu 6 dagen)

ForecastMapper mapt voortaan index 0 t/m 5 van Open-Meteo (was 1 t/m 5),
zodat vandaag als eerste kolom in de verwachtingsstrook verschijnt naast
de bestaande 5 dagen erna. Verwachtingskolommen gaan van 5 naar 6 breed
(103px i.p.v. 124px), weericoon iets verkleind (58 -> 50px) om te passen.
Spec bijgewerkt om de wijziging vast te leggen. Service-worker-versie naar
v4 zodat het scherm dit zelf binnen enkele minuten oppikt.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.gitignore

@@ -3,3 +3,4 @@ config.php
 /vendor/
 /node_modules/
 .DS_Store
+.phpunit.result.cache

.phpunit.result.cache

@@ -1 +0,0 @@
-{"version":2,"defects":{"Weerscherm\\Tests\\DashboardServiceTest::testForecastUsesStationLocationUnlessConfigured":7,"Weerscherm\\Tests\\DashboardServiceTest::testMeasureFailureFallsBackToSumRain24":7},"times":{"Weerscherm\\Tests\\ConfigTest::testDefaultsApplyWhenKeysAreMissing":0,"Weerscherm\\Tests\\ConfigTest::testFileValuesOverrideDefaults":0,"Weerscherm\\Tests\\ConfigTest::testUnknownKeyReturnsGivenDefault":0,"Weerscherm\\Tests\\ConfigTest::testFileMustReturnArray":0,"Weerscherm\\Tests\\StationMapperTest::testStationMetadata":0,"Weerscherm\\Tests\\StationMapperTest::testOutdoor":0,"Weerscherm\\Tests\\StationMapperTest::testIndoorDefaultOrderAndUnreachableModule":0,"Weerscherm\\Tests\\StationMapperTest::testIndoorConfigDeterminesOrderAndLabels":0,"Weerscherm\\Tests\\StationMapperTest::testRainModule":0,"Weerscherm\\Tests\\StationMapperTest::testWithoutRainModule":0,"Weerscherm\\Tests\\StationMapperTest::testUnreachableOutdoorModuleGivesNulls":0,"Weerscherm\\Tests\\StationMapperTest::testUnknownDeviceIdFallsBackToFirstStation":0,"Weerscherm\\Tests\\StationMapperTest::testEmptyDevicesGivesNullsWithoutCrashing":0,"Weerscherm\\Tests\\RainCalculatorTest::testNormalWeek":0,"Weerscherm\\Tests\\RainCalculatorTest::testMissingPreviousDayIsNullAndExcludedFromTotal":0,"Weerscherm\\Tests\\RainCalculatorTest::testMissingTodayFallsBackToSumRain24":0,"Weerscherm\\Tests\\RainCalculatorTest::testMonthBoundaryKeepsPreviousDaysButNotInMonthTotal":0,"Weerscherm\\Tests\\RainCalculatorTest::testDaylightSavingTransitionMapsTimestampsToLocalDates":0,"Weerscherm\\Tests\\RainCalculatorTest::testEmptyBodyGivesNulls":0,"Weerscherm\\Tests\\RainCalculatorTest::testDateBeginIsMinOfFirstOfMonthAndThreeDaysAgo":0,"Weerscherm\\Tests\\CacheTest::testWriteThenReadRoundTrip":0.002,"Weerscherm\\Tests\\CacheTest::testMissingKeyReadsNull":0.002,"Weerscherm\\Tests\\CacheTest::testCorruptFileReadsNull":0,"Weerscherm\\Tests\\CacheTest::testFreshness":0,"Weerscherm\\Tests\\CacheTest::testKeyIsSanitised":0,"Weerscherm\\Tests\\CacheTest::testWriteCreatesDirectory":0,"Weerscherm\\Tests\\ForecastMapperTest::testSkipsTodayAndReturnsFiveDays":0,"Weerscherm\\Tests\\ForecastMapperTest::testNullValuesStayNull":0,"Weerscherm\\Tests\\ForecastMapperTest::testShorterResponseGivesFewerDays":0,"Weerscherm\\Tests\\ForecastMapperTest::testMissingTimeArrayGivesEmptyList":0,"Weerscherm\\Tests\\DashboardServiceTest::testHappyPathMatchesContract":0.001,"Weerscherm\\Tests\\DashboardServiceTest::testMeasureIsRequestedForRainModuleFromMidnightOfDateBegin":0.001,"Weerscherm\\Tests\\DashboardServiceTest::testForecastUsesStationLocationUnlessConfigured":0.001,"Weerscherm\\Tests\\DashboardServiceTest::testStationsFailureWithoutCacheGivesNullsAndError":0,"Weerscherm\\Tests\\DashboardServiceTest::testStationsFailureWithCacheServesStaleData":0.001,"Weerscherm\\Tests\\DashboardServiceTest::testAuthFailureGivesNetatmoAuthError":0,"Weerscherm\\Tests\\DashboardServiceTest::testMeasureFailureFallsBackToSumRain24":0,"Weerscherm\\Tests\\DashboardServiceTest::testForecastFailureLeavesRestIntact":0.001,"Weerscherm\\Tests\\DashboardServiceTest::testSecondBuildWithinTtlUsesCache":0.001}}

README.md

@@ -0,0 +1,170 @@
+# Weerscherm
+
+Een PWA voor een iPad mini (liggend) in de woonkamer. Toont de actuele gegevens van een
+Netatmo-weerstation (buiten, drie binnenruimtes, regen) en een verwachting voor vijf dagen van Open-Meteo.
+
+- Spec: [docs/weerscherm-spec.md](docs/weerscherm-spec.md)
+- Mockup (ontwerp A is leidend): [docs/design/weerscherm-layouts.html](docs/design/weerscherm-layouts.html)
+- Implementatieplan: [docs/superpowers/plans/2026-09-11-weerscherm.md](docs/superpowers/plans/2026-09-11-weerscherm.md)
+
+```
+iPad (PWA) ──GET /api/data.php──▶ PHP-backend ──▶ Netatmo API
+                                      │      └──▶ Open-Meteo API
+                                      └── storage/ (tokens + cache)
+```
+
+## Vereisten
+
+- PHP 8.3 met `ext-curl` en `ext-json`. Geen framework, geen runtime-dependencies.
+- Composer alleen voor PHPUnit (dev). Node 20+ alleen voor de JS-tests (dev).
+- Een webserver met `public/` als document root. `storage/` ligt daarbuiten en moet schrijfbaar zijn voor de webserver.
+
+## Installatie
+
+```bash
+git clone <repo> weerscherm
+cd weerscherm
+composer install            # alleen nodig voor tests; de app draait ook zonder vendor/
+cp config.example.php config.php
+mkdir -p storage && chmod 750 storage
+```
+
+Vul `config.php` in. De sleutels:
+
+| Sleutel | Betekenis |
+|---|---|
+| `data_source` | `fixture` (voorbeelddata, geen koppeling nodig) of `live` |
+| `netatmo_client_id`, `netatmo_client_secret` | uit de app op dev.netatmo.com |
+| `netatmo_device_id` | optioneel, `_id` van het basisstation; leeg = eerste station |
+| `timezone` | fallback als het station geen tijdzone meldt (standaard `Europe/Berlin`) |
+| `forecast_lat`, `forecast_lon` | optioneel; leeg = locatie van het station |
+| `indoor_modules` | optioneel, `_id => label` in de gewenste volgorde; leeg = Netatmo-namen |
+| `cache_ttl` | seconden per bron: `stations` 300, `measure` 900, `forecast` 3600 |
+| `storage_path` | map voor tokens en cache, buiten de docroot |
+
+`config.php` en `storage/` staan in `.gitignore` en komen nooit in git.
+
+## Netatmo-koppeling
+
+1. Maak een app aan op <https://dev.netatmo.com>. Zet `client_id` en `client_secret` in `config.php`.
+2. Genereer met de token generator op de app-pagina een token met scope `read_station`.
+3. Sla de refresh token op:
+
+```bash
+php bin/netatmo-init.php '<refresh_token>'
+```
+
+Dat schrijft `storage/netatmo-token.json` (mode 600). Bij het eerste verzoek wordt het access token ververst.
+De refresh token roteert bij elke verversing; de nieuwste wordt automatisch bewaard. Gebruik een oude nooit opnieuw.
+
+Toont het scherm "Netatmo-koppeling verlopen", genereer dan een nieuwe token en voer stap 3 opnieuw uit.
+
+## Tests
+
+```bash
+composer test    # PHPUnit: mapping, regenberekening, tokenrotatie, cache, stale-fallback
+npm test         # node --test: formattering, WMO-mapping, service worker
+```
+
+## Lokaal draaien
+
+Snel, zonder Docker:
+
+```bash
+php -S 127.0.0.1:8080 -t public
+```
+
+Open <http://127.0.0.1:8080/>. Met `data_source = fixture` is er geen koppeling nodig.
+Visuele check: een browservenster van exact 1133 × 744 naast de mockup (tab A).
+
+Via de OrbStack shared-Apache-setup (`weerscherm.test`):
+
+```bash
+# eenmalig: hostnaam
+sudo sh -c 'echo "127.0.0.1 weerscherm.test" >> /etc/hosts'
+# shared apache herstarten (vhost en mount staan al in orbstack/shared)
+cd /Volumes/development/sites/orbstack/shared && docker-compose up -d --build
+# php-container van dit project
+cd /Volumes/development/sites/orbstack/divers/weerscherm && docker-compose up -d --build
+```
+
+De bestanden staan in `orbstack/divers/weerscherm/` (Dockerfile, compose) en `orbstack/shared/apache/vhosts/weerscherm.conf`.
+
+## Deploy (productie)
+
+Productie-URL: `https://homedisplay.bahne-drei.de/` op `pensare-server`, beheerd met Ansible
+(`infra-ansible-pensare`, app `weerscherm` in `inventories/production/host_vars/pensare-server.yml`).
+
+- Code komt uit de publieke Gitea-repo `https://git.pensare.nl/theo/weerscherm.git` (branch `main`);
+  de role cloont of pullt als Linux-user `weerscherm`.
+- `config.php` wordt gerenderd uit `roles/webapp/templates/weerscherm.config.php.j2` met de Netatmo-gegevens
+  uit de vault (`vault_weerscherm_netatmo_client_id`, `vault_weerscherm_netatmo_client_secret`).
+- `storage_path` is `/var/www/weerscherm-storage` (www-data, 0770), buiten de release-map, zodat de token
+  en de cache deploys overleven.
+- Document root is `public/`; `src/`, `bin/` en `config.php` zijn niet via HTTP bereikbaar.
+- `composer install` is op de server niet nodig: `src/autoload.php` laadt de klassen zelf.
+- SSL via certbot in dezelfde playbook-run.
+
+Nieuwe versie uitrollen:
+
+```bash
+git push origin main
+cd /Volumes/development/sites/pensare/infra-ansible-pensare
+ansible-playbook playbooks/deploy-app.yml -e app=weerscherm
+```
+
+Verhoog bij frontend-wijzigingen `VERSION` in `public/sw.js`; de app herlaadt zichzelf bij `controllerchange`
+en in elk geval dagelijks rond 04:00.
+
+Token opnieuw koppelen (melding "Netatmo-koppeling verlopen"):
+
+```bash
+ssh weerscherm@65.108.40.86 'cd /var/www/weerscherm && sudo -u www-data php8.3 bin/netatmo-init.php "<refresh_token>"'
+```
+
+Lukt `sudo -u www-data` niet als `weerscherm`, doe het dan als `deploy` met `sudo`. Controleer daarna
+`https://homedisplay.bahne-drei.de/api/data.php` op `"errors": []`.
+
+- De app staat bewust zonder login. `robots.txt` en `X-Robots-Tag: noindex` houden zoekmachines buiten de deur.
+
+## iPad-instellingen
+
+1. Open de URL in Safari, tik op Delen → **Zet op beginscherm**. Start de app daarna altijd vanaf het beginscherm
+   (fullscreen, zonder Safari-balken).
+2. Instellingen → Scherm en helderheid → **Automatisch vergrendelen → Nooit**.
+3. Optioneel: Instellingen → Toegankelijkheid → **Begeleide toegang** inschakelen en starten met drie keer op de
+   zijknop, zodat het scherm niet per ongeluk verlaten wordt.
+4. Houd de iPad liggend; in portretstand verschijnt "Draai de iPad een kwartslag".
+
+## Gedrag bij storingen
+
+| Situatie | Wat het scherm doet |
+|---|---|
+| Meting ouder dan 30 minuten of Netatmo tijdelijk onbereikbaar | "meting HH:MM · verouderd" in oranje, laatste data blijft staan |
+| Server of wifi onbereikbaar | laatste data blijft staan, kopregel toont "geen verbinding sinds HH:MM"; herstelt vanzelf |
+| Refresh token ongeldig (`netatmo_auth`) | melding over de bovenzone met de herstelinstructie |
+| Open-Meteo onbereikbaar | laatst gecachte verwachting, `forecast_stale: true` |
+| Allereerste start zonder data | "Gegevens laden…", daarna een concrete foutmelding |
+
+## Acceptatiecriteria (spec §11)
+
+- [ ] Op de iPad mini, gestart vanaf het beginscherm, draait de app fullscreen en klopt de layout met ontwerp A.
+- [ ] Alle waarden komen overeen met de Netatmo-app: buiten, 3× binnen, min/max met tijdstippen, regen vandaag,
+      de afgelopen 3 dagen en het maandtotaal.
+- [ ] De verwachting toont 5 dagen vanaf morgen met het juiste icoon per WMO-code.
+- [ ] De data ververst zichzelf. Na middernacht staat de nieuwe datum er binnen 5 minuten.
+- [ ] Wifi uit: de laatste data blijft staan met "geen verbinding sinds". Wifi aan: herstelt vanzelf.
+- [ ] De Netatmo-token ververst meerdere dagen achter elkaar zonder handmatig ingrijpen.
+- [ ] Geen secrets in git, in de browser of in responses. `storage/` is niet via HTTP bereikbaar.
+- [ ] `composer test` en `npm test` slagen.
+
+## Structuur
+
+```
+public/            document root: index.html, styles.css, app.js, format.js, icons.js, sw.js, manifest, icons/, api/data.php
+src/               Config, Http, TokenStore, NetatmoClient, OpenMeteoClient, Cache, mappers, DashboardService
+bin/               netatmo-init.php
+storage/           tokens en cache (niet in git, niet in docroot)
+tests/             PHPUnit + JSON-fixtures; tests/js voor node --test
+docs/              spec, mockup, plan
+```

bin/netatmo-init.php

@@ -0,0 +1,42 @@
+#!/usr/bin/env php
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Eenmalig: sla de Netatmo refresh token op.
+ *
+ *   php bin/netatmo-init.php <refresh_token> [access_token]
+ *
+ * De token komt van de token generator op dev.netatmo.com (scope read_station).
+ * Het access token is optioneel; zonder wordt er bij het eerste verzoek ververst.
+ * Let op: de refresh token roteert bij elke verversing. Gebruik daarna nooit meer de oude.
+ */
+
+use Weerscherm\Config;
+use Weerscherm\TokenStore;
+
+require dirname(__DIR__) . '/src/autoload.php';
+
+$refresh = $argv[1] ?? '';
+$access = $argv[2] ?? '';
+if ($refresh === '' || $refresh === '-h' || $refresh === '--help') {
+    fwrite(STDERR, "Gebruik: php bin/netatmo-init.php <refresh_token> [access_token]\n");
+    exit(1);
+}
+
+$configFile = dirname(__DIR__) . '/config.php';
+if (!is_file($configFile)) {
+    fwrite(STDERR, "config.php ontbreekt. Kopieer config.example.php naar config.php en vul de Netatmo-gegevens in.\n");
+    exit(1);
+}
+$config = Config::load($configFile);
+$file = rtrim((string) $config->get('storage_path'), '/') . '/netatmo-token.json';
+
+$store = new TokenStore($file);
+$store->withLock(static function () use ($store, $refresh, $access): void {
+    $store->write(['access_token' => $access, 'refresh_token' => $refresh, 'expires_at' => 0]);
+});
+
+printf("Token opgeslagen in %s (mode %s).\n", $file, substr(sprintf('%o', fileperms($file)), -4));
+echo "Bij het eerste verzoek wordt het access token ververst; de nieuwe refresh token wordt dan automatisch bewaard.\n";

config.example.php

@@ -30,6 +30,7 @@ return [
     'cache_ttl' => [
         'stations' => 300,
         'measure' => 900,
+        'pressure' => 900,
         'forecast' => 3600,
     ],
 

docs/weerscherm-spec.md

@@ -1,6 +1,6 @@
 # Weerscherm: bouwspecificatie v1
 
-Opdracht voor Claude Code: bouw een PWA die fullscreen draait op een iPad mini (liggend) in de woonkamer. Het scherm toont actuele gegevens van een Netatmo-weerstation en een weersverwachting voor 5 dagen.
+Opdracht voor Claude Code: bouw een PWA die fullscreen draait op een iPad mini (liggend) in de woonkamer. Het scherm toont actuele gegevens van een Netatmo-weerstation en een weersverwachting voor 6 dagen.
 
 **Ontwerp A** in `docs/design/weerscherm-layouts.html` is leidend voor de layout. Dat bestand is een statische mockup met voorbeelddata. De CSS van ontwerp A (klasse `.da` en alle `.a-*`-klassen) is getest op 1133 × 744 punten en dient als uitgangspunt. De tabbladen B en C zijn niet in scope.
 
@@ -26,7 +26,8 @@ Werkwijze: lees eerst dit document en de mockup. Stel daarna een plan voor per f
 - Buitentemperatuur, met de laagste en hoogste temperatuur van vandaag (inclusief tijdstippen) en de trend.
 - De 3 binnensensoren, elk met huidige, laagste en hoogste temperatuur van vandaag.
 - Regen: vandaag, de afgelopen 3 dagen per dag, en het totaal van de huidige maand.
-- Verwachting voor de komende 5 dagen (vanaf morgen): max/min-temperatuur, neerslag in mm, neerslagkans en een weericoon.
+- Verwachting voor 6 dagen (vandaag t/m 5 dagen verder): max/min-temperatuur, neerslag in mm, neerslagkans en een weericoon.
+  _Wijziging 2026-09-13: was oorspronkelijk 5 dagen vanaf morgen; op verzoek van Theo toegevoegd: vandaag als eerste kolom._
 - Installeerbaar als PWA op het beginscherm, blijft werken met de laatst bekende data als de verbinding wegvalt.
 
 **Niet in v1:** nachtmodus (ontwerp C), andere meetwaarden (CO₂, luchtvochtigheid, wind), meerdere stations, een instellingenscherm, pushmeldingen.
@@ -255,7 +256,7 @@ 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".
-- **Verwachting (rechtsonder):** 5 kolommen met dagafkorting ("Za"), icoon (58px), "max° min°" als hele getallen (min in `--muted`) en "x,x mm" plus neerslagkans in %. Geen neerslag toont "0 mm".
+- **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.
 
 ### 6.4 Verversen
 
@@ -342,7 +343,7 @@ Hangt af van de iPadOS-versie in §0:
 
 - [ ] Op de iPad mini, gestart vanaf het beginscherm, draait de app fullscreen zonder Safari-balken en klopt de layout visueel met ontwerp A.
 - [ ] 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 5 dagen vanaf morgen met het juiste icoon per WMO-code.
+- [ ] De verwachting toont 6 dagen (vandaag t/m 5 dagen verder) met het juiste icoon per WMO-code.
 - [ ] 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.

package.json

@@ -0,0 +1,8 @@
+{
+  "name": "weerscherm",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "node --test \"tests/js/**/*.test.js\""
+  }
+}

public/.htaccess

@@ -0,0 +1,11 @@
+# Alleen relevant als de productieserver AllowOverride toestaat. De vhost-config heeft voorrang.
+<IfModule mod_headers.c>
+    Header set X-Robots-Tag "noindex, nofollow"
+    <FilesMatch "\.(html|js|css|webmanifest)$">
+        Header set Cache-Control "no-cache"
+    </FilesMatch>
+</IfModule>
+<IfModule mod_mime.c>
+    AddType application/manifest+json .webmanifest
+</IfModule>
+Options -Indexes

public/api/data.php

@@ -0,0 +1,53 @@
+<?php
+
+declare(strict_types=1);
+
+use Weerscherm\Cache;
+use Weerscherm\Config;
+use Weerscherm\DashboardService;
+use Weerscherm\FixtureSource;
+use Weerscherm\LiveSource;
+
+$root = dirname(__DIR__, 2);
+
+header('Content-Type: application/json; charset=utf-8');
+header('Cache-Control: no-store');
+header('X-Robots-Tag: noindex');
+
+require $root . '/src/autoload.php';
+
+$configFile = $root . '/config.php';
+if (!is_file($configFile)) {
+    http_response_code(500);
+    echo json_encode(['errors' => ['config_missing'], 'message' => 'config.php ontbreekt: kopieer config.example.php naar config.php']);
+    exit;
+}
+
+try {
+    $config = Config::load($configFile);
+    $storage = rtrim((string) $config->get('storage_path'), '/');
+    $timezone = (string) $config->get('timezone');
+    $lat = $config->get('forecast_lat');
+    $lon = $config->get('forecast_lon');
+
+    $source = $config->get('data_source') === 'live'
+        ? LiveSource::fromConfig($config)
+        : new FixtureSource(null, $timezone);
+
+    $service = new DashboardService(
+        $source,
+        new Cache($storage . '/cache'),
+        $config->get('cache_ttl'),
+        $timezone,
+        is_numeric($lat) ? (float) $lat : null,
+        is_numeric($lon) ? (float) $lon : null,
+        is_array($config->get('indoor_modules')) ? $config->get('indoor_modules') : [],
+        is_string($config->get('netatmo_device_id')) && $config->get('netatmo_device_id') !== '' ? $config->get('netatmo_device_id') : null,
+    );
+
+    echo json_encode($service->build(), JSON_THROW_ON_ERROR | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+} catch (Throwable $e) {
+    error_log('weerscherm: ' . $e->getMessage());
+    http_response_code(500);
+    echo json_encode(['errors' => ['server_error']]);
+}

public/app.js

@@ -0,0 +1,282 @@
+import {
+  f1, fInt, fmm, markerPos, barHeights, wmoIcon, trendLabel,
+  formatDate, formatTime, dayAbbr, monthName, isOlderThan, msUntil,
+  co2Level, fPct, fHpa, seriesRange, sparklinePath,
+} from './format.js';
+import { icon } from './icons.js';
+
+const CANVAS_W = 1133;
+const CANVAS_H = 744;
+const API_URL = 'api/data.php';
+const REFRESH_MS = 5 * 60 * 1000;
+const FETCH_TIMEOUT_MS = 10000;
+const STALE_MINUTES = 30;
+const RELOAD_HOUR = 4;
+const FALLBACK_TZ = 'Europe/Berlin';
+
+const $ = (id) => document.getElementById(id);
+const stage = $('stage');
+const viewport = $('viewport');
+
+const state = {
+  data: null,        // laatste payload, ook als die uit de SW-cache komt
+  tz: FALLBACK_TZ,
+  lastOk: null,      // Date van de laatste geslaagde live-fetch
+  offlineSince: null // Date vanaf wanneer er geen verbinding is
+};
+
+/* ---------- schaal ---------- */
+
+function fit() {
+  const w = viewport.clientWidth;
+  const h = viewport.clientHeight;
+  const s = Math.min(w / CANVAS_W, h / CANVAS_H);
+  const x = Math.round((w - CANVAS_W * s) / 2);
+  const y = Math.round((h - CANVAS_H * s) / 2);
+  stage.style.transform = `translate(${x}px, ${y}px) scale(${s})`;
+}
+
+/* ---------- render ---------- */
+
+function setText(id, text) {
+  $(id).textContent = text;
+}
+
+function renderHeader(now) {
+  setText('date', formatDate(now, state.tz));
+  setText('clock', formatTime(now, state.tz));
+}
+
+function renderMeasurement(now) {
+  const d = state.data;
+  const upd = $('upd');
+  if (!d) return;
+  const stale = d.station.stale || isOlderThan(d.station.measured_at, now, STALE_MINUTES);
+  upd.textContent = `meting ${formatTime(d.station.measured_at, state.tz)}${stale ? ' · verouderd' : ''}`;
+  upd.classList.toggle('stale', stale);
+}
+
+function renderOutdoor(o) {
+  setText('trend', trendLabel(o.trend));
+  setText('out-hum', o.humidity === null || o.humidity === undefined ? '' : `RV ${fPct(o.humidity)}`);
+  setText('temp', `${f1(o.temp)}°`);
+  $('mark').style.left = `${markerPos(o.temp, o.min, o.max).toFixed(1)}%`;
+  setText('min', `${f1(o.min)}°`);
+  setText('min-at', `laagst om ${formatTime(o.min_at, state.tz)}`);
+  setText('max', `${f1(o.max)}°`);
+  setText('max-at', `hoogst om ${formatTime(o.max_at, state.tz)}`);
+}
+
+function renderRooms(rooms) {
+  const html = rooms.map((r) => {
+    const off = !r.reachable || r.temp === null;
+    const co2 = co2Level(off ? null : r.co2);
+    const pill = `<span class="pill ${co2.level} num" title="${co2.label}">${co2.level === 'unknown' ? '–' : r.co2 + ' ppm'}</span>`;
+    return `<div class="a-room${off ? ' off' : ''}">
+      <p class="a-rname"><span>${esc(r.name)}</span>${pill}</p>
+      <p class="a-rtemp num">${off ? '–' : f1(r.temp) + '°'}</p>
+      <p class="a-rmm num"><span class="cold">↓ ${off ? '–' : f1(r.min) + '°'}</span><span class="warm">↑ ${off ? '–' : f1(r.max) + '°'}</span><span class="rv">RV ${off ? '–' : fPct(r.humidity)}</span></p>
+    </div>`;
+  });
+  $('rooms').innerHTML = html.join('');
+}
+
+function renderRain(rain, now) {
+  setText('rain-today', f1(rain.today));
+  setText('month-name', monthName(now, state.tz));
+  setText('month-total', `${f1(rain.month_total)} mm`);
+
+  const bars = rain.previous_days.map((p) => ({ label: dayAbbr(p.date, state.tz), mm: p.mm }));
+  bars.push({ label: 'Vandaag', mm: rain.today, now: true });
+  const heights = barHeights(bars.map((b) => b.mm));
+  $('bars').innerHTML = bars.map((b, i) => `<div class="a-bar${b.now ? ' now' : ''}">
+      <span class="num">${f1(b.mm)}</span><i style="height:${heights[i].toFixed(1)}px"></i><span>${b.label}</span>
+    </div>`).join('');
+}
+
+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` : '');
+  $('press-path').setAttribute('d', sparklinePath(values, 560, 56));
+}
+
+function renderForecast(days) {
+  $('forecast').innerHTML = days.map((d) => `<div class="a-day">
+      <p class="a-dname">${dayAbbr(d.date, state.tz)}</p>
+      <div class="a-icon">${icon(wmoIcon(d.weather_code))}</div>
+      <p class="a-hl num">${fInt(d.temp_max)}°<span>${fInt(d.temp_min)}°</span></p>
+      <p class="a-fr num">${fmm(d.precip_mm)}<span>${d.precip_prob === null ? '–' : d.precip_prob + '%'}</span></p>
+    </div>`).join('');
+}
+
+function renderBanner() {
+  const banner = $('banner');
+  const errors = state.data ? state.data.errors : [];
+  if (errors.includes('netatmo_auth')) {
+    banner.innerHTML = 'Netatmo-koppeling verlopen<small>Voer <code>bin/netatmo-init.php</code> opnieuw uit met een nieuwe refresh token.</small>';
+    banner.hidden = false;
+  } else if (!state.data) {
+    banner.hidden = false;
+  } else {
+    banner.hidden = true;
+  }
+}
+
+function renderStatus() {
+  const el = $('status');
+  if (state.offlineSince) {
+    el.textContent = `geen verbinding sinds ${formatTime(state.offlineSince, state.tz)}`;
+    el.hidden = false;
+  } else {
+    el.hidden = true;
+  }
+}
+
+function render() {
+  const now = new Date();
+  const d = state.data;
+  renderHeader(now);
+  if (d) {
+    renderMeasurement(now);
+    renderOutdoor(d.outdoor);
+    renderRooms(d.indoor);
+    renderRain(d.rain, now);
+    renderPressure(d.pressure || { current: null, trend: null, history: [] });
+    renderForecast(d.forecast);
+  }
+  renderBanner();
+  renderStatus();
+}
+
+function esc(s) {
+  return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+}
+
+/* ---------- data ---------- */
+
+async function fetchData() {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+  try {
+    const res = await fetch(API_URL, { cache: 'no-store', signal: controller.signal });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const json = await res.json();
+    if (!json || !json.station) throw new Error('onvolledig antwoord');
+    return { json, fromCache: res.headers.get('X-From-Cache') === '1' };
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+let refreshing = false;
+
+async function refresh() {
+  if (refreshing) return;
+  refreshing = true;
+  try {
+    const { json, fromCache } = await fetchData();
+    state.data = json;
+    state.tz = json.timezone || FALLBACK_TZ;
+    if (fromCache) {
+      state.offlineSince = state.offlineSince || state.lastOk || new Date();
+    } else {
+      state.lastOk = new Date();
+      state.offlineSince = null;
+    }
+  } catch (err) {
+    console.warn('weerscherm: ophalen mislukt', err);
+    if (!state.offlineSince) state.offlineSince = state.lastOk || new Date();
+    if (!state.data) {
+      $('banner').innerHTML = 'Geen verbinding met de server<small>Er wordt elke 5 minuten opnieuw geprobeerd.</small>';
+    }
+  } finally {
+    refreshing = false;
+    render();
+  }
+}
+
+/* ---------- timers ---------- */
+
+function scheduleClock() {
+  const now = new Date();
+  const wait = 60000 - (now.getSeconds() * 1000 + now.getMilliseconds());
+  setTimeout(() => {
+    renderHeader(new Date());
+    renderMeasurement(new Date());
+    scheduleClock();
+  }, wait);
+}
+
+function scheduleMidnight() {
+  setTimeout(() => {
+    refresh();
+    scheduleMidnight();
+  }, msUntil(new Date(), state.tz, 0));
+}
+
+function scheduleReload() {
+  setTimeout(() => location.reload(), msUntil(new Date(), state.tz, RELOAD_HOUR));
+}
+
+async function requestWakeLock() {
+  if (!('wakeLock' in navigator)) return;
+  try {
+    await navigator.wakeLock.request('screen');
+  } catch (err) {
+    // Niet beschikbaar of geweigerd; Automatisch vergrendelen op "Nooit" is de primaire oplossing.
+  }
+}
+
+/* ---------- service worker ---------- */
+
+let swRegistration = null;
+
+function registerServiceWorker() {
+  if (!('serviceWorker' in navigator)) return;
+  navigator.serviceWorker.register('./sw.js')
+    .then((reg) => { swRegistration = reg; })
+    .catch((err) => console.warn('weerscherm: service worker', err));
+  let reloading = false;
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    if (reloading) return;
+    reloading = true;
+    location.reload();
+  });
+}
+
+/**
+ * Vraagt de browser expliciet een nieuwe sw.js te controleren. Op een kiosk-scherm dat nooit navigeert
+ * (geen tabwissel, geen echte reload) gebeurt dat anders alleen impliciet en onvoorspelbaar laat — soms
+ * pas bij de volgende dagelijkse 04:00-reload. Met skipWaiting + clients.claim in sw.js activeert een
+ * gevonden update zich meteen, en de controllerchange-listener hierboven herlaadt de pagina dan vanzelf.
+ */
+function checkForUpdate() {
+  swRegistration?.update().catch(() => {});
+}
+
+/* ---------- start ---------- */
+
+window.addEventListener('resize', fit);
+window.addEventListener('orientationchange', () => setTimeout(fit, 50));
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible') {
+    fit();
+    refresh();
+    requestWakeLock();
+    checkForUpdate();
+  }
+});
+
+fit();
+render();
+refresh();
+setInterval(refresh, REFRESH_MS);
+setInterval(checkForUpdate, REFRESH_MS);
+scheduleClock();
+scheduleMidnight();
+scheduleReload();
+requestWakeLock();
+registerServiceWorker();

public/format.js

@@ -0,0 +1,170 @@
+/**
+ * Pure formatteer- en rekenfuncties voor het weerscherm. Geen DOM, geen fetch: los testbaar met node --test.
+ * Notatie nl-NL met decimale komma; tijden in de tijdzone van het station.
+ */
+
+const DASH = '–';
+
+const WMO_ICONS = [
+  [[0], 'sun'],
+  [[1, 2], 'partly'],
+  [[3], 'cloud'],
+  [[45, 48], 'fog'],
+  [[51, 52, 53, 54, 55, 56, 57], 'drizzle'],
+  [[61, 62, 63, 64, 65, 66, 67], 'rain'],
+  [[80, 81, 82], 'showers'],
+  [[71, 72, 73, 74, 75, 76, 77, 85, 86], 'snow'],
+  [[95, 96, 97, 98, 99], 'thunder'],
+];
+
+const TRENDS = { up: '↗ stijgend', down: '↘ dalend', stable: '→ stabiel' };
+
+function isNum(v) {
+  return typeof v === 'number' && Number.isFinite(v);
+}
+
+function cap(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+/** 16.4 -> "16,4"; null -> "–" */
+export function f1(v) {
+  return isNum(v) ? v.toFixed(1).replace('.', ',') : DASH;
+}
+
+/** 18.3 -> "18"; null -> "–" */
+export function fInt(v) {
+  return isNum(v) ? String(Math.round(v)) : DASH;
+}
+
+/** 0 -> "0 mm"; 0.4 -> "0,4 mm"; null -> "–" */
+export function fmm(v) {
+  if (!isNum(v)) return DASH;
+  return v === 0 ? '0 mm' : f1(v) + ' mm';
+}
+
+/** Positie van de marker op de min/max-balk, 0–100. Bij max == min of onbekend: 50. */
+export function markerPos(temp, min, max) {
+  if (!isNum(temp) || !isNum(min) || !isNum(max) || max === min) return 50;
+  const pos = ((temp - min) / (max - min)) * 100;
+  return Math.min(100, Math.max(0, pos));
+}
+
+/** Hoogte per staaf in px: mm / max(waarden) * maxPx, minimaal minPx. Alles 0 of null -> allemaal minPx. */
+export function barHeights(values, maxPx = 70, minPx = 2) {
+  const mm = values.map((v) => (isNum(v) ? v : 0));
+  const top = Math.max(...mm, 0);
+  return mm.map((v) => (top > 0 ? Math.max(minPx, (v / top) * maxPx) : minPx));
+}
+
+/** WMO-weercode -> icoonnaam. Onbekend -> "cloud". */
+export function wmoIcon(code) {
+  for (const [codes, name] of WMO_ICONS) {
+    if (codes.includes(code)) return name;
+  }
+  return 'cloud';
+}
+
+/** "up" -> "↗ stijgend" enz.; onbekend -> "" */
+export function trendLabel(trend) {
+  return TRENDS[trend] || '';
+}
+
+/** "Vrijdag 11 september" */
+export function formatDate(date, tz) {
+  const s = new Intl.DateTimeFormat('nl-NL', { weekday: 'long', day: 'numeric', month: 'long', timeZone: tz }).format(date);
+  return cap(s);
+}
+
+/** ISO-tijdstip -> "06:10" in de tijdzone; null -> "–" */
+export function formatTime(iso, tz) {
+  const d = iso instanceof Date ? iso : new Date(iso);
+  if (!iso || Number.isNaN(d.getTime())) return DASH;
+  return new Intl.DateTimeFormat('nl-NL', { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone: tz }).format(d);
+}
+
+/** "2026-09-12" -> "Za" */
+export function dayAbbr(dateStr, tz) {
+  const d = new Date(dateStr + 'T12:00:00Z');
+  if (Number.isNaN(d.getTime())) return DASH;
+  const s = new Intl.DateTimeFormat('nl-NL', { weekday: 'short', timeZone: 'UTC' }).format(d);
+  return cap(s.replace('.', '')).slice(0, 2);
+}
+
+/** "September" */
+export function monthName(date, tz) {
+  return cap(new Intl.DateTimeFormat('nl-NL', { month: 'long', timeZone: tz }).format(date));
+}
+
+/** Is het ISO-tijdstip ouder dan `minutes` minuten ten opzichte van `now`? Onbekend telt als verouderd. */
+export function isOlderThan(iso, now, minutes) {
+  if (!iso) return true;
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return true;
+  return now.getTime() - t > minutes * 60000;
+}
+
+/** Lokale tijd (uur, minuut, seconde) van `now` in de tijdzone. */
+function localParts(now, tz) {
+  const parts = new Intl.DateTimeFormat('en-GB', {
+    hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23', timeZone: tz,
+  }).formatToParts(now);
+  const get = (type) => Number(parts.find((p) => p.type === type).value);
+  return { h: get('hour'), m: get('minute'), s: get('second') };
+}
+
+/** Milliseconden tot de volgende keer dat het `hour`:`minute` is in de tijdzone (minimaal 1 s). */
+export function msUntil(now, tz, hour, minute = 0) {
+  const { h, m, s } = localParts(now, tz);
+  const target = hour * 3600 + minute * 60;
+  const current = h * 3600 + m * 60 + s;
+  let diff = target - current;
+  if (diff <= 0) diff += 86400;
+  return Math.max(1000, diff * 1000 - now.getMilliseconds());
+}
+
+/** CO₂-niveau volgens de Netatmo-drempels: tot 1000 goed, tot 1500 matig, daarboven slecht. */
+export function co2Level(ppm) {
+  if (!isNum(ppm)) return { level: 'unknown', label: DASH };
+  if (ppm <= 1000) return { level: 'good', label: 'goed' };
+  if (ppm <= 1500) return { level: 'medium', label: 'matig' };
+  return { level: 'bad', label: 'slecht' };
+}
+
+/** 48 -> "48%"; null -> "–" */
+export function fPct(v) {
+  return isNum(v) ? `${Math.round(v)}%` : DASH;
+}
+
+/** 1014.2 -> "1014 hPa"; null -> "–" */
+export function fHpa(v) {
+  return isNum(v) ? `${Math.round(v)} hPa` : DASH;
+}
+
+/** Laagste en hoogste waarde van een reeks (null-waarden genegeerd), of null zonder geldige waarden. */
+export function seriesRange(values) {
+  const nums = values.filter(isNum);
+  if (nums.length === 0) return null;
+  return { min: Math.min(...nums), max: Math.max(...nums) };
+}
+
+/**
+ * SVG-pad voor een sparkline: punten gelijkmatig over de breedte, waarden geschaald op min..max
+ * met `pad` px marge. Een vlakke reeks wordt een lijn door het midden. Minder dan 2 punten -> "".
+ */
+export function sparklinePath(values, w, h, pad = 3) {
+  const range = seriesRange(values);
+  if (!range || values.length < 2) return '';
+  const span = range.max - range.min;
+  const innerW = w - 2 * pad;
+  const innerH = h - 2 * pad;
+  const step = innerW / (values.length - 1);
+  const parts = [];
+  values.forEach((v, i) => {
+    if (!isNum(v)) return;
+    const x = pad + i * step;
+    const y = span === 0 ? h / 2 : pad + innerH - ((v - range.min) / span) * innerH;
+    parts.push(`${parts.length === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`);
+  });
+  return parts.join(' ');
+}

public/icons.js

@@ -0,0 +1,32 @@
+/**
+ * Weericonen als inline SVG-strings. viewBox 0 0 48 48, stroke 2.4, ronde uiteinden.
+ * Zon-delen krijgen de klasse i-sun, wolk-vullingen i-cloud, druppels/vlokken/mist i-drop.
+ */
+
+const SUN = '<g class="i-sun"><circle cx="24" cy="24" r="8"/><path d="M24 6v5M24 37v5M6 24h5M37 24h5M11.3 11.3l3.5 3.5M33.2 33.2l3.5 3.5M11.3 36.7l3.5-3.5M33.2 14.8l3.5-3.5"/></g>';
+const SMALL_SUN = '<g class="i-sun"><circle cx="18" cy="17" r="6"/><path d="M18 5v3M6 17h3M9.5 8.5l2 2M26.5 8.5l-2 2"/></g>';
+const CLOUD_LOW = '<path class="i-cloud" d="M17 40h18a7 7 0 0 0 .8-13.96A10 10 0 0 0 17.3 28 6 6 0 0 0 17 40z"/>';
+const CLOUD_HIGH = '<path class="i-cloud" d="M15 30h19a7 7 0 0 0 .8-13.96A10 10 0 0 0 15.3 18 6 6 0 0 0 15 30z"/>';
+const CLOUD_MID = '<path class="i-cloud" d="M15 34h19a7 7 0 0 0 .8-13.96A10 10 0 0 0 15.3 22 6 6 0 0 0 15 34z"/>';
+
+const ICONS = {
+  sun: SUN,
+  partly: SMALL_SUN + CLOUD_LOW,
+  cloud: CLOUD_MID,
+  fog: CLOUD_HIGH + '<path class="i-drop" d="M14 36h20M18 42h14"/>',
+  drizzle: CLOUD_HIGH + '<path class="i-drop" d="M18 35l-1 2.5M26 35l-1 2.5M34 35l-1 2.5"/>',
+  rain: CLOUD_HIGH + '<path class="i-drop" d="M18 35l-2 5M26 35l-2 5M34 35l-2 5"/>',
+  showers: '<g class="i-sun"><circle cx="16" cy="14" r="5"/><path d="M16 4v2.5M6 14h2.5M9 7l1.8 1.8M23 7l-1.8 1.8"/></g>'
+    + '<path class="i-cloud" d="M17 32h17a6.5 6.5 0 0 0 .7-12.96A9.5 9.5 0 0 0 17.3 21 5.5 5.5 0 0 0 17 32z"/>'
+    + '<path class="i-drop" d="M22 37l-2 5M30 37l-2 5"/>',
+  snow: CLOUD_HIGH + '<path class="i-drop" d="M17 35v6M14.4 36.5l5.2 3M14.4 39.5l5.2-3M25 35v6M22.4 36.5l5.2 3M22.4 39.5l5.2-3M33 35v6M30.4 36.5l5.2 3M30.4 39.5l5.2-3"/>',
+  thunder: CLOUD_HIGH + '<path class="i-sun" d="M26 31l-5 8h6l-3 6"/>',
+};
+
+export const ICON_NAMES = Object.keys(ICONS);
+
+/** SVG-markup voor een icoonnaam; onbekend -> cloud. */
+export function icon(name) {
+  const inner = ICONS[name] || ICONS.cloud;
+  return `<svg class="ic" viewBox="0 0 48 48" aria-hidden="true">${inner}</svg>`;
+}

public/icons/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="512" height="512">
+  <rect width="48" height="48" fill="#E8EDF1"/>
+  <g fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+    <g stroke="#D39A2C"><circle cx="19" cy="18" r="6"/><path d="M19 6v3M7 18h3M10.5 9.5l2 2M27.5 9.5l-2 2"/></g>
+    <path fill="#E8EDF1" stroke="#1B2A35" d="M17 40h18a7 7 0 0 0 .8-13.96A10 10 0 0 0 17.3 28 6 6 0 0 0 17 40z"/>
+  </g>
+</svg>

public/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="nl">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
+<title>Weerscherm</title>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="Weer">
+<meta name="theme-color" content="#E8EDF1">
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="apple-touch-icon" href="icons/icon-180.png">
+<link rel="icon" href="icons/icon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div id="viewport">
+  <main id="stage" class="da" aria-live="polite">
+    <header class="a-top">
+      <span class="a-date" id="date">&nbsp;</span>
+      <span class="a-right">
+        <span class="a-status" id="status" hidden></span>
+        <span class="a-upd" id="upd">meting –</span>
+        <span class="a-clock num" id="clock">–:–</span>
+      </span>
+    </header>
+
+    <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-range">
+        <div class="a-track"><span class="a-mark" id="mark" style="left:50%"></span></div>
+        <div class="a-ends num">
+          <span><b class="cold" id="min">–</b><span id="min-at">laagst om –</span></span>
+          <span><b class="warm" id="max">–</b><span id="max-at">hoogst om –</span></span>
+        </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>
+      </div>
+    </section>
+
+    <section class="a-inside" id="rooms"></section>
+
+    <section class="a-bottom">
+      <div>
+        <p class="a-sub">Regen</p>
+        <div class="a-rainrow">
+          <div>
+            <p class="a-rbig"><span class="num" id="rain-today">–</span> mm</p>
+            <p class="a-rsm">vandaag</p>
+            <p class="a-month"><span id="month-name">–</span><b class="num" id="month-total">–</b></p>
+          </div>
+          <div class="a-bars" id="bars"></div>
+        </div>
+      </div>
+      <div class="a-fc" id="forecast"></div>
+    </section>
+
+    <div class="banner" id="banner">Gegevens laden…</div>
+  </main>
+</div>
+<div id="rotate">Draai de iPad een kwartslag</div>
+<script type="module" src="app.js"></script>
+</body>
+</html>

public/manifest.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "Weerscherm",
+  "short_name": "Weer",
+  "description": "Netatmo-weerstation en verwachting voor in de woonkamer",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "landscape",
+  "background_color": "#E8EDF1",
+  "theme_color": "#E8EDF1",
+  "lang": "nl",
+  "icons": [
+    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

public/styles.css

@@ -0,0 +1,178 @@
+/* Weerscherm, ontwerp A. Vast canvas van 1133 × 744 dat via JS geschaald en gecentreerd wordt. */
+
+:root {
+  --bg: #E8EDF1;
+  --ink: #1B2A35;
+  --muted: #5F707C;
+  --line: #C6D0D8;
+  --warm: #B8761C;
+  --cold: #3A75A3;
+  --rain: #2E6A99;
+  --sun: #D39A2C;
+  --good: #4E8F5A;
+  --bad: #B5433B;
+  --iconfill: #E8EDF1;
+  --w: 1133px;
+  --h: 744px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
+  font-variant-numeric: tabular-nums;
+  -webkit-text-size-adjust: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+[hidden] { display: none !important; }
+
+#viewport {
+  position: fixed;
+  top: env(safe-area-inset-top, 0px);
+  right: env(safe-area-inset-right, 0px);
+  bottom: env(safe-area-inset-bottom, 0px);
+  left: env(safe-area-inset-left, 0px);
+  overflow: hidden;
+}
+
+#stage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--w);
+  height: var(--h);
+  transform-origin: top left;
+  display: grid;
+  padding: 30px 44px;
+  grid-template-columns: 1fr 330px;
+  grid-template-rows: 40px 1fr 232px;
+  column-gap: 56px;
+  background: var(--bg);
+}
+
+.num { font-variant-numeric: tabular-nums; }
+.cold { color: var(--cold); }
+.warm { color: var(--warm); }
+.muted { color: var(--muted); }
+
+.ic { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; width: 100%; height: 100%; display: block; }
+.i-sun { stroke: var(--sun); }
+.i-drop { stroke: var(--rain); }
+.i-cloud { fill: var(--iconfill); }
+
+/* Kopregel */
+.a-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
+.a-date { font-size: 22px; font-weight: 500; }
+.a-right { display: flex; gap: 18px; align-items: baseline; }
+.a-status { font-size: 15px; color: var(--warm); }
+.a-upd { font-size: 15px; color: var(--muted); }
+.a-upd.stale { color: var(--warm); }
+.a-clock { font-size: 26px; font-weight: 300; }
+
+/* Buiten */
+.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-hum { font-size: 17px; font-weight: 400; }
+.a-hum:not(:empty)::before { content: "·"; margin-right: 14px; }
+.a-range { width: 560px; }
+.a-track { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--cold), var(--warm)); }
+.a-mark { position: absolute; top: 50%; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 5px solid var(--ink); transform: translate(-50%, -50%); transition: left .6s ease; }
+.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; }
+.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-spark-base { stroke: var(--line); stroke-width: 1; }
+.a-spark-line { fill: none; stroke: var(--rain); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+
+/* Binnen */
+.a-inside { align-self: center; }
+.a-room { padding: 12px 0; border-top: 1px solid var(--line); }
+.a-room:first-child { border-top: 0; }
+.a-rname { font-size: 19px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
+.pill { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--muted); letter-spacing: .01em; white-space: nowrap; }
+.pill.good { background: var(--good); }
+.pill.medium { background: var(--warm); }
+.pill.bad { background: var(--bad); }
+.pill.unknown { background: var(--line); color: var(--muted); }
+.a-rtemp { font-size: 50px; font-weight: 300; line-height: 1.05; }
+.a-room.off .a-rtemp { color: var(--muted); }
+.a-rmm { font-size: 17px; display: flex; gap: 18px; }
+.a-rmm .rv { color: var(--muted); }
+
+/* Onderste strook */
+.a-bottom { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 22px; display: grid; grid-template-columns: 390px 1fr; column-gap: 36px; }
+.a-sub { font-size: 19px; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
+.a-rainrow { display: flex; justify-content: space-between; align-items: flex-end; }
+.a-rbig { font-size: 22px; color: var(--rain); }
+.a-rbig span { font-size: 60px; font-weight: 300; line-height: 1; }
+.a-rsm { font-size: 17px; color: var(--muted); }
+.a-month { font-size: 17px; margin-top: 18px; color: var(--muted); white-space: nowrap; }
+.a-month b { color: var(--ink); font-weight: 600; font-size: 20px; margin-left: 4px; }
+.a-bars { display: flex; gap: 6px; align-items: flex-end; }
+.a-bar { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 14px; color: var(--muted); min-width: 38px; }
+.a-bar i { display: block; width: 24px; border-radius: 4px 4px 0 0; background: var(--rain); opacity: .4; transition: height .6s ease; }
+.a-bar.now i { opacity: 1; }
+.a-bar.now span { color: var(--ink); font-weight: 600; }
+
+/* Verwachting */
+.a-fc { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; }
+.a-day { display: flex; flex-direction: column; align-items: center; gap: 6px; border-left: 1px solid var(--line); }
+.a-day:first-child { border-left: 0; }
+.a-dname { font-size: 19px; font-weight: 600; }
+.a-icon { width: 50px; height: 50px; }
+.a-hl { font-size: 28px; font-weight: 500; }
+.a-hl span { font-size: 22px; color: var(--muted); font-weight: 400; margin-left: 6px; }
+.a-fr { font-size: 16px; color: var(--rain); }
+.a-fr span { color: var(--muted); margin-left: 6px; }
+
+/* Meldingen */
+.banner {
+  position: absolute;
+  left: 44px;
+  right: 44px;
+  top: 86px;
+  height: 396px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 40px 60px;
+  font-size: 30px;
+  line-height: 1.4;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  z-index: 2;
+}
+.banner small { display: block; margin-top: 16px; font-size: 20px; color: var(--muted); }
+
+#rotate {
+  display: none;
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  color: var(--muted);
+  background: var(--bg);
+  z-index: 10;
+}
+@media (orientation: portrait) {
+  #rotate { display: flex; }
+}

public/sw.js

@@ -0,0 +1,82 @@
+/* Service worker: app-shell cache-first, API network-first met timeout en fallback op de laatste response. */
+
+const VERSION = 'weerscherm-v4';
+const SHELL = [
+  './',
+  './index.html',
+  './styles.css',
+  './app.js',
+  './format.js',
+  './icons.js',
+  './manifest.webmanifest',
+  './icons/icon.svg',
+  './icons/icon-180.png',
+  './icons/icon-192.png',
+  './icons/icon-512.png',
+];
+const API_PATH = '/api/data.php';
+const API_TIMEOUT_MS = 8000;
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(VERSION).then((cache) => cache.addAll(SHELL)).then(() => self.skipWaiting()),
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== VERSION).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const req = event.request;
+  if (req.method !== 'GET') return;
+  const url = new URL(req.url);
+  if (url.origin !== self.location.origin) return;
+
+  if (url.pathname.endsWith(API_PATH)) {
+    event.respondWith(networkFirst(req));
+  } else {
+    event.respondWith(cacheFirst(req));
+  }
+});
+
+async function networkFirst(req) {
+  const cache = await caches.open(VERSION);
+  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());
+    }
+    return res;
+  } catch (err) {
+    const cached = await cache.match(req);
+    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' },
+    });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function cacheFirst(req) {
+  const cache = await caches.open(VERSION);
+  const cached = await cache.match(req, { ignoreSearch: true });
+  if (cached) return cached;
+  const res = await fetch(req);
+  if (res.ok) {
+    cache.put(req, res.clone());
+  }
+  return res;
+}

src/Config.php

@@ -18,6 +18,7 @@ final class Config
         'cache_ttl' => [
             'stations' => 300,
             'measure' => 900,
+            'pressure' => 900,
             'forecast' => 3600,
         ],
         'storage_path' => null,

src/DashboardService.php

@@ -18,7 +18,7 @@ final class DashboardService
     private array $errors = [];
 
     /**
-     * @param array{stations: int, measure: int, forecast: int} $ttl
+     * @param array{stations: int, measure: int, pressure: int, forecast: int} $ttl
      * @param array<string, string> $indoorModules
      */
     public function __construct(
@@ -47,6 +47,7 @@ final class DashboardService
         $now = $nowUtc->setTimezone($tz);
 
         $rain = $this->rain($station, $now);
+        $pressure = $this->pressure($station, $now);
         $forecast = $this->forecast($station, $tz);
 
         return [
@@ -63,9 +64,11 @@ final class DashboardService
                 'min_at' => $this->iso($station['outdoor']['min_at'], $tz),
                 'max' => $station['outdoor']['max'],
                 'max_at' => $this->iso($station['outdoor']['max_at'], $tz),
+                'humidity' => $station['outdoor']['humidity'],
             ],
             'indoor' => $station['indoor'],
             'rain' => $rain,
+            'pressure' => $pressure,
             'forecast' => $forecast['days'],
             'forecast_stale' => $forecast['stale'],
             'errors' => $this->errors,
@@ -91,6 +94,25 @@ final class DashboardService
         return RainCalculator::compute($measure['data'], $now, $station['sum_rain_24']) + ['stale' => $measure['stale']];
     }
 
+    /** @return array{current: ?float, trend: ?string, history: list<array{at: string, hpa: float}>, stale: bool} */
+    private function pressure(array $station, \DateTimeImmutable $now): array
+    {
+        $base = ['current' => $station['pressure']['current'], 'trend' => $station['pressure']['trend']];
+        if ($station['device_id'] === null) {
+            return $base + ['history' => [], 'stale' => false];
+        }
+        $begin = $now->getTimestamp() - PressureHistory::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()),
+            'stale' => $measure['stale'],
+        ];
+    }
+
     /** @return array{days: list<array>, stale: bool} */
     private function forecast(array $station, \DateTimeZone $tz): array
     {

src/FixtureSource.php

@@ -27,16 +27,17 @@ final class FixtureSource implements WeatherSource
         return ['devices' => [[
             '_id' => '70:ee:50:00:00:01', 'type' => 'NAMain', 'station_name' => 'Thuis', 'module_name' => 'Woonkamer', 'reachable' => true,
             'place' => ['timezone' => $this->timezone, 'location' => [6.55, 51.82]],
-            'dashboard_data' => ['time_utc' => $at('-2 minutes'), 'Temperature' => 21.3, 'min_temp' => 20.4, 'max_temp' => 22.1,
-                'date_min_temp' => $today('05:50'), 'date_max_temp' => $today('13:40'), 'temp_trend' => 'stable'],
+            'dashboard_data' => ['time_utc' => $at('-2 minutes'), 'Temperature' => 21.3, 'CO2' => 612, 'Humidity' => 48,
+                'Pressure' => 1014.2, 'AbsolutePressure' => 1011.8, 'pressure_trend' => 'up', 'Noise' => 38,
+                'min_temp' => 20.4, 'max_temp' => 22.1, 'date_min_temp' => $today('05:50'), 'date_max_temp' => $today('13:40'), 'temp_trend' => 'stable'],
             'modules' => [
                 ['_id' => '02:00:00:00:00:01', 'type' => 'NAModule1', 'module_name' => 'Buiten', 'reachable' => true,
-                    'dashboard_data' => ['time_utc' => $at('-3 minutes'), 'Temperature' => 16.4, 'min_temp' => 9.2, 'max_temp' => 19.8,
+                    'dashboard_data' => ['time_utc' => $at('-3 minutes'), 'Temperature' => 16.4, 'Humidity' => 71, 'min_temp' => 9.2, 'max_temp' => 19.8,
                         'date_min_temp' => $today('06:10'), 'date_max_temp' => $today('13:05'), 'temp_trend' => 'down']],
                 ['_id' => '03:00:00:00:00:02', 'type' => 'NAModule4', 'module_name' => 'Slaapkamer', 'reachable' => true,
-                    'dashboard_data' => ['time_utc' => $at('-4 minutes'), 'Temperature' => 18.9, 'min_temp' => 18.1, 'max_temp' => 19.6, 'temp_trend' => 'up']],
+                    'dashboard_data' => ['time_utc' => $at('-4 minutes'), 'Temperature' => 18.9, 'CO2' => 1180, 'Humidity' => 52, 'min_temp' => 18.1, 'max_temp' => 19.6, 'temp_trend' => 'up']],
                 ['_id' => '03:00:00:00:00:03', 'type' => 'NAModule4', 'module_name' => 'Kantoor', 'reachable' => true,
-                    'dashboard_data' => ['time_utc' => $at('-4 minutes'), 'Temperature' => 20.2, 'min_temp' => 19.0, 'max_temp' => 21.0, 'temp_trend' => 'stable']],
+                    'dashboard_data' => ['time_utc' => $at('-4 minutes'), 'Temperature' => 20.2, 'CO2' => 1640, 'Humidity' => 44, 'min_temp' => 19.0, 'max_temp' => 21.0, 'temp_trend' => 'stable']],
                 ['_id' => '05:00:00:00:00:04', 'type' => 'NAModule3', 'module_name' => 'Regenmeter', 'reachable' => true,
                     'dashboard_data' => ['time_utc' => $at('-3 minutes'), 'Rain' => 0, 'sum_rain_1' => 0, 'sum_rain_24' => 2.4]],
             ],
@@ -56,6 +57,16 @@ final class FixtureSource implements WeatherSource
         return $body;
     }
 
+    public function pressureHistory(string $deviceId, int $begin, int $end): array
+    {
+        $body = [];
+        for ($ts = $begin - ($begin % 1800); $ts <= $end; $ts += 1800) {
+            $i = ($end - $ts) / 1800;
+            $body[(string) $ts] = [round(1012 + 3 * sin($i / 8) + ($i % 5) * 0.1, 1)];
+        }
+        return $body;
+    }
+
     public function forecast(float $lat, float $lon, string $timezone): array
     {
         $dates = [];

src/ForecastMapper.php

@@ -4,10 +4,10 @@ declare(strict_types=1);
 
 namespace Weerscherm;
 
-/** Zet het "daily"-blok van Open-Meteo om naar 5 dagen vanaf morgen (index 0 is vandaag). */
+/** Zet het "daily"-blok van Open-Meteo om naar 6 dagen, inclusief vandaag (index 0). */
 final class ForecastMapper
 {
-    private const DAYS = 5;
+    private const DAYS = 6;
 
     /**
      * @param array<string, mixed> $daily
@@ -17,7 +17,7 @@ final class ForecastMapper
     {
         $dates = is_array($daily['time'] ?? null) ? $daily['time'] : [];
         $out = [];
-        for ($i = 1; $i <= self::DAYS && isset($dates[$i]); $i++) {
+        for ($i = 0; $i < self::DAYS && isset($dates[$i]); $i++) {
             if (!is_string($dates[$i])) {
                 continue;
             }

src/Http.php

@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+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)
+    {
+    }
+
+    public function get(string $url, array $query = [], array $headers = []): HttpResponse
+    {
+        if ($query !== []) {
+            $url .= (str_contains($url, '?') ? '&' : '?') . http_build_query($query);
+        }
+        return $this->request($url, $headers, null);
+    }
+
+    public function postForm(string $url, array $fields): HttpResponse
+    {
+        return $this->request($url, ['Content-Type: application/x-www-form-urlencoded'], http_build_query($fields));
+    }
+
+    /** @param list<string> $headers */
+    private function request(string $url, array $headers, ?string $postBody): HttpResponse
+    {
+        $ch = curl_init($url);
+        if ($ch === false) {
+            throw new UpstreamException('curl_init mislukt');
+        }
+        curl_setopt_array($ch, [
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_FOLLOWLOCATION => false,
+            CURLOPT_CONNECTTIMEOUT => $this->connectTimeout,
+            CURLOPT_TIMEOUT => $this->timeout,
+            CURLOPT_HTTPHEADER => array_merge(['Accept: application/json', 'User-Agent: weerscherm/1.0'], $headers),
+            CURLOPT_SSL_VERIFYPEER => true,
+        ]);
+        if ($postBody !== null) {
+            curl_setopt($ch, CURLOPT_POST, true);
+            curl_setopt($ch, CURLOPT_POSTFIELDS, $postBody);
+        }
+        $body = curl_exec($ch);
+        $status = (int) curl_getinfo($ch, CURLINFO_RESPONSE_CODE);
+        $error = curl_error($ch);
+        curl_close($ch);
+
+        if (!is_string($body)) {
+            throw new UpstreamException("Verzoek mislukt: $error");
+        }
+        return new HttpResponse($status, $body);
+    }
+}

src/HttpClient.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+interface HttpClient
+{
+    /**
+     * @param array<string, string|int|float> $query
+     * @param list<string> $headers
+     */
+    public function get(string $url, array $query = [], array $headers = []): HttpResponse;
+
+    /** @param array<string, string|int|float> $fields */
+    public function postForm(string $url, array $fields): HttpResponse;
+}

src/HttpResponse.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+final class HttpResponse
+{
+    public function __construct(public readonly int $status, public readonly string $body)
+    {
+    }
+
+    /** @return array<string|int, mixed> */
+    public function json(): array
+    {
+        try {
+            $decoded = json_decode($this->body, true, 512, JSON_THROW_ON_ERROR);
+        } catch (\JsonException $e) {
+            throw new UpstreamException('Ongeldige JSON in antwoord: ' . $e->getMessage(), 0, $e);
+        }
+        if (!is_array($decoded)) {
+            throw new UpstreamException('Antwoord is geen JSON-object');
+        }
+        return $decoded;
+    }
+}

src/LiveSource.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+/** Echte bronnen: Netatmo (stationsdata, regenmetingen) en Open-Meteo (verwachting). */
+final class LiveSource implements WeatherSource
+{
+    public function __construct(private readonly NetatmoClient $netatmo, private readonly OpenMeteoClient $openMeteo)
+    {
+    }
+
+    public static function fromConfig(Config $config): self
+    {
+        $clientId = (string) $config->get('netatmo_client_id');
+        $clientSecret = (string) $config->get('netatmo_client_secret');
+        if ($clientId === '' || $clientSecret === '') {
+            throw new \RuntimeException('netatmo_client_id en netatmo_client_secret ontbreken in config.php');
+        }
+        $http = new Http();
+        $store = new TokenStore(rtrim((string) $config->get('storage_path'), '/') . '/netatmo-token.json');
+
+        return new self(new NetatmoClient($http, $store, $clientId, $clientSecret), new OpenMeteoClient($http));
+    }
+
+    public function stationsData(): array
+    {
+        return $this->netatmo->getStationsData();
+    }
+
+    public function measure(string $deviceId, string $moduleId, int $begin, int $end): array
+    {
+        return $this->netatmo->getMeasure($deviceId, $moduleId, $begin, $end);
+    }
+
+    public function pressureHistory(string $deviceId, int $begin, int $end): array
+    {
+        return $this->netatmo->getPressureHistory($deviceId, $begin, $end);
+    }
+
+    public function forecast(float $lat, float $lon, string $timezone): array
+    {
+        return $this->openMeteo->dailyForecast($lat, $lon, $timezone);
+    }
+}

src/NetatmoClient.php

@@ -0,0 +1,153 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+/**
+ * Netatmo Weather API met OAuth2 refresh-token-flow.
+ * De refresh token roteert: elk refresh-antwoord bevat een nieuwe, die direct wordt opgeslagen.
+ * Verversen gebeurt onder een lock (TokenStore::withLock) zodat parallelle requests niet dubbel verversen.
+ */
+final class NetatmoClient
+{
+    private const TOKEN_URL = 'https://api.netatmo.com/oauth2/token';
+    private const API_URL = 'https://api.netatmo.com/api/';
+    private const REFRESH_MARGIN = 300; // seconden vóór verloop waarop proactief ververst wordt
+
+    /** @var \Closure(): int */
+    private readonly \Closure $now;
+
+    public function __construct(
+        private readonly HttpClient $http,
+        private readonly TokenStore $store,
+        private readonly string $clientId,
+        private readonly string $clientSecret,
+        ?\Closure $now = null,
+    ) {
+        $this->now = $now ?? static fn(): int => time();
+    }
+
+    /** @return array<string, mixed> de "body" van getstationsdata */
+    public function getStationsData(): array
+    {
+        $json = $this->apiGet('getstationsdata', []);
+        if (!is_array($json['body'] ?? null)) {
+            throw new UpstreamException('getstationsdata: geen body in antwoord');
+        }
+        return $json['body'];
+    }
+
+    /** @return array<string|int, mixed> timestamp => [mm] */
+    public function getMeasure(string $deviceId, string $moduleId, int $begin, int $end): array
+    {
+        $json = $this->apiGet('getmeasure', [
+            'device_id' => $deviceId,
+            'module_id' => $moduleId,
+            'scale' => '1day',
+            'type' => 'sum_rain',
+            'date_begin' => $begin,
+            'date_end' => $end,
+            'optimize' => 'false',
+            'real_time' => 'false',
+        ]);
+        if (!is_array($json['body'] ?? null)) {
+            throw new UpstreamException('getmeasure: geen body in antwoord');
+        }
+        return $json['body'];
+    }
+
+    /** @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,
+            'scale' => '30min',
+            'type' => 'Pressure',
+            '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');
+        }
+        return $json['body'];
+    }
+
+    /** @param array<string, string|int|float> $query */
+    private function apiGet(string $path, array $query): array
+    {
+        $token = $this->accessToken(null);
+        $res = $this->http->get(self::API_URL . $path, $query, ["Authorization: Bearer $token"]);
+
+        if ($res->status === 401 || $res->status === 403) {
+            $token = $this->accessToken($token);
+            $res = $this->http->get(self::API_URL . $path, $query, ["Authorization: Bearer $token"]);
+            if ($res->status === 401 || $res->status === 403) {
+                throw new NetatmoAuthException("Netatmo weigert het access token ($path: HTTP {$res->status})");
+            }
+        }
+        if ($res->status !== 200) {
+            throw new UpstreamException("Netatmo $path: HTTP {$res->status}");
+        }
+        return $res->json();
+    }
+
+    /**
+     * Geeft een geldig access token. Met $rejected wordt het token doorgegeven dat zojuist geweigerd is:
+     * is er intussen (door een ander proces) al een ander token opgeslagen, dan wordt dát gebruikt,
+     * anders wordt er ververst.
+     */
+    private function accessToken(?string $rejected): string
+    {
+        return $this->store->withLock(function () use ($rejected): string {
+            $token = $this->store->read();
+            if ($token === null) {
+                throw new NetatmoAuthException('Geen Netatmo-token opgeslagen; voer bin/netatmo-init.php uit');
+            }
+            $usable = $token['access_token'] !== '' && $token['expires_at'] - ($this->now)() > self::REFRESH_MARGIN;
+            if ($usable && $token['access_token'] !== $rejected) {
+                return $token['access_token'];
+            }
+            return $this->refresh($token['refresh_token']);
+        });
+    }
+
+    private function refresh(string $refreshToken): string
+    {
+        $res = $this->http->postForm(self::TOKEN_URL, [
+            'grant_type' => 'refresh_token',
+            'refresh_token' => $refreshToken,
+            'client_id' => $this->clientId,
+            'client_secret' => $this->clientSecret,
+        ]);
+
+        if ($res->status !== 200) {
+            $error = null;
+            try {
+                $error = $res->json()['error'] ?? null;
+            } catch (UpstreamException) {
+            }
+            if (in_array($error, ['invalid_grant', 'invalid_client', 'invalid_request'], true)) {
+                throw new NetatmoAuthException("Netatmo token refresh geweigerd: $error");
+            }
+            throw new UpstreamException("Netatmo token refresh: HTTP {$res->status}");
+        }
+
+        $json = $res->json();
+        $access = $json['access_token'] ?? null;
+        $refresh = $json['refresh_token'] ?? $refreshToken;
+        $expiresIn = $json['expires_in'] ?? 10800;
+        if (!is_string($access) || $access === '' || !is_string($refresh)) {
+            throw new UpstreamException('Netatmo token refresh: onvolledig antwoord');
+        }
+
+        $this->store->write([
+            'access_token' => $access,
+            'refresh_token' => $refresh,
+            'expires_at' => ($this->now)() + (int) $expiresIn,
+        ]);
+        return $access;
+    }
+}

src/OpenMeteoClient.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+/** Open-Meteo dagverwachting. Gratis voor niet-commercieel gebruik, geen API-key. */
+final class OpenMeteoClient
+{
+    private const URL = 'https://api.open-meteo.com/v1/forecast';
+
+    public function __construct(private readonly HttpClient $http)
+    {
+    }
+
+    /** @return array<string, mixed> het "daily"-blok */
+    public function dailyForecast(float $lat, float $lon, string $timezone): array
+    {
+        $res = $this->http->get(self::URL, [
+            'latitude' => $lat,
+            'longitude' => $lon,
+            'daily' => 'weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,precipitation_probability_max',
+            'timezone' => $timezone,
+            'forecast_days' => 6,
+        ]);
+        if ($res->status !== 200) {
+            throw new UpstreamException("Open-Meteo: HTTP {$res->status}");
+        }
+        $json = $res->json();
+        if (!is_array($json['daily'] ?? null)) {
+            throw new UpstreamException('Open-Meteo: geen daily-blok in antwoord');
+        }
+        return $json['daily'];
+    }
+}

src/PressureHistory.php

@@ -0,0 +1,33 @@
+<?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;
+    }
+}

src/RainCalculator.php

@@ -59,7 +59,7 @@ final class RainCalculator
         return [
             'today' => $perDate[$today] ?? $sumRain24,
             'previous_days' => $previous,
-            'month_total' => $monthTotal,
+            'month_total' => $monthTotal === null ? null : round($monthTotal, 2),
         ];
     }
 }

src/StationMapper.php

@@ -10,14 +10,16 @@ namespace Weerscherm;
  */
 final class StationMapper
 {
-    private const EMPTY_OUTDOOR = ['temp' => null, 'trend' => null, 'min' => null, 'min_at' => null, 'max' => null, 'max_at' => null];
+    private const EMPTY_OUTDOOR = ['temp' => null, 'trend' => null, 'min' => null, 'min_at' => null, 'max' => null, 'max_at' => null, 'humidity' => null];
+    private const EMPTY_PRESSURE = ['current' => null, 'trend' => null];
 
     /**
      * @param array<string, mixed> $body
      * @param array<string, string> $indoorModules _id => label, in de gewenste volgorde
      * @return array{timezone: ?string, lat: ?float, lon: ?float, device_id: ?string, measured_at: ?int,
-     *   outdoor: array{temp: ?float, trend: ?string, min: ?float, min_at: ?int, max: ?float, max_at: ?int},
-     *   indoor: list<array{id: string, name: string, temp: ?float, min: ?float, max: ?float, reachable: bool}>,
+     *   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}
      */
     public static function map(array $body, ?string $deviceId, array $indoorModules): array
@@ -26,7 +28,8 @@ final class StationMapper
         if ($device === null) {
             return [
                 'timezone' => null, 'lat' => null, 'lon' => null, 'device_id' => null, 'measured_at' => null,
-                'outdoor' => self::EMPTY_OUTDOOR, 'indoor' => [], 'rain_module_id' => null, 'sum_rain_24' => null,
+                'outdoor' => self::EMPTY_OUTDOOR, 'indoor' => [], 'pressure' => self::EMPTY_PRESSURE,
+                'rain_module_id' => null, 'sum_rain_24' => null,
             ];
         }
 
@@ -43,6 +46,10 @@ final class StationMapper
             'measured_at' => self::intOrNull(self::dashboard($device)['time_utc'] ?? self::dashboard($outdoor)['time_utc'] ?? null),
             'outdoor' => self::mapOutdoor($outdoor),
             'indoor' => self::mapIndoor($device, $modules, $indoorModules),
+            'pressure' => [
+                'current' => self::floatOrNull(self::dashboard($device)['Pressure'] ?? null),
+                'trend' => self::stringOrNull(self::dashboard($device)['pressure_trend'] ?? null),
+            ],
             'rain_module_id' => $rain === null ? null : self::stringOrNull($rain['_id'] ?? null),
             'sum_rain_24' => self::floatOrNull(self::dashboard($rain)['sum_rain_24'] ?? null),
         ];
@@ -92,6 +99,7 @@ final class StationMapper
             'min_at' => self::intOrNull($d['date_min_temp'] ?? null),
             'max' => self::floatOrNull($d['max_temp'] ?? null),
             'max_at' => self::intOrNull($d['date_max_temp'] ?? null),
+            'humidity' => self::floatOrNull($d['Humidity'] ?? null),
         ];
     }
 
@@ -118,6 +126,8 @@ final class StationMapper
                 'temp' => self::floatOrNull($d['Temperature'] ?? null),
                 'min' => self::floatOrNull($d['min_temp'] ?? null),
                 'max' => self::floatOrNull($d['max_temp'] ?? null),
+                'humidity' => self::floatOrNull($d['Humidity'] ?? null),
+                'co2' => self::intOrNull($d['CO2'] ?? null),
                 'reachable' => $d !== [],
             ];
         }

src/TokenStore.php

@@ -0,0 +1,92 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm;
+
+/**
+ * Bewaart de Netatmo-tokens in één JSON-bestand. Schrijft atomisch (tijdelijk bestand + rename, mode 0600)
+ * en biedt een flock zodat gelijktijdige requests niet dubbel verversen.
+ */
+final class TokenStore
+{
+    public function __construct(private readonly string $file)
+    {
+    }
+
+    public function path(): string
+    {
+        return $this->file;
+    }
+
+    /** @return array{access_token: string, refresh_token: string, expires_at: int}|null */
+    public function read(): ?array
+    {
+        if (!is_file($this->file)) {
+            return null;
+        }
+        $raw = json_decode((string) file_get_contents($this->file), true);
+        if (!is_array($raw) || !is_string($raw['refresh_token'] ?? null) || $raw['refresh_token'] === '') {
+            return null;
+        }
+        return [
+            'access_token' => is_string($raw['access_token'] ?? null) ? $raw['access_token'] : '',
+            'refresh_token' => $raw['refresh_token'],
+            'expires_at' => is_int($raw['expires_at'] ?? null) ? $raw['expires_at'] : 0,
+        ];
+    }
+
+    /** @param array{access_token: string, refresh_token: string, expires_at: int} $token */
+    public function write(array $token): void
+    {
+        $dir = dirname($this->file);
+        if (!is_dir($dir) && !mkdir($dir, 0750, true) && !is_dir($dir)) {
+            throw new \RuntimeException("Map kan niet worden aangemaakt: $dir");
+        }
+        $tmp = $this->file . '.tmp.' . uniqid('', true);
+        $json = json_encode([
+            'access_token' => $token['access_token'],
+            'refresh_token' => $token['refresh_token'],
+            'expires_at' => $token['expires_at'],
+        ], JSON_THROW_ON_ERROR | JSON_PRETTY_PRINT);
+        if (file_put_contents($tmp, $json) === false) {
+            throw new \RuntimeException("Tokenbestand kan niet worden geschreven: $tmp");
+        }
+        chmod($tmp, 0600);
+        if (!rename($tmp, $this->file)) {
+            @unlink($tmp);
+            throw new \RuntimeException("Tokenbestand kan niet worden vervangen: {$this->file}");
+        }
+    }
+
+    /**
+     * Voert $fn uit onder een exclusieve lock. Ook bij een exception wordt de lock losgelaten.
+     *
+     * @template T
+     * @param callable(): T $fn
+     * @return T
+     */
+    public function withLock(callable $fn): mixed
+    {
+        $dir = dirname($this->file);
+        if (!is_dir($dir) && !mkdir($dir, 0750, true) && !is_dir($dir)) {
+            throw new \RuntimeException("Map kan niet worden aangemaakt: $dir");
+        }
+        $handle = fopen($this->file . '.lock', 'c');
+        if ($handle === false) {
+            throw new \RuntimeException("Lockbestand kan niet worden geopend: {$this->file}.lock");
+        }
+        try {
+            if (!flock($handle, LOCK_EX)) {
+                throw new \RuntimeException('Lock kan niet worden verkregen');
+            }
+            try {
+                return $fn();
+            } finally {
+                flock($handle, LOCK_UN);
+            }
+        } finally {
+            fclose($handle);
+        }
+    }
+}

src/WeatherSource.php

@@ -13,6 +13,9 @@ interface WeatherSource
     /** @return array<string|int, mixed> de "body" van Netatmo getmeasure (timestamp => [mm]) */
     public function measure(string $deviceId, string $moduleId, int $begin, int $end): array;
 
+    /** @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, mixed> het "daily"-blok van Open-Meteo */
     public function forecast(float $lat, float $lon, string $timezone): array;
 }

src/autoload.php

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Autoloader: Composer als die er is (nodig voor PHPUnit), anders een minimale PSR-4-lader voor src/.
+ * Zo werkt een deploy ook zonder `composer install`; er zijn immers geen runtime-dependencies.
+ */
+$composer = dirname(__DIR__) . '/vendor/autoload.php';
+if (is_file($composer)) {
+    require $composer;
+    return;
+}
+
+spl_autoload_register(static function (string $class): void {
+    $prefix = 'Weerscherm\\';
+    if (!str_starts_with($class, $prefix)) {
+        return;
+    }
+    $file = __DIR__ . '/' . str_replace('\\', '/', substr($class, strlen($prefix))) . '.php';
+    if (is_file($file)) {
+        require $file;
+    }
+});

tests/ConfigTest.php

@@ -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, 'forecast' => 3600], $config->get('cache_ttl'));
+        self::assertSame(['stations' => 300, 'measure' => 900, 'pressure' => 900, 'forecast' => 3600], $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, 'forecast' => 3600], $config->get('cache_ttl'));
+        self::assertSame(['stations' => 60, 'measure' => 900, 'pressure' => 900, 'forecast' => 3600], $config->get('cache_ttl'));
     }
 
     public function testUnknownKeyReturnsGivenDefault(): void

tests/DashboardServiceTest.php

@@ -32,7 +32,7 @@ final class DashboardServiceTest extends TestCase
         return new DashboardService(
             $this->source,
             new Cache($this->dir),
-            ['stations' => 300, 'measure' => 900, 'forecast' => 3600],
+            ['stations' => 300, 'measure' => 900, 'pressure' => 900, 'forecast' => 3600],
             'Europe/Amsterdam',
             $lat,
             $lon,
@@ -46,18 +46,25 @@ final class DashboardServiceTest extends TestCase
     {
         $p = $this->service()->build();
 
-        self::assertSame(['generated_at', 'timezone', 'station', 'outdoor', 'indoor', 'rain', 'forecast', 'forecast_stale', 'errors'], array_keys($p));
+        self::assertSame(['generated_at', 'timezone', 'station', 'outdoor', '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']);
-        self::assertSame(['temp' => 16.4, 'trend' => 'down', 'min' => 9.2, 'min_at' => '2026-09-11T06:10:00+02:00', 'max' => 19.8, 'max_at' => '2026-09-11T13:05:00+02:00'], $p['outdoor']);
+        self::assertSame(['temp' => 16.4, 'trend' => 'down', 'min' => 9.2, 'min_at' => '2026-09-11T06:10:00+02:00', 'max' => 19.8, 'max_at' => '2026-09-11T13:05:00+02:00', 'humidity' => 71.0], $p['outdoor']);
         self::assertCount(3, $p['indoor']);
+        self::assertSame(612, $p['indoor'][0]['co2']);
+        self::assertSame(48.0, $p['indoor'][0]['humidity']);
+        self::assertSame(1014.2, $p['pressure']['current']);
+        self::assertSame('up', $p['pressure']['trend']);
+        self::assertCount(49, $p['pressure']['history']);
+        self::assertSame('2026-09-10T14:30:00+02:00', $p['pressure']['history'][0]['at']);
+        self::assertFalse($p['pressure']['stale']);
         self::assertSame(2.4, $p['rain']['today']);
         self::assertSame(['2026-09-08', '2026-09-09', '2026-09-10'], array_column($p['rain']['previous_days'], 'date'));
         self::assertEqualsWithDelta(38.5, $p['rain']['month_total'], 0.0001);
         self::assertFalse($p['rain']['stale']);
-        self::assertCount(5, $p['forecast']);
-        self::assertSame('2026-09-12', $p['forecast'][0]['date']);
+        self::assertCount(6, $p['forecast']);
+        self::assertSame('2026-09-11', $p['forecast'][0]['date']);
         self::assertFalse($p['forecast_stale']);
         self::assertSame([], $p['errors']);
     }
@@ -73,6 +80,29 @@ final class DashboardServiceTest extends TestCase
         self::assertSame((new \DateTimeImmutable('2026-09-11 12:32:05 UTC'))->getTimestamp(), $end);
     }
 
+    public function testPressureHistoryIsRequestedForLast24Hours(): void
+    {
+        $this->service()->build();
+
+        [$deviceId, $begin, $end] = $this->source->lastArgs['pressure'];
+        $now = (new \DateTimeImmutable('2026-09-11 12:32:05 UTC'))->getTimestamp();
+        self::assertSame('70:ee:50:00:00:01', $deviceId);
+        self::assertSame($now - 86400, $begin);
+        self::assertSame($now, $end);
+    }
+
+    public function testPressureFailureKeepsCurrentValueAndMarksStale(): void
+    {
+        $this->source->responses['pressure'] = new UpstreamException('500');
+
+        $p = $this->service()->build();
+
+        self::assertSame(1014.2, $p['pressure']['current']);
+        self::assertSame([], $p['pressure']['history']);
+        self::assertTrue($p['pressure']['stale']);
+        self::assertSame(['netatmo_unavailable'], $p['errors']);
+    }
+
     public function testForecastUsesStationLocationUnlessConfigured(): void
     {
         $this->service()->build();
@@ -96,6 +126,8 @@ final class DashboardServiceTest extends TestCase
         self::assertSame([], $p['indoor']);
         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(['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']);
     }
@@ -152,7 +184,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, 'forecast' => 1], $this->source->calls);
+        self::assertSame(['stations' => 1, 'measure' => 1, 'pressure' => 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');

tests/FakeHttp.php

@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use Weerscherm\HttpClient;
+use Weerscherm\HttpResponse;
+
+/** Testdubbel: geeft geplande responses in volgorde terug en registreert elk request. */
+final class FakeHttp implements HttpClient
+{
+    /** @var list<HttpResponse> */
+    private array $queue = [];
+
+    /** @var list<array{method: string, url: string, params: array, headers: array}> */
+    public array $requests = [];
+
+    public function queue(int $status, array|string $body): self
+    {
+        $this->queue[] = new HttpResponse($status, is_string($body) ? $body : json_encode($body, JSON_THROW_ON_ERROR));
+        return $this;
+    }
+
+    public function get(string $url, array $query = [], array $headers = []): HttpResponse
+    {
+        return $this->take('GET', $url, $query, $headers);
+    }
+
+    public function postForm(string $url, array $fields): HttpResponse
+    {
+        return $this->take('POST', $url, $fields, []);
+    }
+
+    /** @return list<array> */
+    public function requestsOf(string $method): array
+    {
+        return array_values(array_filter($this->requests, fn(array $r) => $r['method'] === $method));
+    }
+
+    private function take(string $method, string $url, array $params, array $headers): HttpResponse
+    {
+        $this->requests[] = ['method' => $method, 'url' => $url, 'params' => $params, 'headers' => $headers];
+        if ($this->queue === []) {
+            throw new \LogicException("Geen response gepland voor $method $url");
+        }
+        return array_shift($this->queue);
+    }
+}

tests/FakeHttpDecorator.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use Weerscherm\HttpClient;
+use Weerscherm\HttpResponse;
+use Weerscherm\TokenStore;
+
+/** Basis om in een test gedrag rond een FakeHttp te hangen (bijvoorbeeld een ander proces nabootsen). */
+abstract class FakeHttpDecorator implements HttpClient
+{
+    public function __construct(protected readonly FakeHttp $inner, protected readonly TokenStore $store)
+    {
+    }
+
+    public function get(string $url, array $query = [], array $headers = []): HttpResponse
+    {
+        return $this->inner->get($url, $query, $headers);
+    }
+
+    public function postForm(string $url, array $fields): HttpResponse
+    {
+        return $this->inner->postForm($url, $fields);
+    }
+}

tests/FakeSource.php

@@ -13,7 +13,7 @@ final class FakeSource implements WeatherSource
     public array $responses = [];
 
     /** @var array<string, int> */
-    public array $calls = ['stations' => 0, 'measure' => 0, 'forecast' => 0];
+    public array $calls = ['stations' => 0, 'measure' => 0, 'pressure' => 0, 'forecast' => 0];
 
     /** @var array<string, array> */
     public array $lastArgs = [];
@@ -24,6 +24,7 @@ final class FakeSource implements WeatherSource
         $s->responses = [
             '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'],
             'forecast' => json_decode((string) file_get_contents(__DIR__ . '/fixtures/forecast.json'), true)['daily'],
         ];
         return $s;
@@ -39,6 +40,11 @@ final class FakeSource implements WeatherSource
         return $this->answer('measure', func_get_args());
     }
 
+    public function pressureHistory(string $deviceId, int $begin, int $end): array
+    {
+        return $this->answer('pressure', func_get_args());
+    }
+
     public function forecast(float $lat, float $lon, string $timezone): array
     {
         return $this->answer('forecast', func_get_args());

tests/ForecastMapperTest.php

@@ -15,16 +15,16 @@ final class ForecastMapperTest extends TestCase
         return json_decode((string) file_get_contents(__DIR__ . '/fixtures/forecast.json'), true)['daily'];
     }
 
-    public function testSkipsTodayAndReturnsFiveDays(): void
+    public function testIncludesTodayAndReturnsSixDays(): void
     {
         $f = ForecastMapper::map($this->daily());
 
-        self::assertCount(5, $f);
+        self::assertCount(6, $f);
         self::assertSame([
-            'date' => '2026-09-12', 'weather_code' => 2, 'temp_max' => 18.3, 'temp_min' => 10.1,
-            'precip_mm' => 0.4, 'precip_prob' => 20,
+            'date' => '2026-09-11', 'weather_code' => 3, 'temp_max' => 17.9, 'temp_min' => 11.0,
+            'precip_mm' => 0.0, 'precip_prob' => 10,
         ], $f[0]);
-        self::assertSame('2026-09-16', $f[4]['date']);
+        self::assertSame('2026-09-16', $f[5]['date']);
     }
 
     public function testNullValuesStayNull(): void
@@ -35,9 +35,9 @@ final class ForecastMapperTest extends TestCase
 
         $f = ForecastMapper::map($daily);
 
-        self::assertNull($f[2]['weather_code']);
-        self::assertNull($f[2]['precip_prob']);
-        self::assertSame(17.4, $f[2]['temp_max']);
+        self::assertNull($f[3]['weather_code']);
+        self::assertNull($f[3]['precip_prob']);
+        self::assertSame(17.4, $f[3]['temp_max']);
     }
 
     public function testShorterResponseGivesFewerDays(): void
@@ -47,7 +47,7 @@ final class ForecastMapperTest extends TestCase
             $daily[$key] = array_slice($values, 0, 3);
         }
 
-        self::assertCount(2, ForecastMapper::map($daily));
+        self::assertCount(3, ForecastMapper::map($daily));
     }
 
     public function testMissingTimeArrayGivesEmptyList(): void

tests/NetatmoClientTest.php

@@ -0,0 +1,215 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use PHPUnit\Framework\TestCase;
+use Weerscherm\NetatmoAuthException;
+use Weerscherm\NetatmoClient;
+use Weerscherm\TokenStore;
+use Weerscherm\UpstreamException;
+
+final class NetatmoClientTest extends TestCase
+{
+    private const NOW = 1_800_000_000;
+
+    private string $dir;
+    private TokenStore $store;
+    private FakeHttp $http;
+
+    protected function setUp(): void
+    {
+        $this->dir = sys_get_temp_dir() . '/weerscherm-netatmo-' . uniqid();
+        $this->store = new TokenStore($this->dir . '/netatmo-token.json');
+        $this->http = new FakeHttp();
+    }
+
+    protected function tearDown(): void
+    {
+        array_map('unlink', glob($this->dir . '/*') ?: []);
+        @rmdir($this->dir);
+    }
+
+    private function client(): NetatmoClient
+    {
+        return new NetatmoClient($this->http, $this->store, 'cid', 'csecret', static fn(): int => self::NOW);
+    }
+
+    private function stationsBody(): array
+    {
+        return json_decode((string) file_get_contents(__DIR__ . '/fixtures/getstationsdata.json'), true);
+    }
+
+    public function testValidTokenIsUsedWithoutRefresh(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 3600]);
+        $this->http->queue(200, $this->stationsBody());
+
+        $body = $this->client()->getStationsData();
+
+        self::assertSame('70:ee:50:00:00:01', $body['devices'][0]['_id']);
+        self::assertCount(1, $this->http->requests);
+        self::assertSame('https://api.netatmo.com/api/getstationsdata', $this->http->requests[0]['url']);
+        self::assertContains('Authorization: Bearer A1', $this->http->requests[0]['headers']);
+    }
+
+    public function testExpiringTokenIsRefreshedAndRotatedRefreshTokenStored(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 200]);
+        $this->http
+            ->queue(200, ['access_token' => 'A2', 'refresh_token' => 'R2', 'expires_in' => 10800])
+            ->queue(200, $this->stationsBody());
+
+        $this->client()->getStationsData();
+
+        [$post, $get] = $this->http->requests;
+        self::assertSame('POST', $post['method']);
+        self::assertSame('https://api.netatmo.com/oauth2/token', $post['url']);
+        self::assertSame(['grant_type' => 'refresh_token', 'refresh_token' => 'R1', 'client_id' => 'cid', 'client_secret' => 'csecret'], $post['params']);
+        self::assertContains('Authorization: Bearer A2', $get['headers']);
+        self::assertSame(['access_token' => 'A2', 'refresh_token' => 'R2', 'expires_at' => self::NOW + 10800], $this->store->read());
+    }
+
+    public function testFreshlyInitialisedStoreWithoutAccessTokenRefreshesFirst(): void
+    {
+        $this->store->write(['access_token' => '', 'refresh_token' => 'R1', 'expires_at' => 0]);
+        $this->http
+            ->queue(200, ['access_token' => 'A2', 'refresh_token' => 'R2', 'expires_in' => 10800])
+            ->queue(200, $this->stationsBody());
+
+        $this->client()->getStationsData();
+
+        self::assertCount(1, $this->http->requestsOf('POST'));
+    }
+
+    public function testUnauthorizedResponseTriggersOneRefreshAndRetry(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 3600]);
+        $this->http
+            ->queue(403, ['error' => ['code' => 3, 'message' => 'Access token expired']])
+            ->queue(200, ['access_token' => 'A2', 'refresh_token' => 'R2', 'expires_in' => 10800])
+            ->queue(200, $this->stationsBody());
+
+        $this->client()->getStationsData();
+
+        self::assertSame(['GET', 'POST', 'GET'], array_column($this->http->requests, 'method'));
+        self::assertContains('Authorization: Bearer A2', $this->http->requests[2]['headers']);
+    }
+
+    public function testSecondUnauthorizedResponseIsAuthError(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 3600]);
+        $this->http
+            ->queue(401, '')
+            ->queue(200, ['access_token' => 'A2', 'refresh_token' => 'R2', 'expires_in' => 10800])
+            ->queue(401, '');
+
+        $this->expectException(NetatmoAuthException::class);
+        $this->client()->getStationsData();
+    }
+
+    public function testInvalidGrantIsAuthError(): void
+    {
+        $this->store->write(['access_token' => '', 'refresh_token' => 'R-oud', 'expires_at' => 0]);
+        $this->http->queue(400, ['error' => 'invalid_grant']);
+
+        $this->expectException(NetatmoAuthException::class);
+        $this->client()->getStationsData();
+    }
+
+    public function testMissingTokenFileIsAuthError(): void
+    {
+        $this->expectException(NetatmoAuthException::class);
+        $this->client()->getStationsData();
+    }
+
+    public function testServerErrorIsUpstreamError(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 3600]);
+        $this->http->queue(500, 'kapot');
+
+        $this->expectException(UpstreamException::class);
+        $this->client()->getStationsData();
+    }
+
+    public function testRefreshServerErrorIsUpstreamNotAuth(): void
+    {
+        $this->store->write(['access_token' => '', 'refresh_token' => 'R1', 'expires_at' => 0]);
+        $this->http->queue(503, '');
+
+        $this->expectException(UpstreamException::class);
+        $this->expectExceptionMessage('HTTP 503');
+        $this->client()->getStationsData();
+    }
+
+    public function testConcurrentClientsShareOneRefresh(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 100]);
+        $this->http
+            ->queue(200, ['access_token' => 'A2', 'refresh_token' => 'R2', 'expires_in' => 10800])
+            ->queue(200, $this->stationsBody())
+            ->queue(200, $this->stationsBody());
+
+        $first = $this->client();
+        $second = $this->client();
+        $first->getStationsData();
+        $second->getStationsData();
+
+        self::assertCount(1, $this->http->requestsOf('POST'), 'de tweede client leest het verse token en ververst niet');
+        self::assertSame('R2', $this->store->read()['refresh_token']);
+    }
+
+    public function testRejectedTokenAlreadyReplacedByOtherProcessIsReusedWithoutRefresh(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 3600]);
+        $this->http->queue(403, '')->queue(200, $this->stationsBody());
+
+        // Nabootsen dat een ander proces al ververst heeft zodra ons token geweigerd wordt.
+        $http = new class($this->http, $this->store) extends FakeHttpDecorator {
+            public function get(string $url, array $query = [], array $headers = []): \Weerscherm\HttpResponse
+            {
+                $res = parent::get($url, $query, $headers);
+                if ($res->status === 403) {
+                    $this->store->write(['access_token' => 'A9', 'refresh_token' => 'R9', 'expires_at' => 1_800_000_000 + 3600]);
+                }
+                return $res;
+            }
+        };
+        $client = new NetatmoClient($http, $this->store, 'cid', 'csecret', static fn(): int => self::NOW);
+
+        $client->getStationsData();
+
+        self::assertSame([], $this->http->requestsOf('POST'), 'geen eigen refresh nodig');
+        self::assertContains('Authorization: Bearer A9', $this->http->requests[1]['headers']);
+    }
+
+    public function testGetMeasureQuery(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 3600]);
+        $this->http->queue(200, json_decode((string) file_get_contents(__DIR__ . '/fixtures/getmeasure.json'), true));
+
+        $body = $this->client()->getMeasure('dev', 'mod', 1000, 2000);
+
+        self::assertCount(11, $body);
+        self::assertSame('https://api.netatmo.com/api/getmeasure', $this->http->requests[0]['url']);
+        self::assertSame([
+            'device_id' => 'dev', 'module_id' => 'mod', 'scale' => '1day', 'type' => 'sum_rain',
+            'date_begin' => 1000, 'date_end' => 2000, 'optimize' => 'false', 'real_time' => 'false',
+        ], $this->http->requests[0]['params']);
+    }
+
+    public function testGetPressureHistoryQuery(): void
+    {
+        $this->store->write(['access_token' => 'A1', 'refresh_token' => 'R1', 'expires_at' => self::NOW + 3600]);
+        $this->http->queue(200, json_decode((string) file_get_contents(__DIR__ . '/fixtures/getmeasure-pressure.json'), true));
+
+        $body = $this->client()->getPressureHistory('dev', 1000, 2000);
+
+        self::assertCount(49, $body);
+        self::assertSame([
+            'device_id' => 'dev', 'scale' => '30min', 'type' => 'Pressure',
+            'date_begin' => 1000, 'date_end' => 2000, 'optimize' => 'false', 'real_time' => 'false',
+        ], $this->http->requests[0]['params']);
+    }
+}

tests/OpenMeteoClientTest.php

@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use PHPUnit\Framework\TestCase;
+use Weerscherm\OpenMeteoClient;
+use Weerscherm\UpstreamException;
+
+final class OpenMeteoClientTest extends TestCase
+{
+    public function testRequestsSixDaysWithAllDailyVariables(): void
+    {
+        $http = new FakeHttp();
+        $http->queue(200, json_decode((string) file_get_contents(__DIR__ . '/fixtures/forecast.json'), true));
+
+        $daily = (new OpenMeteoClient($http))->dailyForecast(51.82, 6.55, 'Europe/Berlin');
+
+        self::assertCount(6, $daily['time']);
+        self::assertSame('https://api.open-meteo.com/v1/forecast', $http->requests[0]['url']);
+        self::assertSame([
+            'latitude' => 51.82,
+            'longitude' => 6.55,
+            'daily' => 'weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,precipitation_probability_max',
+            'timezone' => 'Europe/Berlin',
+            'forecast_days' => 6,
+        ], $http->requests[0]['params']);
+    }
+
+    public function testErrorStatusIsUpstreamException(): void
+    {
+        $http = (new FakeHttp())->queue(429, ['reason' => 'rate limit']);
+        $this->expectException(UpstreamException::class);
+        (new OpenMeteoClient($http))->dailyForecast(1, 2, 'UTC');
+    }
+
+    public function testMissingDailyIsUpstreamException(): void
+    {
+        $http = (new FakeHttp())->queue(200, ['hourly' => []]);
+        $this->expectException(UpstreamException::class);
+        (new OpenMeteoClient($http))->dailyForecast(1, 2, 'UTC');
+    }
+}

tests/PressureHistoryTest.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use PHPUnit\Framework\TestCase;
+use Weerscherm\PressureHistory;
+
+final class PressureHistoryTest 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'));
+
+        self::assertCount(49, $points);
+        self::assertSame('2026-09-10T14:30:00+02:00', $points[0]['at']);
+        self::assertSame('2026-09-11T14:30:00+02:00', $points[48]['at']);
+        self::assertIsFloat($points[0]['hpa']);
+        self::assertSame(['at', 'hpa'], array_keys($points[0]));
+    }
+
+    public function testSkipsGarbage(): void
+    {
+        $points = PressureHistory::map(['abc' => [1000.0], '1789129800' => ['x'], '1789133400' => [1013.5]], new \DateTimeZone('UTC'));
+
+        self::assertSame([['at' => '2026-09-11T13:30:00+00:00', 'hpa' => 1013.5]], $points);
+    }
+}

tests/StationMapperTest.php

@@ -38,6 +38,7 @@ final class StationMapperTest extends TestCase
             'min_at' => 1789099800,
             'max' => 19.8,
             'max_at' => 1789124700,
+            'humidity' => 71.0,
         ], $m['outdoor']);
     }
 
@@ -47,8 +48,8 @@ final class StationMapperTest extends TestCase
 
         self::assertCount(3, $m['indoor']);
         self::assertSame(['Woonkamer', 'Slaapkamer', 'Kantoor'], array_column($m['indoor'], 'name'));
-        self::assertSame(['id' => '70:ee:50:00:00:01', 'name' => 'Woonkamer', 'temp' => 21.3, 'min' => 20.4, 'max' => 22.1, 'reachable' => true], $m['indoor'][0]);
-        self::assertSame(['id' => '03:00:00:00:00:03', 'name' => 'Kantoor', 'temp' => null, 'min' => null, 'max' => null, 'reachable' => false], $m['indoor'][2]);
+        self::assertSame(['id' => '70:ee:50:00:00:01', 'name' => 'Woonkamer', 'temp' => 21.3, 'min' => 20.4, 'max' => 22.1, 'humidity' => 48.0, 'co2' => 612, 'reachable' => true], $m['indoor'][0]);
+        self::assertSame(['id' => '03:00:00:00:00:03', 'name' => 'Kantoor', 'temp' => null, 'min' => null, 'max' => null, 'humidity' => null, 'co2' => null, 'reachable' => false], $m['indoor'][2]);
     }
 
     public function testIndoorConfigDeterminesOrderAndLabels(): void
@@ -69,6 +70,24 @@ final class StationMapperTest extends TestCase
         self::assertSame(2.4, $m['sum_rain_24']);
     }
 
+    public function testPressureFromBaseStation(): void
+    {
+        $m = StationMapper::map($this->body(), null, []);
+
+        self::assertSame(['current' => 1014.2, 'trend' => 'up'], $m['pressure']);
+    }
+
+    public function testPressureNullWhenBaseStationUnreachable(): void
+    {
+        $body = $this->body();
+        $body['devices'][0]['reachable'] = false;
+        unset($body['devices'][0]['dashboard_data']);
+        $m = StationMapper::map($body, null, []);
+
+        self::assertSame(['current' => null, 'trend' => null], $m['pressure']);
+        self::assertSame(1789129780, $m['measured_at'], 'valt terug op time_utc van de buitenmodule');
+    }
+
     public function testWithoutRainModule(): void
     {
         $body = $this->body();
@@ -89,7 +108,7 @@ final class StationMapperTest extends TestCase
         unset($body['devices'][0]['modules'][0]['dashboard_data']);
         $m = StationMapper::map($body, null, []);
 
-        self::assertSame(['temp' => null, 'trend' => null, 'min' => null, 'min_at' => null, 'max' => null, 'max_at' => null], $m['outdoor']);
+        self::assertSame(['temp' => null, 'trend' => null, 'min' => null, 'min_at' => null, 'max' => null, 'max_at' => null, 'humidity' => null], $m['outdoor']);
     }
 
     public function testUnknownDeviceIdFallsBackToFirstStation(): void
@@ -108,5 +127,6 @@ final class StationMapperTest extends TestCase
         self::assertSame([], $m['indoor']);
         self::assertNull($m['outdoor']['temp']);
         self::assertNull($m['rain_module_id']);
+        self::assertSame(['current' => null, 'trend' => null], $m['pressure']);
     }
 }

tests/TokenStoreTest.php

@@ -0,0 +1,87 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Weerscherm\Tests;
+
+use PHPUnit\Framework\TestCase;
+use Weerscherm\TokenStore;
+
+final class TokenStoreTest extends TestCase
+{
+    private string $dir;
+    private string $file;
+
+    protected function setUp(): void
+    {
+        $this->dir = sys_get_temp_dir() . '/weerscherm-token-' . uniqid();
+        $this->file = $this->dir . '/netatmo-token.json';
+    }
+
+    protected function tearDown(): void
+    {
+        array_map('unlink', glob($this->dir . '/*') ?: []);
+        @rmdir($this->dir);
+    }
+
+    public function testWriteReadRoundTripAndMode(): void
+    {
+        $store = new TokenStore($this->file);
+        $store->write(['access_token' => 'a', 'refresh_token' => 'r', 'expires_at' => 123]);
+
+        self::assertSame(['access_token' => 'a', 'refresh_token' => 'r', 'expires_at' => 123], $store->read());
+        self::assertSame('0600', substr(sprintf('%o', fileperms($this->file)), -4));
+        self::assertSame([], glob($this->dir . '/*.tmp.*') ?: [], 'geen tijdelijke bestanden achtergelaten');
+    }
+
+    public function testMissingOrInvalidFileReadsNull(): void
+    {
+        self::assertNull((new TokenStore($this->file))->read());
+
+        mkdir($this->dir, 0700, true);
+        file_put_contents($this->file, '{"access_token":"a"}');
+        self::assertNull((new TokenStore($this->file))->read(), 'zonder refresh token is het bestand onbruikbaar');
+    }
+
+    public function testWithLockReturnsValueAndReleasesAfterException(): void
+    {
+        $store = new TokenStore($this->file);
+
+        self::assertSame(42, $store->withLock(fn() => 42));
+
+        try {
+            $store->withLock(function (): void {
+                throw new \RuntimeException('boem');
+            });
+            self::fail('exception verwacht');
+        } catch (\RuntimeException) {
+        }
+
+        $handle = fopen($this->file . '.lock', 'c');
+        self::assertTrue(flock($handle, LOCK_EX | LOCK_NB), 'lock is weer vrij');
+        fclose($handle);
+    }
+
+    public function testConcurrentProcessesAreSerialised(): void
+    {
+        $store = new TokenStore($this->file);
+        $script = sprintf(
+            '<?php require %s; $s = new Weerscherm\TokenStore(%s); $s->withLock(function () { usleep(400000); });',
+            var_export(__DIR__ . '/../vendor/autoload.php', true),
+            var_export($this->file, true),
+        );
+        $scriptFile = $this->dir . '/hold.php';
+        mkdir($this->dir, 0700, true);
+        file_put_contents($scriptFile, $script);
+
+        $proc = proc_open([PHP_BINARY, $scriptFile], [], $pipes);
+        usleep(150000); // geef het andere proces tijd om de lock te pakken
+
+        $start = microtime(true);
+        $store->withLock(fn() => null);
+        $waited = microtime(true) - $start;
+        proc_close($proc);
+
+        self::assertGreaterThan(0.15, $waited, 'tweede proces moest wachten op de lock');
+    }
+}

tests/fixtures/getmeasure-pressure.json

@@ -0,0 +1,152 @@
+{
+    "body": {
+        "1789043400": [
+            1011.5
+        ],
+        "1789045200": [
+            1011
+        ],
+        "1789047000": [
+            1010.6
+        ],
+        "1789048800": [
+            1010.2
+        ],
+        "1789050600": [
+            1010.3
+        ],
+        "1789052400": [
+            1009.9
+        ],
+        "1789054200": [
+            1009.6
+        ],
+        "1789056000": [
+            1009.4
+        ],
+        "1789057800": [
+            1009.1
+        ],
+        "1789059600": [
+            1009.4
+        ],
+        "1789061400": [
+            1009.3
+        ],
+        "1789063200": [
+            1009.2
+        ],
+        "1789065000": [
+            1009.2
+        ],
+        "1789066800": [
+            1009.2
+        ],
+        "1789068600": [
+            1009.7
+        ],
+        "1789070400": [
+            1009.8
+        ],
+        "1789072200": [
+            1009.9
+        ],
+        "1789074000": [
+            1010.1
+        ],
+        "1789075800": [
+            1010.3
+        ],
+        "1789077600": [
+            1011
+        ],
+        "1789079400": [
+            1011.2
+        ],
+        "1789081200": [
+            1011.5
+        ],
+        "1789083000": [
+            1011.8
+        ],
+        "1789084800": [
+            1012
+        ],
+        "1789086600": [
+            1012.8
+        ],
+        "1789088400": [
+            1013.1
+        ],
+        "1789090200": [
+            1013.3
+        ],
+        "1789092000": [
+            1013.6
+        ],
+        "1789093800": [
+            1013.8
+        ],
+        "1789095600": [
+            1014.5
+        ],
+        "1789097400": [
+            1014.6
+        ],
+        "1789099200": [
+            1014.8
+        ],
+        "1789101000": [
+            1014.8
+        ],
+        "1789102800": [
+            1014.9
+        ],
+        "1789104600": [
+            1015.4
+        ],
+        "1789106400": [
+            1015.3
+        ],
+        "1789108200": [
+            1015.2
+        ],
+        "1789110000": [
+            1015
+        ],
+        "1789111800": [
+            1014.8
+        ],
+        "1789113600": [
+            1015.1
+        ],
+        "1789115400": [
+            1014.8
+        ],
+        "1789117200": [
+            1014.5
+        ],
+        "1789119000": [
+            1014.1
+        ],
+        "1789120800": [
+            1013.8
+        ],
+        "1789122600": [
+            1013.8
+        ],
+        "1789124400": [
+            1013.4
+        ],
+        "1789126200": [
+            1012.9
+        ],
+        "1789128000": [
+            1012.5
+        ],
+        "1789129800": [
+            1012
+        ]
+    },
+    "status": "ok"
+}

tests/js/format.test.js

@@ -0,0 +1,153 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  f1, fInt, fmm, markerPos, barHeights, wmoIcon, trendLabel,
+  formatDate, formatTime, dayAbbr, monthName, isOlderThan, msUntil,
+} from '../../public/format.js';
+
+const TZ = 'Europe/Berlin';
+
+test('f1 uses a decimal comma and one decimal', () => {
+  assert.equal(f1(16.4), '16,4');
+  assert.equal(f1(0), '0,0');
+  assert.equal(f1(19.75), '19,8');
+  assert.equal(f1(null), '–');
+  assert.equal(f1(undefined), '–');
+});
+
+test('fInt rounds to whole degrees', () => {
+  assert.equal(fInt(18.3), '18');
+  assert.equal(fInt(9.5), '10');
+  assert.equal(fInt(null), '–');
+});
+
+test('fmm shows "0 mm" for zero', () => {
+  assert.equal(fmm(0), '0 mm');
+  assert.equal(fmm(0.4), '0,4 mm');
+  assert.equal(fmm(8.25), '8,3 mm');
+  assert.equal(fmm(null), '–');
+});
+
+test('markerPos interpolates and clamps', () => {
+  assert.ok(Math.abs(markerPos(16.4, 9.2, 19.8) - 67.92) < 0.01);
+  assert.equal(markerPos(5, 9.2, 19.8), 0);
+  assert.equal(markerPos(25, 9.2, 19.8), 100);
+  assert.equal(markerPos(10, 10, 10), 50);
+  assert.equal(markerPos(null, 1, 2), 50);
+});
+
+test('barHeights scales to the tallest bar with a 2px floor', () => {
+  const h = barHeights([1.2, 6.8, 0, 2.4]);
+  assert.ok(Math.abs(h[0] - 12.35) < 0.01);
+  assert.equal(h[1], 70);
+  assert.equal(h[2], 2);
+  assert.ok(Math.abs(h[3] - 24.7) < 0.01);
+  assert.deepEqual(barHeights([0, 0, 0, 0]), [2, 2, 2, 2]);
+  assert.deepEqual(barHeights([null, 0, undefined, 0]), [2, 2, 2, 2]);
+  assert.deepEqual(barHeights([null, 5]), [2, 70]);
+});
+
+test('wmoIcon maps every documented code', () => {
+  assert.equal(wmoIcon(0), 'sun');
+  assert.equal(wmoIcon(1), 'partly');
+  assert.equal(wmoIcon(2), 'partly');
+  assert.equal(wmoIcon(3), 'cloud');
+  assert.equal(wmoIcon(45), 'fog');
+  assert.equal(wmoIcon(48), 'fog');
+  assert.equal(wmoIcon(51), 'drizzle');
+  assert.equal(wmoIcon(57), 'drizzle');
+  assert.equal(wmoIcon(61), 'rain');
+  assert.equal(wmoIcon(67), 'rain');
+  assert.equal(wmoIcon(80), 'showers');
+  assert.equal(wmoIcon(82), 'showers');
+  assert.equal(wmoIcon(71), 'snow');
+  assert.equal(wmoIcon(77), 'snow');
+  assert.equal(wmoIcon(85), 'snow');
+  assert.equal(wmoIcon(86), 'snow');
+  assert.equal(wmoIcon(95), 'thunder');
+  assert.equal(wmoIcon(99), 'thunder');
+  assert.equal(wmoIcon(42), 'cloud');
+  assert.equal(wmoIcon(null), 'cloud');
+});
+
+test('trendLabel', () => {
+  assert.equal(trendLabel('up'), '↗ stijgend');
+  assert.equal(trendLabel('down'), '↘ dalend');
+  assert.equal(trendLabel('stable'), '→ stabiel');
+  assert.equal(trendLabel(null), '');
+});
+
+test('formatDate gives a capitalised Dutch date in the station timezone', () => {
+  assert.equal(formatDate(new Date('2026-09-11T12:32:05Z'), TZ), 'Vrijdag 11 september');
+  // 23:30 UTC is al de volgende dag in Berlijn
+  assert.equal(formatDate(new Date('2026-09-11T23:30:00Z'), TZ), 'Zaterdag 12 september');
+});
+
+test('formatTime uses HH:MM in the station timezone', () => {
+  assert.equal(formatTime('2026-09-11T06:10:00+02:00', TZ), '06:10');
+  assert.equal(formatTime('2026-09-11T22:05:00Z', TZ), '00:05');
+  assert.equal(formatTime(null, TZ), '–');
+  assert.equal(formatTime('kapot', TZ), '–');
+});
+
+test('dayAbbr gives two-letter Dutch weekday', () => {
+  assert.equal(dayAbbr('2026-09-12', TZ), 'Za');
+  assert.equal(dayAbbr('2026-09-13', TZ), 'Zo');
+  assert.equal(dayAbbr('2026-09-14', TZ), 'Ma');
+  assert.equal(dayAbbr('2026-09-15', TZ), 'Di');
+  assert.equal(dayAbbr('2026-09-16', TZ), 'Wo');
+  assert.equal(dayAbbr('2026-09-17', TZ), 'Do');
+  assert.equal(dayAbbr('2026-09-18', TZ), 'Vr');
+});
+
+test('monthName', () => {
+  assert.equal(monthName(new Date('2026-09-11T12:00:00Z'), TZ), 'September');
+});
+
+test('isOlderThan', () => {
+  const now = new Date('2026-09-11T12:32:00Z');
+  assert.equal(isOlderThan('2026-09-11T12:10:00Z', now, 30), false);
+  assert.equal(isOlderThan('2026-09-11T11:50:00Z', now, 30), true);
+  assert.equal(isOlderThan(null, now, 30), true);
+});
+
+test('msUntil computes the wait until the next local time', () => {
+  const now = new Date('2026-09-11T12:32:05.500Z'); // 14:32:05 in Berlijn
+  assert.equal(msUntil(now, TZ, 0), ((24 - 14) * 3600 - 32 * 60 - 5) * 1000 - 500);
+  assert.equal(msUntil(now, TZ, 4), ((24 - 14 + 4) * 3600 - 32 * 60 - 5) * 1000 - 500);
+  assert.equal(msUntil(now, TZ, 15), (28 * 60 - 5) * 1000 - 500);
+  assert.equal(msUntil(new Date('2026-09-11T22:00:00.000Z'), TZ, 0), 86400000, 'precies op het moment zelf: pas morgen weer');
+});
+
+import { co2Level, fPct, fHpa, seriesRange, sparklinePath } from '../../public/format.js';
+
+test('co2Level uses the Netatmo thresholds', () => {
+  assert.deepEqual(co2Level(612), { level: 'good', label: 'goed' });
+  assert.deepEqual(co2Level(1000), { level: 'good', label: 'goed' });
+  assert.deepEqual(co2Level(1001), { level: 'medium', label: 'matig' });
+  assert.deepEqual(co2Level(1500), { level: 'medium', label: 'matig' });
+  assert.deepEqual(co2Level(1501), { level: 'bad', label: 'slecht' });
+  assert.deepEqual(co2Level(null), { level: 'unknown', label: '–' });
+});
+
+test('fPct and fHpa', () => {
+  assert.equal(fPct(48), '48%');
+  assert.equal(fPct(47.6), '48%');
+  assert.equal(fPct(null), '–');
+  assert.equal(fHpa(1014.2), '1014 hPa');
+  assert.equal(fHpa(null), '–');
+});
+
+test('seriesRange ignores nulls', () => {
+  assert.deepEqual(seriesRange([1010, null, 1015.5, 1008]), { min: 1008, max: 1015.5 });
+  assert.equal(seriesRange([null, undefined]), null);
+});
+
+test('sparklinePath scales points into the box', () => {
+  assert.equal(sparklinePath([1000, 1010, 1005], 100, 50, 0), 'M0.0,50.0 L50.0,0.0 L100.0,25.0');
+  assert.equal(sparklinePath([1000, 1010], 100, 50, 5), 'M5.0,45.0 L95.0,5.0');
+  assert.equal(sparklinePath([1010, 1010, 1010], 100, 50, 0), 'M0.0,25.0 L50.0,25.0 L100.0,25.0', 'vlakke reeks in het midden');
+  assert.equal(sparklinePath([1000, null, 1010], 100, 50, 0), 'M0.0,50.0 L100.0,0.0', 'null-punt overgeslagen');
+  assert.equal(sparklinePath([1000], 100, 50), '');
+  assert.equal(sparklinePath([], 100, 50), '');
+});

tests/js/sw.test.js

@@ -0,0 +1,98 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import vm from 'node:vm';
+
+/** Laadt sw.js in een minimale nep-serviceworker-omgeving en geeft de geregistreerde handlers terug. */
+function loadServiceWorker({ fetchImpl }) {
+  const listeners = {};
+  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); },
+    async match(req) { return store.get(typeof req === 'string' ? req : req.url) || undefined; },
+    async keys() { return [...store.keys()].map((u) => new Request(u)); },
+  };
+  const sandbox = {
+    self: {
+      addEventListener: (type, fn) => { listeners[type] = fn; },
+      skipWaiting: async () => {},
+      clients: { claim: async () => {} },
+      location: new URL('http://x/'),
+    },
+    caches: { open: async () => cache, keys: async () => ['weerscherm-v0', 'weerscherm-v1'], delete: async () => true },
+    fetch: fetchImpl,
+    Response, Request, Headers, URL, AbortController, setTimeout, clearTimeout, console,
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(readFileSync(new URL('../../public/sw.js', import.meta.url), 'utf8'), sandbox);
+  return { listeners, store };
+}
+
+function dispatchFetch(listeners, url) {
+  let promise = null;
+  listeners.fetch({
+    request: new Request(url),
+    respondWith: (p) => { promise = p; },
+  });
+  return promise;
+}
+
+test('install caches the app shell', async () => {
+  const { listeners, store } = loadServiceWorker({ fetchImpl: async () => new Response('x') });
+  let done = null;
+  listeners.install({ waitUntil: (p) => { done = p; } });
+  await done;
+  assert.ok(store.has('http://x/app.js'));
+  assert.ok(store.has('http://x/index.html'));
+});
+
+test('API request goes to the network first and is cached', async () => {
+  const { listeners, store } = loadServiceWorker({
+    fetchImpl: async () => new Response('{"station":{}}', { status: 200, headers: { 'Content-Type': 'application/json' } }),
+  });
+  const res = await dispatchFetch(listeners, 'http://x/api/data.php');
+  assert.equal(res.status, 200);
+  assert.equal(res.headers.get('X-From-Cache'), null);
+  assert.ok(store.has('http://x/api/data.php'));
+});
+
+test('API request falls back to the cached response with X-From-Cache when offline', async () => {
+  let online = true;
+  const { listeners } = loadServiceWorker({
+    fetchImpl: async () => {
+      if (!online) throw new TypeError('Failed to fetch');
+      return new Response('{"station":{"stale":false}}', { status: 200, headers: { 'Content-Type': 'application/json' } });
+    },
+  });
+  await dispatchFetch(listeners, 'http://x/api/data.php');
+  online = false;
+  const res = await dispatchFetch(listeners, 'http://x/api/data.php');
+  assert.equal(res.status, 200);
+  assert.equal(res.headers.get('X-From-Cache'), '1');
+  assert.equal(await res.text(), '{"station":{"stale":false}}');
+});
+
+test('API request without any cache gives a 503 offline JSON', async () => {
+  const { listeners } = loadServiceWorker({ fetchImpl: async () => { throw new TypeError('offline'); } });
+  const res = await dispatchFetch(listeners, 'http://x/api/data.php');
+  assert.equal(res.status, 503);
+  assert.deepEqual(await res.json(), { errors: ['offline'] });
+});
+
+test('shell request is served from cache without hitting the network', async () => {
+  let calls = 0;
+  const { listeners, store } = loadServiceWorker({ fetchImpl: async () => { calls++; return new Response('net'); } });
+  store.set('http://x/styles.css', new Response('cached css'));
+  const res = await dispatchFetch(listeners, 'http://x/styles.css');
+  assert.equal(await res.text(), 'cached css');
+  assert.equal(calls, 0);
+});
+
+test('cross-origin and non-GET requests are left alone', () => {
+  const { listeners } = loadServiceWorker({ fetchImpl: async () => new Response('x') });
+  assert.equal(dispatchFetch(listeners, 'http://elders/api/data.php'), null);
+  let handled = false;
+  listeners.fetch({ request: new Request('http://x/api/data.php', { method: 'POST' }), respondWith: () => { handled = true; } });
+  assert.equal(handled, false);
+});