feat(ops): one-command OTA deploy + mobile-first operator UI
scripts/ota-deploy.sh
Python 3 helper (the earlier bash version tripped over macOS bash 3.2's
missing associative arrays). One invocation with no arguments:
1. discovers nodes in the local /24 via ARP + /ota/status:8032 probe;
2. POSTs the firmware blob to every node in parallel;
3. waits for reboot, polls /ota/status until running_partition flips,
and fails-loud if any node stays on the old partition (typical
symptom of a panic on first boot from the new slot).
Supports `--build` (idf.py build first), `--no-verify`, explicit IP
list, and OTA_PSK=<token> for the ADR-050 Bearer auth path.
Measured cycle: ~25 s end-to-end for both room01 + room02.
static/mobile.html
Mobile-first sibling of static/raw.html. The desktop page is unreadable
on a 360-420 px screen — bars chart fights the narrow viewport, 11-12 px
font, controls overlap the badge. The mobile page:
- sticky global badge (30 px) + connection pill + reset (44 px tap);
- per-node card with 22 px node badge, 18 px stat tiles, 90 px trace;
- drops the bars chart (useless under 600 px wide);
- viewport-fit=cover, theme-color, apple-mobile-web-app meta tags;
- high-contrast palette tuned for outdoor light;
- reuses the /ws/sensing contract verbatim — anything that lights up
raw.html lights this up too.
main.rs ServeDir route
Adds `.nest_service("/static", ServeDir::new(.../static))` so
raw.html / mobile.html / calibrate.html / spectrum.html are served on
the main 8080 port. Previously they needed a separate
`python -m http.server :8091`, which the operator had to remember to
start by hand on every deploy. Now there's exactly one URL per device.
Reachable from a phone on the LAN:
http://<mac>:8080/static/mobile.html
http://<mac>:8080/static/raw.html
Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
arsen
parent
03b123bfc3
commit
72047a4185
|
|
@ -0,0 +1,275 @@
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
"""
|
||||||
|
scripts/ota-deploy.sh — push esp32-csi-node.bin to one or more sensor nodes
|
||||||
|
over WiFi. Talks to the on-device /ota endpoint (ADR-045, port 8032,
|
||||||
|
handler in firmware/esp32-csi-node/main/ota_update.c).
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
scripts/ota-deploy.sh # auto-discover via ARP, deploy to all
|
||||||
|
scripts/ota-deploy.sh 192.168.0.100 # one node
|
||||||
|
scripts/ota-deploy.sh 192.168.0.100 192.168.0.101
|
||||||
|
scripts/ota-deploy.sh --build # idf.py build first, then deploy
|
||||||
|
scripts/ota-deploy.sh --no-verify ... # skip post-reboot /ota/status check
|
||||||
|
|
||||||
|
Auth: set env OTA_PSK=<token> to send "Authorization: Bearer <token>"
|
||||||
|
(matches the on-device check in ota_update.c::ota_check_auth).
|
||||||
|
|
||||||
|
Exit codes:
|
||||||
|
0 — all targeted nodes confirmed running_partition flipped
|
||||||
|
1 — one or more nodes failed verification or were unreachable
|
||||||
|
2 — build or argument error
|
||||||
|
"""
|
||||||
|
|
||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
import argparse
|
||||||
|
import concurrent.futures as cf
|
||||||
|
import json
|
||||||
|
import os
|
||||||
|
import re
|
||||||
|
import shutil
|
||||||
|
import subprocess
|
||||||
|
import sys
|
||||||
|
import time
|
||||||
|
import urllib.error
|
||||||
|
import urllib.request
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Iterable
|
||||||
|
|
||||||
|
REPO_ROOT = Path(__file__).resolve().parent.parent
|
||||||
|
FW_DIR = REPO_ROOT / "firmware" / "esp32-csi-node"
|
||||||
|
BIN_PATH = FW_DIR / "build" / "esp32-csi-node.bin"
|
||||||
|
PORT = 8032
|
||||||
|
|
||||||
|
UPLOAD_TIMEOUT_S = 120
|
||||||
|
REBOOT_WAIT_S = 10
|
||||||
|
VERIFY_RETRIES = 6
|
||||||
|
VERIFY_DELAY_S = 3
|
||||||
|
|
||||||
|
|
||||||
|
# ---- ANSI logging helpers ----------------------------------------------------
|
||||||
|
def _c(code: str, msg: str) -> str:
|
||||||
|
if not sys.stdout.isatty():
|
||||||
|
return msg
|
||||||
|
return f"\033[{code}m{msg}\033[0m"
|
||||||
|
|
||||||
|
def log(msg: str) -> None: print(_c("36", "[ota-deploy] ") + msg, flush=True)
|
||||||
|
def warn(msg: str) -> None: print(_c("33", "[ota-deploy] ") + msg, file=sys.stderr, flush=True)
|
||||||
|
def err(msg: str) -> None: print(_c("31", "[ota-deploy] ") + msg, file=sys.stderr, flush=True)
|
||||||
|
|
||||||
|
|
||||||
|
# ---- helpers -----------------------------------------------------------------
|
||||||
|
def http_get(url: str, timeout: float = 4.0) -> str | None:
|
||||||
|
try:
|
||||||
|
with urllib.request.urlopen(url, timeout=timeout) as r:
|
||||||
|
return r.read().decode("utf-8", errors="replace")
|
||||||
|
except (urllib.error.URLError, urllib.error.HTTPError, TimeoutError, OSError):
|
||||||
|
return None
|
||||||
|
|
||||||
|
|
||||||
|
def get_ota_status(ip: str) -> dict | None:
|
||||||
|
body = http_get(f"http://{ip}:{PORT}/ota/status")
|
||||||
|
if not body:
|
||||||
|
return None
|
||||||
|
try:
|
||||||
|
return json.loads(body)
|
||||||
|
except json.JSONDecodeError:
|
||||||
|
return None
|
||||||
|
|
||||||
|
|
||||||
|
def local_subnet_prefix() -> str | None:
|
||||||
|
"""Return e.g. '192.168.0' from en0 (macOS) or first non-loopback IP."""
|
||||||
|
try:
|
||||||
|
out = subprocess.check_output(
|
||||||
|
["ipconfig", "getifaddr", "en0"], stderr=subprocess.DEVNULL, text=True
|
||||||
|
).strip()
|
||||||
|
if out:
|
||||||
|
return out.rsplit(".", 1)[0]
|
||||||
|
except (subprocess.CalledProcessError, FileNotFoundError):
|
||||||
|
pass
|
||||||
|
# Linux fallback
|
||||||
|
try:
|
||||||
|
out = subprocess.check_output(["hostname", "-I"], text=True).strip()
|
||||||
|
if out:
|
||||||
|
return out.split()[0].rsplit(".", 1)[0]
|
||||||
|
except (subprocess.CalledProcessError, FileNotFoundError):
|
||||||
|
pass
|
||||||
|
return None
|
||||||
|
|
||||||
|
|
||||||
|
def discover_nodes() -> list[str]:
|
||||||
|
"""ARP-prefilter + parallel /ota/status probe to find live sensor nodes."""
|
||||||
|
prefix = local_subnet_prefix()
|
||||||
|
if not prefix:
|
||||||
|
err("could not determine local /24 — pass node IPs explicitly")
|
||||||
|
return []
|
||||||
|
log(f"scanning {prefix}.0/24 for /ota/status responders ...")
|
||||||
|
|
||||||
|
candidates: list[str] = []
|
||||||
|
try:
|
||||||
|
arp_out = subprocess.check_output(
|
||||||
|
["arp", "-a", "-n"], text=True, stderr=subprocess.DEVNULL
|
||||||
|
)
|
||||||
|
for line in arp_out.splitlines():
|
||||||
|
m = re.search(rf"\(({re.escape(prefix)}\.\d+)\)", line)
|
||||||
|
if m and "incomplete" not in line:
|
||||||
|
ip = m.group(1)
|
||||||
|
if not ip.endswith(".1"): # skip gateway
|
||||||
|
candidates.append(ip)
|
||||||
|
except (subprocess.CalledProcessError, FileNotFoundError):
|
||||||
|
pass
|
||||||
|
if not candidates:
|
||||||
|
warn(f"no ARP hits — falling back to {prefix}.100-110 ping sweep")
|
||||||
|
candidates = [f"{prefix}.{i}" for i in range(100, 111)]
|
||||||
|
candidates = sorted(set(candidates))
|
||||||
|
|
||||||
|
found: list[str] = []
|
||||||
|
with cf.ThreadPoolExecutor(max_workers=32) as pool:
|
||||||
|
futs = {pool.submit(get_ota_status, ip): ip for ip in candidates}
|
||||||
|
for fut in cf.as_completed(futs):
|
||||||
|
ip = futs[fut]
|
||||||
|
try:
|
||||||
|
if fut.result():
|
||||||
|
found.append(ip)
|
||||||
|
except Exception:
|
||||||
|
pass
|
||||||
|
return sorted(found, key=lambda x: tuple(int(o) for o in x.split(".")))
|
||||||
|
|
||||||
|
|
||||||
|
def upload_one(ip: str, payload: bytes, psk: str | None) -> tuple[bool, float, str]:
|
||||||
|
"""POST the firmware to one node. Returns (success, elapsed_s, body_snippet)."""
|
||||||
|
req = urllib.request.Request(
|
||||||
|
f"http://{ip}:{PORT}/ota",
|
||||||
|
data=payload,
|
||||||
|
headers={"Content-Type": "application/octet-stream"},
|
||||||
|
method="POST",
|
||||||
|
)
|
||||||
|
if psk:
|
||||||
|
req.add_header("Authorization", f"Bearer {psk}")
|
||||||
|
t0 = time.monotonic()
|
||||||
|
try:
|
||||||
|
with urllib.request.urlopen(req, timeout=UPLOAD_TIMEOUT_S) as r:
|
||||||
|
body = r.read().decode("utf-8", errors="replace")[:200]
|
||||||
|
return True, time.monotonic() - t0, body
|
||||||
|
except (urllib.error.HTTPError, urllib.error.URLError,
|
||||||
|
TimeoutError, ConnectionResetError, OSError) as e:
|
||||||
|
# ConnectionReset is *expected* when the chip restarts before flushing
|
||||||
|
# the response. We treat it as a soft pass and verify via /ota/status.
|
||||||
|
return (isinstance(e, ConnectionResetError),
|
||||||
|
time.monotonic() - t0,
|
||||||
|
f"{type(e).__name__}: {e}")
|
||||||
|
|
||||||
|
|
||||||
|
def build_firmware() -> int:
|
||||||
|
log("building firmware via idf.py ...")
|
||||||
|
if "IDF_PATH" not in os.environ:
|
||||||
|
export = Path.home() / "esp" / "esp-idf-v5.2" / "export.sh"
|
||||||
|
if not export.is_file():
|
||||||
|
err("IDF_PATH not set and ~/esp/esp-idf-v5.2/export.sh not found")
|
||||||
|
return 2
|
||||||
|
# source the env in a child shell
|
||||||
|
rc = subprocess.call(
|
||||||
|
["bash", "-lc", f". '{export}' >/dev/null 2>&1 && cd '{FW_DIR}' && idf.py build"]
|
||||||
|
)
|
||||||
|
else:
|
||||||
|
rc = subprocess.call(["idf.py", "build"], cwd=str(FW_DIR))
|
||||||
|
if rc != 0:
|
||||||
|
err("build failed")
|
||||||
|
return 2
|
||||||
|
return 0
|
||||||
|
|
||||||
|
|
||||||
|
# ---- main --------------------------------------------------------------------
|
||||||
|
def main(argv: list[str]) -> int:
|
||||||
|
ap = argparse.ArgumentParser(
|
||||||
|
prog="ota-deploy.sh",
|
||||||
|
description="Push esp32-csi-node.bin to one or more sensor nodes over WiFi.",
|
||||||
|
)
|
||||||
|
ap.add_argument("targets", nargs="*",
|
||||||
|
help="node IPs; auto-discover if omitted")
|
||||||
|
ap.add_argument("--build", action="store_true",
|
||||||
|
help="idf.py build before deploying")
|
||||||
|
ap.add_argument("--no-verify", action="store_true",
|
||||||
|
help="skip post-reboot /ota/status confirmation")
|
||||||
|
args = ap.parse_args(argv)
|
||||||
|
|
||||||
|
if args.build:
|
||||||
|
rc = build_firmware()
|
||||||
|
if rc != 0:
|
||||||
|
return rc
|
||||||
|
|
||||||
|
if not BIN_PATH.is_file():
|
||||||
|
err(f"firmware binary not found: {BIN_PATH} — pass --build first")
|
||||||
|
return 2
|
||||||
|
payload = BIN_PATH.read_bytes()
|
||||||
|
log(f"firmware: {BIN_PATH} ({len(payload)} bytes)")
|
||||||
|
|
||||||
|
targets = args.targets or discover_nodes()
|
||||||
|
if not targets:
|
||||||
|
err("no nodes given and none discovered")
|
||||||
|
return 1
|
||||||
|
log(f"targets: {' '.join(targets)}")
|
||||||
|
|
||||||
|
# snapshot before
|
||||||
|
before: dict[str, str] = {}
|
||||||
|
for ip in targets:
|
||||||
|
st = get_ota_status(ip)
|
||||||
|
if not st:
|
||||||
|
warn(f"{ip}: not reachable before upload")
|
||||||
|
before[ip] = "UNREACHABLE"
|
||||||
|
continue
|
||||||
|
before[ip] = st.get("running_partition", "UNKNOWN")
|
||||||
|
log(f"{ip} before: running_partition={before[ip]} time={st.get('time')}")
|
||||||
|
|
||||||
|
psk = os.environ.get("OTA_PSK") or None
|
||||||
|
if psk:
|
||||||
|
log("OTA_PSK set — sending Bearer token")
|
||||||
|
|
||||||
|
# upload in parallel
|
||||||
|
log("uploading in parallel ...")
|
||||||
|
results: dict[str, tuple[bool, float, str]] = {}
|
||||||
|
with cf.ThreadPoolExecutor(max_workers=max(2, len(targets))) as pool:
|
||||||
|
futs = {pool.submit(upload_one, ip, payload, psk): ip for ip in targets}
|
||||||
|
for fut in cf.as_completed(futs):
|
||||||
|
ip = futs[fut]
|
||||||
|
ok, dt, body = fut.result()
|
||||||
|
results[ip] = (ok, dt, body)
|
||||||
|
tag = _c("32", "ok") if ok else _c("31", "ERR")
|
||||||
|
log(f"{ip} upload {tag} in {dt:.1f}s body={body[:120]}")
|
||||||
|
|
||||||
|
if args.no_verify:
|
||||||
|
log("--no-verify — done")
|
||||||
|
return 0 if all(v[0] for v in results.values()) else 1
|
||||||
|
|
||||||
|
# verify
|
||||||
|
log(f"waiting {REBOOT_WAIT_S}s for reboot ...")
|
||||||
|
time.sleep(REBOOT_WAIT_S)
|
||||||
|
fail = False
|
||||||
|
for ip in targets:
|
||||||
|
new_st: dict | None = None
|
||||||
|
for _ in range(VERIFY_RETRIES):
|
||||||
|
new_st = get_ota_status(ip)
|
||||||
|
if new_st:
|
||||||
|
break
|
||||||
|
time.sleep(VERIFY_DELAY_S)
|
||||||
|
if not new_st:
|
||||||
|
err(f"{ip}: not reachable after reboot — DEAD or panic loop")
|
||||||
|
fail = True
|
||||||
|
continue
|
||||||
|
new_part = new_st.get("running_partition", "?")
|
||||||
|
new_time = new_st.get("time", "?")
|
||||||
|
if new_part == before.get(ip):
|
||||||
|
err(f"{ip}: running_partition still {new_part} — OTA did NOT take "
|
||||||
|
"(likely panic on first boot from new slot)")
|
||||||
|
fail = True
|
||||||
|
else:
|
||||||
|
log(f"{ip}: {before[ip]} → {_c('32', new_part)} (time={new_time}) ✓")
|
||||||
|
return 1 if fail else 0
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
try:
|
||||||
|
sys.exit(main(sys.argv[1:]))
|
||||||
|
except KeyboardInterrupt:
|
||||||
|
err("interrupted")
|
||||||
|
sys.exit(130)
|
||||||
|
|
@ -5570,6 +5570,18 @@ async fn main() {
|
||||||
.route("/api/v1/calibration/status", get(calibration_status))
|
.route("/api/v1/calibration/status", get(calibration_status))
|
||||||
// Static UI files
|
// Static UI files
|
||||||
.nest_service("/ui", ServeDir::new(&ui_path))
|
.nest_service("/ui", ServeDir::new(&ui_path))
|
||||||
|
// ADR-100/ADR-101 operator pages (raw.html, mobile.html, calibrate.html,
|
||||||
|
// spectrum.html). Lives in `crates/wifi-densepose-sensing-server/static/`
|
||||||
|
// — same crate as the server so it ships with cargo install. Previously
|
||||||
|
// these were exposed via a separate `python -m http.server :8091`; now
|
||||||
|
// they're served on the main HTTP port so the operator only has to
|
||||||
|
// remember one URL per device (http://<mac>:8080/static/mobile.html).
|
||||||
|
.nest_service(
|
||||||
|
"/static",
|
||||||
|
ServeDir::new(
|
||||||
|
std::path::Path::new(env!("CARGO_MANIFEST_DIR")).join("static"),
|
||||||
|
),
|
||||||
|
)
|
||||||
.layer(SetResponseHeaderLayer::overriding(
|
.layer(SetResponseHeaderLayer::overriding(
|
||||||
axum::http::header::CACHE_CONTROL,
|
axum::http::header::CACHE_CONTROL,
|
||||||
HeaderValue::from_static("no-cache, no-store, must-revalidate"),
|
HeaderValue::from_static("no-cache, no-store, must-revalidate"),
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,311 @@
|
||||||
|
<!doctype html>
|
||||||
|
<!--
|
||||||
|
static/mobile.html — phone-first RuView UI.
|
||||||
|
|
||||||
|
Optimised for a 360-420 px wide screen held one-handed:
|
||||||
|
- sticky global status header (badge stays visible while scrolling)
|
||||||
|
- big readable per-node cards (28-34 px badges, 16 px stats)
|
||||||
|
- one trace per card (broadband mean amplitude over last 30 s) — bars
|
||||||
|
omitted because they're unreadable below 600 px wide
|
||||||
|
- touch targets >= 44 px
|
||||||
|
- no controls (reset is one-tap in the header)
|
||||||
|
- high-contrast palette tuned for outdoor light
|
||||||
|
|
||||||
|
Talks to the same /ws/sensing WebSocket as raw.html, so any improvement
|
||||||
|
to that contract lights up here automatically.
|
||||||
|
-->
|
||||||
|
<html lang="en"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no"/>
|
||||||
|
<meta name="theme-color" content="#0a0e13"/>
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||||
|
<title>RuView — Mobile</title>
|
||||||
|
<style>
|
||||||
|
:root { color-scheme: dark; --bg:#0a0e13; --card:#161b22; --line:#30363d;
|
||||||
|
--fg:#e6edf3; --mute:#7d8590; --accent:#7cb6ff;
|
||||||
|
--absent:#7d8590; --still:#58a6ff; --moving:#56d364; --active:#f85149; }
|
||||||
|
|
||||||
|
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
|
||||||
|
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg);
|
||||||
|
font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
|
||||||
|
-webkit-font-smoothing:antialiased; overscroll-behavior:none; }
|
||||||
|
body { padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
||||||
|
env(safe-area-inset-bottom) env(safe-area-inset-left); }
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky; top: 0; z-index: 10; background: var(--bg);
|
||||||
|
padding: 10px 14px 8px; border-bottom: 1px solid var(--line);
|
||||||
|
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
.titleRow { display:flex; align-items:center; justify-content:space-between; gap:8px; }
|
||||||
|
.title { font-size:13px; font-weight:600; color:var(--mute); letter-spacing:.04em; text-transform:uppercase; }
|
||||||
|
.conn { font-size:11px; font-family:ui-monospace,Menlo,Consolas,monospace;
|
||||||
|
padding:3px 8px; border-radius:999px; background:#1c2128; color:var(--mute); }
|
||||||
|
.conn.ok { background:#0e2a1a; color:#7ce38b; }
|
||||||
|
.conn.dis { background:#3a1418; color:#ff6a6a; }
|
||||||
|
|
||||||
|
.globalRow { display:flex; align-items:center; gap:10px; margin-top:8px; }
|
||||||
|
#globalBadge {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 14px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
letter-spacing: .02em;
|
||||||
|
text-transform: lowercase;
|
||||||
|
background: #1c2128; color: var(--absent);
|
||||||
|
transition: background .15s ease;
|
||||||
|
}
|
||||||
|
#globalBadge.absent { background:#1c2128; color:var(--absent); }
|
||||||
|
#globalBadge.present_still { background:#0c2748; color:#9cccff; }
|
||||||
|
#globalBadge.present_moving{ background:#1d3a0d; color:#a0e783; }
|
||||||
|
#globalBadge.active { background:#430b0b; color:#ffa1a1; }
|
||||||
|
|
||||||
|
button.reset {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-width: 60px;
|
||||||
|
min-height: 44px;
|
||||||
|
background: #21262d; color: var(--fg);
|
||||||
|
border: 1px solid var(--line); border-radius: 10px;
|
||||||
|
font-size: 13px; font-weight: 500;
|
||||||
|
}
|
||||||
|
button.reset:active { background:#30363d; }
|
||||||
|
|
||||||
|
main { padding: 12px 14px 24px; display:flex; flex-direction:column; gap:12px; }
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
.cardHead {
|
||||||
|
display:flex; align-items:baseline; justify-content:space-between; gap:8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.cardHead .nid { font-size:13px; font-weight:600; color:var(--accent);
|
||||||
|
font-family:ui-monospace,Menlo,Consolas,monospace; }
|
||||||
|
.cardHead .stale { font-size:10px; color:#ff6a6a; }
|
||||||
|
|
||||||
|
.nodeBadge {
|
||||||
|
display:block; width:100%; text-align:center;
|
||||||
|
font-size: 22px; font-weight: 700;
|
||||||
|
padding: 10px 8px; border-radius: 10px; margin-bottom: 10px;
|
||||||
|
background: #1c2128; color: var(--absent);
|
||||||
|
}
|
||||||
|
.nodeBadge.absent { background:#1c2128; color:var(--absent); }
|
||||||
|
.nodeBadge.present_still { background:#0c2748; color:#9cccff; }
|
||||||
|
.nodeBadge.present_moving{ background:#1d3a0d; color:#a0e783; }
|
||||||
|
.nodeBadge.active { background:#430b0b; color:#ffa1a1; }
|
||||||
|
|
||||||
|
.stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-bottom: 10px; }
|
||||||
|
.stat { background:#0d1117; border-radius:8px; padding:8px 10px; text-align:center; }
|
||||||
|
.stat .v { font-size:18px; font-weight:600; color:var(--fg);
|
||||||
|
font-family:ui-monospace,Menlo,Consolas,monospace; }
|
||||||
|
.stat .l { font-size:10px; color:var(--mute); margin-top:2px;
|
||||||
|
font-family:ui-monospace,Menlo,Consolas,monospace;
|
||||||
|
text-transform: uppercase; letter-spacing:.05em; }
|
||||||
|
|
||||||
|
canvas.trace { display:block; width:100%; height:90px; background:#0d1117; border-radius:8px; }
|
||||||
|
.traceCaption { font-size:10px; color:var(--mute); margin-top:4px;
|
||||||
|
font-family:ui-monospace,Menlo,Consolas,monospace; }
|
||||||
|
|
||||||
|
.empty { color:var(--mute); text-align:center; padding:40px 16px; font-size:13px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="titleRow">
|
||||||
|
<span class="title">RuView · mobile</span>
|
||||||
|
<span id="conn" class="conn dis">disconnected</span>
|
||||||
|
</div>
|
||||||
|
<div class="globalRow">
|
||||||
|
<div id="globalBadge" class="absent">absent</div>
|
||||||
|
<button class="reset" onclick="resetState()" aria-label="Reset state">reset</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="nodes">
|
||||||
|
<div class="empty" id="emptyMsg">waiting for first frame…</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ── Constants ──────────────────────────────────────────────────────
|
||||||
|
const TRACE_SEC = 30;
|
||||||
|
const TRACE_MAX_PTS = 600;
|
||||||
|
const STALE_MS = 3500; // ⇒ "stale" tag on the card
|
||||||
|
|
||||||
|
// ── State ──────────────────────────────────────────────────────────
|
||||||
|
const state = new Map(); // node_id → { meanAmpHist, lastFrameWall, fps }
|
||||||
|
|
||||||
|
function resetState() {
|
||||||
|
state.clear();
|
||||||
|
document.getElementById('nodes').innerHTML =
|
||||||
|
'<div class="empty" id="emptyMsg">waiting for first frame…</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Per-node card factory ─────────────────────────────────────────
|
||||||
|
function ensureCard(nodeId) {
|
||||||
|
if (state.has(nodeId)) return state.get(nodeId);
|
||||||
|
const empty = document.getElementById('emptyMsg');
|
||||||
|
if (empty) empty.remove();
|
||||||
|
const ent = {
|
||||||
|
meanAmpHist: [], // { t, v }
|
||||||
|
rssiHist: [],
|
||||||
|
lastFrameWall: performance.now(),
|
||||||
|
fps: 0,
|
||||||
|
lastTs: 0,
|
||||||
|
};
|
||||||
|
state.set(nodeId, ent);
|
||||||
|
const card = document.createElement('section');
|
||||||
|
card.className = 'card'; card.id = 'card-' + nodeId;
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="cardHead">
|
||||||
|
<span class="nid">node ${nodeId}</span>
|
||||||
|
<span class="stale" id="n${nodeId}-stale"></span>
|
||||||
|
</div>
|
||||||
|
<div class="nodeBadge absent" id="n${nodeId}-badge">absent</div>
|
||||||
|
<div class="stats">
|
||||||
|
<div class="stat"><div class="v" id="n${nodeId}-rssi">--</div><div class="l">rssi dBm</div></div>
|
||||||
|
<div class="stat"><div class="v" id="n${nodeId}-cv">0%</div><div class="l">conf</div></div>
|
||||||
|
<div class="stat"><div class="v" id="n${nodeId}-fps">0</div><div class="l">fps</div></div>
|
||||||
|
</div>
|
||||||
|
<canvas class="trace" id="n${nodeId}-trace"></canvas>
|
||||||
|
<p class="traceCaption">
|
||||||
|
<span style="color:#3fb950">●</span> broadband amplitude
|
||||||
|
<span style="color:#7d8590">●</span> rssi <span style="float:right">last ${TRACE_SEC}s</span>
|
||||||
|
</p>`;
|
||||||
|
document.getElementById('nodes').appendChild(card);
|
||||||
|
return ent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Drawing ────────────────────────────────────────────────────────
|
||||||
|
function drawTrace(canvas, rssi, amp) {
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
const w = canvas.clientWidth, h = canvas.clientHeight;
|
||||||
|
if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
|
||||||
|
canvas.width = w * dpr; canvas.height = h * dpr;
|
||||||
|
}
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
ctx.fillStyle = '#0d1117'; ctx.fillRect(0, 0, w, h);
|
||||||
|
|
||||||
|
const now = performance.now() / 1000;
|
||||||
|
const t0 = now - TRACE_SEC;
|
||||||
|
|
||||||
|
function plot(arr, color, fixedMin, fixedMax) {
|
||||||
|
const v = arr.filter(p => p.t >= t0);
|
||||||
|
if (v.length < 2) return null;
|
||||||
|
let min, max;
|
||||||
|
if (fixedMin != null) { min = fixedMin; max = fixedMax; }
|
||||||
|
else { const vs = v.map(p => p.v); min = Math.min(...vs); max = Math.max(...vs); }
|
||||||
|
const span = (max - min) || 1;
|
||||||
|
ctx.strokeStyle = color; ctx.lineWidth = 1.8; ctx.beginPath();
|
||||||
|
for (let i = 0; i < v.length; i++) {
|
||||||
|
const p = v[i];
|
||||||
|
const x = ((p.t - t0) / TRACE_SEC) * w;
|
||||||
|
const y = h - ((p.v - min) / span) * (h - 12) - 6;
|
||||||
|
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
return { min, max };
|
||||||
|
}
|
||||||
|
|
||||||
|
const ampR = plot(amp, '#3fb950', 0, null);
|
||||||
|
const rssiR = plot(rssi, '#7d8590', null, null);
|
||||||
|
|
||||||
|
// Tiny corner labels
|
||||||
|
ctx.font = '10px ui-monospace,Menlo,Consolas,monospace';
|
||||||
|
if (ampR) { ctx.fillStyle = '#3fb950';
|
||||||
|
ctx.fillText('A ' + ampR.max.toFixed(0), 4, 11); }
|
||||||
|
if (rssiR) { ctx.fillStyle = '#7d8590';
|
||||||
|
ctx.fillText('rssi ' + rssiR.min.toFixed(0) + '…' + rssiR.max.toFixed(0), 4, 23); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Frame ingestion ───────────────────────────────────────────────
|
||||||
|
function handleSensingUpdate(d) {
|
||||||
|
const nodes = d.nodes || [];
|
||||||
|
const now = performance.now() / 1000;
|
||||||
|
for (const n of nodes) {
|
||||||
|
const id = n.node_id;
|
||||||
|
const ent = ensureCard(id);
|
||||||
|
const amps = n.amplitude || [];
|
||||||
|
const meanA = amps.length ? amps.reduce((s, x) => s + x, 0) / amps.length : 0;
|
||||||
|
|
||||||
|
ent.rssiHist.push({ t: now, v: n.rssi_dbm });
|
||||||
|
if (meanA > 0) ent.meanAmpHist.push({ t: now, v: meanA });
|
||||||
|
const cutoff = now - TRACE_SEC;
|
||||||
|
while (ent.rssiHist.length && ent.rssiHist[0].t < cutoff) ent.rssiHist.shift();
|
||||||
|
while (ent.meanAmpHist.length && ent.meanAmpHist[0].t < cutoff) ent.meanAmpHist.shift();
|
||||||
|
if (ent.rssiHist.length > TRACE_MAX_PTS) ent.rssiHist.splice(0, ent.rssiHist.length - TRACE_MAX_PTS);
|
||||||
|
if (ent.meanAmpHist.length > TRACE_MAX_PTS) ent.meanAmpHist.splice(0, ent.meanAmpHist.length - TRACE_MAX_PTS);
|
||||||
|
|
||||||
|
const dt = now - (ent.lastFrameWall / 1000);
|
||||||
|
if (dt > 0 && dt < 5) {
|
||||||
|
ent.fps = ent.fps ? ent.fps * 0.85 + (1/dt) * 0.15 : 1/dt;
|
||||||
|
}
|
||||||
|
ent.lastFrameWall = performance.now();
|
||||||
|
ent.lastTs = (d.timestamp || Date.now() / 1000);
|
||||||
|
|
||||||
|
document.getElementById(`n${id}-rssi`).textContent = n.rssi_dbm.toFixed(0);
|
||||||
|
document.getElementById(`n${id}-fps`).textContent = ent.fps.toFixed(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Per-node classification + global classification — same shape as raw.html.
|
||||||
|
const nf = d.node_features || [];
|
||||||
|
for (const f of nf) {
|
||||||
|
const id = f.node_id;
|
||||||
|
const cls = f.classification || {};
|
||||||
|
const lvl = cls.motion_level || 'absent';
|
||||||
|
const badge = document.getElementById(`n${id}-badge`);
|
||||||
|
if (badge) { badge.textContent = lvl; badge.className = 'nodeBadge ' + lvl; }
|
||||||
|
const cv = document.getElementById(`n${id}-cv`);
|
||||||
|
if (cv) cv.textContent = Math.round((cls.confidence || 0) * 100) + '%';
|
||||||
|
}
|
||||||
|
|
||||||
|
const gcl = d.classification || {};
|
||||||
|
const glvl = gcl.motion_level || 'absent';
|
||||||
|
const gb = document.getElementById('globalBadge');
|
||||||
|
if (gb) { gb.textContent = glvl; gb.className = glvl; }
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTick() {
|
||||||
|
const now = performance.now();
|
||||||
|
for (const [id, ent] of state) {
|
||||||
|
const trace = document.getElementById('n' + id + '-trace');
|
||||||
|
if (trace) drawTrace(trace, ent.rssiHist, ent.meanAmpHist);
|
||||||
|
// Stale marker
|
||||||
|
const ageMs = now - ent.lastFrameWall;
|
||||||
|
const tag = document.getElementById('n' + id + '-stale');
|
||||||
|
if (tag) tag.textContent = ageMs > STALE_MS
|
||||||
|
? `stale ${(ageMs/1000).toFixed(1)}s`
|
||||||
|
: '';
|
||||||
|
}
|
||||||
|
requestAnimationFrame(renderTick);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(renderTick);
|
||||||
|
|
||||||
|
// ── WS ────────────────────────────────────────────────────────────
|
||||||
|
function connect() {
|
||||||
|
const ws = new WebSocket('ws://' + location.hostname + ':8765/ws/sensing');
|
||||||
|
ws.onopen = () => {
|
||||||
|
const c = document.getElementById('conn');
|
||||||
|
c.textContent = 'connected'; c.className = 'conn ok';
|
||||||
|
};
|
||||||
|
ws.onclose = () => {
|
||||||
|
const c = document.getElementById('conn');
|
||||||
|
c.textContent = 'reconnecting'; c.className = 'conn dis';
|
||||||
|
setTimeout(connect, 1500);
|
||||||
|
};
|
||||||
|
ws.onerror = () => ws.close();
|
||||||
|
ws.onmessage = e => {
|
||||||
|
try {
|
||||||
|
const d = JSON.parse(e.data);
|
||||||
|
if (d.type === 'sensing_update') handleSensingUpdate(d);
|
||||||
|
} catch (_) {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
connect();
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
Loading…
Reference in New Issue