Function mount

web/rusense/app/views/sensing.js:26–257

(root)

  icon: icons.sensing,

  async mount(root) {
    // Hold vitals through brief confidence dips / dropped frames; a steady tick
    // (below) clears them to "—" after holdMs so a stalled stream can't freeze.
    const hrHold = makeVitalHold({ holdMs: 30000, decimals: 0 });
    const brHold = makeVitalHold({ holdMs: 30000, decimals: 1 });
    // Presence flickers 0↔1 at ~46 Hz; smooth it (duty-cycle hysteresis) from a
    // full-rate listener below. smPresent is the smoothed state the rest reads.
    const presence = makePresenceHold();
    let smPresent = false, lastMotion = '', presSig = null;

    root.appendChild(html`
      <section class="space-y-5">
        <div class="card card-pad space-y-3">
          <div class="flex items-center justify-between">
            <h2 class="card-title">Signal field</h2>
            <span id="sf-status" class="badge-mut">no data</span>
          </div>
          <canvas id="sf-canvas" class="w-full rounded-lg bg-ink-0 aspect-[2/1]" aria-label="Signal field heatmap"></canvas>
          <p class="text-xs text-ink-muted">CSI energy map across the sensing grid. Brighter = stronger perturbation.</p>
        </div>

        <div class="card card-pad space-y-3">
          <div class="flex items-center justify-between gap-2">
            <h2 class="card-title">Perimeter geofence <span class="text-xs text-ink-muted font-normal">prototype</span></h2>
            <span id="gf-verdict" class="badge-mut shrink-0" style="min-width:7.5rem;justify-content:center">—</span>
          </div>
          <canvas id="gf-canvas" class="w-full rounded-lg bg-ink-0 aspect-[3/2]" aria-label="Room geofence plan"></canvas>
          <div class="grid grid-cols-3 gap-3 text-sm">
            <div class="stat"><span class="stat-label">Disturbed corners</span><span class="stat-value" id="gf-hot">—</span></div>
            <div class="stat"><span class="stat-label">Disturbance</span><span class="stat-value" id="gf-total">—</span></div>
            <div class="stat"><span class="stat-label">Inside score</span><span class="stat-value" id="gf-score">—</span></div>
          </div>
          <p class="text-xs text-ink-muted truncate" id="gf-reason" title="">—</p>
          <p class="text-xs text-ink-muted" id="gf-note">
            Motion is confined to the polygon of mapped node corners (Settings → node X/Y).
            A disturbance that lights up only one corner — a hallway walk-by — is rejected as outside.
            Coarse zone-level filter, not a hard RF wall.
          </p>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
          <div class="card card-pad space-y-3">
            <h2 class="card-title">Classification</h2>
            <dl class="space-y-2 text-sm" id="cls-list">
              ${[['Presence', 'cls-presence'], ['Motion level', 'cls-motion'], ['Confidence', 'cls-conf'], ['Posture', 'cls-posture'], ['Signal quality', 'cls-quality']]
                .map(([l, id]) => `<div class="flex justify-between border-b border-ink-3 pb-2 last:border-0"><dt class="text-ink-muted">${l}</dt><dd id="${id}" class="font-mono">—</dd></div>`).join('')}
            </dl>
          </div>

          <div class="card card-pad space-y-3">
            <h2 class="card-title">Vital signs</h2>
            <div class="grid grid-cols-2 gap-3">
              <div class="stat"><span class="stat-label">Breathing</span><span class="stat-value" id="vs-br">—</span><span class="text-xs text-ink-muted" id="vs-br-c">confidence —</span></div>
              <div class="stat"><span class="stat-label">Heart rate</span><span class="stat-value" id="vs-hr">—</span><span class="text-xs text-ink-muted" id="vs-hr-c">confidence —</span></div>
            </div>
            <div class="text-xs text-ink-muted" id="vs-buf">buffer —</div>
          </div>
        </div>