theoandClaude Opus 5
107978b265
In de lege ruimte rechts van de grote buitentemperatuur staat nu het
verloop van vandaag: onderschrift "Vandaag", de lijn, en tijdlabels op
hele uren met "nu" rechts. Geen y-as, want de laagste en hoogste waarde
van vandaag staan al onder de balk en dat is precies de schaal.
Het getal en het grafiekje staan in een flexrij, zodat het grafiekje de
resterende ruimte pakt en meebeweegt als het getal smaller of breder
wordt. Vlak na middernacht zijn er nog geen twee meetpunten; dan blijft
het blokje verborgen in plaats van een leeg kader te tonen.
Data uit een extra getmeasure (scale=30min, type=Temperature, op de
buitenmodule) vanaf middernacht lokale tijd, cache 15 minuten, in de
payload als outdoor_history: {points, stale} zodat een storing daar de
rest niet raakt. PressureHistory is generiek gemaakt tot MeasureSeries
met de naam van het waardeveld als parameter, in plaats van er een bijna
identieke tweede klasse naast te zetten. StationMapper geeft nu ook het
id van de buitenmodule door.
Onderweg gevonden: FixtureSource deed een modulo op een float, wat een
PHP-deprecation vóór de JSON in de response zette. Dat verklaart de
kapotte JSON die eerder in de browserconsole langskwam. Opgelost met
intdiv. Servicewerker naar v10.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
127 lines
5.1 KiB
HTML
127 lines
5.1 KiB
HTML
<!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"> </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>
|
||
<div class="a-temprow">
|
||
<p class="a-temp num" id="temp">–</p>
|
||
<div class="a-today" id="today-chart" hidden>
|
||
<p class="a-tcap">Vandaag</p>
|
||
<svg class="a-tspark" viewBox="0 0 200 96" preserveAspectRatio="none" aria-hidden="true">
|
||
<line class="a-spark-base" x1="0" y1="95.5" x2="200" y2="95.5"/>
|
||
<path class="a-spark-line" id="today-path" d=""/>
|
||
</svg>
|
||
<div class="a-px num" id="today-hours"></div>
|
||
</div>
|
||
</div>
|
||
<div class="a-range">
|
||
<div class="a-track"><span class="a-mark" id="mark" style="left:50%"></span></div>
|
||
<div class="a-ends num">
|
||
<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></p>
|
||
<div class="a-pgrid">
|
||
<div class="a-py num"><span id="press-max">–</span><span id="press-min">–</span></div>
|
||
<svg class="a-spark" viewBox="0 0 560 56" preserveAspectRatio="none" aria-hidden="true">
|
||
<line class="a-spark-grid" x1="140" y1="0" x2="140" y2="56"/>
|
||
<line class="a-spark-grid" x1="280" y1="0" x2="280" y2="56"/>
|
||
<line class="a-spark-grid" x1="420" y1="0" x2="420" y2="56"/>
|
||
<line class="a-spark-base" x1="0" y1="55.5" x2="560" y2="55.5"/>
|
||
<path class="a-spark-line" id="press-path" d=""/>
|
||
</svg>
|
||
<div></div>
|
||
<div class="a-px num" id="press-hours"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="a-inside" id="rooms"></section>
|
||
|
||
<section class="a-bottom">
|
||
<div id="rain-block">
|
||
<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>
|
||
|
||
<div class="overlay" id="hour-overlay" hidden>
|
||
<div class="ho-bar"><i id="ho-bar-fill"></i></div>
|
||
<header class="ho-head">
|
||
<span class="ho-date" id="ho-date"></span>
|
||
<span class="ho-hint">tik om te sluiten</span>
|
||
</header>
|
||
<div class="ho-temp">
|
||
<svg class="ho-temp-svg" viewBox="0 0 1045 64" preserveAspectRatio="none" aria-hidden="true">
|
||
<path class="ho-temp-line" id="ho-temp-path" d=""/>
|
||
</svg>
|
||
<div class="ho-grid" id="ho-temp-nums"></div>
|
||
</div>
|
||
<div class="ho-grid ho-rain" id="ho-rain"></div>
|
||
<div class="ho-grid ho-wind" id="ho-wind"></div>
|
||
<div class="ho-grid ho-hours" id="ho-hours"></div>
|
||
</div>
|
||
|
||
<div class="overlay" id="radar-overlay" hidden>
|
||
<div class="ho-bar"><i id="ro-bar-fill"></i></div>
|
||
<header class="ho-head">
|
||
<span class="ho-date">Regen</span>
|
||
<span class="ho-hint">tik om te sluiten</span>
|
||
</header>
|
||
<div class="ro-body">
|
||
<div class="ro-map">
|
||
<p class="ro-status" id="ro-status">Radar laden…</p>
|
||
<img class="ro-img" id="ro-img" alt="Regenradar" hidden>
|
||
</div>
|
||
<div class="ro-side">
|
||
<p class="ro-big"><span class="num" id="ro-today">–</span> mm</p>
|
||
<p class="ro-sub">vandaag</p>
|
||
<div class="ro-days" id="ro-days"></div>
|
||
<p class="ro-month num" id="ro-month">–</p>
|
||
<p class="ro-source">bron: Buienradar.nl</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<div id="rotate">Draai de iPad een kwartslag</div>
|
||
<script type="module" src="app.js"></script>
|
||
</body>
|
||
</html>
|