Beta 6
Now with concrete, vehicle and home temps and profiles
This commit is contained in:
fraxle
+48
-1
@@ -10,7 +10,7 @@
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="About SunScope · The True Temperature" />
|
||||
<meta property="og:description" content="What is UTCI? How does the SunScope soak-factor work? Learn how SunScope gives you a more honest outdoor comfort forecast than standard air temperature." />
|
||||
<meta property="og:description" content="What is UTCI? How does the SunScope soak-factor work? Learn how SunScope calculates urban concrete heat, vehicle interior temperatures, and gives you a more honest outdoor comfort forecast." />
|
||||
<meta property="og:url" content="https://sunscope.net/about.html" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
@@ -104,6 +104,53 @@
|
||||
a more honest, real-world comfort score for anyone heading outdoors.
|
||||
</p>
|
||||
|
||||
<h2>Urban heat: concrete surface temperature</h2>
|
||||
<p>
|
||||
The UTCI standard was developed with a natural grass surface as its reference ground — the
|
||||
assumption being that you're standing in a park or open field. In a city, that assumption
|
||||
breaks down. Concrete and tarmac absorb more solar energy than grass, and unlike grass they
|
||||
cannot cool themselves through evaporation. On a sunny summer afternoon, exposed concrete
|
||||
can run 15–25 °C hotter than the surrounding air.
|
||||
</p>
|
||||
<p>
|
||||
SunScope's <strong>Concrete surface</strong> column estimates the temperature of sun-exposed
|
||||
urban paving using an energy-balance model that accounts for how much solar radiation the
|
||||
surface absorbs, how efficiently the air above it carries that heat away (which depends on
|
||||
wind speed), and the reflective properties of typical urban concrete. The result gives you
|
||||
a sense of the contact heat stress you'd experience sitting, standing, or walking barefoot
|
||||
on city surfaces — something the standard UTCI value alone won't tell you.
|
||||
</p>
|
||||
<p>
|
||||
The column is enabled by default in the <strong>Urban</strong> profile and colour-coded:
|
||||
values above 30 °C are shown in amber, above 40 °C in red.
|
||||
</p>
|
||||
|
||||
<h2>Vehicle interior temperature</h2>
|
||||
<p>
|
||||
A sealed, parked vehicle heats up far faster than most people expect. SunScope's
|
||||
<strong>Vehicle</strong> column models the ambient cabin air temperature experienced by an
|
||||
occupant who is seated out of direct sunlight — the classic scenario of a child or pet left
|
||||
inside a parked car.
|
||||
</p>
|
||||
<p>
|
||||
The calculation combines two physical processes. The first is <strong>body panel
|
||||
conduction</strong>: metal body panels (roof, doors, bonnet) absorb solar radiation and
|
||||
conduct heat into the cabin regardless of the sun's position in the sky. This is the slow,
|
||||
relentless background heat that builds even on overcast days. The second is
|
||||
<strong>side-window solar gain</strong>: when the sun is at an elevation where its rays
|
||||
cut through the side glass rather than striking the roof or reflecting off at a shallow
|
||||
angle, additional heat enters the cabin. Because the occupant is modelled as sitting out of
|
||||
the direct beam, this energy goes into raising the ambient cabin air temperature rather than
|
||||
heating the person directly — which is precisely what makes it so dangerous. The air around
|
||||
you heats up steadily while you remain unaware of how hot the environment has become.
|
||||
</p>
|
||||
<p>
|
||||
Wind speed has almost no effect on a sealed vehicle and is not factored in. The figure shown
|
||||
represents a steady-state cabin temperature reached after approximately 45–60 minutes of
|
||||
parking. Values above 35 °C are shown in amber (dangerous for children and pets); above
|
||||
45 °C in red (potentially fatal within minutes).
|
||||
</p>
|
||||
|
||||
<h2>Reading the stress bands</h2>
|
||||
<p>SunScope maps every UTCI+P value to a thermal stress band so you can read conditions at a glance:</p>
|
||||
|
||||
|
||||
+78
-4
@@ -248,6 +248,69 @@
|
||||
The body scroller (.utci-tbody-scroll) owns the horizontal scrollbar. */
|
||||
border: 1.5px solid #c9b08a;
|
||||
background: #fffcf2;
|
||||
position: relative; /* needed for ::before / ::after pseudo-element indicators */
|
||||
}
|
||||
|
||||
/* ── SCROLL INDICATORS ──────────────────────────────────────────────────
|
||||
Fade + chevron overlays on the left/right edges of the table wrap.
|
||||
They appear only when there is content to scroll in that direction,
|
||||
driven by the scroll-fade-left / scroll-fade-right classes toggled by JS. */
|
||||
.utci-table-wrap::before,
|
||||
.utci-table-wrap::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 48px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: 6; /* above sticky header (z-index 5) */
|
||||
}
|
||||
|
||||
/* Left fade — warm cream fading to transparent rightward */
|
||||
.utci-table-wrap::before {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, rgba(240,228,196,0.92) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Right fade — warm cream fading to transparent leftward */
|
||||
.utci-table-wrap::after {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, rgba(240,228,196,0.92) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.utci-table-wrap.scroll-fade-left::before { opacity: 1; }
|
||||
.utci-table-wrap.scroll-fade-right::after { opacity: 1; }
|
||||
|
||||
/* Chevron arrows — sit on top of the fade, centred vertically */
|
||||
.utci-table-wrap .utci-scroll-chevron {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 7;
|
||||
pointer-events: none;
|
||||
color: #8a6a3a;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
.utci-table-wrap .utci-scroll-chevron.left { left: 6px; }
|
||||
.utci-table-wrap .utci-scroll-chevron.right { right: 6px; }
|
||||
|
||||
.utci-table-wrap.scroll-fade-left .utci-scroll-chevron.left { opacity: 1; }
|
||||
.utci-table-wrap.scroll-fade-right .utci-scroll-chevron.right { opacity: 1; }
|
||||
|
||||
/* Grab cursor on the body scroller to hint drag-to-scroll */
|
||||
.utci-tbody-scroll {
|
||||
cursor: grab;
|
||||
user-select: none; /* prevent text highlighting during drag */
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.utci-tbody-scroll:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* ── STICKY HEADER STRIP ────────────────────────────────────────────────
|
||||
@@ -387,7 +450,7 @@
|
||||
|
||||
/* Night-time hours get a slightly muted text colour */
|
||||
.utci-table tbody tr.is-night td {
|
||||
color: #c0a880;
|
||||
color: #7a5c30;
|
||||
}
|
||||
|
||||
/* The time cell — uses the display serif instead of monospace */
|
||||
@@ -398,6 +461,17 @@
|
||||
color: #1e1208 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.utci-time {
|
||||
font-size: 15px;
|
||||
}
|
||||
.utci-cell-hero {
|
||||
font-size: 15px !important;
|
||||
padding: 5px 12px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* The coloured pill inside UTCI / UTCI+P cells.
|
||||
The pill's BACKGROUND comes from inline styles in app.js
|
||||
(the utciCategory() function decides which thermal-stress colour
|
||||
@@ -415,10 +489,10 @@
|
||||
/* Hero variant used for the UTCI+P column — the headline number.
|
||||
Bigger, bolder, more breathing room so the eye lands here first. */
|
||||
.utci-cell-hero {
|
||||
padding: 7px 16px;
|
||||
font-size: 19px;
|
||||
padding: 6px 4px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
min-width: 76px;
|
||||
min-width: 63px;
|
||||
letter-spacing: 0.01em;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset, 0 0 0 1px rgba(255,255,255,0.08) inset;
|
||||
}
|
||||
|
||||
+135
-19
@@ -23,7 +23,7 @@
|
||||
import { h, render, Fragment } from '../vendor/preact.js';
|
||||
import { useState, useEffect, useLayoutEffect, useRef } from '../vendor/preact-hooks.js';
|
||||
import htm from '../vendor/htm.js';
|
||||
import { vaporPressureHpa, solarElevationDeg, calcTmrt, utciApprox } from './physics.js';
|
||||
import { vaporPressureHpa, solarElevationDeg, calcTmrt, utciApprox, calcConcreteTemp, calcVehicleInteriorTemp, calcIndoorTempPass } from './physics.js';
|
||||
import {
|
||||
utciCategory, precipPenalty, windCompass8, uvSplit,
|
||||
SKIN_TYPES, sunburnMinutes, burnLabel,
|
||||
@@ -111,7 +111,7 @@ export function UTCIForecast() {
|
||||
// FLIP THE `false` BELOW TO `true` TO PREVIEW THE PRO EXPERIENCE.
|
||||
// When this is wired to real billing/auth, replace `useState(false)`
|
||||
// with a check against the logged-in user.
|
||||
const [isPro, setIsPro] = useState(false);
|
||||
const [isPro, setIsPro] = useState(true);
|
||||
|
||||
// How many days the free tier shows. Days beyond this get a 🔒.
|
||||
// Bump this number if you want to give free users more access.
|
||||
@@ -123,27 +123,37 @@ export function UTCIForecast() {
|
||||
basic: {
|
||||
label: 'Basic',
|
||||
icon: '🌡️',
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false },
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false },
|
||||
},
|
||||
urban: {
|
||||
label: 'Urban',
|
||||
icon: '🏙️',
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: true, direct: true, diffuse: true, tmrt: true, delta: true, utci: true, uvA: true, uvB: true, burn: true, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false },
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true, uvB: true, burn: true, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false, concreteT: true, vehicleT: false, indoorT: false },
|
||||
},
|
||||
farming: {
|
||||
label: 'Farming',
|
||||
icon: '🌾',
|
||||
cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: false, cloud: true, sun: true, direct: true, diffuse: true, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, soilT: true, soilT6: true, soilM: true },
|
||||
cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: false, cloud: true, sun: true, direct: true, diffuse: true, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, soilT: true, soilT6: true, soilM: true, concreteT: false, vehicleT: false, indoorT: false },
|
||||
},
|
||||
sailing: {
|
||||
label: 'Sailing',
|
||||
icon: '⛵',
|
||||
cols: { hour: true, air: false, rh: false, dew: false, wind: true, dir: true, cloud: true, sun: true, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true, uvB: true, burn: true, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false },
|
||||
cols: { hour: true, air: false, rh: false, dew: false, wind: true, dir: true, cloud: true, sun: true, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true, uvB: true, burn: true, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false },
|
||||
},
|
||||
vehicle: {
|
||||
label: 'Vehicle',
|
||||
icon: '🚗',
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: false, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true, uvB: true, burn: true, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: true, indoorT: false },
|
||||
},
|
||||
home: {
|
||||
label: 'Home',
|
||||
icon: '🏠',
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: false, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: true },
|
||||
},
|
||||
custom: {
|
||||
label: 'Custom',
|
||||
icon: '⚙️',
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: false, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false },
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: false, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false },
|
||||
},
|
||||
};
|
||||
|
||||
@@ -160,7 +170,7 @@ export function UTCIForecast() {
|
||||
tmrt: false, delta: false, utci: false,
|
||||
uvA: false, uvB: false, burn: false,
|
||||
utciP: true, precip: true,
|
||||
soilT: false, soilT6: false, soilM: false,
|
||||
soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false,
|
||||
});
|
||||
const toggleCol = (col) => setVisibleCols(prev => ({ ...prev, [col]: !prev[col] }));
|
||||
|
||||
@@ -178,6 +188,77 @@ export function UTCIForecast() {
|
||||
const headTableRef = useRef(null);
|
||||
const bodyScrollRef = useRef(null);
|
||||
const bodyTableRef = useRef(null);
|
||||
const tableWrapRef = useRef(null);
|
||||
|
||||
// ─── TABLE SCROLL INDICATORS ─────────────────────────────────────────
|
||||
// Track whether the body scroller can scroll left/right so we can show
|
||||
// fade + chevron indicators on the table edges.
|
||||
const [tableCanScrollLeft, setTableCanScrollLeft] = useState(false);
|
||||
const [tableCanScrollRight, setTableCanScrollRight] = useState(false);
|
||||
|
||||
const updateTableScrollIndicators = () => {
|
||||
const el = bodyScrollRef.current;
|
||||
if (!el) return;
|
||||
setTableCanScrollLeft(el.scrollLeft > 1);
|
||||
setTableCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
||||
};
|
||||
|
||||
// ─── DRAG-TO-SCROLL ──────────────────────────────────────────────────
|
||||
// Attach pointer-event drag scrolling to the body scroller so desktop
|
||||
// users can click-drag the table horizontally.
|
||||
useEffect(() => {
|
||||
const el = bodyScrollRef.current;
|
||||
if (!el) return;
|
||||
let isDown = false;
|
||||
let startX = 0;
|
||||
let startScroll = 0;
|
||||
|
||||
const onMouseDown = (e) => {
|
||||
// Only act on clicks that land inside the body scroller
|
||||
if (!el.contains(e.target)) return;
|
||||
if (e.button !== 0) return;
|
||||
if (e.target.closest('button, a, input, select')) return;
|
||||
isDown = true;
|
||||
startX = e.clientX;
|
||||
startScroll = el.scrollLeft;
|
||||
el.style.cursor = 'grabbing';
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.webkitUserSelect = 'none';
|
||||
};
|
||||
const onMouseMove = (e) => {
|
||||
if (!isDown) return;
|
||||
const dx = e.clientX - startX;
|
||||
el.scrollLeft = startScroll - dx;
|
||||
};
|
||||
const onMouseUp = () => {
|
||||
if (!isDown) return;
|
||||
isDown = false;
|
||||
el.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.webkitUserSelect = '';
|
||||
};
|
||||
|
||||
// Attach everything to document so Preact's synthetic event system
|
||||
// cannot intercept or swallow the events before we see them.
|
||||
document.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
|
||||
// Also update indicators on scroll
|
||||
el.addEventListener('scroll', updateTableScrollIndicators);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
el.removeEventListener('scroll', updateTableScrollIndicators);
|
||||
};
|
||||
}, [forecast]);
|
||||
|
||||
// Update indicators after layout sync (columns may have changed width)
|
||||
useEffect(() => {
|
||||
updateTableScrollIndicators();
|
||||
}, [forecast, visibleCols, selectedDay]);
|
||||
|
||||
// ─── TABLE SCROLL SYNC ───────────────────────────────────────────────
|
||||
// The hourly table is rendered as two stacked scroll areas:
|
||||
@@ -192,6 +273,7 @@ export function UTCIForecast() {
|
||||
const body = bodyScrollRef.current;
|
||||
if (!track || !body) return;
|
||||
track.style.transform = `translate3d(${-body.scrollLeft}px, 0, 0)`;
|
||||
updateTableScrollIndicators();
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
@@ -392,6 +474,7 @@ export function UTCIForecast() {
|
||||
const soilT0 = h.soil_temperature_0cm ? h.soil_temperature_0cm[i] : null;
|
||||
const soilT6 = h.soil_temperature_6cm ? h.soil_temperature_6cm[i] : null;
|
||||
const soilM = h.soil_moisture_0_to_1cm ? h.soil_moisture_0_to_1cm[i] : null;
|
||||
const concreteT = calcConcreteTemp(Ta, glob, va);
|
||||
// iso is a local wall-clock string e.g. "2026-05-13T14:00" (no Z).
|
||||
// For display we slice the string directly — no Date object needed.
|
||||
// For solarElevationDeg (which uses .getUTC* internally) we need the
|
||||
@@ -401,6 +484,7 @@ export function UTCIForecast() {
|
||||
// dt kept for SkyScope / backward compat — same as dtUTC.
|
||||
const dt = dtUTC;
|
||||
const elev = solarElevationDeg(location.lat, location.lon, dtUTC);
|
||||
const vehicleT = calcVehicleInteriorTemp(Ta, glob, elev);
|
||||
const eh = vaporPressureHpa(Ta, RH);
|
||||
const Tmrt = calcTmrt(Ta, dir, dif, glob, elev);
|
||||
const utci = utciApprox(Ta, Tmrt, va, eh);
|
||||
@@ -414,11 +498,22 @@ export function UTCIForecast() {
|
||||
cc, ccLow, ccMid, ccHigh, cloudCat,
|
||||
uv, uvA, uvB,
|
||||
precip, snow,
|
||||
soilT0, soilT6, soilM,
|
||||
soilT0, soilT6, soilM, concreteT, vehicleT,
|
||||
elev, Tmrt, utci, utciAdj, eh, compass,
|
||||
};
|
||||
}) : [];
|
||||
|
||||
// Two-pass indoor temperature: needs the full hourly arrays so thermal
|
||||
// lag can look back at previous hours. Run after hourlyRows is built,
|
||||
// then stamp each row with its indoorT value.
|
||||
if (hourlyRows.length > 0) {
|
||||
const TaArr = hourlyRows.map(r => r.Ta);
|
||||
const globArr = hourlyRows.map(r => r.glob);
|
||||
const elevArr = hourlyRows.map(r => r.elev);
|
||||
const indoorTemps = calcIndoorTempPass(TaArr, globArr, elevArr);
|
||||
hourlyRows.forEach((r, i) => { r.indoorT = indoorTemps[i]; });
|
||||
}
|
||||
|
||||
// Group those hourly rows into days for the day tabs.
|
||||
const days = [];
|
||||
hourlyRows.forEach(row => {
|
||||
@@ -786,6 +881,9 @@ export function UTCIForecast() {
|
||||
{ key: 'soilT', label: 'Soil °C' },
|
||||
{ key: 'soilT6', label: 'Soil 6cm' },
|
||||
{ key: 'soilM', label: 'Soil moist' },
|
||||
{ key: 'concreteT', label: 'Concrete' },
|
||||
{ key: 'vehicleT', label: 'Vehicle' },
|
||||
{ key: 'indoorT', label: 'Indoors' },
|
||||
{ key: 'wind', label: 'Wind' },
|
||||
{ key: 'dir', label: 'Dir' },
|
||||
{ key: 'cloud', label: 'Cloud' },
|
||||
@@ -837,7 +935,9 @@ export function UTCIForecast() {
|
||||
show, remove the visibleCols check around it. To rename a
|
||||
heading, edit the text inside the matching <th>.
|
||||
-->
|
||||
<div class="utci-table-wrap">
|
||||
<div class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}`} ref=${tableWrapRef}>
|
||||
<span class="utci-scroll-chevron left" aria-hidden="true">‹</span>
|
||||
<span class="utci-scroll-chevron right" aria-hidden="true">›</span>
|
||||
<!-- Sticky header strip — locks to viewport top. Clipped
|
||||
horizontally; the inner .utci-thead-track is shifted
|
||||
via translateX from JS to follow the body's scrollLeft.
|
||||
@@ -854,6 +954,9 @@ export function UTCIForecast() {
|
||||
${visibleCols.soilT && html`<th>Soil °C <span class="col-unit">surface</span></th>`}
|
||||
${visibleCols.soilT6 && html`<th>Soil 6cm <span class="col-unit">°C root</span></th>`}
|
||||
${visibleCols.soilM && html`<th>Soil moist <span class="col-unit">m³/m³</span></th>`}
|
||||
${visibleCols.concreteT && html`<th>Concrete <span class="col-unit">°C surface</span></th>`}
|
||||
${visibleCols.vehicleT && html`<th>Vehicle <span class="col-unit">°C peak</span></th>`}
|
||||
${visibleCols.indoorT && html`<th>Indoors <span class="col-unit">°C est.</span></th>`}
|
||||
${visibleCols.wind && html`<th>Wind <span class="col-unit">m/s (gust)</span></th>`}
|
||||
${visibleCols.dir && html`<th class="utci-dir-cell">Dir <span class="col-unit">-</span></th>`}
|
||||
${visibleCols.cloud && html`<th>Cloud <span class="col-unit">%</span></th>`}
|
||||
@@ -886,7 +989,8 @@ export function UTCIForecast() {
|
||||
const delta = r.utci - r.Ta;
|
||||
const adjCat = utciCategory(r.utciAdj);
|
||||
// r.iso is the local wall-clock string from the API — slice it directly.
|
||||
const localHHMM = r.iso.slice(11, 16);
|
||||
const h24 = parseInt(r.iso.slice(11, 13), 10);
|
||||
const localHHMM = h24 === 0 ? '12am' : h24 < 12 ? `${h24}am` : h24 === 12 ? '12pm' : `${h24 - 12}pm`;
|
||||
return html`
|
||||
<tr key=${r.iso}
|
||||
class=${`${isNight ? 'is-night' : ''} ${isNow ? 'is-now' : ''}`.trim()}>
|
||||
@@ -900,11 +1004,23 @@ export function UTCIForecast() {
|
||||
${visibleCols.rh && html`<td>${Math.round(r.RH)}</td>`}
|
||||
${visibleCols.dew && html`<td>${r.dew != null ? r.dew.toFixed(1) : '—'}</td>`}
|
||||
${visibleCols.soilT && html`
|
||||
<td style=${{ color: '#8a6a3a' }}>${r.soilT0 != null ? r.soilT0.toFixed(1) : '—'}</td>`}
|
||||
<td style=${{ color: '#6b4a1c' }}>${r.soilT0 != null ? r.soilT0.toFixed(1) : '—'}</td>`}
|
||||
${visibleCols.soilT6 && html`
|
||||
<td style=${{ color: '#8a6a3a' }}>${r.soilT6 != null ? r.soilT6.toFixed(1) : '—'}</td>`}
|
||||
<td style=${{ color: '#6b4a1c' }}>${r.soilT6 != null ? r.soilT6.toFixed(1) : '—'}</td>`}
|
||||
${visibleCols.soilM && html`
|
||||
<td style=${{ color: '#5090b0' }}>${r.soilM != null ? r.soilM.toFixed(3) : '—'}</td>`}
|
||||
<td style=${{ color: '#2a6a90' }}>${r.soilM != null ? r.soilM.toFixed(3) : '—'}</td>`}
|
||||
${visibleCols.concreteT && html`
|
||||
<td style=${{ color: r.concreteT != null && r.concreteT > 40 ? '#c0392b' : r.concreteT != null && r.concreteT > 30 ? '#e67e22' : '#7f8c8d', fontWeight: 'bold' }}>
|
||||
${r.concreteT != null ? r.concreteT.toFixed(1) : '—'}
|
||||
</td>`}
|
||||
${visibleCols.vehicleT && html`
|
||||
<td style=${{ color: r.vehicleT != null && r.vehicleT > 45 ? '#c0392b' : r.vehicleT != null && r.vehicleT > 35 ? '#e67e22' : '#7f8c8d', fontWeight: 'bold' }}>
|
||||
${r.vehicleT != null ? r.vehicleT.toFixed(1) : '—'}
|
||||
</td>`}
|
||||
${visibleCols.indoorT && html`
|
||||
<td style=${{ color: r.indoorT != null && r.indoorT > 32 ? '#c0392b' : r.indoorT != null && r.indoorT > 26 ? '#e67e22' : '#4a7a4a', fontWeight: 'bold' }}>
|
||||
${r.indoorT != null ? r.indoorT.toFixed(1) : '—'}
|
||||
</td>`}
|
||||
${visibleCols.wind && html`<td>
|
||||
${r.va.toFixed(1)}${r.gust != null && r.gust > r.va + 0.5
|
||||
? html`<span style=${{ opacity: 0.65, marginLeft: '4px' }}>(${r.gust.toFixed(1)})</span>`
|
||||
@@ -928,7 +1044,7 @@ export function UTCIForecast() {
|
||||
${visibleCols.tmrt && html`<td>${r.Tmrt.toFixed(1)}</td>`}
|
||||
${visibleCols.delta && html`
|
||||
<td style=${{
|
||||
color: delta > 3 ? '#c8601a' : delta < -3 ? '#3f73c4' : '#9a7d5a',
|
||||
color: delta > 3 ? '#c8601a' : delta < -3 ? '#3f73c4' : '#4a3218',
|
||||
fontWeight: 600,
|
||||
}}>
|
||||
${delta > 0 ? '+' : ''}${delta.toFixed(1)}
|
||||
@@ -940,22 +1056,22 @@ export function UTCIForecast() {
|
||||
</span>
|
||||
</td>`}
|
||||
${visibleCols.uvA && html`
|
||||
<td style=${{ color: r.uvA > 0 ? '#c8922a' : '#5a4228' }}>
|
||||
<td style=${{ color: r.uvA > 0 ? '#c8922a' : '#4a3218' }}>
|
||||
${r.uvA > 0 ? r.uvA.toFixed(1) : '—'}
|
||||
</td>`}
|
||||
${visibleCols.uvB && html`
|
||||
<td style=${{ color: r.uvB > 0 ? '#c44a3a' : '#5a4228', fontWeight: 600 }}>
|
||||
<td style=${{ color: r.uvB > 0 ? '#c44a3a' : '#4a3218' }}>
|
||||
${r.uvB > 0 ? r.uvB.toFixed(2) : '—'}
|
||||
</td>`}
|
||||
${visibleCols.burn && html`
|
||||
<td style=${{ color: r.uv > 0 ? (sunburnMinutes(r.uv, skinType) < 30 ? '#c44a3a' : '#c8601a') : '#5a4228' }}>
|
||||
<td style=${{ color: r.uv > 0 ? (sunburnMinutes(r.uv, skinType) < 30 ? '#c44a3a' : '#c8601a') : '#4a3218' }}>
|
||||
${burnLabel(sunburnMinutes(r.uv, skinType))}
|
||||
</td>`}
|
||||
${visibleCols.precip && html`
|
||||
<td>
|
||||
<span style=${{ display: 'inline-flex', alignItems: 'center', gap: '5px', verticalAlign: 'middle' }}>
|
||||
<${PrecipIcon} precip=${r.precip} snow=${r.snow} size=${28} />
|
||||
<span style=${{ color: r.snow > 0 ? '#6090c8' : r.precip > 0 ? '#5090b0' : '#c0a880' }}>
|
||||
<span style=${{ color: r.snow > 0 ? '#2a5fa8' : r.precip > 0 ? '#2a6a90' : '#7a5c30' }}>
|
||||
${r.snow > 0 ? r.snow.toFixed(1) + 'cm' : r.precip > 0 ? r.precip.toFixed(1) : '—'}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -22,11 +22,222 @@
|
||||
// EPSILON_P — emissivity of human skin (~0.97)
|
||||
// A_K — short-wave absorption coefficient for clothing
|
||||
// ALBEDO_GRASS — how much sun grass reflects back at you (23%)
|
||||
// ALBEDO_CONCRETE — how much sun concrete reflects back (30%)
|
||||
// Concrete absorbs more net solar than grass and has
|
||||
// no evaporative cooling, so its surface runs hot.
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
export const SIGMA = 5.670374419e-8;
|
||||
export const EPSILON_P = 0.97;
|
||||
export const A_K = 0.7;
|
||||
export const ALBEDO_GRASS = 0.23;
|
||||
export const ALBEDO_CONCRETE = 0.30;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// CONCRETE SURFACE TEMPERATURE (Urban profile)
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// Estimates the surface temperature of exposed concrete using a
|
||||
// simplified energy-balance approach:
|
||||
// • Absorbed solar = globalRad × (1 − albedo)
|
||||
// • No latent heat (no evaporation — concrete is dry)
|
||||
// • Convective loss to air proportional to wind speed
|
||||
// • Result is clamped to a physically plausible range
|
||||
//
|
||||
// This is what matters for contact heat stress in cities — the UTCI
|
||||
// standard uses grass, which runs ~5–15 °C cooler than urban concrete
|
||||
// on a sunny day because grass sweats (transpires).
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
export function calcConcreteTemp(Ta, globalRad, windSpeed) {
|
||||
if (globalRad == null || Ta == null) return null;
|
||||
const absorbed = globalRad * (1 - ALBEDO_CONCRETE); // W/m²
|
||||
// Convective heat transfer coefficient: ~5 W/m²K still air, rises with wind
|
||||
const hc = 5 + 4.5 * Math.sqrt(Math.max(windSpeed || 0, 0));
|
||||
// Surface temp: Ta + solar gain / convective loss
|
||||
const Ts = Ta + absorbed / hc;
|
||||
// Clamp: can't be cooler than air, cap at 85 °C (melting asphalt territory)
|
||||
return Math.max(Ta, Math.min(Ts, 85));
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// UK HOUSE INDOOR TEMPERATURE (windows closed, no active cooling)
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// Estimates the ambient indoor air temperature of a typical UK brick
|
||||
// house with windows closed and no air conditioning.
|
||||
//
|
||||
// Two heat pathways are modelled:
|
||||
//
|
||||
// 1. WALL CONDUCTION
|
||||
// Heat conducts through brick cavity walls and roof. UK Part L
|
||||
// compliant walls have a U-value around 0.28–0.45 W/m²K; older
|
||||
// solid-brick stock runs higher. A representative mid-stock value
|
||||
// is used. This drives a slow, steady heat transfer proportional
|
||||
// to the difference between outdoor and indoor air temperature.
|
||||
//
|
||||
// 2. WINDOW SOLAR GAIN
|
||||
// A typical UK semi has ~15–18% glazing ratio. Solar energy
|
||||
// transmits through glass, is absorbed by floors and furniture,
|
||||
// and heats the indoor air. Gain is averaged across orientations
|
||||
// (not all windows face south). Diffuse radiation contributes
|
||||
// regardless of sun angle.
|
||||
//
|
||||
// THERMAL LAG
|
||||
// Brick and concrete have high thermal mass — the house responds
|
||||
// slowly to outdoor temperature swings. This function takes a
|
||||
// weighted average of the current hour's heat load and the
|
||||
// previous few hours', giving the characteristic lag where indoor
|
||||
// temperature peaks 2–4 hours after the outdoor peak.
|
||||
// Call calcIndoorTempPass() on the full hourly arrays after
|
||||
// building rows — it returns a per-hour indoor temp array.
|
||||
//
|
||||
// No mechanical cooling. Minimal infiltration (windows closed).
|
||||
// Internal heat gains (people, appliances) are not modelled.
|
||||
//
|
||||
// Colour thresholds:
|
||||
// < 20 °C — cool, may need heating
|
||||
// 20–26 °C — comfortable
|
||||
// 26–32 °C — warm; WHO heatwave advisory threshold for sleeping
|
||||
// > 32 °C — hot; risk for elderly and vulnerable occupants
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
|
||||
// Single-hour instantaneous heat load (W/m² effective, indoor side).
|
||||
// Used internally by calcIndoorTempPass — not exported.
|
||||
function _houseHeatLoad(Ta, globalRad, solElev) {
|
||||
// Wall + roof conduction: U-value ~0.35 W/m²K × effective envelope area ratio
|
||||
// We express as a gain-per-degree-delta — applied against Ti later in the pass.
|
||||
// (See calcIndoorTempPass for how this feeds the lag model.)
|
||||
|
||||
// Window solar gain: glazing ratio 0.16, g-value 0.63 (standard double glazing),
|
||||
// averaged across orientations (0.5 factor — not all windows face the sun).
|
||||
const glazingRatio = 0.16;
|
||||
const gValue = 0.63;
|
||||
const orientFactor = 0.50;
|
||||
const solarGain = globalRad * glazingRatio * gValue * orientFactor;
|
||||
|
||||
return { conductionDelta: Ta, solarGain };
|
||||
}
|
||||
|
||||
// Two-pass function: call with the full arrays of hourly Ta and globalRad.
|
||||
// Returns an array of indoor temperatures, one per hour.
|
||||
export function calcIndoorTempPass(TaArr, globArr, elevArr) {
|
||||
const n = TaArr.length;
|
||||
const result = new Array(n);
|
||||
|
||||
// Thermal resistance of the building envelope (°C per W/m² of heat load)
|
||||
// Lower = faster response to outdoor changes. UK brick mid-stock ~0.45.
|
||||
const uWall = 0.35; // W/m²K effective wall U-value
|
||||
// Thermal mass time constant: heavier = longer lag.
|
||||
// ~4 h lag for typical UK brick semi (expressed as exponential decay weight).
|
||||
const lagHours = 4;
|
||||
const alpha = 1 - Math.exp(-1 / lagHours); // per-hour blending weight
|
||||
|
||||
// Seed indoor temp to first outdoor temp
|
||||
let Ti = TaArr[0] ?? 15;
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const Ta = TaArr[i] ?? Ti;
|
||||
const glob = globArr[i] ?? 0;
|
||||
const solElev = elevArr[i] ?? 0;
|
||||
|
||||
// Solar gain through windows (W/m² effective)
|
||||
const glazingRatio = 0.16;
|
||||
const gValue = 0.63;
|
||||
const orientFactor = 0.50;
|
||||
const solarGain = glob * glazingRatio * gValue * orientFactor;
|
||||
|
||||
// Conductive heat flow through walls: proportional to (Ta - Ti)
|
||||
// uWall drives how quickly the indoor temp chases outdoor temp.
|
||||
const conductionGain = uWall * (Ta - Ti);
|
||||
|
||||
// Target indoor temp this hour if there were no thermal mass:
|
||||
// Ti_instant = Ti + conduction + solar load / heat capacity proxy
|
||||
// heatCap proxy: how many degrees does 1 W/m² raise the indoor air?
|
||||
// For a typical 90 m² house, ~0.15 °C per W/m² effective.
|
||||
const heatCapProxy = 0.15;
|
||||
const Ti_instant = Ti + (conductionGain + solarGain) * heatCapProxy;
|
||||
|
||||
// Apply thermal lag: blend toward Ti_instant slowly
|
||||
Ti = Ti + alpha * (Ti_instant - Ti);
|
||||
|
||||
// Can't be colder than outdoor (house doesn't actively cool)
|
||||
// Cap at 55 °C (physically implausible above this for a house interior)
|
||||
result[i] = Math.max(Math.min(Ti, 55), Math.min(Ta, Ti));
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
// VEHICLE INTERIOR CABIN TEMPERATURE (seated occupant, not in sunbeam)
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// Models the ambient cabin air temperature experienced by an occupant
|
||||
// seated out of direct sunlight inside a sealed, parked vehicle.
|
||||
// Two heat sources are combined:
|
||||
//
|
||||
// 1. PANEL CONDUCTION
|
||||
// Aluminium body panels absorb solar radiation and conduct heat
|
||||
// into the cabin. Albedo ~0.25 (mid-point for typical mixed-colour
|
||||
// fleet; dark paint ~0.10, silver/white ~0.40).
|
||||
// Panel surface temp → conductive gain into cabin air.
|
||||
//
|
||||
// 2. SIDE-WINDOW GLAZING GAIN (sun-angle dependent)
|
||||
// When solar elevation is between ~10° and ~60°, the sun's rays
|
||||
// cut through the side glass at an angle that allows significant
|
||||
// transmission into the cabin (rather than hitting the roof or
|
||||
// reflecting off at a shallow angle). This warms the cabin air
|
||||
// but the occupant is modelled as NOT sitting in the beam —
|
||||
// so it adds to ambient cabin temp, not direct radiant load.
|
||||
// Above 60° the sun mostly hits the roof; below 10° it reflects.
|
||||
//
|
||||
// Wind is ignored (vehicle is sealed). No evaporative cooling.
|
||||
// Steady-state reached after ~45–60 min of parking.
|
||||
//
|
||||
// Colour thresholds in the table:
|
||||
// < 35 °C — warm but tolerable for short periods
|
||||
// 35–45 °C — dangerous for children/pets (hyperthermia risk)
|
||||
// > 45 °C — potentially fatal within minutes
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
export function calcVehicleInteriorTemp(Ta, globalRad, solElev) {
|
||||
if (globalRad == null || Ta == null) return null;
|
||||
|
||||
// ── 1. Panel conduction ──────────────────────────────────────────
|
||||
const albedoPanel = 0.25; // typical mixed fleet
|
||||
const panelAbsorbed = globalRad * (1 - albedoPanel); // W/m² absorbed by bodywork
|
||||
// Panel surface temp: absorbed solar / convective loss to outside air
|
||||
// hOut ~10 W/m²K (light breeze over panel surface even when parked)
|
||||
const hOut = 10;
|
||||
const panelSurfaceTemp = Ta + panelAbsorbed / hOut;
|
||||
// Conductive gain into cabin: panel-to-cabin air, ~4 W/m²K through metal + trim
|
||||
const hCabin = 4;
|
||||
const conductionGain = hCabin * (panelSurfaceTemp - Ta); // W/m²
|
||||
|
||||
// ── 2. Side-window glazing gain (angle-dependent) ─────────────────
|
||||
// Glazing transmission for auto glass ~0.70
|
||||
const tau = 0.70;
|
||||
let glazingGain = 0;
|
||||
if (solElev != null && solElev > 10 && solElev < 60) {
|
||||
// Scale factor: peaks around 30–40° elevation (sun cuts squarely
|
||||
// through side glass), tapers off toward 10° (shallow/reflected)
|
||||
// and 60° (sun increasingly hitting roof not side glass).
|
||||
// Use a simple tent function peaking at 35°.
|
||||
const peak = 35;
|
||||
const halfWidth = 25; // degrees either side
|
||||
const factor = Math.max(0, 1 - Math.abs(solElev - peak) / halfWidth);
|
||||
// Diffuse radiation also enters through glass regardless of angle
|
||||
glazingGain = tau * globalRad * factor * 0.5; // occupant not in beam → 50% ambient
|
||||
} else {
|
||||
// Outside the side-window zone: diffuse only (scattered sky light)
|
||||
glazingGain = tau * (globalRad * 0.15); // ~15% diffuse fraction
|
||||
}
|
||||
|
||||
// ── Combine into cabin air temperature ───────────────────────────
|
||||
// Total heat input per m² of cabin surface
|
||||
const totalGain = conductionGain + glazingGain;
|
||||
// Cabin heat loss: poor natural ventilation in sealed car ~2.0 W/m²K
|
||||
const hCabinLoss = 2.0;
|
||||
const Ti = Ta + totalGain / hCabinLoss;
|
||||
|
||||
// Clamp: can't be cooler than outside air; physical cap at 90 °C
|
||||
return Math.max(Ta, Math.min(Ti, 90));
|
||||
}
|
||||
|
||||
// Vapour pressure (Magnus → hPa)
|
||||
export function vaporPressureHpa(Ta, RH) {
|
||||
|
||||
Reference in New Issue
Block a user