{bar.label}

{led && (

)}

{bar.val}

); } function Scale({ ticks }) { return (

{ticks.map((t) => (

{t.t}

))}

); } function Chart({ c, style }) { return (

{c.cur} {c.unit}

{c.yl.map((l) => (

{l.t}

))} {style === 'tech' && (

{c.cur}

)}

); } /* ---------------------------------------------------------------- component */ function PA100Panel({ interactive = true, live = true, showBoot = true, page: pageProp = 0, sub: subProp = 0, fit = 'width', maxScale = 0, meterStyle = 'led', chartStyle = 'area', navStyle = 'dots', condition = 'ok', device, seed = 4, loadFonts = true, className, style: styleProp, }) { useIBMPlex(loadFonts); useKeyframes(); const [host, k] = useFitScale(fit, maxScale); const dev = useMemo(() => ({ ...DEVICE, ...(device || {}) }), [device]); const [page, setPage] = useState(pageProp); const [sub, setSub] = useState(subProp); const [drag, setDrag] = useState({ dx: 0, dy: 0, anim: true }); const [meters, setMeters] = useState(() => { const lv = initLevels(seed); return { lv, pk: lv.slice(), hold: lv.map(() => 0) }; }); const [hist, setHist] = useState(() => initHist(seed)); const [up, setUp] = useState(51845); const [params, setParams] = useState(PARAMS); const [netType, setNetType] = useState('STATIC'); const [edit, setEdit] = useState(-1); const [boot, setBoot] = useState(showBoot); const [bootOut, setBootOut] = useState(false); const [cond, setCond] = useState(condition); const [tog, setTog] = useState({ usb: false, lan: true }); useEffect(() => { if (!interactive) setPage(pageProp); }, [pageProp, interactive]); useEffect(() => { if (!interactive) setSub(subProp); }, [subProp, interactive]); useEffect(() => { setCond(condition); }, [condition]); /* boot */ const bootTimers = useRef([]); const startBoot = useCallback(() => { bootTimers.current.forEach(clearTimeout); bootTimers.current = []; setBoot(true); setBootOut(false); setPage(0); setSub(0); bootTimers.current.push(setTimeout(() => setBootOut(true), 4550)); bootTimers.current.push(setTimeout(() => setBoot(false), 5000)); }, []); useEffect(() => { if (!showBoot) return undefined; startBoot(); return () => bootTimers.current.forEach(clearTimeout); }, [showBoot, startBoot]); /* telemetry */ useEffect(() => { if (!live) return undefined; const t1 = setInterval(() => { setMeters((s) => { const now = Date.now(), spike = now % 6500 < 420; const lv = s.lv.map((v, i) => { const tgt = i === 4 && spike ? -0.2 - 0.6 * rnd(now / 200) : -4 - 26 * rnd(now / 900 + i * 3.7); return v + (tgt - v) * (tgt > v ? 0.7 : 0.12); }); const pk = s.pk.map((p, i) => (lv[i] >= p ? lv[i] : s.hold[i] > 0 ? p : p - 0.45)); const hold = s.hold.map((h, i) => (lv[i] >= s.pk[i] ? 500 : Math.max(0, h - 90))); return { lv, pk, hold }; }); }, 90); const t2 = setInterval(() => { setUp((u) => u + 1); setHist((hs) => hs.map((a, si) => { const cfg = SERIES[si], last = a[a.length - 1]; const nv = last + (cfg.nom - last) * 0.08 + cfg.amp * (Math.random() - 0.5) * 0.6; return a.slice(1).concat([Math.max(cfg.lo, Math.min(cfg.hi, nv))]); })); }, 500); return () => { clearInterval(t1); clearInterval(t2); }; }, [live]); /* gestures */ const subCount = (p) => (p === 0 ? 2 : p === 1 ? 3 : p === 2 ? 2 : 2); const g = useRef(null); const onDown = (e) => { if (!interactive || edit >= 0 || boot) return; g.current = { x: e.clientX, y: e.clientY, ax: 0, k: k || 1, moved: false, id: e.pointerId, el: e.currentTarget }; }; const onMove = (e) => { const s = g.current; if (!s) return; const dx = (e.clientX - s.x) / s.k, dy = (e.clientY - s.y) / s.k; if (!s.moved && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) { s.moved = true; // capture only once it is a drag, so a stationary press stays a tap if (s.el.setPointerCapture) { try { s.el.setPointerCapture(s.id); } catch (_) { /* noop */ } } } if (!s.moved) return; if (!s.ax) s.ax = Math.abs(dy) > Math.abs(dx) ? 'y' : 'x'; if (s.ax === 'y') setDrag({ dx: 0, dy: Math.max(-120, Math.min(120, dy)), anim: false }); else setDrag({ dy: 0, dx: Math.max(-160, Math.min(160, dx)), anim: false }); }; const onUp = () => { const s = g.current; if (!s) return; g.current = null; let wrapped = false, np = page, ns = sub; if (s.ax === 'y' && Math.abs(drag.dy) > 26) { const t = page + (drag.dy < 0 ? 1 : -1); wrapped = t < 0 || t > 3; np = (t + 4) % 4; ns = 0; } if (s.ax === 'x' && Math.abs(drag.dx) > 30) { const cnt = subCount(np), t = sub + (drag.dx < 0 ? 1 : -1); wrapped = wrapped || t < 0 || t > cnt - 1; ns = (t + cnt) % cnt; } setPage(np); setSub(ns); setDrag({ dx: 0, dy: 0, anim: !wrapped }); if (wrapped) setTimeout(() => setDrag({ dx: 0, dy: 0, anim: true }), 30); }; const bump = (dir) => setParams((ps) => ps.map((p, i) => { if (i !== edit) return p; if (p.en) return { ...p, ei: (p.ei + dir + p.en.length) % p.en.length }; return { ...p, v: Math.max(p.min, Math.min(p.max, +(p.v + dir * p.st).toFixed(2))) }; })); const hold = useRef({}); const stopHold = useCallback(() => { const h = hold.current; clearTimeout(h.t); clearInterval(h.i); clearTimeout(h.a); hold.current = {}; }, []); const startHold = useCallback((dir) => { bump(dir); stopHold(); if (params[edit] && params[edit].en) return; hold.current.t = setTimeout(() => { hold.current.i = setInterval(() => bump(dir), 260); hold.current.a = setTimeout(() => { clearInterval(hold.current.i); hold.current.i = setInterval(() => bump(dir), 70); }, 1600); }, 420); }, [edit]); useEffect(() => () => stopHold(), [stopHold]); /* ------------------------------------------------------------ derived */ const muted = params[3].ei === 1; const railIcons = [ { key: cond, ...ICONS[cond], lit: true, tap: () => setCond(CONDITIONS[(CONDITIONS.indexOf(cond) + 1) % 4]) }, { key: 'mute', ...ICONS.mute, lit: muted, tap: null }, { key: 'usb', ...ICONS.usb, lit: !!tog.usb, tap: () => setTog((t) => ({ ...t, usb: !t.usb })) }, { key: 'lan', ...ICONS.lan, lit: !!tog.lan, tap: () => setTog((t) => ({ ...t, lan: !t.lan })) }, ]; const scaleTicks = ['0', '-20', '-40', '-60'].map((t) => ({ t, y: Math.round(frac(Number(t)) * BH) })); const mkBar = (i, label, wide) => { const db = meters.lv[i], f = frac(db), pf = frac(meters.pk[i]); const led = meterStyle === 'led'; return { label, wide, h: led ? snap(f) : Math.max(1, Math.round(f * BH)), peak: led ? Math.max(SEG, snap(pf)) : Math.max(1, Math.round((meterStyle === 'cap' ? f : pf) * BH)), fill: meterStyle === 'cap' ? 0.18 : 1, val: db <= -59.5 ? '-\u221E' : db.toFixed(1), vc: db >= -5 ? C.red : db >= -20 ? C.orange : '#9FAAB2', }; }; const inBars = [mkBar(0, 'L', true), mkBar(1, 'R', true)]; const outBars = [2, 3, 4, 5, 6, 7].map((n, i) => mkBar(n, String(i + 1), false)); const charts = SERIES.map((cfg, si) => { const a = hist[si]; const y = (v) => PY + (1 - (v - cfg.lo) / (cfg.hi - cfg.lo)) * PHh; let line = ''; for (let i = 0; i < N; i++) { line += (i ? 'L' : 'M') + (PX + (i / (N - 1)) * PW).toFixed(1) + ' ' + y(a[i]).toFixed(1); } let grid = ''; cfg.ticks.forEach((t) => { grid += `M${PX} ${y(t).toFixed(1)}H${PX + PW}`; }); for (let c2 = 0; c2 <= 6; c2++) { const x = PX + (c2 * PW) / 6; grid += `M${x} ${PY}V${PY + PHh}`; } const mn = Math.min(...a), mx = Math.max(...a); const lastY = y(a[N - 1]); const fy = Math.max(PY, Math.min(PY + PHh - 19, lastY - 9.5)); return { cc: cfg.c, unit: cfg.unit, cur: a[N - 1].toFixed(cfg.dec), line, area: `${line}L${PX + PW} ${PY + PHh}L${PX} ${PY + PHh}Z`, grid, thresh: `M${PX} ${y(cfg.th).toFixed(1)}H${PX + PW}`, band: `M${PX} ${y(mx).toFixed(1)}H${PX + PW}V${y(mn).toFixed(1)}H${PX}Z`, yl: cfg.ticks.map((t) => ({ t: String(t), y: (y(t) - 6).toFixed(1) + 'px' })), lw: chartStyle === 'area' ? 2.4 : chartStyle === 'tech' ? 1.2 : 1.6, dotX: (PX + PW).toFixed(1), dotY: lastY.toFixed(1), flagX: (PX + PW - 58).toFixed(1), flagY: fy.toFixed(1), flagTy: (fy + 3).toFixed(1), flagXpx: (PX + PW - 58).toFixed(1) + 'px', flagTypx: (fy + 3).toFixed(1) + 'px', }; }); const tNow = hist[1][N - 1], vNow = hist[0][N - 1]; const statCards = [ { label: 'TEMP', v: tNow.toFixed(0), u: '\u00B0C', c: tNow > 75 ? C.hot : C.ink, pct: Math.round(((tNow - 20) / 80) * 100), lo: '20', hi: '100' }, { label: 'SUPPLY', v: vNow.toFixed(1), u: 'V', c: vNow < 47 ? C.amber : C.ink, pct: Math.round(((vNow - 40) / 20) * 100), lo: '40', hi: '60' }, ]; const uptime = `${pad2(Math.floor(up / 3600))}:${pad2(Math.floor(up / 60) % 60)}:${pad2(up % 60)}`; const infoRows = [ { k: 'MODEL', v: dev.model }, { k: 'SERIAL', v: dev.serial }, { k: 'FIRMWARE', v: dev.firmware }, { k: 'UPTIME', v: uptime }, { k: 'MAC', v: dev.mac }, ]; const ep = edit >= 0 ? params[edit] : null; const netDim = netType === 'DHCP'; const dimC = '#5A6570'; const netRows = [ { k: 'MODE', v: netType, nc: C.ink3, vc: C.cyan, cur: interactive ? 'pointer' : 'default', onTap: () => interactive && setNetType((t) => (t === 'STATIC' ? 'DHCP' : 'STATIC')) }, { k: 'IP ADDR', v: '192.168.001.148', nc: netDim ? dimC : C.ink3, vc: netDim ? dimC : C.ink2, cur: 'default', onTap: null }, { k: 'NETMASK', v: '255.255.255.000', nc: netDim ? dimC : C.ink3, vc: netDim ? dimC : C.ink2, cur: 'default', onTap: null }, { k: 'GATEWAY', v: '192.168.001.001', nc: netDim ? dimC : C.ink3, vc: netDim ? dimC : C.ink2, cur: 'default', onTap: null }, ]; const navNames = ['CHANNELS', 'DIAG', 'STATUS', 'SETUP']; const slide = (n, on) => ({ transform: `translateX(${(-n * VIEW + (on ? drag.dx : 0)).toFixed(1)}px)`, transition: drag.anim ? 'transform .24s cubic-bezier(.3,.9,.3,1)' : 'none', }); const strip = { display: 'flex', ...slide(0, false) }; /* --------------------------------------------------------------- render */ return (

{/* scaled box is absolutely positioned so its 480x272 layout size cannot override the host's aspect ratio at small widths */}

{/* status rail */}

interactive && startBoot()} style={{ width: 40, height: 40, flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: interactive ? 'pointer' : 'default' }} >

{railIcons.map((ic) => (

interactive && ic.tap && ic.tap()} style={{ width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: interactive && ic.tap ? 'pointer' : 'default' }} >

))}

{/* page stack */}

{/* ---- channels ---- */}

({ n, on: page === 0 && sub === i, c: C.cyan }))} />

