zero2geospatial3d-sdk 0.1.0__py3-none-any.whl

zero2geospatial3d/web/src/ui/panel_compare.js

@@ -0,0 +1,294 @@
+// @ts-check
+// "Compare" tab: scenario A/B switch and difference analyses, and the
+// building-height optimiser.
+import { h, clear, row, select, number, button, card, stats, toast, download, toggle } from './dom.js';
+import { ExtrudedLayer } from '../scene/objects.js';
+import { optimiseHeights } from '../analysis/optimize.js';
+import { planningCheck } from '../analysis/compliance.js';
+import { drawScatter } from './charts.js';
+import { sendFields } from './qgis_link.js';
+import { gridStats } from '../core/terrain_math.js';
+import { MONTH_NAMES } from '../core/weather.js';
+import { solarOptions, comfortConditions } from './panel_analyze.js';
+
+export function buildComparePanel(app, root) {
+  clear(root);
+  root.appendChild(scenarioCard(app));
+  root.appendChild(optimiseCard(app));
+}
+
+function scenarioLayers(app) {
+  return {
+    a: app.layers.filter((l) => l.entry.scenario === 'A'),
+    b: app.layers.filter((l) => l.entry.scenario === 'B')
+  };
+}
+
+function showScenario(app, which) {
+  const { a, b } = scenarioLayers(app);
+  for (const l of a) l.setVisible(which === 'A');
+  for (const l of b) l.setVisible(which === 'B');
+  app.analyst.cache.clear();
+  app.scenario = which;
+}
+
+function scenarioCard(app) {
+  const { a, b } = scenarioLayers(app);
+  if (!a.length && !b.length) {
+    return card('Scenarios', h('p', { class: 'muted', text: 'To compare two plans, set building layers to "Scenario A" and "Scenario B" in the QGIS panel (step 2). Layers marked "Existing" appear in both.' }), { open: true });
+  }
+  const state = { kind: 'sun' };
+  const info = h('div', {});
+  const runPair = async () => {
+    const p = app.params;
+    const runners = {
+      sun: (prog) => app.analyst.sunHours({ area: app.area(), cell: app.cell(), date: { month: p.sun.month, day: p.sun.day },
+        startHour: p.sun.start, endHour: p.sun.end, stepMinutes: p.sun.step, onProgress: prog }),
+      svf: (prog) => app.analyst.skyView({ area: app.area(), cell: app.cell(), directions: p.svf.directions, onProgress: prog }),
+      solar: (prog) => app.analyst.solarRadiation({ ...solarOptions(app), onProgress: prog }),
+      wind: (prog) => app.analyst.wind({ area: app.area(), cell: Math.max(2, app.cell(600)), windFromDeg: p.wind.from, speed10: p.wind.speed, onProgress: prog }),
+      vsc: (prog) => app.analyst.daylightVsc({ area: app.area(), onProgress: prog }),
+      comfort: (prog) => app.analyst.comfort({ area: app.area(), cell: Math.max(1, app.cell(700)), month: p.comfort.month, day: p.comfort.day, hour: p.comfort.hour, conditions: comfortConditions(app), material: p.comfort.material, lai: p.comfort.lai, onProgress: prog }),
+      vent: (prog) => app.analyst.ventilation({ area: app.area(), cell: Math.max(2, app.cell(600)), windFromDeg: p.vent.from, speed10: p.vent.speed, emissionRateUgMS: p.vent.emission, backgroundUgM3: p.vent.background, treeDepositionFactor: p.vent.deposition, onProgress: prog }),
+      noise: (prog) => app.analyst.noise({ area: app.area(), cell: Math.max(2, app.cell(600)), soundPowerDb: p.noise.power, receiverHeight: p.noise.receiverHeight, groundFactor: p.noise.ground, onProgress: prog }),
+      gvi: (prog) => app.analyst.greenView({ area: app.area(), cell: Math.max(2, app.cell(600)), eyeHeight: p.form.eyeHeight, maxRadius: p.form.radius, onProgress: prog })
+    };
+    const before = app.scenario || 'A';
+    await app.run('Scenario comparison', async (prog) => {
+      showScenario(app, 'A');
+      const ra = (await runners[state.kind]((f) => prog(f / 2)))[0];
+      showScenario(app, 'B');
+      const rb = (await runners[state.kind]((f) => prog(0.5 + f / 2)))[0];
+      showScenario(app, before);
+      if (!ra.grid) return [pairOnWalls(app, ra, rb, state.kind), { ...ra, title: `A: ${ra.title}`, fields: [] }, { ...rb, title: `B: ${rb.title}`, fields: [] }];
+      const diff = new Float32Array(ra.values.length).fill(NaN);
+      let gain = 0, loss = 0, n = 0;
+      const tol = state.kind === 'svf' ? 0.02 : state.kind === 'wind' ? 0.2 : state.kind === 'solar' ? 20 : state.kind === 'comfort' ? 0.5 : state.kind === 'noise' ? 1.0 : state.kind === 'vent' ? 0.05 : state.kind === 'gvi' ? 1.0 : 0.25;
+      for (let i = 0; i < diff.length; i++) {
+        if (!Number.isFinite(ra.values[i]) || !Number.isFinite(rb.values[i])) continue;
+        // Only open ground in both: a new building's footprint is not a "change of sun".
+        if ((ra.ids && ra.ids[i]) || (rb.ids && rb.ids[i])) continue;
+        diff[i] = rb.values[i] - ra.values[i];
+        n++;
+        if (diff[i] > tol) gain++; else if (diff[i] < -tol) loss++;
+      }
+      const st = gridStats(diff);
+      const m = Math.max(Math.abs(st.min), Math.abs(st.max), tol * 2);
+      // Per building: the value in A, in B and the change, so the report can
+      // say what the proposal does to each existing building.
+      const perBuilding = [];
+      for (const fa of ra.fields || []) {
+        const fb = (rb.fields || []).find((x) => x.layer === fa.layer && x.name === fa.name);
+        if (!fb) continue;
+        const d = new Float32Array(fa.values.length).fill(NaN);
+        for (let i = 0; i < d.length; i++) if (Number.isFinite(fa.values[i]) && Number.isFinite(fb.values[i])) d[i] = fb.values[i] - fa.values[i];
+        perBuilding.push({ layer: fa.layer, name: `${fa.name}_A`, values: fa.values }, { layer: fa.layer, name: `${fa.name}_B`, values: fb.values },
+          { layer: fa.layer, name: `d_${fa.name}`, values: d });
+      }
+      for (const fb of rb.fields || []) {
+        if (!(ra.fields || []).some((x) => x.layer === fb.layer && x.name === fb.name)) perBuilding.push({ layer: fb.layer, name: `${fb.name}_B`, values: fb.values });
+      }
+      app.lastScenario = { kind: state.kind, title: ra.title };
+      return [{
+        kind: `diff_${state.kind}`, title: `B − A: ${ra.title}`, subtitle: 'Open ground in both scenarios; blue = more in B', unit: ra.unit,
+        grid: ra.grid, values: diff, display: { min: -m, max: m, ramp: (state.kind === 'wind' || state.kind === 'comfort' || state.kind === 'noise') ? 'rdbu-r' : 'rdbu' }, fields: perBuilding,
+        stats: [['Mean change', `${st.mean.toFixed(2)} ${ra.unit}`], ['Area gaining', `${n ? ((100 * gain) / n).toFixed(0) : 0} %`],
+          ['Area losing', `${n ? ((100 * loss) / n).toFixed(0) : 0} %`]],
+        notes: `Uses the parameters of the ${state.kind} card in Analyze. Changes smaller than ${tol} ${ra.unit} count as no change.`
+      }, { ...ra, title: `A: ${ra.title}`, fields: [] }, { ...rb, title: `B: ${rb.title}`, fields: [] }];
+    });
+  };
+  const body = h('div', {},
+    stats([['Scenario A layers', a.map((l) => l.entry.name).join(', ') || '–'], ['Scenario B layers', b.map((l) => l.entry.name).join(', ') || '–']]),
+    row('Show', select([['A', 'Existing + A'], ['B', 'Existing + B']], app.scenario || 'A', (v) => showScenario(app, v))),
+    row('Compare', select([['sun', 'Sun hours'], ['svf', 'Sky view factor'], ['vsc', 'Daylight on facades (VSC)'], ['solar', 'Solar irradiation'], ['wind', 'Pedestrian wind'], ['comfort', 'Thermal comfort (UTCI)'], ['vent', 'Canyon ventilation (VEI)'], ['noise', 'Environmental noise (Lden)'], ['gvi', 'Green View Index (GVI)']], state.kind, (v) => { state.kind = v; })),
+    h('div', { class: 'btn-row' }, button('Run A vs B', runPair, { kind: 'primary run' })),
+    info);
+  app.scenario = 'A';
+  return card('Scenarios', body, { open: true });
+}
+
+/** Per-building fields of a pair of wall results (A, B, change) and the BRE 0.8 test for daylight. */
+function pairOnWalls(app, ra, rb, kind) {
+  const fields = [];
+  let losing = 0, compared = 0;
+  for (const fa of ra.fields || []) {
+    const fb = (rb.fields || []).find((x) => x.layer === fa.layer && x.name === fa.name);
+    if (!fb) continue;
+    const d = new Float32Array(fa.values.length).fill(NaN);
+    const ratio = new Float32Array(fa.values.length).fill(NaN);
+    for (let i = 0; i < d.length; i++) {
+      if (!Number.isFinite(fa.values[i]) || !Number.isFinite(fb.values[i])) continue;
+      d[i] = fb.values[i] - fa.values[i];
+      if (fa.values[i] > 0) ratio[i] = fb.values[i] / fa.values[i];
+      if (fa.name === 'vsc_facade') { compared++; if (ratio[i] < 0.8) losing++; }
+    }
+    fields.push({ layer: fa.layer, name: `${fa.name}_A`, values: fa.values }, { layer: fa.layer, name: `${fa.name}_B`, values: fb.values },
+      { layer: fa.layer, name: `d_${fa.name}`, values: d });
+    if (fa.name === 'vsc_facade') fields.push({ layer: fa.layer, name: 'vsc_ratio_BA', values: ratio });
+  }
+  app.lastScenario = { kind, title: ra.title };
+  // Range of the per-building change, for legends and exports.
+  let m = 0;
+  for (const f of fields) if (f.name.startsWith('d_')) for (const v of f.values) if (Number.isFinite(v)) m = Math.max(m, Math.abs(v));
+  return {
+    kind: `diff_${kind}`, title: `B − A: ${ra.title}`, subtitle: 'Per building: value in A, in B and the change', unit: ra.unit, fields,
+    display: { min: -(m || 1), max: m || 1, ramp: 'rdbu' },
+    stats: kind === 'vsc' ? [['Buildings compared', String(compared)], ['Losing more than a fifth of their VSC (BRE 209)', `${losing}`]] : [['Buildings compared', String(compared)]],
+    notes: 'BRE 209: a window left with less than 0.8 times its former vertical sky component loses daylight noticeably. The planning check reads vsc_facade_A and vsc_facade_B for its "daylight kept after scenario B" test.'
+  };
+}
+
+function optimiseCard(app) {
+  const o = { floorHeight: 3.2, minFloors: 1, maxFloors: 12, minGfa: 0, month: 12, day: 21, startHour: 8, endHour: 16, margin: 60,
+    populationSize: 16, generations: 12, seed: 1,
+    // Constraints; the sun share starts at the planning profile's amenity threshold.
+    amenityOn: false, amenityPct: app.params?.check?.thresholds?.amenity_sun ?? 50, daylightOn: false };
+  const chart = h('canvas', { class: 'chart' });
+  const info = h('div', {});
+  const progressEl = h('div', { class: 'muted small' });
+  let last = null;
+  let stop = false;
+  let selected = null;
+  const targetsNow = () => {
+    const out = [];
+    for (const layer of app.layers) {
+      if (!(layer instanceof ExtrudedLayer) || layer.isWall) continue;
+      for (const f of app.selectedIndices(layer)) out.push({ layer, f });
+    }
+    return out;
+  };
+  const targetInfo = h('div', { class: 'muted small' });
+  const refreshTargets = () => {
+    const t = targetsNow();
+    const gfaNow = t.reduce((s, { layer, f }) => s + Math.max(1, Math.round(layer.heights[f] / o.floorHeight)) * layer.footprint[f], 0);
+    targetInfo.textContent = t.length ? `${t.length} selected building(s), floor area now ≈ ${Math.round(gfaNow).toLocaleString('en-US')} m²` :
+      'Select the buildings to optimise: click them (Shift+click adds) or select them in QGIS.';
+  };
+  app.on((w) => { if (w === 'selection') refreshTargets(); });
+  refreshTargets();
+  const apply = (ind) => {
+    if (!last) return;
+    selected = ind;
+    const fields = new Map();
+    last.targets.forEach(({ layer, f }, i) => {
+      layer.heights[f] = ind.x[i] * o.floorHeight;
+      if (!fields.has(layer)) fields.set(layer, { floors: new Float32Array(layer.count).fill(NaN), h: new Float32Array(layer.count).fill(NaN) });
+      fields.get(layer).floors[f] = ind.x[i];
+      fields.get(layer).h[f] = ind.x[i] * o.floorHeight;
+    });
+    for (const layer of fields.keys()) layer.applyHeightsFor(last.targets.filter((t) => t.layer === layer).map((t) => t.f));
+    last.fields = [];
+    for (const [layer, v] of fields) {
+      layer.setResultField('opt_floors', v.floors);
+      layer.setResultField('opt_height_m', v.h);
+      last.fields.push({ layer, name: 'opt_floors', values: v.floors }, { layer, name: 'opt_height_m', values: v.h });
+    }
+    app.analyst.cache.clear();
+    // Kept for the building report and its PDF.
+    app.lastOptimisation = { targets: last.targets, now: last.baseline, design: ind, floorHeight: o.floorHeight,
+      date: { month: o.month, day: o.day }, hours: [o.startHour, o.endHour] };
+    draw();
+    clear(info);
+    const b = last.baseline.extra, e = ind.extra;
+    const rows2 = [['Sun on open ground', `${e.sun.toFixed(2)} h (now ${b.sun.toFixed(2)} h)`],
+      ['Ground with ≥ 2 h sun', `${(e.twoHourShare * 100).toFixed(0)} % (now ${(b.twoHourShare * 100).toFixed(0)} %)`],
+      ['Floor area', `${Math.round(e.gfa).toLocaleString('en-US')} m² (now ${Math.round(b.gfa).toLocaleString('en-US')} m²)`]];
+    if (e.amenityChecked !== undefined) {
+      rows2.push([`Buildings with ≥ ${last.amenityPct} % sunny ground`, `${e.amenityPass} / ${e.amenityChecked} (now ${b.amenityPass} / ${b.amenityChecked})`
+        + (e.amenityWorse ? `; ${e.amenityWorse} below it and under 0.8 × now` : '')]);
+    }
+    if (e.windowsOver !== undefined) {
+      rows2.push(['Neighbour windows losing daylight', `${e.windowsOver} of ${last.windows} (${e.neighboursHit} buildings)`]);
+    }
+    rows2.push(['Meets the constraints', ind.violation === 0 ? 'yes' : 'no']);
+    rows2.push(['Floors', ind.x.join(', ')]);
+    info.appendChild(stats(rows2));
+  };
+  const draw = () => {
+    if (!last) return;
+    const pts = last.population.map((p, i) => ({ x: p.extra.gfa, y: p.extra.sun, front: p.rank === 0 && p.violation === 0, infeasible: p.violation > 0, id: i }));
+    pts.push({ x: last.baseline.extra.gfa, y: last.baseline.extra.sun, front: false, current: true, id: -1 });
+    const pick = drawScatter(chart, pts, { xLabel: 'Floor area (m²) →', yLabel: 'Sun on open ground (h) →', selected: selected ? last.population.indexOf(selected) : null });
+    chart.onclick = (e) => { const id = pick(e); if (id !== null && id >= 0) apply(last.population[id]); };
+  };
+  const run = async () => {
+    const targets = targetsNow();
+    if (!targets.length) { toast('Select buildings first.'); return; }
+    if (targets.length > 80) { toast('Select at most 80 buildings.'); return; }
+    stop = false;
+    const res = await app.run('Height optimisation', async (prog) => {
+      const constraints = { amenity: { on: o.amenityOn, share: o.amenityPct / 100 }, daylight: { on: o.daylightOn } };
+      const r = await optimiseHeights(app, { ...o, targets, date: { month: o.month, day: o.day }, constraints,
+        onGeneration: (g) => { prog(g.generation / g.generations); progressEl.textContent = `Generation ${g.generation}/${g.generations}, ${g.evaluations} designs evaluated, ${g.front.length} on the front`; },
+        shouldStop: () => stop });
+      last = { ...r, targets, amenityPct: o.amenityPct };
+      return [];
+    });
+    if (res === null || !last) return;
+    draw();
+    const best = last.front.filter((p) => p.violation === 0).sort((a2, b2) => b2.extra.sun - a2.extra.sun);
+    clear(info);
+    const constrained = o.amenityOn || o.daylightOn || o.minGfa > 0;
+    const feasible = last.population.filter((p) => p.violation === 0).length;
+    let msg = `${last.evaluations} designs, ${best.length} on the Pareto front (blue). The ringed point marked "now" is the current design. Click a point to apply it.`;
+    if (constrained) {
+      msg += feasible ? ` ${feasible} of the final ${last.population.length} meet every constraint; open orange rings break one.`
+        : ' No design met every constraint: the orange rings are the closest. Relax a constraint or allow fewer floors.';
+    }
+    info.appendChild(h('p', { class: 'muted small', text: msg }));
+  };
+  const body = h('div', {},
+    h('p', { class: 'muted small', text: 'Searches floor counts of the selected buildings for the best trade-offs between floor area and sun on the open ground around them (NSGA-II).' }),
+    targetInfo,
+    row('Floor height (m)', number(o.floorHeight, { min: 2.4, max: 6, step: 0.1, onChange: (v) => { o.floorHeight = v; refreshTargets(); } })),
+    row('Floors min / max', h('span', { class: 'inline' }, number(o.minFloors, { min: 1, step: 1, width: '4em', onChange: (v) => { o.minFloors = v; } }),
+      number(o.maxFloors, { min: 1, step: 1, width: '4em', onChange: (v) => { o.maxFloors = v; } }))),
+    row('Required floor area (m²)', number(o.minGfa, { min: 0, step: 100, onChange: (v) => { o.minGfa = v; } }), '0 = no requirement; designs below it are infeasible'),
+    row('Sun on', h('span', { class: 'inline' }, select(MONTH_NAMES.map((m, i) => [i + 1, m]), o.month, (v) => { o.month = Number(v); }),
+      number(o.day, { min: 1, max: 31, step: 1, width: '4em', onChange: (v) => { o.day = v; } }))),
+    row('Hours', h('span', { class: 'inline' }, number(o.startHour, { min: 0, max: 24, step: 1, width: '4em', onChange: (v) => { o.startHour = v; } }),
+      number(o.endHour, { min: 0, max: 24, step: 1, width: '4em', onChange: (v) => { o.endHour = v; } }))),
+    row('Ground scored within (m)', number(o.margin, { min: 10, step: 10, onChange: (v) => { o.margin = v; } })),
+    h('div', { class: 'muted small', text: 'Constraints (no extra analysis per design, so no slower):' }),
+    h('div', { class: 'check-row', title: 'Each selected building: at least this share of the open ground within 15 m gets 2 hours of sun on the day and hours above, or, where it falls short, at least 0.8 times the sunny area now (BRE 209, which uses 21 March and 50 %).' },
+      toggle(o.amenityOn, (v) => { o.amenityOn = v; }, 'Sun around each building'),
+      h('span', { class: 'muted small', text: '≥' }),
+      number(o.amenityPct, { min: 1, max: 100, step: 5, width: '4.5em', onChange: (v) => { if (v > 0) o.amenityPct = Math.min(100, v); } }),
+      h('span', { class: 'muted small', text: '% with 2 h' })),
+    h('div', { class: 'check-row', title: 'BRE 209: seen from the centre of each neighbouring lowest window, the new buildings stay under 25° above the horizontal, or the window keeps at least 0.8 times its vertical sky component now (taken for a long obstruction, on the safe side).' },
+      toggle(o.daylightOn, (v) => { o.daylightOn = v; }, 'Neighbours\u2019 daylight (25° test)')),
+    row('Population / generations', h('span', { class: 'inline' }, number(o.populationSize, { min: 8, step: 4, width: '4em', onChange: (v) => { o.populationSize = v; } }),
+      number(o.generations, { min: 2, step: 2, width: '4em', onChange: (v) => { o.generations = v; } }))),
+    row('Random seed', number(o.seed, { min: 1, step: 1, onChange: (v) => { o.seed = v; } }), 'Same seed and settings give the same result'),
+    h('div', { class: 'btn-row' }, button('Optimise', run, { kind: 'primary run' }), button('Stop', () => { stop = true; })),
+    progressEl, chart, info,
+    h('div', { class: 'btn-row' },
+      button('Reset heights', () => {
+        if (!last) return;
+        last.targets.forEach(({ layer, f }) => { layer.heights[f] = layer.sourceHeights[f]; });
+        for (const layer of new Set(last.targets.map((t) => t.layer))) layer.applyHeights();
+        selected = null;
+        draw();
+      }),
+      app.qgis ? button('To QGIS', async () => {
+        if (!last?.fields?.length) { toast('Apply a design first (click a point).'); return; }
+        const names = await sendFields(last.fields, 'viridis');
+        toast(`opt_floors and opt_height_m sent to ${names.join(', ')}.`);
+      }, { kind: 'primary' }) : null,
+      button('Check this design', async () => {
+        if (!last || !selected) { toast('Apply a design first (click a point).'); return; }
+        const p = app.params?.check || {};
+        await app.run('Planning check of the design', (prog) => planningCheck(app, {
+          scope: 'targets', targets: last.targets, fresh: true, criteria: p.criteria || ['amenity_sun', 'facade_vsc', 'wind', 'heat'],
+          thresholds: p.thresholds || {}, profile: p.name ? `${p.name} · optimised design` : 'Optimised design', onProgress: prog }));
+      }, { title: 'Full planning check (sun on 21 March, facade daylight, wind and heat with an EPW) of the applied design, with the planning profile in use' }),
+      button('CSV', () => {
+        if (!last) return;
+        const lines = ['design,on_front,meets_constraints,sun_h,ground_2h_share,floor_area_m2,windows_over_25deg,buildings_with_sunny_ground,floors'];
+        last.population.forEach((p, i) => lines.push(`${i},${p.rank === 0},${p.violation === 0},${p.extra.sun.toFixed(3)},${p.extra.twoHourShare.toFixed(3)},${Math.round(p.extra.gfa)},`
+          + `${p.extra.windowsOver ?? ''},${p.extra.amenityPass ?? ''},"${p.x.join(' ')}"`));
+        download('height_designs.csv', lines.join('\n'), 'text/csv');
+      })));
+  return card('Optimise building heights', body);
+}

