// HMI section — adaptier-hmi spotlight with hero AHU schematic + 4 thumbs const { useState, useEffect, useRef } = React; // ---------- Animated value hook ---------- function useTick(base, jitter, decimals = 1, intervalMs = 1400) { const [v, setV] = useState(base); useEffect(() => { const t = setInterval(() => { setV(base + (Math.random() - 0.5) * 2 * jitter); }, intervalMs); return () => clearInterval(t); }, [base, jitter, intervalMs]); return v.toFixed(decimals); } // ---------- Tag chip (e.g. AHU-01.SAT 21.4 °C) ---------- function Tag({ path, value, unit, type = 'real', size = 'sm' }) { const color = type === 'bool' ? (value ? '#4ec9b0' : '#e879a0') : '#4ec9b0'; return (
{path} {value}{unit && {unit}}
); } // ---------- AHU SCHEMATIC ---------- function AHUSchematic() { const sat = useTick(21.4, 0.4); const rat = useTick(22.8, 0.3); const oat = useTick(8.6, 0.5); const supply = useTick(1450, 30, 0, 1700); // RPM const damperOA = useTick(42, 6, 0, 2000); return ( {/* Outdoor air → */} OUTDOOR AIR {/* Damper OA */} OA-DMP {damperOA}% {/* Filter */} {[8,16,24,32,40].map((x,i) => ( ))} FILTER OK {/* Heating coil */} HEAT-COIL 62°C {/* Cooling coil */} COOL-COIL 12°C {/* Supply Fan */} SUPPLY-FAN {supply} RPM {/* SAT sensor */} SAT {sat}°C {/* Supply duct → zones */} → ZONES (8) {/* Return air ← */} RETURN AIR ← FROM ZONES {/* RAT sensor */} RAT {rat}°C {/* Return Fan */} RET-FAN 1280 {/* Damper RA + EA exhaust split */} EXHAUST RA-DMP 58% {/* OAT label */} OAT {oat}°C {/* Bottom KPI strip */} SETPOINT 21.5°C MODE OCCUPIED · ECO ALARMS ● 0 ACTIVE CYCLE 12ms · 100Hz ); } // ---------- BUILDING OVERVIEW THUMB ---------- function BuildingThumb() { const zones = [ { name: 'Z1', t: 21.4, sp: 21.5, ok: true }, { name: 'Z2', t: 22.1, sp: 21.5, ok: true }, { name: 'Z3', t: 23.6, sp: 21.5, ok: false }, { name: 'Z4', t: 21.0, sp: 21.5, ok: true }, { name: 'Z5', t: 20.8, sp: 21.5, ok: true }, { name: 'Z6', t: 22.4, sp: 21.5, ok: true }, ]; return (
{zones.map(z => (
{z.name}
{z.t.toFixed(1)}°
sp {z.sp}
))}
); } // ---------- ENERGY KPI THUMB ---------- function EnergyThumb() { const bars = [42, 58, 71, 65, 80, 92, 78, 64, 55, 70, 88, 95, 82, 70]; const max = Math.max(...bars); return (
kWh · Today
1,284kWh
↓ 8.4%
vs avg
{bars.map((v, i) => (
))}
00:0012:00now
); } // ---------- SCHEDULES THUMB ---------- function SchedulesThumb() { const days = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']; // 24 hour blocks per day; 1 = occupied, 0 = unoccupied, 2 = setback const grid = [ [0,0,0,0,0,0,2,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0], [0,0,0,0,0,0,2,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0], [0,0,0,0,0,0,2,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0], [0,0,0,0,0,0,2,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0], [0,0,0,0,0,0,2,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], ]; const colors = ['#1d2127', '#4ec9b0', '#f5a623']; return (
{days.map((d, i) => (
{d}
{grid[i].map((v, j) => (
))}
))}
Occupied Setback
); } // ---------- ALARMS THUMB ---------- function AlarmsThumb() { const [pulse, setPulse] = useState(0); useEffect(() => { const t = setInterval(() => setPulse(p => p + 1), 1200); return () => clearInterval(t); }, []); const alarms = [ { sev: 'high', code: 'AHU-03 / FILTER_DP', t: '21:34:08', ack: false }, { sev: 'med', code: 'Z3 / TEMP_HIGH', t: '21:30:12', ack: false }, { sev: 'low', code: 'CHL-1 / RUN_HOURS', t: '20:55:41', ack: true }, { sev: 'low', code: 'BMS / NTP_DRIFT', t: '20:12:03', ack: true }, ]; const sevColor = { high: '#f85149', med: '#f5a623', low: '#8892a4' }; return (
{alarms.map((a, i) => (
{a.t} {a.code} {a.ack ? ACK : NEW}
))}
); } // ---------- HMI SECTION ---------- function HMISection() { const [activeTab, setActiveTab] = useState('overview'); const tabs = [ { id: 'overview', label: 'AHU-01 · Overview' }, { id: 'heating', label: 'Heating Loop' }, { id: 'cooling', label: 'Cooling Loop' }, { id: 'trends', label: 'Trends' }, ]; return (
adaptier-hmi · operator console

The control room, in the browser.

Process schematics, dashboards, schedules, alarms, and historian — all driven by the same NATS streams the PLC publishes to. Operators see live values; engineers tweak setpoints; supervisors get alerts. One UI, one source of truth.

{/* Hero dashboard */}
adaptier-hmi · plant.ahu-01 · live 247 tags ● OCCUPIED
{tabs.map(t => (
setActiveTab(t.id)} > {t.label}
))}
21:34:12 ● LIVE
{/* Thumbnail row */}
building · zones 6/8
energy · KPI 24h
schedules · plant 7d
alarms · live ● 2 NEW
); } window.HMISection = HMISection;