{inBars.map((b) => )}

{outBars.map((b) => )}

{/* ---- diagnostics ---- */}

({ n: s.tab, on: page === 1 && sub === i, c: s.c }))} />

{charts.map((c2, i) => )}

{/* ---- status ---- */}

({ n, on: page === 2 && sub === i, c: C.cyan }))} />

IP ADDRESS

{dev.ip}

{statCards.map((s) => (

{s.label}

{s.v} {s.u}

{s.lo}{s.hi}

))}

{infoRows.map((r) => (

{r.k} {r.v}

))}

{/* ---- setup ---- */}

({ n, on: page === 3 && sub === i, c: C.cyan }))} />

{params.map((p, i) => (

interactive && setEdit(i)} style={{ height: 36, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px 0 11px', background: i === edit ? C.sel : C.plate, boxSizing: 'border-box', cursor: interactive ? 'pointer' : 'default', }} > {p.n} {fmtParam(p)} {p.en ? '' : p.u}

))}

{ep && (

setEdit(-1)} style={{ flex: 1, padding: '16px 0 14px 14px', display: 'flex', flexDirection: 'column', justifyContent: 'center', cursor: 'pointer' }} >

{ep.n}

{fmtParam(ep)} {ep.en ? '' : ep.u}

{ep.en ? ep.en.join(' / ') : `${ep.min} \u2026 ${ep.max} ${ep.u} / ${ep.st}`}

TAP TO CONFIRM

{[1, -1].map((dir) => (

{ e.stopPropagation(); startHold(dir); }} onPointerUp={stopHold} onPointerCancel={stopHold} onPointerLeave={stopHold} style={{ height: 74, background: C.btn, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', touchAction: 'none' }} >

))}

)}

{netRows.map((r) => (

{r.k} {r.v}

))}

{/* page indicator */} {navStyle === 'dots' && (

{navNames.map((n, i) => (

))}

)} {navStyle === 'rail' && (

{navNames.map((n, i) => (

{n}

))}

)} {navStyle === 'ticks' && (

{navNames.map((n, i) => (

))}

)} {/* boot */} {boot && (

{ if (!interactive) return; bootTimers.current.forEach(clearTimeout); setBoot(false); setBootOut(false); }} style={{ position: 'absolute', inset: 0, zIndex: 20, background: C.screen, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 26, opacity: bootOut ? 0 : 1, transition: 'opacity .45s linear', cursor: interactive ? 'pointer' : 'default', }} >

{dev.model}

)}

); } window.PA100Panel = PA100Panel; })();