zero2geospatial3d/web/src/ui/panel_layers.js

@@ -0,0 +1,172 @@
+// @ts-check
+// "Layers" tab: scene and weather summary, per-layer colour, filter and height.
+import { h, clear, row, select, number, toggle, button, card, stats, toast } from './dom.js';
+import { applyHeightRule, fieldRange } from './colorize.js';
+import { RAMP_LABELS } from '../core/classify.js';
+import { parseEpw, monthlySummary, windRose } from '../core/weather.js';
+import { drawMonthly, drawWindRose } from './charts.js';
+import { ExtrudedLayer, PointLayer, SurfaceLayer } from '../scene/objects.js';
+import * as THREE from 'three';
+
+const ROLE_NAMES = { buildings: 'Buildings', walls: 'Walls', trees: 'Trees', poles: 'Poles', surfaces: 'Surfaces', platforms: 'Platforms', sections: 'Sections', roads: 'Roads' };
+const RAMP_OPTIONS = Object.entries(RAMP_LABELS).flatMap(([k, v]) => [[k, v], [`${k}-r`, `${v} (reversed)`]]);
+
+export function buildLayersPanel(app, root) {
+  const render = () => {
+    clear(root);
+    root.appendChild(sceneCard(app, render));
+    for (const layer of app.layers) root.appendChild(layerCard(app, layer, render));
+    for (const raster of app.manifest.rasters || []) root.appendChild(rasterCard(app, raster));
+  };
+  app.on((what) => { if (what === 'results' || what === 'weather') render(); });
+  render();
+}
+
+function sceneCard(app, rerender) {
+  const m = app.manifest;
+  const w = m.extent.maxX - m.extent.minX;
+  const d = m.extent.maxY - m.extent.minY;
+  const t = app.terrainStats();
+  const body = h('div', {},
+    stats([
+      ['CRS', m.crs.authid],
+      ['Area', `${(w / 1000).toFixed(2)} × ${(d / 1000).toFixed(2)} km`],
+      ['Centre', `${app.site.lat.toFixed(4)}°, ${app.site.lon.toFixed(4)}°`],
+      ['Elevation', m.terrain ? `${t.min.toFixed(0)} – ${t.max.toFixed(0)} m` : 'flat (no DEM)'],
+      ['Grid', `${m.grid.cols} × ${m.grid.rows}, ${m.grid.cell.toFixed(1)} m`]
+    ]),
+    row('Time zone (UTC +h)', number(app.site.utcOffset, { step: 0.5, onChange: (v) => { app.site.utcOffset = v; app.updateSun(); } }),
+      'Clock time used for the sun. An EPW file sets it automatically.'));
+  // Weather.
+  const wbox = h('div', { class: 'weather' });
+  const fileInput = h('input', { type: 'file', accept: '.epw', hidden: true, onchange: async () => {
+    const file = fileInput.files?.[0];
+    if (!file) return;
+    try {
+      app.setWeather(parseEpw(await file.text()), file.name);
+      toast(`Weather loaded: ${file.name}`);
+    } catch (e) {
+      toast(e.message, 'error');
+    }
+  } });
+  if (app.weather?.dryBulb) {
+    const loc = app.weather.location;
+    const rose = windRose(app.weather);
+    wbox.appendChild(stats([
+      ['Weather', `${loc.city || app.weatherSource} (${loc.lat.toFixed(2)}, ${loc.lon.toFixed(2)})`],
+      ['Prevailing wind', `from ${rose.prevailingDirection}°, ${rose.prevailingSpeed.toFixed(1)} m/s`],
+      ['Calm hours', `${(rose.calm * 100).toFixed(0)} %`]
+    ]));
+    const monthly = h('canvas', { class: 'chart' });
+    const roseCanvas = h('canvas', { class: 'chart' });
+    wbox.appendChild(h('div', { class: 'chart-title', text: 'Monthly global radiation (bars) and mean temperature (line)' }));
+    wbox.appendChild(monthly);
+    wbox.appendChild(h('div', { class: 'chart-title', text: 'Wind rose (frequency by direction and speed)' }));
+    wbox.appendChild(roseCanvas);
+    requestAnimationFrame(() => { drawMonthly(monthly, monthlySummary(app.weather)); drawWindRose(roseCanvas, rose); });
+  } else {
+    wbox.appendChild(h('p', { class: 'muted', text: 'No weather file: radiation uses a clear-sky estimate, wind and comfort use the values you enter. Pick an EPW in QGIS or load one here.' }));
+  }
+  wbox.appendChild(h('div', { class: 'btn-row' }, button('Load EPW file…', () => fileInput.click()), fileInput));
+  body.appendChild(wbox);
+  void rerender;
+  return card('Scene', body, { open: true, badge: `${app.layers.length} layers` });
+}
+
+function layerCard(app, layer, rerender) {
+  const rule = app.rules.get(layer);
+  const body = h('div', {});
+  const fields = layer.fieldNames();
+  const numeric = fields.filter((f) => f.type === 'number').map((f) => [f.name, f.result ? `${f.name} (result)` : f.name]);
+  const all = fields.map((f) => [f.name, f.name]);
+  const c = rule.color;
+  const colorRows = h('div', {});
+  const refresh = () => { app.recolor(layer); drawColorRows(); };
+  const drawColorRows = () => {
+    clear(colorRows);
+    if (c.mode === 'single') {
+      colorRows.appendChild(row('Colour', h('input', { type: 'color', value: c.color, oninput: (e) => { c.color = e.target.value; app.recolor(layer); } })));
+    } else if (c.mode === 'graduated') {
+      if (!c.field || !numeric.some(([n]) => n === c.field)) c.field = numeric[0]?.[0] || '';
+      colorRows.appendChild(row('Field', select(numeric, c.field, (v) => { c.field = v; refresh(); })));
+      colorRows.appendChild(row('Method', select([['jenks', 'Natural breaks'], ['quantile', 'Quantile'], ['equal', 'Equal interval']], c.method, (v) => { c.method = v; refresh(); })));
+      colorRows.appendChild(row('Classes', select([3, 4, 5, 6, 7, 8, 9], c.classes, (v) => { c.classes = Number(v); refresh(); })));
+      colorRows.appendChild(row('Ramp', select(RAMP_OPTIONS, c.ramp, (v) => { c.ramp = v; refresh(); })));
+    } else if (c.mode === 'categorized') {
+      if (!c.field) c.field = all[0]?.[0] || '';
+      colorRows.appendChild(row('Field', select(all, c.field, (v) => { c.field = v; refresh(); })));
+    }
+    // Filter.
+    if (numeric.length && c.mode !== 'source') {
+      const f = c.filter;
+      if (!f.field) f.field = c.field && numeric.some(([n]) => n === c.field) ? c.field : numeric[0][0];
+      const [lo, hi] = fieldRange(layer, f.field);
+      if (!f.on) { f.min = lo; f.max = hi; }
+      const minIn = number(round(f.min), { onChange: (v) => { f.min = v; app.recolor(layer); } });
+      const maxIn = number(round(f.max), { onChange: (v) => { f.max = v; app.recolor(layer); } });
+      colorRows.appendChild(h('div', { class: 'filter' },
+        toggle(f.on, (on) => { f.on = on; app.recolor(layer); }, 'Highlight only'),
+        select(numeric, f.field, (v) => { f.field = v; f.on = false; drawColorRows(); app.recolor(layer); }),
+        h('span', { class: 'range' }, minIn, h('span', { text: '–' }), maxIn),
+        h('span', { class: 'muted small', text: `range ${round(lo)} – ${round(hi)}` })));
+    }
+  };
+  if (!(layer.entry.role === 'platforms' || layer.entry.role === 'sections' || layer.entry.role === 'roads')) {
+    body.appendChild(row('Colour by', select([['source', 'QGIS style'], ['single', 'Single colour'], ['graduated', 'Graduated (numbers)'], ['categorized', 'Categories']],
+      c.mode, (v) => { c.mode = v; refresh(); })));
+    body.appendChild(colorRows);
+    drawColorRows();
+  }
+  if (layer instanceof ExtrudedLayer || layer instanceof PointLayer) {
+    const hr = rule.height;
+    const hRows = h('div', {});
+    const drawH = () => {
+      clear(hRows);
+      if (hr.mode === 'field') {
+        if (!hr.field) hr.field = numeric[0]?.[0] || '';
+        hRows.appendChild(row('Field', select(numeric, hr.field, (v) => { hr.field = v; applyHeightRule(layer, hr); })));
+        hRows.appendChild(row('× factor', number(hr.factor, { step: 0.1, onChange: (v) => { hr.factor = v; applyHeightRule(layer, hr); } }),
+          'e.g. 3.2 to turn floors into metres, or a scale for a 3D bar chart'));
+      } else if (hr.mode === 'uniform') {
+        hRows.appendChild(row('Height (m)', number(hr.value, { step: 0.5, onChange: (v) => { hr.value = v; applyHeightRule(layer, hr); } })));
+      }
+    };
+    body.appendChild(row('Height', select([['source', 'From QGIS expression'], ['field', 'Field × factor'], ['uniform', 'Uniform']], hr.mode,
+      (v) => { hr.mode = v; drawH(); applyHeightRule(layer, hr); app.analyst?.cache.clear(); })));
+    body.appendChild(hRows);
+    drawH();
+  }
+  body.appendChild(h('div', { class: 'btn-row' }, button('Zoom to', () => {
+    const box = new THREE.Box3().setFromObject(layer.group);
+    if (layer instanceof SurfaceLayer || box.isEmpty()) return;
+    app.viewer.frame(box);
+  })));
+  const vis = toggle(layer.visible, (on) => { layer.setVisible(on); app.analyst?.cache.clear(); });
+  vis.addEventListener('click', (e) => e.stopPropagation());
+  const el = card(layer.entry.name, body, { badge: `${ROLE_NAMES[layer.entry.role] || layer.entry.role} · ${layer.count.toLocaleString('en-US')}`,
+    subtitle: layer.entry.scenario && layer.entry.scenario !== 'both' ? `Scenario ${layer.entry.scenario}` : '' });
+  el.querySelector('summary').prepend(vis);
+  void rerender;
+  return el;
+}
+
+function rasterCard(app, raster) {
+  const state = { on: false, ramp: 'rdylbu-r', opacity: 0.7 };
+  let values = null;
+  const apply = async () => {
+    if (!state.on) { app.terrain.setDrape(null); return; }
+    if (!values) values = new Float32Array(await (await fetch(app.base + raster.file, { cache: 'no-store' })).arrayBuffer());
+    app.terrain.setDrape({ values, min: raster.min, max: raster.max, ramp: state.ramp, opacity: state.opacity });
+  };
+  const body = h('div', {},
+    stats([['Range', `${raster.min.toFixed(2)} – ${raster.max.toFixed(2)}`], ['Building field', raster.field]]),
+    row('Drape on ground', toggle(state.on, (on) => { state.on = on; apply(); })),
+    row('Ramp', select(RAMP_OPTIONS, state.ramp, (v) => { state.ramp = v; apply(); })),
+    row('Opacity', number(state.opacity, { min: 0.1, max: 1, step: 0.1, onChange: (v) => { state.opacity = v; apply(); } })),
+    h('p', { class: 'muted small', text: `Each building carries the raster's mean over its footprint as "${raster.field}" — colour buildings by it in their layer card.` }));
+  return card(`Climate raster: ${raster.name}`, body);
+}
+
+function round(v) {
+  return Math.abs(v) >= 100 ? Math.round(v) : Math.round(v * 100) / 100;
+}